refactor: consolidate web app UI foundation

bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardGrid.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  export let columns = 1;
+  let className = "";
+  export { className as class };
+</script>
+
+<div
+  class={cn(
+    "admin-cn-dashboard-grid",
+    columns === 3 && "admin-cn-dashboard-grid--3",
+    className,
+  )}
+  {...$$restProps}
+>
+  <slot />
+</div>

bot/app/web/frontend/src/lib/components/patterns/admin/AdminDashboardStack.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let className = "";
+  export { className as class };
+</script>
+
+<div class={cn("admin-cn-dashboard-stack", className)} {...$$restProps}>
+  <slot />
+</div>

bot/app/web/frontend/src/lib/components/patterns/admin/AdminEmptyState.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  export let tone = "default";
+  let className = "";
+  export { className as class };
+</script>
+
+<div class={cn(tone === "card" ? "admin-card-body" : "admin-empty", className)} {...$$restProps}>
+  <slot />
+</div>

bot/app/web/frontend/src/lib/components/patterns/admin/AdminSectionHeader.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let title = "";
+  export let description = "";
+</script>
+
+<div class="admin-dashboard-section-head">
+  <h3>{title}</h3>
+  {#if description}
+    <small>{description}</small>
+  {/if}
+</div>

bot/app/web/frontend/src/lib/components/patterns/admin/index.js

@@ -0,0 +1,4 @@
+export { default as AdminDashboardGrid } from "./AdminDashboardGrid.svelte";
+export { default as AdminDashboardStack } from "./AdminDashboardStack.svelte";
+export { default as AdminEmptyState } from "./AdminEmptyState.svelte";
+export { default as AdminSectionHeader } from "./AdminSectionHeader.svelte";

bot/app/web/frontend/src/lib/components/ui/badge.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
 
-  /** @type {'default' | 'outline' | 'destructive'} */
+  /** @type {'default' | 'outline' | 'destructive' | 'success' | 'muted'} */
   export let variant = "default";
 
   let className = "";
@@ -14,6 +14,8 @@
     "admin-cn-badge",
     variant === "outline" && "admin-cn-badge-outline",
     variant === "destructive" && "admin-cn-badge-destructive",
+    variant === "success" && "admin-cn-badge-success",
+    variant === "muted" && "admin-cn-badge-muted",
     className,
   )}
   {...$$restProps}

bot/app/web/frontend/src/lib/components/ui/button.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cva } from "class-variance-authority";
+  import { cn } from "$lib/utils.js";
 
   export let type = "button";
   export let variant = "default";
@@ -10,29 +11,36 @@
   let className = "";
   export { className as class };
 
-  const variants = {
-    default: "btn btn-primary",
-    secondary: "btn btn-secondary",
-    outline: "btn btn-outline",
-    ghost: "btn btn-ghost",
-    telegram: "btn btn-telegram",
-    icon: "btn btn-icon",
-  };
-
-  const sizes = {
-    default: "",
-    sm: "btn-sm",
-    lg: "btn-lg",
-    icon: "btn-square",
-  };
+  const buttonVariants = cva("btn", {
+    variants: {
+      variant: {
+        default: "btn-primary",
+        secondary: "btn-secondary",
+        outline: "btn-outline",
+        ghost: "btn-ghost",
+        telegram: "btn-telegram",
+        icon: "btn-icon",
+      },
+      size: {
+        default: "",
+        sm: "btn-sm",
+        lg: "btn-lg",
+        icon: "btn-square",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  });
 </script>
 
 {#if href}
-  <a class={cn(variants[variant], sizes[size], className)} {href} onclick={onclick} {...$$restProps}>
+  <a class={cn(buttonVariants({ variant, size }), className)} {href} onclick={onclick} {...$$restProps}>
     <slot />
   </a>
 {:else}
-  <button class={cn(variants[variant], sizes[size], className)} {type} {disabled} onclick={onclick} {...$$restProps}>
+  <button class={cn(buttonVariants({ variant, size }), className)} {type} {disabled} onclick={onclick} {...$$restProps}>
     <slot />
   </button>
 {/if}

bot/app/web/frontend/src/lib/components/ui/card.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   export let active = false;
   export let compact = false;

bot/app/web/frontend/src/lib/components/ui/card/card-action.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/card/card-content.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/card/card-description.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/card/card-footer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/card/card-header.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/card/card-title.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/card/card.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   let className = "";
   export { className as class };

bot/app/web/frontend/src/lib/components/ui/dialog.svelte

@@ -1,6 +1,6 @@
 <script>
   import { X } from "lucide-svelte";
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
   import Button from "./button.svelte";
 
   export let open = false;

bot/app/web/frontend/src/lib/components/ui/index.js

@@ -0,0 +1,7 @@
+export { default as Badge } from "./badge.svelte";
+export { default as Button } from "./button.svelte";
+export { default as Dialog } from "./dialog.svelte";
+export { default as Input } from "./input.svelte";
+export { default as LegacyCard } from "./card.svelte";
+export * as Card from "./card/index.js";
+export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "./primitives.js";

bot/app/web/frontend/src/lib/components/ui/input.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { cn } from "../../utils.js";
+  import { cn } from "$lib/utils.js";
 
   export let value = "";
   export let type = "text";

bot/app/web/frontend/src/lib/components/ui/primitives.js

@@ -0,0 +1 @@
+export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "bits-ui";