feat: add board group models and update related interfaces

frontend/src/components/ui/badge.tsx

@@ -11,23 +11,22 @@ const badgeVariants = cva(
         default: "bg-[color:var(--surface-muted)] text-strong",
         outline:
           "border border-[color:var(--border-strong)] text-[color:var(--text-muted)]",
-        accent: "bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]",
-        success:
-          "bg-[color:rgba(15,118,110,0.14)] text-[color:var(--success)]",
-        warning:
-          "bg-[color:rgba(180,83,9,0.15)] text-[color:var(--warning)]",
-        danger:
-          "bg-[color:rgba(180,35,24,0.15)] text-[color:var(--danger)]",
+        accent:
+          "bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]",
+        success: "bg-[color:rgba(15,118,110,0.14)] text-[color:var(--success)]",
+        warning: "bg-[color:rgba(180,83,9,0.15)] text-[color:var(--warning)]",
+        danger: "bg-[color:rgba(180,35,24,0.15)] text-[color:var(--danger)]",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {

frontend/src/components/ui/button.tsx

@@ -16,7 +16,8 @@ const buttonVariants = cva(
           "border border-[color:var(--border)] bg-[color:var(--surface)] text-strong hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]",
         outline:
           "border border-[color:var(--border-strong)] bg-transparent text-strong hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]",
-        ghost: "bg-transparent text-strong hover:bg-[color:var(--surface-strong)]",
+        ghost:
+          "bg-transparent text-strong hover:bg-[color:var(--surface-strong)]",
       },
       size: {
         sm: "h-9 px-4",
@@ -28,11 +29,12 @@ const buttonVariants = cva(
       variant: "primary",
       size: "md",
     },
-  }
+  },
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {}
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -42,7 +44,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  ),
 );
 Button.displayName = "Button";
 

frontend/src/components/ui/card.tsx

@@ -2,15 +2,16 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("rounded-2xl surface-card", className)}
-      {...props}
-    />
-  )
-);
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-2xl surface-card", className)}
+    {...props}
+  />
+));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<

frontend/src/components/ui/dialog.tsx

@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-slate-950/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
         ref={ref}
         className={cn(
           "w-full max-w-2xl max-h-[calc(100vh-2rem)] overscroll-contain overflow-y-auto rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6 shadow-lush focus:outline-none supports-[height:100dvh]:max-h-[calc(100dvh-2rem)] 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",
-          className
+          className,
         )}
         {...props}
       >

frontend/src/components/ui/dropdown-select.tsx

@@ -4,7 +4,11 @@ import * as React from "react";
 import { Check, ChevronDown } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Command,
   CommandEmpty,

frontend/src/components/ui/input.tsx

@@ -2,19 +2,20 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
-  ({ className, type, ...props }, ref) => (
-    <input
-      ref={ref}
-      type={type}
-      className={cn(
-        "flex h-11 w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
-        className
-      )}
-      {...props}
-    />
-  )
-);
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => (
+  <input
+    ref={ref}
+    type={type}
+    className={cn(
+      "flex h-11 w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
+      className,
+    )}
+    {...props}
+  />
+));
 Input.displayName = "Input";
 
 export { Input };

frontend/src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
     type="button"
     className={cn(
       "flex h-11 w-full cursor-pointer items-center justify-between rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] focus:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   >
@@ -37,7 +37,10 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn("flex cursor-pointer items-center justify-center py-1", className)}
+    className={cn(
+      "flex cursor-pointer items-center justify-center py-1",
+      className,
+    )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
@@ -51,7 +54,10 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn("flex cursor-pointer items-center justify-center py-1", className)}
+    className={cn(
+      "flex cursor-pointer items-center justify-center py-1",
+      className,
+    )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
@@ -97,7 +103,10 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold text-strong", className)}
+    className={cn(
+      "py-1.5 pl-8 pr-2 text-sm font-semibold text-strong",
+      className,
+    )}
     {...props}
   />
 ));

frontend/src/components/ui/tabs.tsx

@@ -15,7 +15,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center gap-2 rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] p-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -30,7 +30,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-full px-4 py-2 text-xs font-semibold text-muted transition data-[state=active]:bg-[color:var(--accent)] data-[state=active]:text-white",
-      className
+      className,
     )}
     {...props}
   />

frontend/src/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<
     ref={ref}
     className={cn(
       "min-h-[120px] w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 py-3 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
-      className
+      className,
     )}
     {...props}
   />

frontend/src/components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white shadow-lg",
-      className
+      className,
     )}
     {...props}
   />