VolvoxLLC · BillChirico · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/web/package.json b/web/package.json
@@ -18,13 +18,15 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "radix-ui": "^1.4.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "diff": "^8.0.3",
     "lucide-react": "^0.525.0",
     "next": "^16.1.6",
     "next-auth": "^4.24.13",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "recharts": "^3.5.0",

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className="dark" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <Providers>{children}</Providers>
       </body>

diff --git a/web/src/components/dashboard/config-sections/AiSection.tsx b/web/src/components/dashboard/config-sections/AiSection.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { SystemPromptEditor } from '@/components/dashboard/system-prompt-editor';
-import { ToggleSwitch } from '@/components/dashboard/toggle-switch';
 import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import type { GuildConfig } from '@/lib/config-utils';
 import { SYSTEM_PROMPT_MAX_LENGTH } from '@/types/config';
 
@@ -28,12 +29,18 @@ export function AiSection({
               <CardTitle className="text-base">AI Chat</CardTitle>
               <CardDescription>Configure the AI assistant behavior.</CardDescription>
             </div>
-            <ToggleSwitch
-              checked={draftConfig.ai?.enabled ?? false}
-              onChange={onEnabledChange}
-              disabled={saving}
-              label="AI Chat"
-            />
+            <div className="flex items-center gap-2">
+              <Switch
+                id="ai-toggle"
+                checked={draftConfig.ai?.enabled ?? false}
+                onCheckedChange={onEnabledChange}
+                disabled={saving}
+                aria-label="Toggle AI Chat"
+              />
+              <Label htmlFor="ai-toggle" className="sr-only">
+                AI Chat
+              </Label>
+            </div>
           </div>
         </CardHeader>
       </Card>

diff --git a/web/src/components/dashboard/config-sections/ModerationSection.tsx b/web/src/components/dashboard/config-sections/ModerationSection.tsx
@@ -1,12 +1,11 @@
 'use client';
 
-import { ToggleSwitch } from '@/components/dashboard/toggle-switch';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import type { GuildConfig } from '@/lib/config-utils';
 
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
-
 interface ModerationSectionProps {
   draftConfig: GuildConfig;
   saving: boolean;
@@ -36,56 +35,65 @@ export function ModerationSection({
               Configure moderation, escalation, and logging settings.
             </CardDescription>
           </div>
-          <ToggleSwitch
+          <Switch
             checked={draftConfig.moderation?.enabled ?? false}
-            onChange={onEnabledChange}
+            onCheckedChange={onEnabledChange}
             disabled={saving}
-            label="Moderation"
+            aria-label="Toggle Moderation"
           />
         </div>
       </CardHeader>
       <CardContent className="space-y-4">
-        <label className="space-y-2">
-          <span className="text-sm font-medium">Alert Channel ID</span>
-          <input
+        <div className="space-y-2">
+          <Label htmlFor="alert-channel">Alert Channel ID</Label>
+          <Input
+            id="alert-channel"
             type="text"
             value={draftConfig.moderation?.alertChannelId ?? ''}
             onChange={(e) => onFieldChange('alertChannelId', e.target.value)}
             disabled={saving}
-            className={inputClasses}
             placeholder="Channel ID for moderation alerts"
           />
-        </label>
+        </div>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Auto-delete flagged messages</span>
-          <ToggleSwitch
+          <Label htmlFor="auto-delete" className="text-sm font-medium">
+            Auto-delete flagged messages
+          </Label>
+          <Switch
+            id="auto-delete"
             checked={draftConfig.moderation?.autoDelete ?? false}
-            onChange={(v) => onFieldChange('autoDelete', v)}
+            onCheckedChange={(v) => onFieldChange('autoDelete', v)}
             disabled={saving}
-            label="Auto Delete"
+            aria-label="Toggle auto-delete"
           />
         </div>
         <fieldset className="space-y-2">
           <legend className="text-sm font-medium">DM Notifications</legend>
           {(['warn', 'timeout', 'kick', 'ban'] as const).map((action) => (
             <div key={action} className="flex items-center justify-between">
-              <span className="text-sm capitalize text-muted-foreground">{action}</span>
-              <ToggleSwitch
+              <Label htmlFor={`dm-${action}`} className="text-sm capitalize text-muted-foreground">
+                {action}
+              </Label>
+              <Switch
+                id={`dm-${action}`}
                 checked={draftConfig.moderation?.dmNotifications?.[action] ?? false}
-                onChange={(v) => onDmNotificationChange(action, v)}
+                onCheckedChange={(v) => onDmNotificationChange(action, v)}
                 disabled={saving}
-                label={`DM on ${action}`}
+                aria-label={`DM on ${action}`}
               />
             </div>
           ))}
         </fieldset>
         <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">Escalation Enabled</span>
-          <ToggleSwitch
+          <Label htmlFor="escalation" className="text-sm font-medium">
+            Escalation Enabled
+          </Label>
+          <Switch
+            id="escalation"
             checked={draftConfig.moderation?.escalation?.enabled ?? false}
-            onChange={(v) => onEscalationChange(v)}
+            onCheckedChange={(v) => onEscalationChange(v)}
             disabled={saving}
-            label="Escalation"
+            aria-label="Toggle escalation"
           />
         </div>
       </CardContent>

diff --git a/web/src/components/dashboard/config-sections/NumberField.tsx b/web/src/components/dashboard/config-sections/NumberField.tsx
@@ -1,5 +1,9 @@
-const inputClasses =
-  'w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+'use client';
+
+import { useId } from 'react';
+
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 interface NumberFieldProps {
   label: string;
@@ -11,10 +15,12 @@ interface NumberFieldProps {
 }
 
 export function NumberField({ label, value, onChange, disabled, min, step }: NumberFieldProps) {
+  const id = useId();
   return (
-    <label className="space-y-2">
-      <span className="text-sm font-medium">{label}</span>
-      <input
+    <div className="space-y-2">
+      <Label htmlFor={id}>{label}</Label>
+      <Input
+        id={id}
         type="number"
         step={step}
         min={min}
@@ -27,8 +33,7 @@ export function NumberField({ label, value, onChange, disabled, min, step }: Num
           onChange(num);
         }}
         disabled={disabled}
-        className={inputClasses}
       />
-    </label>
+    </div>
   );
 }