Merge branch 'staging'

7 files changed, 108 insertions, 12 deletions

diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 0e07ccb8..56a10f44 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -16,9 +16,9 @@ const buttonVariants = cva(
         "primary-gradient":
           "bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+          "bg-destructive/0 border border-destructive/25 text-destructive shadow-xs hover:bg-destructive hover:text-destructive-foreground",
         outline:
-          "border border-input bg-background shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-foreground/15 border border-input",
         text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index ad7e825b..42d0f80d 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-150 bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-250 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] p-6 z-150 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
+        "fixed left-[50%] top-[50%] p-6 z-250 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
         className
       )}
       onCloseAutoFocus={(e) => {
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index c238b33c..9f5c7887 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -218,7 +218,7 @@ function PlusButton({
     <Button
       size="icon"
       className={cn(
-        "absolute bottom-2 right-2 size-4 bg-background hover:bg-panel text-foreground",
+        "absolute bottom-2 right-2 size-5 bg-background hover:bg-panel text-foreground",
         className
       )}
       onClick={(e) => {
@@ -228,7 +228,7 @@ function PlusButton({
       }}
       title={tooltipText}
     >
-      <Plus className="size-3!" />
+      <Plus className="size-4!" />
     </Button>
   );
 
diff --git a/apps/web/src/components/ui/input-with-back.tsx b/apps/web/src/components/ui/input-with-back.tsx
index ea225c14..cae9f8c9 100644
--- a/apps/web/src/components/ui/input-with-back.tsx
+++ b/apps/web/src/components/ui/input-with-back.tsx
@@ -12,6 +12,7 @@ interface InputWithBackProps {
   placeholder?: string;

   value?: string;

   onChange?: (value: string) => void;

+  disableAnimation?: boolean;

 }

 

 export function InputWithBack({

@@ -20,12 +21,13 @@ export function InputWithBack({
   placeholder = "Search anything",

   value,

   onChange,

+  disableAnimation = false,

 }: InputWithBackProps) {

   const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);

   const [buttonOffset, setButtonOffset] = useState(-60);

 

   const smoothTransition = {

-    duration: 0.35,

+    duration: disableAnimation ? 0 : 0.35,

     ease: [0.25, 0.1, 0.25, 1] as const,

   };

 

diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 47782a7f..406ff8eb 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-[0_0_10px_rgba(0,0,0,0.15)] outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index 2c5522c1..f97bd438 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-200 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease data-[state=closed]:duration-250 data-[state=open]:duration-250 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed z-250 gap-4 bg-background p-6 shadow-lg transition ease data-[state=closed]:duration-250 data-[state=open]:duration-250 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       side: {
@@ -62,10 +62,14 @@ const SheetContent = React.forwardRef<
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
+      <SheetPrimitive.Close className="absolute cursor-pointer right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="size-5" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
       {children}
diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx
new file mode 100644
index 00000000..ca3b518c
--- /dev/null
+++ b/apps/web/src/components/ui/split-button.tsx
@@ -0,0 +1,90 @@
+import { Button, ButtonProps } from "@/components/ui/button";

+import { Separator } from "@/components/ui/separator";

+import { ReactNode, forwardRef } from "react";

+import { cn } from "@/lib/utils";

+

+interface SplitButtonProps {

+  children: ReactNode;

+  className?: string;

+}

+

+interface SplitButtonSideProps extends Omit<ButtonProps, "variant" | "size"> {

+  children: ReactNode;

+}

+

+const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(

+  ({ children, className, ...props }, ref) => {

+    return (

+      <div

+        ref={ref}

+        className={cn(

+          "inline-flex rounded-full h-7 border border-input bg-panel-accent overflow-hidden",

+          className

+        )}

+        {...props}

+      >

+        {children}

+      </div>

+    );

+  }

+);

+SplitButton.displayName = "SplitButton";

+

+const SplitButtonSide = forwardRef<

+  HTMLButtonElement,

+  SplitButtonSideProps & { paddingClass: string }

+>(({ children, className, paddingClass, onClick, ...props }, ref) => {

+  return (

+    <Button

+      ref={ref}

+      variant="text"

+      className={cn(

+        "h-full rounded-none bg-panel-accent !opacity-100 border-0 gap-0 font-normal transition-colors disabled:text-muted-foreground",

+        onClick

+          ? "hover:bg-foreground/10 hover:opacity-100 cursor-pointer"

+          : "cursor-default select-text",

+        paddingClass,

+        className

+      )}

+      onClick={onClick}

+      {...props}

+    >

+      {typeof children === "string" ? (

+        <span className="font-normal cursor-text">{children}</span>

+      ) : (

+        children

+      )}

+    </Button>

+  );

+});

+SplitButtonSide.displayName = "SplitButtonSide";

+

+const SplitButtonLeft = forwardRef<HTMLButtonElement, SplitButtonSideProps>(

+  ({ ...props }, ref) => {

+    return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />;

+  }

+);

+SplitButtonLeft.displayName = "SplitButtonLeft";

+

+const SplitButtonRight = forwardRef<HTMLButtonElement, SplitButtonSideProps>(

+  ({ ...props }, ref) => {

+    return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />;

+  }

+);

+SplitButtonRight.displayName = "SplitButtonRight";

+

+const SplitButtonSeparator = forwardRef<HTMLDivElement, { className?: string }>(

+  ({ className, ...props }, ref) => {

+    return (

+      <Separator

+        ref={ref}

+        orientation="vertical"

+        className={cn("h-full bg-foreground/15", className)}

+        {...props}

+      />

+    );

+  }

+);

+SplitButtonSeparator.displayName = "SplitButtonSeparator";

+

+export { SplitButton, SplitButtonLeft, SplitButtonRight, SplitButtonSeparator };