refactor: refactor webui structure

apps/recorder/.env

@@ -1,8 +1,13 @@
-AUTH_TYPE = "oidc" # or oidc
+HOST="konobangu.com"
+DATABASE_URL = "postgres://konobangu:konobangu@localhost:5432/konobangu"
+STORAGE_DATA_DIR = "./data"
+AUTH_TYPE = "basic" # or oidc
 BASIC_USER = "konobangu"
 BASIC_PASSWORD = "konobangu"
-OIDC_ISSUER="https://auth.logto.io/oidc"
+# OIDC_ISSUER="https://auth.logto.io/oidc"
-OIDC_AUDIENCE = "https://konobangu.com/api"
+# OIDC_AUDIENCE = "https://konobangu.com/api"
-OIDC_CLIENT_ID = "client_id"
+# OIDC_CLIENT_ID = "client_id"
-OIDC_CLIENT_SECRET = "client_secret" # optional
+# OIDC_CLIENT_SECRET = "client_secret" # optional
-OIDC_EXTRA_SCOPES = "read:konobangu write:konobangu"
+# OIDC_EXTRA_SCOPES = "read:konobangu write:konobangu"
+# OIDC_EXTRA_CLAIM_KEY = ""
+# OIDC_EXTRA_CLAIM_VALUE = ""

apps/recorder/src/graphql/guard.rs

@@ -157,12 +157,7 @@ where
                             None => Ok(()),
                         }
                     }
-                    field => Err(AuthError::from_graphql_subscribe_id_guard(
+                    _ => Ok(()),
-                        async_graphql::Error::new("unsupport graphql field"),
-                        context,
-                        field,
-                        "",
-                    )),
                 };
                 match validation_result {
                     Ok(_) => GuardAction::Allow,

apps/webui/.env

@@ -1,6 +1,3 @@
-HOST="konobangu.com"
-DATABASE_URL = "postgres://konobangu:konobangu@localhost:5432/konobangu"
-STORAGE_DATA_DIR = "./data"
 AUTH_TYPE = "basic" # or oidc
 BASIC_USER = "konobangu"
 BASIC_PASSWORD = "konobangu"
@@ -9,5 +6,3 @@ BASIC_PASSWORD = "konobangu"
 # OIDC_CLIENT_ID = "client_id"
 # OIDC_CLIENT_SECRET = "client_secret" # optional
 # OIDC_EXTRA_SCOPES = "read:konobangu write:konobangu"
-# OIDC_EXTRA_CLAIM_KEY = ""
-# OIDC_EXTRA_CLAIM_VALUE = ""

apps/webui/components.json

@@ -11,10 +11,10 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/styles/utils",
+    "utils": "@/infra/styles/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
-    "hooks": "@/hooks"
+    "hooks": "@/infra/hooks"
   },
   "iconLibrary": "lucide"
 }

apps/webui/src/app/auth/config.ts

@@ -28,7 +28,7 @@ export function buildOidcConfig(): OpenIdConfiguration {
     responseType: 'code',
     silentRenew: true,
     useRefreshToken: true,
-    logLevel: LogLevel.Debug,
+    logLevel: LogLevel.None,
     autoUserInfo: !resource,
     renewUserInfoAfterTokenRenew: !resource,
     customParamsAuthRequest: {

apps/webui/src/app/auth/context.ts

@@ -1,8 +1,6 @@
-import { UnreachableError } from '@/errors/common';
+import { UnreachableError } from '@/infra/errors/common';
 import type { Injector, Provider } from '@outposts/injection-js';
 import type { AnyRouter } from '@tanstack/react-router';
-import { atomSignal } from 'jotai-signal';
-import type { Atom } from 'jotai/vanilla';
 import {
   CHECK_AUTH_RESULT_EVENT,
   type CheckAuthResultEventType,

apps/webui/src/app/auth/guard.ts

@@ -1,4 +1,4 @@
-import type { RouterContext } from '@/traits/router';
+import type { RouterContext } from '@/infra/routes/traits';
 import { runInInjectionContext } from '@outposts/injection-js';
 import { autoLoginPartialRoutesGuard } from 'oidc-client-rx';
 import { firstValueFrom } from 'rxjs';

apps/webui/src/components/layout/app-layout.tsx

@@ -13,9 +13,9 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from '@/components/ui/sidebar';
-import { cn } from '@/styles/utils';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteBreadcrumbItem } from '@/infra/routes/traits';
-import type { RouteBreadcrumbItem } from '@/traits/router';
+import { cn } from '@/infra/styles/utils';
 import { useMatches } from '@tanstack/react-router';
 import {
   type DetailedHTMLProps,

apps/webui/src/components/layout/app-sidebar.tsx

@@ -5,7 +5,7 @@ import {
   SidebarHeader,
   SidebarRail,
 } from '@/components/ui/sidebar';
-import { AppNavMainData } from '@/config/app-layout';
+import { AppNavMainData } from '@/infra/routes/nav';
 import type { ComponentPropsWithoutRef } from 'react';
 import { AppIcon } from './app-icon';
 import { NavMain } from './nav-main';

apps/webui/src/components/ui/accordion.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Accordion({
   ...props

apps/webui/src/components/ui/alert-dialog.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 import { buttonVariants } from "@/components/ui/button"
 
 function AlertDialog({

apps/webui/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",

apps/webui/src/components/ui/avatar.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Avatar({
   className,

apps/webui/src/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",

apps/webui/src/components/ui/breadcrumb.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />

apps/webui/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

apps/webui/src/components/ui/calendar.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 import { buttonVariants } from "@/components/ui/button"
 
 function Calendar({

apps/webui/src/components/ui/card.tsx

@@ -1,84 +1,84 @@
-import type * as React from 'react';
+import * as React from "react"
 
-import { cn } from '@/styles/utils';
+import { cn } from "@/infra/styles/utils"
 
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
+function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
       className={cn(
-        'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn('font-semibold leading-none', className)}
+      className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-action"
       className={cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
         className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn('px-6', className)}
+      className={cn("px-6", className)}
       {...props}
     />
-  );
+  )
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-footer"
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-};
+}

apps/webui/src/components/ui/carousel.tsx

@@ -6,7 +6,7 @@ import useEmblaCarousel, {
 } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 import { Button } from "@/components/ui/button"
 
 type CarouselApi = UseEmblaCarouselType[1]

apps/webui/src/components/ui/chart.tsx

@@ -1,35 +1,35 @@
-import * as React from "react"
+import * as React from "react";
-import * as RechartsPrimitive from "recharts"
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
+    label?: React.ReactNode;
-    icon?: React.ComponentType
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
+  );
-}
+};
 
 type ChartContextProps = {
-  config: ChartConfig
+  config: ChartConfig;
-}
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 function ChartContainer({
@@ -39,13 +39,13 @@ function ChartContainer({
   config,
   ...props
 }: React.ComponentProps<"div"> & {
-  config: ChartConfig
+  config: ChartConfig;
   children: React.ComponentProps<
     typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
+  >["children"];
 }) {
-  const uniqueId = React.useId()
+  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -64,16 +64,16 @@ function ChartContainer({
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
+  );
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
     ([, config]) => config.theme || config.color
-  )
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -87,8 +87,8 @@ ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
+      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null
+    return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
@@ -97,10 +97,10 @@ ${colorConfig
           .join("\n"),
       }}
     />
-  )
+  );
-}
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 function ChartTooltipContent({
   active,
@@ -118,40 +118,40 @@ function ChartTooltipContent({
   labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
   React.ComponentProps<"div"> & {
-    hideLabel?: boolean
+    hideLabel?: boolean;
-    hideIndicator?: boolean
+    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed"
+    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string
+    nameKey?: string;
-    labelKey?: string
+    labelKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
-      return null
+      return null;
     }
 
-    const [item] = payload
+    const [item] = payload;
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
       !labelKey && typeof label === "string"
         ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+        : itemConfig?.label;
 
     if (labelFormatter) {
       return (
         <div className={cn("font-medium", labelClassName)}>
           {labelFormatter(value, payload)}
         </div>
-      )
+      );
     }
 
     if (!value) {
-      return null
+      return null;
     }
 
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
   }, [
     label,
     labelFormatter,
@@ -160,13 +160,13 @@ function ChartTooltipContent({
     labelClassName,
     config,
     labelKey,
-  ])
+  ]);
 
   if (!active || !payload?.length) {
-    return null
+    return null;
   }
 
-  const nestLabel = payload.length === 1 && indicator !== "dot"
+  const nestLabel = payload.length === 1 && indicator !== "dot";
 
   return (
     <div
@@ -175,12 +175,12 @@ function ChartTooltipContent({
         className
       )}
     >
-      {!nestLabel ? tooltipLabel : null}
+      {nestLabel ? null : tooltipLabel}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-          const indicatorColor = color || item.payload.fill || item.color
+          const indicatorColor = color || item.payload.fill || item.color;
 
           return (
             <div
@@ -239,14 +239,14 @@ function ChartTooltipContent({
                 </>
               )}
             </div>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
   className,
@@ -256,13 +256,13 @@ function ChartLegendContent({
   nameKey,
 }: React.ComponentProps<"div"> &
   Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
+    hideIcon?: boolean;
-    nameKey?: string
+    nameKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   if (!payload?.length) {
-    return null
+    return null;
   }
 
   return (
@@ -274,8 +274,8 @@ function ChartLegendContent({
       )}
     >
       {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`
+        const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
         return (
           <div
@@ -296,10 +296,10 @@ function ChartLegendContent({
             )}
             {itemConfig?.label}
           </div>
-        )
+        );
       })}
     </div>
-  )
+  );
 }
 
 // Helper to extract item config from a payload.
@@ -309,7 +309,7 @@ function getPayloadConfigFromPayload(
   key: string
 ) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
@@ -317,15 +317,15 @@ function getPayloadConfigFromPayload(
     typeof payload.payload === "object" &&
     payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
   if (
     key in payload &&
     typeof payload[key as keyof typeof payload] === "string"
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
@@ -333,12 +333,12 @@ function getPayloadConfigFromPayload(
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
   }
 
   return configLabelKey in config
     ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -348,4 +348,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};

apps/webui/src/components/ui/checkbox.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Checkbox({
   className,

apps/webui/src/components/ui/command.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
 import { SearchIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 import {
   Dialog,
   DialogContent,

apps/webui/src/components/ui/context-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function ContextMenu({
   ...props

apps/webui/src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Dialog({
   ...props

apps/webui/src/components/ui/drawer.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Drawer({
   ...props

apps/webui/src/components/ui/dropdown-menu.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function DropdownMenu({
   ...props

apps/webui/src/components/ui/form.tsx

@@ -1,31 +1,31 @@
-import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label";
-import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot";
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
 import {
   Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form";
 
-import { cn } from "@/styles/utils"
+import { Label } from "@/components/ui/label";
-import { Label } from "@/components/ui/label"
+import { cn } from "@/infra/styles/utils";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
+  name: TName;
-}
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -37,21 +37,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
+  );
-}
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
+  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext)
+  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext()
+  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name })
+  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -60,19 +60,19 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
+  };
-}
+};
 
 type FormItemContextValue = {
-  id: string
+  id: string;
-}
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
-)
+);
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
@@ -82,14 +82,14 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
         {...props}
       />
     </FormItemContext.Provider>
-  )
+  );
 }
 
 function FormLabel({
   className,
   ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,29 +99,28 @@ function FormLabel({
       htmlFor={formItemId}
       {...props}
     />
-  )
+  );
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
       data-slot="form-control"
       id={formItemId}
       aria-describedby={
-        !error
+        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
       {...props}
     />
-  )
+  );
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -130,15 +129,15 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
+  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -150,7 +149,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     >
       {body}
     </p>
-  )
+  );
 }
 
 export {
@@ -162,4 +161,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};

apps/webui/src/components/ui/hover-card.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function HoverCard({
   ...props

apps/webui/src/components/ui/input-otp.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
 import { MinusIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function InputOTP({
   className,

apps/webui/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (

apps/webui/src/components/ui/label.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Label({
   className,

apps/webui/src/components/ui/menubar.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Menubar({
   className,

apps/webui/src/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDownIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function NavigationMenu({
   className,

apps/webui/src/components/ui/pagination.tsx

@@ -5,7 +5,7 @@ import {
   MoreHorizontalIcon,
 } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {

apps/webui/src/components/ui/popover.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Popover({
   ...props

apps/webui/src/components/ui/pro-link.tsx

@@ -1,17 +1,11 @@
-import { cn } from '@/styles/utils';
+import { type LinkComponent, createLink } from "@tanstack/react-router";
-import { type LinkComponent, createLink } from '@tanstack/react-router';
+import type { AnchorHTMLAttributes, ComponentProps } from "react";
-import type { AnchorHTMLAttributes, ComponentProps } from 'react';
 
 export interface BasicLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement> {}
 
-const BasicLinkComponent = (props: ComponentProps<'a'>) => {
+const BasicLinkComponent = (props: ComponentProps<"a">) => {
-  return (
+  return <a {...props} />;
-    <a
-      {...props}
-      className={cn('block px-3 py-2 text-blue-700', props.className)}
-    />
-  );
 };
 
 const CreatedLinkComponent = createLink(BasicLinkComponent);
@@ -20,7 +14,7 @@ export const ProLink: LinkComponent<typeof BasicLinkComponent> = (props) => {
   if (props.href) {
     return <BasicLinkComponent {...(props as any)} />;
   }
-  return <CreatedLinkComponent preload={'intent'} {...props} />;
+  return <CreatedLinkComponent preload={"intent"} {...props} />;
 };
 
 export type ProLinkProps = ComponentProps<typeof ProLink>;

apps/webui/src/components/ui/progress-circle.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/styles/utils';
+import { cn } from '@/infra/styles/utils';
 import type { FC, HTMLAttributes } from 'react';
 
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

apps/webui/src/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Progress({
   className,

apps/webui/src/components/ui/radio-group.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import { CircleIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function RadioGroup({
   className,

apps/webui/src/components/ui/resizable.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { GripVerticalIcon } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function ResizablePanelGroup({
   className,

apps/webui/src/components/ui/scroll-area.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function ScrollArea({
   className,

apps/webui/src/components/ui/select.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Select({
   ...props

apps/webui/src/components/ui/separator.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Separator({
   className,

apps/webui/src/components/ui/sheet.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { XIcon } from "lucide-react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />

apps/webui/src/components/ui/sidebar.tsx

@@ -1,39 +1,39 @@
-'use client';
+"use client";
 
-import { Slot } from '@radix-ui/react-slot';
+import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from 'class-variance-authority';
+import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeftIcon } from 'lucide-react';
+import { PanelLeftIcon } from "lucide-react";
-import * as React from 'react';
+import * as React from "react";
 
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { Input } from '@/components/ui/input';
+import { Input } from "@/components/ui/input";
-import { Separator } from '@/components/ui/separator';
+import { Separator } from "@/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from '@/components/ui/sheet';
+} from "@/components/ui/sheet";
-import { Skeleton } from '@/components/ui/skeleton';
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip';
+} from "@/components/ui/tooltip";
-import { useIsMobile } from '@/hooks/use-mobile';
+import { useIsMobile } from "@/infra/hooks/use-mobile";
-import { cn } from '@/styles/utils';
+import { cn } from "@/infra/styles/utils";
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: 'expanded' | 'collapsed';
+  state: "expanded" | "collapsed";
   open: boolean;
   setOpen: (open: boolean) => void;
   openMobile: boolean;
@@ -47,7 +47,7 @@ const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 function useSidebar() {
   const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.');
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
 
   return context;
@@ -61,7 +61,7 @@ function SidebarProvider({
   style,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
+}: React.ComponentProps<"div"> & {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -75,7 +75,7 @@ function SidebarProvider({
   const open = openProp ?? _open;
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value;
+      const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
         setOpenProp(openState);
       } else {
@@ -83,8 +83,7 @@ function SidebarProvider({
       }
 
       // This sets the cookie to keep the sidebar state.
-      // TODO
+      // TODO: FIXME
-      // biome-ignore lint/nursery/noDocumentCookie: <explanation>
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open]
@@ -107,13 +106,13 @@ function SidebarProvider({
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? 'expanded' : 'collapsed';
+  const state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -135,13 +134,13 @@ function SidebarProvider({
           data-slot="sidebar-wrapper"
           style={
             {
-              '--sidebar-width': SIDEBAR_WIDTH,
+              "--sidebar-width": SIDEBAR_WIDTH,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
               ...style,
             } as React.CSSProperties
           }
           className={cn(
-            'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
             className
           )}
           {...props}
@@ -154,25 +153,25 @@ function SidebarProvider({
 }
 
 function Sidebar({
-  side = 'left',
+  side = "left",
-  variant = 'sidebar',
+  variant = "sidebar",
-  collapsible = 'offcanvas',
+  collapsible = "offcanvas",
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
+}: React.ComponentProps<"div"> & {
-  side?: 'left' | 'right';
+  side?: "left" | "right";
-  variant?: 'sidebar' | 'floating' | 'inset';
+  variant?: "sidebar" | "floating" | "inset";
-  collapsible?: 'offcanvas' | 'icon' | 'none';
+  collapsible?: "offcanvas" | "icon" | "none";
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
-  if (collapsible === 'none') {
+  if (collapsible === "none") {
     return (
       <div
         data-slot="sidebar"
         className={cn(
-          'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className
         )}
         {...props}
@@ -189,10 +188,10 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
           side={side}
@@ -209,9 +208,9 @@ function Sidebar({
 
   return (
     <div
-      className="group peer hidden text-sidebar-foreground md:block"
+      className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
-      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
@@ -220,25 +219,25 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-          'group-data-[collapsible=offcanvas]:w-0',
+          "group-data-[collapsible=offcanvas]:w-0",
-          'group-data-[side=right]:rotate-180',
+          "group-data-[side=right]:rotate-180",
-          variant === 'floating' || variant === 'inset'
+          variant === "floating" || variant === "inset"
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
         )}
       />
       <div
         data-slot="sidebar-container"
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-          side === 'left'
+          side === "left"
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
           // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
+          variant === "floating" || variant === "inset"
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className
         )}
         {...props}
@@ -246,7 +245,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>
@@ -268,7 +267,7 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon"
-      className={cn('size-7', className)}
+      className={cn("size-7", className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
@@ -281,7 +280,7 @@ function SidebarTrigger({
   );
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -293,12 +292,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        '-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex',
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
       )}
       {...props}
@@ -306,13 +305,13 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
   );
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
       data-slot="sidebar-inset"
       className={cn(
-        'relative flex w-full flex-1 flex-col bg-background',
+        "bg-background relative flex w-full flex-1 flex-col",
-        'md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}
@@ -328,29 +327,29 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn('h-8 w-full bg-background shadow-none', className)}
+      className={cn("bg-background h-8 w-full shadow-none", className)}
       {...props}
     />
   );
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
   );
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
   );
@@ -364,19 +363,19 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn('mx-2 w-auto bg-sidebar-border', className)}
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
       {...props}
     />
   );
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className
       )}
       {...props}
@@ -384,12 +383,12 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
       {...props}
     />
   );
@@ -399,16 +398,16 @@ function SidebarGroupLabel({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div';
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
       {...props}
@@ -420,18 +419,18 @@ function SidebarGroupAction({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        'after:-inset-2 after:absolute md:after:hidden',
+        "after:absolute after:-inset-2 md:after:hidden",
-        'group-data-[collapsible=icon]:hidden',
+        "group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
@@ -442,57 +441,57 @@ function SidebarGroupAction({
 function SidebarGroupContent({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn('w-full text-sm', className)}
+      className={cn("w-full text-sm", className)}
       {...props}
     />
   );
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
     />
   );
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn('group/menu-item relative', className)}
+      className={cn("group/menu-item relative", className)}
       {...props}
     />
   );
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: 'h-8 text-sm',
+        default: "h-8 text-sm",
-        sm: 'h-7 text-xs',
+        sm: "h-7 text-xs",
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
-      size: 'default',
+      size: "default",
     },
   }
 );
@@ -500,17 +499,17 @@ const sidebarMenuButtonVariants = cva(
 function SidebarMenuButton({
   asChild = false,
   isActive = false,
-  variant = 'default',
+  variant = "default",
-  size = 'default',
+  size = "default",
   tooltip,
   className,
   ...props
-}: React.ComponentProps<'button'> & {
+}: React.ComponentProps<"button"> & {
   asChild?: boolean;
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot : "button";
   const { isMobile, state } = useSidebar();
 
   const button = (
@@ -528,7 +527,7 @@ function SidebarMenuButton({
     return button;
   }
 
-  if (typeof tooltip === 'string') {
+  if (typeof tooltip === "string") {
     tooltip = {
       children: tooltip,
     };
@@ -540,7 +539,7 @@ function SidebarMenuButton({
       <TooltipContent
         side="right"
         align="center"
-        hidden={state !== 'collapsed' || isMobile}
+        hidden={state !== "collapsed" || isMobile}
         {...tooltip}
       />
     </Tooltip>
@@ -552,26 +551,26 @@ function SidebarMenuAction({
   asChild = false,
   showOnHover = false,
   ...props
-}: React.ComponentProps<'button'> & {
+}: React.ComponentProps<"button"> & {
   asChild?: boolean;
   showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : 'button';
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        'after:-inset-2 after:absolute md:after:hidden',
+        "after:absolute after:-inset-2 md:after:hidden",
-        'peer-data-[size=sm]/menu-button:top-1',
+        "peer-data-[size=sm]/menu-button:top-1",
-        'peer-data-[size=default]/menu-button:top-1.5',
+        "peer-data-[size=default]/menu-button:top-1.5",
-        'peer-data-[size=lg]/menu-button:top-2.5',
+        "peer-data-[size=lg]/menu-button:top-2.5",
-        'group-data-[collapsible=icon]:hidden',
+        "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
         className
       )}
       {...props}
@@ -582,18 +581,18 @@ function SidebarMenuAction({
 function SidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums',
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
-        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-        'peer-data-[size=sm]/menu-button:top-1',
+        "peer-data-[size=sm]/menu-button:top-1",
-        'peer-data-[size=default]/menu-button:top-1.5',
+        "peer-data-[size=default]/menu-button:top-1.5",
-        'peer-data-[size=lg]/menu-button:top-2.5',
+        "peer-data-[size=lg]/menu-button:top-2.5",
-        'group-data-[collapsible=icon]:hidden',
+        "group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
@@ -605,7 +604,7 @@ function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
-}: React.ComponentProps<'div'> & {
+}: React.ComponentProps<"div"> & {
   showIcon?: boolean;
 }) {
   // Random width between 50 to 90%.
@@ -617,7 +616,7 @@ function SidebarMenuSkeleton({
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
       {showIcon && (
@@ -631,7 +630,7 @@ function SidebarMenuSkeleton({
         data-sidebar="menu-skeleton-text"
         style={
           {
-            '--skeleton-width': width,
+            "--skeleton-width": width,
           } as React.CSSProperties
         }
       />
@@ -639,14 +638,14 @@ function SidebarMenuSkeleton({
   );
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5',
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-        'group-data-[collapsible=icon]:hidden',
+        "group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
@@ -657,12 +656,12 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
 function SidebarMenuSubItem({
   className,
   ...props
-}: React.ComponentProps<'li'>) {
+}: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn('group/menu-sub-item relative', className)}
+      className={cn("group/menu-sub-item relative", className)}
       {...props}
     />
   );
@@ -670,16 +669,16 @@ function SidebarMenuSubItem({
 
 function SidebarMenuSubButton({
   asChild = false,
-  size = 'md',
+  size = "md",
   isActive = false,
   className,
   ...props
-}: React.ComponentProps<'a'> & {
+}: React.ComponentProps<"a"> & {
   asChild?: boolean;
-  size?: 'sm' | 'md';
+  size?: "sm" | "md";
   isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : 'a';
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -688,11 +687,11 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        '-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === 'sm' && 'text-xs',
+        size === "sm" && "text-xs",
-        size === 'md' && 'text-sm',
+        size === "md" && "text-sm",
-        'group-data-[collapsible=icon]:hidden',
+        "group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}

apps/webui/src/components/ui/skeleton.tsx

@@ -1,4 +1,5 @@
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils";
+import type React from "react";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -7,7 +8,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

apps/webui/src/components/ui/slider.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Slider({
   className,

apps/webui/src/components/ui/spinner.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/styles/utils';
+import { cn } from '@/infra/styles/utils';
 import {
   Loader,
   LoaderCircle,

apps/webui/src/components/ui/switch.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Switch({
   className,

apps/webui/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (

apps/webui/src/components/ui/tabs.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Tabs({
   className,

apps/webui/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (

apps/webui/src/components/ui/toggle-group.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 import { toggleVariants } from "@/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<

apps/webui/src/components/ui/toggle.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",

apps/webui/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "@/styles/utils"
+import { cn } from "@/infra/styles/utils"
 
 function TooltipProvider({
   delayDuration = 0,

apps/webui/src/infra/routes/utils.ts

@@ -1,5 +1,5 @@
 import { guardRouteIndexAsNotFound } from '@/components/layout/app-not-found';
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { Outlet } from '@tanstack/react-router';
 
 export interface BuildVirtualBranchRouteOptions {

apps/webui/src/infra/storage/web-storage.service.ts

@@ -1,5 +1,5 @@
-import { FeatureNotAvailablePlatformError } from '@/platform/errors';
+import { FeatureNotAvailablePlatformError } from '@/infra/platform/errors';
-import { DOCUMENT } from '@/platform/injection';
+import { DOCUMENT } from '@/infra/platform/injection';
 import { Injectable, inject } from '@outposts/injection-js';
 
 @Injectable()

apps/webui/src/infra/styles/theme.service.ts

@@ -1,5 +1,5 @@
-import { DOCUMENT } from '@/platform/injection';
+import { DOCUMENT } from '@/infra/platform/injection';
-import { LocalStorageService } from '@/storage/web-storage.service';
+import { LocalStorageService } from '@/infra/storage/web-storage.service';
 import { Injectable, inject } from '@outposts/injection-js';
 
 export type PreferColorSchemaType = 'dark' | 'light' | 'system';

apps/webui/src/main.tsx

@@ -1,4 +1,8 @@
 import '@abraham/reflection';
+import { provideAuth, setupAuthContext } from '@/app/auth/context';
+import { providePlatform } from '@/infra/platform/context';
+import { provideStorages } from '@/infra/storage/context';
+import { provideStyles } from '@/infra/styles/context';
 import { type Injector, ReflectiveInjector } from '@outposts/injection-js';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import {
@@ -7,12 +11,8 @@ import {
 } from 'oidc-client-rx/adapters/react';
 import { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
-import { provideAuth, setupAuthContext } from './auth/context';
 import { AppNotFoundComponent } from './components/layout/app-not-found';
-import { providePlatform } from './platform/context';
 import { routeTree } from './routeTree.gen';
-import { provideStorages } from './storage/context';
-import { provideStyles } from './styles/context';
 import './app.css';
 
 // Create a new router instance

apps/webui/src/routes/__root.tsx

@@ -1,4 +1,7 @@
-import type { RouteStateDataOption, RouterContext } from '@/traits/router';
+import type {
+  RouteStateDataOption,
+  RouterContext,
+} from '@/infra/routes/traits';
 import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
 import { Home } from 'lucide-react';
 

apps/webui/src/routes/_app/_explore/explore.tsx

@@ -1,4 +1,4 @@
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/_explore/explore')({

apps/webui/src/routes/_app/_explore/feed.tsx

@@ -1,4 +1,4 @@
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/_explore/feed')({

apps/webui/src/routes/_app/playground/graphql-api.lazy.tsx

@@ -1,10 +1,10 @@
-import { useAuth } from '@/auth/hooks';
+import { useAuth } from '@/app/auth/hooks';
 import { type Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit';
 import { createLazyFileRoute } from '@tanstack/react-router';
 import GraphiQL from 'graphiql';
 import { useCallback } from 'react';
 import 'graphiql/graphiql.css';
-import { AuthMethodEnum } from '@/auth/config';
+import { AuthMethodEnum } from '@/app/auth/config';
 import { firstValueFrom } from 'rxjs';
 
 export const Route = createLazyFileRoute('/_app/playground/graphql-api')({

apps/webui/src/routes/_app/playground/graphql-api.tsx

@@ -1,5 +1,5 @@
 import { AppSkeleton } from '@/components/layout/app-skeleton';
-import { buildLeafRouteStaticData } from '@/utils/route';
+import { buildLeafRouteStaticData } from '@/infra/routes/utils';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/playground/graphql-api')({

apps/webui/src/routes/_app/playground/route.tsx

@@ -1,4 +1,4 @@
-import { buildVirtualBranchRouteOptions } from '@/utils/route';
+import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/playground')(

apps/webui/src/routes/_app/route.tsx

@@ -1,4 +1,4 @@
-import { beforeLoadGuard } from '@/auth/guard';
+import { beforeLoadGuard } from '@/app/auth/guard';
 import { AppAside } from '@/components/layout/app-layout';
 import { Outlet, createFileRoute } from '@tanstack/react-router';
 

apps/webui/src/routes/_app/settings/downloader.tsx

@@ -1,4 +1,4 @@
-import { buildLeafRouteStaticData } from '@/utils/route';
+import { buildLeafRouteStaticData } from '@/infra/routes/utils';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/settings/downloader')({

apps/webui/src/routes/_app/settings/route.tsx

@@ -1,4 +1,4 @@
-import { buildVirtualBranchRouteOptions } from '@/utils/route';
+import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/settings')(

apps/webui/src/routes/_app/subscriptions/create.tsx

@@ -1,4 +1,4 @@
-import { useAuth } from '@/auth/hooks';
+import { useAuth } from '@/app/auth/hooks';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -26,7 +26,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 import { useNavigate } from '@tanstack/react-router';
 import { useState } from 'react';
@@ -116,8 +116,8 @@ function SubscriptionCreateRouteComponent() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Create Anime Subscription</CardTitle>
+        <CardTitle>Create Bangumi Subscription</CardTitle>
-        <CardDescription>Add a new anime subscription source</CardDescription>
+        <CardDescription>Add a new bangumi subscription source</CardDescription>
       </CardHeader>
       <CardContent>
         <Form {...form}>

apps/webui/src/routes/_app/subscriptions/edit.$subscription-id.tsx

@@ -1,4 +1,4 @@
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute(

apps/webui/src/routes/_app/subscriptions/manage.tsx

@@ -1,4 +1,4 @@
-import type { RouteStateDataOption } from '@/traits/router';
+import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/subscriptions/manage')({

apps/webui/src/routes/_app/subscriptions/route.tsx

@@ -1,4 +1,4 @@
-import { buildVirtualBranchRouteOptions } from '@/utils/route';
+import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/_app/subscriptions')(

apps/webui/src/routes/auth/oidc/callback.tsx

@@ -1,5 +1,5 @@
-import { AppAuthMethod, AuthMethodEnum } from '@/auth/config';
+import { AppAuthMethod, AuthMethodEnum } from '@/app/auth/config';
-import { useAuth } from '@/auth/hooks';
+import { useAuth } from '@/app/auth/hooks';
 import { ProLink } from '@/components/ui/pro-link';
 import { Spinner } from '@/components/ui/spinner';
 import { createFileRoute } from '@tanstack/react-router';

biome.json

@@ -9,6 +9,9 @@
       "style": {
         "noNonNullAssertion": "off"
       },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
       "suspicious": {
         "noExplicitAny": "off",
         "noConsole": "off",
@@ -28,6 +31,36 @@
       }
     }
   },
+  "overrides": [
+    {
+      "include": ["apps/webui/src/components/ui/**/*"],
+      "javascript": {
+        "formatter": {
+          "quoteStyle": "double"
+        }
+      },
+      "linter": {
+        "rules": {
+          "style": {
+            "useBlockStatements": "off",
+            "useImportType": "off"
+          },
+          "nursery": {
+            "noNestedTernary": "off",
+            "useSortedClasses": "off"
+          },
+          "a11y": {
+            "noRedundantRoles": "off",
+            "useFocusableInteractive": "off",
+            "useSemanticElements": "off"
+          },
+          "complexity": {
+            "noExcessiveCognitiveComplexity": "off"
+          }
+        }
+      }
+    }
+  ],
   "files": {
     "ignore": [".vscode/*.json"]
   }

dev.kdl

@@ -32,7 +32,7 @@ layout {
     }
     tab name="Recorder" {
         pane command="watchexec" {
-            args "-w" "apps/recorder" "--" "cargo" "run" "-p" "recorder" "--bin" "recorder_cli" "--" "--environment" "development"
+            args "-r" "-w" "apps/recorder" "--" "cargo" "run" "-p" "recorder" "--bin" "recorder_cli" "--" "--environment" "development"
         }
     }
     tab name="Deps" {

justfile

@@ -11,9 +11,9 @@ dev-webui:
 dev-proxy:
     pnpm run --filter=proxy dev
 
-# bacon recorder # crash on windows
+# crash on windows
 dev-recorder:
-    watchexec -w apps/recorder -- cargo run -p recorder --bin recorder_cli -- --environment development
+    watchexec -r -w apps/recorder -- cargo run -p recorder --bin recorder_cli -- --environment development
 
 dev-deps:
     docker compose -f devdeps.compose.yaml up