Merge branch 'staging' into feature/panel-presets

3 files changed, 76 insertions, 53 deletions

diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index bdd86d58..823d48a3 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -126,20 +126,24 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       dropdownMenuItemVariants({ variant }),
-      "pl-8 pr-2",
+      "pl-2 pr-8",
       className
     )}
     checked={checked}
+    onSelect={(e) => {
+      e.preventDefault();
+    }}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    {children}
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
-    {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ));
+
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index d4cd57a1..440191f2 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Eye, EyeOff } from "lucide-react";
+import { Eye, EyeOff, X } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
@@ -7,39 +7,93 @@ import { Button } from "./button";
 interface InputProps extends React.ComponentProps<"input"> {
   showPassword?: boolean;
   onShowPasswordChange?: (show: boolean) => void;
+  showClearIcon?: boolean;
+  onClear?: () => void;
+  containerClassName?: string;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
-    { className, type, showPassword, onShowPasswordChange, value, ...props },
+    {
+      className,
+      type,
+      containerClassName,
+      showPassword,
+      onShowPasswordChange,
+      showClearIcon,
+      onClear,
+      value,
+      onFocus,
+      onBlur,
+      ...props
+    },
     ref
   ) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+
     const isPassword = type === "password";
     const showPasswordToggle = isPassword && onShowPasswordChange;
+    const showClear =
+      showClearIcon &&
+      onClear &&
+      value &&
+      String(value).length > 0 &&
+      isFocused;
     const inputType = isPassword && showPassword ? "text" : type;
 
+    const hasIcons = showPasswordToggle || showClear;
+    const iconCount = Number(showPasswordToggle) + Number(showClear);
+    const paddingRight =
+      iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
+
     return (
-      <div className={showPassword ? "relative w-full" : ""}>
+      <div className={cn(hasIcons ? "relative w-full" : "", containerClassName)}>
         <input
           type={inputType}
           className={cn(
             "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
             "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
             "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            showPasswordToggle && "pr-10",
+            paddingRight,
             className
           )}
           ref={ref}
           value={value}
+          onFocus={(e) => {
+            setIsFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setIsFocused(false);
+            onBlur?.(e);
+          }}
           {...props}
         />
+        {showClear && (
+          <Button
+            type="button"
+            variant="text"
+            size="icon"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onClear?.();
+            }}
+            className="absolute right-0 top-0 h-full px-3 text-muted-foreground !opacity-100"
+            aria-label="Clear input"
+          >
+            <X className="!size-[0.85]" />
+          </Button>
+        )}
         {showPasswordToggle && (
           <Button
             type="button"
             variant="text"
             size="icon"
             onClick={() => onShowPasswordChange?.(!showPassword)}
-            className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
+            className={cn(
+              "absolute top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+              showClear ? "right-10" : "right-0"
+            )}
             aria-label={showPassword ? "Hide password" : "Show password"}
           >
             {showPassword ? (
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index d5aaf2ee..1fc227b0 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -1,53 +1,18 @@
-"use client";
-
 import * as React from "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-    type?: "auto" | "always" | "scroll" | "hover";
-    showHorizontalScrollbar?: boolean;
-  }
->(({ className, children, type, showHorizontalScrollbar, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    type={type}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    {showHorizontalScrollbar && <ScrollBar orientation="horizontal" />}
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
     ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-px",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-px",
-      className
-    )}
+    className={cn("overflow-auto scrollbar-thin", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    {children}
+  </div>
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollArea.displayName = "ScrollArea";
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea };