Merge branch 'master' into feature/node-quick-options

src/components/UI/Button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         success:
           "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600",
         outline:
-          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
+          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-100",
         subtle:
           "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
         ghost:

src/components/UI/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
   ({ className, ...props }, ref) => {
     return (
       <footer
-        className={`flex flex- justify-center p-2 ${className}`}
+        className={`flex mt-auto justify-center p-2 ${className}`}
         style={{
           backgroundColor: "var(--backgroundPrimary)",
           color: "var(--textPrimary)",

src/components/UI/MultiSelect.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@app/core/utils/cn";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+interface MultiSelectProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const MultiSelect = ({ children, className = "" }: MultiSelectProps) => {
+  return (
+    <div className={cn("flex flex-wrap gap-2", className)}>{children}</div>
+  );
+};
+
+interface MultiSelectItemProps {
+  name: string;
+  value: string;
+  checked: boolean;
+  onCheckedChange: (name: string, value: boolean) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const MultiSelectItem = ({
+  name,
+  value,
+  checked,
+  onCheckedChange,
+  children,
+  className = "",
+}: MultiSelectItemProps) => {
+  return (
+    <CheckboxPrimitive.Root
+      name={name}
+      id={value}
+      checked={checked}
+      onCheckedChange={(val) => onCheckedChange(name, !!val)}
+      className={cn(
+        `
+        inline-flex items-center rounded-md px-3 py-2 text-sm transition-colors
+        border border-slate-300 
+        hover:bg-slate-100 dark:hover:bg-slate-800
+        focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2
+        data-[state=checked]:bg-slate-100 dark:data-[state=checked]:bg-slate-700`,
+        className,
+      )}
+    >
+      <CheckboxPrimitive.Indicator className="mr-2">
+        <Check className="h-4 w-4 animate-in zoom-in duration-200" />
+      </CheckboxPrimitive.Indicator>
+      {children}
+    </CheckboxPrimitive.Root>
+  );
+};
+
+export { MultiSelect, MultiSelectItem };

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@components/UI/Button.tsx";
 import type { LucideIcon } from "lucide-react";
+import type { JSX } from "react";
 
 export interface SidebarButtonProps {
   label: string;
@@ -20,10 +21,10 @@ export const SidebarButton = ({
     onClick={onClick}
     variant={active ? "subtle" : "ghost"}
     size="sm"
-    className="w-full justify-start gap-2"
+    className="flex gap-2 w-full"
   >
     {Icon && <Icon size={16} />}
     {element && element}
-    {label}
+    <span className="flex flex-1 justify-start flex-shrink-0">{label}</span>
   </Button>
 );

src/components/UI/Toast.tsx

@@ -28,7 +28,7 @@ const toastVariants = cva(
     variants: {
       variant: {
         default:
-          "border bg-background text-foreground dark:bg-slate-700 dark:border-slate-600 dark:text-slate-50",
+          "border bg-backgroundPrimary text-foreground dark:bg-slate-700 dark:border-slate-600 dark:text-slate-50",
         destructive:
           "group destructive bg-red-600 text-white dark:border-red-900 dark:bg-red-900 dark:text-red-50",
       },

src/components/UI/Tooltip.tsx

@@ -9,6 +9,7 @@ const Tooltip = ({ ...props }) => <TooltipPrimitive.Root {...props} />;
 Tooltip.displayName = TooltipPrimitive.Tooltip.displayName;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipArrow = TooltipPrimitive.Arrow;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -26,4 +27,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+};