feat: shadcn/ui overhaul with dark mode and role/channel selectors

web/package.json

@@ -31,7 +31,8 @@
     "recharts": "^3.7.0",
     "server-only": "^0.0.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "next-themes": "^0.4.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.1",

web/src/components/providers.tsx

@@ -2,9 +2,21 @@
 
 import { SessionProvider } from 'next-auth/react';
 import type { ReactNode } from 'react';
+import { useTheme } from 'next-themes';
 import { Toaster } from 'sonner';
 import { ThemeProvider } from '@/components/theme-provider';
 
+function ThemedToaster() {
+  const { resolvedTheme } = useTheme();
+  return (
+    <Toaster
+      position="bottom-right"
+      theme={(resolvedTheme as 'light' | 'dark') ?? 'system'}
+      richColors
+    />
+  );
+}
+
 /**
  * Wraps application UI with NextAuth session context, theme provider, and a global toast container.
  *
@@ -14,7 +26,7 @@ import { ThemeProvider } from '@/components/theme-provider';
  * Theme defaults to system preference with CSS variable-based dark/light mode support.
  *
  * @returns A React element that renders providers around `children` and mounts a Toaster
- *          positioned at the bottom-right with system theme and rich colors enabled.
+ *          positioned at the bottom-right with resolved theme (light/dark) and rich colors enabled.
  */
 export function Providers({ children }: { children: ReactNode }) {
   return (
@@ -26,7 +38,7 @@ export function Providers({ children }: { children: ReactNode }) {
         disableTransitionOnChange={false}
       >
         {children}
-        <Toaster position="bottom-right" theme="system" richColors />
+        <ThemedToaster />
       </ThemeProvider>
     </SessionProvider>
   );

web/src/components/ui/channel-selector.tsx

@@ -212,10 +212,14 @@ export function ChannelSelector({
           return a.name.localeCompare(b.name);
         });
 
-        setChannels(sortedChannels);
+        if (abortControllerRef.current === controller) {
+          setChannels(sortedChannels);
+        }
       } catch (err) {
         if (err instanceof DOMException && err.name === 'AbortError') return;
-        setError(err instanceof Error ? err.message : 'Failed to load channels');
+        if (abortControllerRef.current === controller) {
+          setError(err instanceof Error ? err.message : 'Failed to load channels');
+        }
       } finally {
         if (abortControllerRef.current === controller) {
           setLoading(false);

web/src/components/ui/dialog.tsx

@@ -8,15 +8,15 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+  return <DialogPrimitive.Root {...props} />;
 }
 
 function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+  return <DialogPrimitive.Portal {...props} />;
 }
 
 function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
@@ -48,7 +48,7 @@ function DialogContent({
   showCloseButton?: boolean;
 }) {
   return (
-    <DialogPortal data-slot="dialog-portal">
+    <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"

web/src/components/ui/form.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import type { Label as LabelPrimitive } from 'radix-ui';
-import { Slot } from 'radix-ui';
+import { Label as LabelPrimitive } from 'radix-ui';
+import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
   FormProvider,
@@ -88,25 +88,25 @@ function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPri
 
   return (
     <Label
+      {...props}
       data-slot="form-label"
       data-error={!!error}
       className={cn('data-[error=true]:text-destructive', className)}
       htmlFor={formItemId}
-      {...props}
     />
   );
 }
 
-function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
-    <Slot.Root
+    <Slot
+      {...props}
       data-slot="form-control"
       id={formItemId}
       aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
-      {...props}
     />
   );
 }

web/src/components/ui/role-selector.tsx

@@ -93,10 +93,14 @@ export function RoleSelector({
             typeof (r as Record<string, unknown>).color === 'number',
         );
 
-        setRoles(fetchedRoles);
+        if (abortControllerRef.current === controller) {
+          setRoles(fetchedRoles);
+        }
       } catch (err) {
         if (err instanceof DOMException && err.name === 'AbortError') return;
-        setError(err instanceof Error ? err.message : 'Failed to load roles');
+        if (abortControllerRef.current === controller) {
+          setError(err instanceof Error ? err.message : 'Failed to load roles');
+        }
       } finally {
         if (abortControllerRef.current === controller) {
           setLoading(false);

web/tests/setup.ts

@@ -1,6 +1,21 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
-import { afterEach } from "vitest";
+import { afterEach, vi } from "vitest";
+
+// Polyfill window.matchMedia for next-themes (jsdom doesn't implement it)
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
 
 afterEach(() => {
   cleanup();