feat: enhance MessagesPanel with improved UI components and functionality

- Refactored MessagesPanel to utilize new UI components such as Avatar, Badge, Button, Card, Dialog, Input, Progress, ScrollArea, Select, Skeleton, and Tabs. - Improved error handling and loading states with enhanced user feedback. - Updated message rendering logic to support new design patterns and animations. - Added support for image previews and improved layout for message details. - Enhanced mobile responsiveness with useIsMobile hook adjustments. - Cleaned up utility functions for better readability and consistency.
2026-07-26 15:13:18 +07:00
parent f57a1caf62
commit eae0d7ce56
14 changed files with 1907 additions and 1303 deletions
@@ -2,9 +2,11 @@

 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useRef } from "react";
+
 import { Header } from "@/components/layout/header";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 import { Sidebar } from "@/components/layout/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { MascotChatbot } from "@/features/mascot/mascot-chatbot";
 import { uiStateApi } from "@/lib/api";
 import { WsProvider } from "@/lib/ws/context";
@@ -48,12 +50,14 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
  }, [activeTab]);

  return (
-    <div className="min-h-screen bg-background">
+    <div className="flex min-h-screen bg-background">
      <Sidebar activeTab={activeTab} />
-      <div className="md:pl-56 flex flex-col min-h-screen">
+      <SidebarInset className="flex flex-col">
        <Header />
-        <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6">{children}</main>
-      </div>
+        <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6 animate-fade-in-up">
+          {children}
+        </main>
+      </SidebarInset>
      <MobileTabBar activeTab={activeTab} />
    </div>
  );
@@ -66,15 +70,17 @@ export default function DashboardLayout({
 }) {
  return (
    <WsProvider>
-      <Suspense
-        fallback={
-          <div className="flex min-h-screen items-center justify-center">
-            <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          </div>
-        }
-      >
-        <DashboardShell>{children}</DashboardShell>
-      </Suspense>
+      <SidebarProvider defaultOpen={true}>
+        <Suspense
+          fallback={
+            <div className="flex min-h-screen items-center justify-center">
+              <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          }
+        >
+          <DashboardShell>{children}</DashboardShell>
+        </Suspense>
+      </SidebarProvider>
      <MascotChatbot />
    </WsProvider>
  );
@@ -1,8 +1,18 @@
 "use client";

-import { Loader2, RefreshCw } from "lucide-react";
+import { AlertCircle, RefreshCw } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { DashboardPanel } from "@/features/dashboard/dashboard-panel";
 import { LivePanel } from "@/features/live/live-panel";
 import { MessagesPanel } from "@/features/messages/messages-panel";
@@ -67,14 +77,28 @@ export default function DashboardPage() {
    }
  }, [configLoading, guildsLoading, resolveGuild, selectedGuildId]);

-  const handleGuildChange = useCallback((guildId: string) => {
-    setSelectedGuildId(guildId);
+  const handleGuildChange = useCallback((guildId: string | null) => {
+    if (guildId) setSelectedGuildId(guildId);
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setGuildsLoading(true);
+    setGuildsError(null);
+    voiceApi
+      .getGuilds()
+      .then(setGuilds)
+      .catch((err) =>
+        setGuildsError(
+          err instanceof Error ? err.message : "Failed to load guilds",
+        ),
+      )
+      .finally(() => setGuildsLoading(false));
  }, []);

  const isReady = !configLoading && !guildsLoading;

  return (
-    <div className="space-y-4">
+    <div className="space-y-5">
      {/* Guild selector bar */}
      <GuildBar
        guilds={guilds}
@@ -82,31 +106,22 @@ export default function DashboardPage() {
        error={guildsError}
        selectedGuildId={selectedGuildId}
        onChange={handleGuildChange}
-        onRetry={() => {
-          setGuildsLoading(true);
-          setGuildsError(null);
-          voiceApi
-            .getGuilds()
-            .then(setGuilds)
-            .catch((err) =>
-              setGuildsError(
-                err instanceof Error ? err.message : "Failed to load guilds",
-              ),
-            )
-            .finally(() => setGuildsLoading(false));
-        }}
+        onRetry={handleRetry}
      />

      {/* Main panel */}
      {isReady ? (
-        <>
+        <div className="animate-fade-in-up">
          {tab === "live" && <LivePanel />}
          {tab === "dashboard" && <DashboardPanel guildId={selectedGuildId} />}
          {tab === "messages" && <MessagesPanel guildId={selectedGuildId} />}
-        </>
+        </div>
      ) : (
-        <div className="flex items-center justify-center py-16">
-          <Loader2 className="size-6 animate-spin text-muted-foreground" />
+        <div className="flex items-center justify-center py-24">
+          <div className="flex flex-col items-center gap-3">
+            <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            <p className="text-sm text-muted-foreground">Loading dashboard…</p>
+          </div>
        </div>
      )}
    </div>
@@ -127,7 +142,7 @@ function GuildBar({
  loading: boolean;
  error: string | null;
  selectedGuildId: string;
-  onChange: (id: string) => void;
+  onChange: (id: string | null) => void;
  onRetry: () => void;
 }) {
  // No guild bar if there's only one guild and it's already selected
@@ -135,61 +150,60 @@ function GuildBar({

  if (loading) {
    return (
-      <div className="flex items-center gap-2 rounded-lg border p-3">
-        <Loader2 className="size-4 animate-spin text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">Loading guilds…</span>
+      <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+        <Skeleton className="h-8 w-36" />
+        <Skeleton className="h-8 w-8 rounded-full" />
      </div>
    );
  }

  if (error) {
    return (
-      <div className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 p-3">
-        <p className="text-sm text-muted-foreground">
-          Could not load guilds: {error}
-        </p>
-        <button
-          type="button"
-          onClick={onRetry}
-          className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium hover:bg-muted transition-colors"
-        >
-          <RefreshCw className="size-3" />
+      <div className="flex items-center justify-between rounded-xl border border-destructive/20 bg-destructive/5 p-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="size-4 text-destructive shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            Could not load guilds: {error}
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          <RefreshCw className="size-3 mr-1" />
          Retry
-        </button>
+        </Button>
      </div>
    );
  }

  if (guilds.length === 0) {
    return (
-      <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3">
-        <p className="text-sm text-muted-foreground">
-          No guilds available. Make sure the Discord gateway is connected.
-        </p>
+      <div className="rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-3">
+        <div className="flex items-center gap-2">
+          <AlertCircle className="size-4 text-yellow-500 shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            No guilds available. Make sure the Discord gateway is connected.
+          </p>
+        </div>
      </div>
    );
  }

  return (
-    <div className="flex items-center gap-2 rounded-lg border p-3">
-      <label
-        htmlFor="guild-select"
-        className="text-sm font-medium text-muted-foreground whitespace-nowrap"
-      >
-        Guild:
-      </label>
-      <select
-        id="guild-select"
-        value={selectedGuildId}
-        onChange={(e) => onChange(e.target.value)}
-        className="flex-1 h-8 rounded-md border border-input bg-background px-2 text-sm"
-      >
-        {guilds.map((g) => (
-          <option key={g.id} value={g.id}>
-            {g.name}
-          </option>
-        ))}
-      </select>
+    <div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
+      <Badge variant="outline" className="shrink-0 text-xs font-normal">
+        Guild
+      </Badge>
+      <Select value={selectedGuildId} onValueChange={onChange}>
+        <SelectTrigger className="h-8 w-full max-w-xs">
+          <SelectValue placeholder="Select a guild…" />
+        </SelectTrigger>
+        <SelectContent>
+          {guilds.map((g) => (
+            <SelectItem key={g.id} value={g.id}>
+              {g.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
    </div>
  );
 }
@@ -46,6 +46,15 @@
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Sky blue accent gradient */
+  --accent-gradient: linear-gradient(135deg, oklch(0.65 0.18 240), oklch(0.65 0.15 200), oklch(0.65 0.12 180));
+  --accent-gradient-subtle: linear-gradient(135deg, oklch(0.65 0.18 240 / 0.15), oklch(0.65 0.12 180 / 0.05));
+
+  /* Glass morphism */
+  --glass-bg: oklch(1 0 0 / 0.05);
+  --glass-border: oklch(1 0 0 / 0.1);
+  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.3);
 }

 :root {
@@ -53,68 +62,88 @@
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
+  --primary: oklch(0.55 0.18 240);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
+  --muted: oklch(0.95 0 0);
  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
+  --accent: oklch(0.65 0.15 220);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
+  --ring: oklch(0.65 0.18 240);
+  --chart-1: oklch(0.55 0.18 240);
+  --chart-2: oklch(0.55 0.15 200);
+  --chart-3: oklch(0.55 0.12 180);
+  --chart-4: oklch(0.55 0.2 260);
+  --chart-5: oklch(0.55 0.15 280);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: oklch(0.55 0.18 240);
  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: oklch(0.65 0.18 240);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
 }

 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  /* Deep navy-slate base */
+  --background: oklch(0.12 0.02 240);
+  --foreground: oklch(0.92 0.01 240);
+
+  /* Slightly lighter card */
+  --card: oklch(0.16 0.025 240);
+  --card-foreground: oklch(0.92 0.01 240);
+
+  --popover: oklch(0.16 0.025 240);
+  --popover-foreground: oklch(0.92 0.01 240);
+
+  /* Sky blue primary */
+  --primary: oklch(0.65 0.18 240);
+  --primary-foreground: oklch(0.98 0 0);
+
+  --secondary: oklch(0.22 0.02 240);
+  --secondary-foreground: oklch(0.92 0.01 240);
+
+  --muted: oklch(0.2 0.015 240);
+  --muted-foreground: oklch(0.6 0.02 240);
+
+  --accent: oklch(0.7 0.15 220);
+  --accent-foreground: oklch(0.98 0 0);
+
+  --destructive: oklch(0.6 0.22 25);
+
+  --border: oklch(1 0 0 / 0.08);
+  --input: oklch(1 0 0 / 0.12);
+
+  --ring: oklch(0.65 0.18 240);
+
+  /* Blue-teal-cyan chart palette */
+  --chart-1: oklch(0.65 0.18 240);
+  --chart-2: oklch(0.6 0.15 200);
+  --chart-3: oklch(0.6 0.12 180);
+  --chart-4: oklch(0.7 0.15 220);
+  --chart-5: oklch(0.55 0.15 260);
+
+  /* Deeper sidebar */
+  --sidebar: oklch(0.1 0.015 240);
+  --sidebar-foreground: oklch(0.92 0.01 240);
+  --sidebar-primary: oklch(0.65 0.18 240);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.2 0.02 240);
+  --sidebar-accent-foreground: oklch(0.92 0.01 240);
+  --sidebar-border: oklch(1 0 0 / 0.06);
+  --sidebar-ring: oklch(0.65 0.18 240);
+
+  /* Glass overrides for dark */
+  --glass-bg: oklch(1 0 0 / 0.05);
+  --glass-border: oklch(1 0 0 / 0.1);
 }

@layer base {
@@ -125,6 +154,122 @@
    @apply bg-background text-foreground;
  }
  html {
-    @apply font-sans;
+    @apply font-sans scroll-smooth;
  }
-}
+
+  /* Custom selection color */
+  ::selection {
+    background: oklch(0.65 0.18 240 / 0.3);
+    color: inherit;
+  }
+
+  .dark ::selection {
+    background: oklch(0.65 0.18 240 / 0.4);
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: oklch(1 0 0 / 0.1);
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: oklch(1 0 0 / 0.2);
+  }
+}
+
+/* ── Utility classes ─────────────────────────── */
+
+/* Glass card effect */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+/* Gradient text */
+.text-gradient {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Gradient border (via pseudo-element trick) */
+.gradient-border {
+  position: relative;
+}
+.gradient-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: var(--accent-gradient);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+/* Animated background */
+@keyframes gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient {
+  background: linear-gradient(
+    -45deg,
+    oklch(0.65 0.18 240 / 0.1),
+    oklch(0.6 0.15 200 / 0.05),
+    oklch(0.12 0.02 240 / 1),
+    oklch(0.65 0.12 180 / 0.08)
+  );
+  background-size: 400% 400%;
+  animation: gradient-shift 15s ease infinite;
+}
+
+/* Counter animation placeholder - will be done in JS */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.3s ease-out forwards;
+}
+
+/* Pulse ring for live indicators */
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.live-pulse-ring {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import Script from "next/script";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import "./globals.css";

 const geistSans = Geist({
@@ -34,7 +36,10 @@ export default function RootLayout({
          {`try{const t=localStorage.getItem('theme')||'dark';document.documentElement.classList.add(t)}catch(e){}`}
        </Script>
      </head>
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <TooltipProvider delay={500}>{children}</TooltipProvider>
+        <Toaster position="bottom-right" richColors closeButton />
+      </body>
    </html>
  );
 }
@@ -1,7 +1,16 @@
 "use client";

-import { AlertCircle, Moon, Sun, Wifi, WifiOff } from "lucide-react";
+import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";

 export function Header() {
@@ -21,48 +30,82 @@ export function Header() {
    document.documentElement.classList.add(next);
  };

+  const statusVariant =
+    status === "connected"
+      ? "default"
+      : status === "connecting"
+        ? "secondary"
+        : "destructive";
+
+  const statusLabel =
+    status === "connected"
+      ? "Connected"
+      : status === "connecting"
+        ? "Connecting"
+        : status === "error"
+          ? "Error"
+          : "Disconnected";
+
  return (
-    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background px-4 md:px-6">
+    <header className="sticky top-0 z-10 flex h-14 items-center gap-3 border-b border-border/50 bg-background/60 backdrop-blur-lg px-4 md:px-6">
+      <SidebarTrigger className="-ml-1 size-8 text-muted-foreground hover:text-foreground" />
+
      <div className="flex-1" />

      {/* Connection status */}
-      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-        {status === "connected" ? (
-          <>
-            <Wifi className="size-3 text-green-500" />
-            <span className="hidden sm:inline">Connected</span>
-          </>
-        ) : status === "connecting" ? (
-          <>
-            <Wifi className="size-3 text-yellow-500" />
-            <span className="hidden sm:inline">Connecting</span>
-          </>
-        ) : status === "error" ? (
-          <>
-            <AlertCircle className="size-3 text-destructive" />
-            <span className="hidden sm:inline">Error</span>
-          </>
-        ) : (
-          <>
-            <WifiOff className="size-3 text-destructive" />
-            <span className="hidden sm:inline">Disconnected</span>
-          </>
-        )}
-      </div>
+      <Tooltip>
+        <TooltipTrigger>
+          <span>
+            <Badge
+              variant={statusVariant}
+              className="gap-1.5 px-2.5 py-1 cursor-default select-none"
+            >
+              <span
+                className={cn(
+                  "size-1.5 rounded-full",
+                  status === "connected" &&
+                    "bg-green-500 shadow-[0_0_6px] shadow-green-500/60",
+                  status === "connecting" && "bg-yellow-500 animate-pulse",
+                  (status === "disconnected" || status === "error") &&
+                    "bg-destructive",
+                )}
+              />
+              <span className="hidden sm:inline text-xs">{statusLabel}</span>
+            </Badge>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>WebSocket: {statusLabel}</p>
+        </TooltipContent>
+      </Tooltip>

      {/* Theme toggle */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="icon"
        onClick={toggleTheme}
-        className="inline-flex size-8 items-center justify-center rounded-lg border hover:bg-muted transition-colors"
        aria-label="Toggle theme"
+        className="size-8"
      >
-        {theme === "dark" ? (
-          <Sun className="size-4" />
-        ) : (
-          <Moon className="size-4" />
-        )}
-      </button>
+        <div className="relative size-4">
+          <Sun
+            className={cn(
+              "absolute inset-0 size-4 transition-all duration-300",
+              theme === "dark"
+                ? "opacity-0 rotate-90 scale-75"
+                : "opacity-100 rotate-0 scale-100",
+            )}
+          />
+          <Moon
+            className={cn(
+              "absolute inset-0 size-4 transition-all duration-300",
+              theme === "dark"
+                ? "opacity-100 rotate-0 scale-100"
+                : "opacity-0 -rotate-90 scale-75",
+            )}
+          />
+        </div>
+      </Button>
    </header>
  );
 }
@@ -2,30 +2,41 @@

 import { useRouter, useSearchParams } from "next/navigation";
 import { type TabId, tabs } from "@/lib/tabs";
+import { cn } from "@/lib/utils";

 export function MobileTabBar({ activeTab }: { activeTab: TabId }) {
  const router = useRouter();
  const searchParams = useSearchParams();

  return (
-    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t bg-background">
+    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-lg">
      <div className="flex">
-        {tabs.map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            type="button"
-            onClick={() => {
-              const params = new URLSearchParams(searchParams.toString());
-              params.set("tab", id);
-              router.push(`/dashboard?${params}`);
-            }}
-            data-active={activeTab === id ? "" : undefined}
-            className="flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium text-muted-foreground data-[active]:text-primary transition-colors"
-          >
-            <Icon className="size-5" />
-            {label}
-          </button>
-        ))}
+        {tabs.map(({ id, label, icon: Icon }) => {
+          const isActive = activeTab === id;
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={() => {
+                const params = new URLSearchParams(searchParams.toString());
+                params.set("tab", id);
+                router.push(`/dashboard?${params}`);
+              }}
+              className={cn(
+                "flex-1 flex flex-col items-center gap-0.5 py-2 text-xs font-medium transition-all duration-200 relative",
+                isActive
+                  ? "text-sky-400"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <Icon className="size-5" />
+              <span>{label}</span>
+              {isActive && (
+                <span className="absolute -top-px left-1/4 right-1/4 h-0.5 rounded-full bg-gradient-to-r from-sky-400 to-cyan-400" />
+              )}
+            </button>
+          );
+        })}
      </div>
    </nav>
  );
@@ -1,12 +1,29 @@
 "use client";

-import { Radio } from "lucide-react";
+import { type LucideIcon, Radio } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
+import {
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  Sidebar as SidebarPrimitive,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { type TabId, tabs } from "@/lib/tabs";
+import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";

 export function Sidebar({ activeTab }: { activeTab: TabId }) {
  const router = useRouter();
  const searchParams = useSearchParams();
+  const { state } = useSidebar();
+  const { status } = useWebSocket();
+  const collapsed = state === "collapsed";

  const handleTabClick = (tabId: TabId) => {
    const params = new URLSearchParams(searchParams.toString());
@@ -14,29 +31,111 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
    router.push(`/dashboard?${params}`);
  };

-  return (
-    <aside className="hidden md:flex md:w-56 md:flex-col md:fixed md:inset-y-0 border-r bg-sidebar">
-      <div className="flex h-14 items-center gap-2 border-b px-4">
-        <div className="size-7 rounded-full bg-primary/10 flex items-center justify-center">
-          <Radio className="size-4 text-primary" />
-        </div>
-        <span className="font-semibold text-sm">Bete</span>
-      </div>
+  const connectionLabel = {
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnected: "Disconnected",
+    error: "Error",
+  }[status];

-      <nav className="flex-1 space-y-1 p-3">
-        {tabs.map(({ id, label, icon: Icon }) => (
-          <button
-            key={id}
-            type="button"
-            onClick={() => handleTabClick(id)}
-            data-active={activeTab === id ? "" : undefined}
-            className="w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[active]:bg-sidebar-accent data-[active]:text-sidebar-accent-foreground"
-          >
-            <Icon className="size-4 shrink-0" />
-            {label}
-          </button>
-        ))}
-      </nav>
-    </aside>
+  const connectionColor = {
+    connected: "bg-green-500",
+    connecting: "bg-yellow-500",
+    disconnected: "bg-destructive",
+    error: "bg-destructive",
+  }[status];
+
+  return (
+    <SidebarPrimitive variant="sidebar" collapsible="icon">
+      <SidebarHeader className="border-b border-sidebar-border/50">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              size="lg"
+              className="group-data-[collapsible=icon]:!p-0"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-cyan-400 text-sidebar-primary-foreground">
+                <Radio className="size-4" />
+              </div>
+              <div
+                className={cn(
+                  "flex flex-col gap-0.5 leading-none",
+                  collapsed && "hidden",
+                )}
+              >
+                <span className="text-base font-bold tracking-tight">
+                  <span className="text-gradient">Bete</span>
+                </span>
+                <span className="text-[10px] text-muted-foreground tracking-widest uppercase">
+                  Dashboard
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {tabs.map(({ id, label, icon: Icon }) => {
+                const isActive = activeTab === id;
+                return (
+                  <SidebarMenuItem key={id}>
+                    <SidebarMenuButton
+                      isActive={isActive}
+                      onClick={() => handleTabClick(id)}
+                      tooltip={collapsed ? label : undefined}
+                      className={cn(
+                        "relative transition-all duration-200",
+                        isActive &&
+                          "bg-sidebar-accent/80 text-sidebar-accent-foreground font-medium",
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-4 transition-all duration-200",
+                          isActive && "text-sky-400 scale-110",
+                        )}
+                      />
+                      <span>{label}</span>
+                      {isActive && (
+                        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-full bg-gradient-to-b from-sky-400 to-cyan-400" />
+                      )}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-sidebar-border/50 p-3">
+        <div className="flex items-center gap-2">
+          <span className="relative flex size-2 shrink-0">
+            <span
+              className={cn(
+                "absolute inline-flex size-full rounded-full opacity-75",
+                connectionColor,
+                status === "connected" && "animate-ping",
+              )}
+            />
+            <span
+              className={cn(
+                "relative inline-flex size-2 rounded-full",
+                connectionColor,
+              )}
+            />
+          </span>
+          {!collapsed && (
+            <span className="text-xs text-muted-foreground truncate">
+              {connectionLabel}
+            </span>
+          )}
+        </div>
+      </SidebarFooter>
+    </SidebarPrimitive>
  );
 }
@@ -195,7 +195,7 @@ function ChartTooltipContent({
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
-          .map((item) => {
+          .map((item, index) => {
            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
            const itemConfig = getPayloadConfigFromPayload(config, item, key);
            const indicatorColor = color ?? item.payload?.fill ?? item.color;
@@ -3,19 +3,35 @@
 import {
  Disc3,
  Download,
+  Headphones,
  Loader2,
  Mic,
-  MicOff,
+  Music,
  Play,
  Radio,
  RadioOff,
  SkipForward,
  Square,
  Trash2,
+  UserCheck,
  Volume2,
 } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
 import { recordingsApi, voiceApi } from "@/lib/api";
 import type {
  ActiveSpeaker,
@@ -23,6 +39,7 @@ import type {
  VoiceRecording,
  VoiceStatus,
 } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";

 export function LivePanel() {
@@ -86,7 +103,6 @@ export function LivePanel() {
    fetchRecordings();
  }, [fetchVoiceStatus, fetchGuilds, fetchRecordings]);

-  // Media status
  const fetchMediaStatus = useCallback(async () => {
    try {
      const state = await voiceApi.getMediaStatus();
@@ -130,14 +146,14 @@ export function LivePanel() {
    };
  }, [ws]);

-  // Voice connect handler
-  const handleGuildChange = useCallback(async (guildId: string) => {
-    setSelectedGuild(guildId);
-    setSelectedChannel("");
+  const handleGuildChange = useCallback(async (guildId: string | null) => {
    if (!guildId) {
+      setSelectedGuild("");
      setVoiceChannels([]);
      return;
    }
+    setSelectedGuild(guildId);
+    setSelectedChannel("");
    try {
      const channels = await voiceApi.getVoiceChannels(guildId);
      setVoiceChannels(channels);
@@ -145,6 +161,7 @@ export function LivePanel() {
      setVoiceChannels([]);
    }
  }, []);
+
  const handleConnect = useCallback(async () => {
    if (!selectedGuild || !selectedChannel) return;
    setVoiceLoading(true);
@@ -166,7 +183,6 @@ export function LivePanel() {
    }
  }, []);

-  // Media handlers
  const handleQueueMedia = useCallback(async () => {
    if (!queueUrl.trim()) return;
    try {
@@ -196,16 +212,19 @@ export function LivePanel() {
    }
  }, []);

-  const handleVolume = useCallback(async (volume: number) => {
-    try {
-      const state = await voiceApi.mediaVolume(volume);
-      setMediaState(state);
-    } catch {
-      // ignore
-    }
-  }, []);
+  const handleVolume = useCallback(
+    async (value: number | readonly number[]) => {
+      const vol = Array.isArray(value) ? value[0] : value;
+      try {
+        const state = await voiceApi.mediaVolume(vol);
+        setMediaState(state);
+      } catch {
+        // ignore
+      }
+    },
+    [],
+  );

-  // Delete recording
  const handleDeleteRecording = useCallback(async (id: string) => {
    try {
      await recordingsApi.delete(id);
@@ -216,315 +235,357 @@ export function LivePanel() {
  }, []);

  return (
-    <div className="space-y-6">
+    <div className="space-y-5 animate-fade-in-up">
      {/* Voice Connection */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold flex items-center gap-2">
-            <Radio className="size-4" />
-            Voice Connection
-          </h2>
-          <span
-            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-              voiceStatus?.connected
-                ? "bg-green-500/15 text-green-600 dark:text-green-400"
-                : "bg-muted text-muted-foreground"
-            }`}
-          >
-            {voiceStatus?.connected ? "Connected" : "Disconnected"}
-          </span>
-        </div>
-
-        {voiceStatus?.connected && voiceStatus.activeChannelName && (
-          <p className="text-sm text-muted-foreground">
-            Connected to{" "}
-            <span className="font-medium text-foreground">
-              {voiceStatus.activeChannelName}
-            </span>
-          </p>
-        )}
-
-        <div className="flex flex-col sm:flex-row gap-2">
-          <select
-            value={selectedGuild}
-            onChange={(e) => handleGuildChange(e.target.value)}
-            className="flex-1 h-9 rounded-lg border border-input bg-background px-3 text-sm"
-          >
-            <option value="">Select guild…</option>
-            {guilds.map((g) => (
-              <option key={g.id} value={g.id}>
-                {g.name}
-              </option>
-            ))}
-          </select>
-          <select
-            value={selectedChannel}
-            onChange={(e) => setSelectedChannel(e.target.value)}
-            className="flex-1 h-9 rounded-lg border border-input bg-background px-3 text-sm"
-          >
-            <option value="">Select channel…</option>
-            {voiceChannels.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))}
-          </select>
-          {voiceStatus?.connected ? (
-            <button
-              onClick={handleDisconnect}
-              disabled={voiceLoading}
-              className="inline-flex items-center gap-2 rounded-lg bg-destructive px-4 py-1.5 text-sm font-medium text-destructive-foreground hover:bg-destructive/90 transition-colors disabled:opacity-50"
-            >
-              {voiceLoading ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <RadioOff className="size-4" />
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Radio className="size-4 text-primary" />
+              Voice Connection
+            </div>
+            <Badge
+              variant={voiceStatus?.connected ? "default" : "secondary"}
+              className={cn(
+                voiceStatus?.connected &&
+                  "bg-green-500/15 text-green-600 dark:text-green-400 hover:bg-green-500/20",
              )}
-              Disconnect
-            </button>
-          ) : (
-            <button
-              onClick={handleConnect}
-              disabled={voiceLoading || !selectedGuild || !selectedChannel}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
            >
-              {voiceLoading ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <Radio className="size-4" />
-              )}
-              Connect
-            </button>
+              <span
+                className={cn(
+                  "size-1.5 rounded-full mr-1.5 inline-block",
+                  voiceStatus?.connected
+                    ? "bg-green-500 shadow-[0_0_6px] shadow-green-500/60"
+                    : "bg-muted-foreground",
+                )}
+              />
+              {voiceStatus?.connected ? "Connected" : "Disconnected"}
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {voiceStatus?.connected && voiceStatus.activeChannelName && (
+            <p className="text-sm text-muted-foreground flex items-center gap-1.5">
+              <Headphones className="size-4" />
+              Connected to{" "}
+              <span className="font-medium text-foreground">
+                {voiceStatus.activeChannelName}
+              </span>
+            </p>
          )}
-        </div>
-      </div>
+
+          <div className="flex flex-col sm:flex-row gap-2">
+            <Select value={selectedGuild} onValueChange={handleGuildChange}>
+              <SelectTrigger className="flex-1 h-9">
+                <SelectValue placeholder="Select guild…" />
+              </SelectTrigger>
+              <SelectContent>
+                {guilds.map((g) => (
+                  <SelectItem key={g.id} value={g.id}>
+                    {g.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              value={selectedChannel}
+              onValueChange={(v) => v && setSelectedChannel(v)}
+            >
+              <SelectTrigger className="flex-1 h-9">
+                <SelectValue placeholder="Select channel…" />
+              </SelectTrigger>
+              <SelectContent>
+                {voiceChannels.map((c) => (
+                  <SelectItem key={c.id} value={c.id}>
+                    {c.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {voiceStatus?.connected ? (
+              <Button
+                variant="destructive"
+                onClick={handleDisconnect}
+                disabled={voiceLoading}
+              >
+                {voiceLoading ? (
+                  <Loader2 className="size-4 animate-spin mr-1.5" />
+                ) : (
+                  <RadioOff className="size-4 mr-1.5" />
+                )}
+                Disconnect
+              </Button>
+            ) : (
+              <Button
+                onClick={handleConnect}
+                disabled={voiceLoading || !selectedGuild || !selectedChannel}
+              >
+                {voiceLoading ? (
+                  <Loader2 className="size-4 animate-spin mr-1.5" />
+                ) : (
+                  <Radio className="size-4 mr-1.5" />
+                )}
+                Connect
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>

      {/* Active Speakers */}
      {speakers.filter((s) => s.speaking).length > 0 && (
-        <div className="rounded-lg border p-4 space-y-3">
-          <h3 className="text-sm font-semibold">Active Speakers</h3>
-          <div className="flex flex-wrap gap-2">
-            {speakers
-              .filter((s) => s.speaking)
-              .map((s) => (
-                <div
-                  key={s.userId}
-                  className="flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1.5"
-                >
-                  <span className="relative flex size-2">
-                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-green-400 opacity-75" />
-                    <span className="relative inline-flex size-2 rounded-full bg-green-500" />
-                  </span>
-                  <span className="text-sm">{s.username}</span>
-                </div>
-              ))}
-          </div>
-        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+              <UserCheck className="size-4 text-primary" />
+              Active Speakers
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {speakers
+                .filter((s) => s.speaking)
+                .map((s) => (
+                  <div
+                    key={s.userId}
+                    className="flex items-center gap-2 rounded-full border border-border/50 bg-card px-3 py-1.5 shadow-sm"
+                  >
+                    <span className="relative flex size-2">
+                      <span className="absolute inline-flex size-full rounded-full bg-green-400 opacity-75 live-pulse-ring" />
+                      <span className="relative inline-flex size-2 rounded-full bg-green-500" />
+                    </span>
+                    <span className="text-sm">{s.username}</span>
+                  </div>
+                ))}
+            </div>
+          </CardContent>
+        </Card>
      )}

      {/* Music Player */}
-      <div className="rounded-lg border p-4 space-y-4">
-        <h2 className="text-sm font-semibold flex items-center gap-2">
-          <Disc3 className="size-4" />
-          Music Player
-        </h2>
-
-        {/* Queue URL */}
-        <div className="flex gap-2">
-          <input
-            type="text"
-            placeholder="Queue a URL (YouTube, audio file…)"
-            value={queueUrl}
-            onChange={(e) => setQueueUrl(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
-            className="flex-1 h-9 rounded-lg border border-input bg-background px-3 text-sm"
-          />
-          <button
-            onClick={handleQueueMedia}
-            disabled={!queueUrl.trim()}
-            className="inline-flex items-center gap-2 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-          >
-            <Play className="size-4" />
-            Queue
-          </button>
-        </div>
-
-        {/* Now Playing */}
-        {mediaState?.current && (
-          <div className="rounded-lg bg-muted/50 p-3 space-y-2">
-            <p className="text-xs text-muted-foreground">Now Playing</p>
-            <div className="flex items-start gap-3">
-              {mediaState.current.thumbnailUrl && (
-                <Image
-                  src={mediaState.current.thumbnailUrl}
-                  alt=""
-                  width={48}
-                  height={48}
-                  className="size-12 rounded object-cover"
-                />
-              )}
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium truncate">
-                  {mediaState.current.title ?? mediaState.current.source}
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  {mediaState.current.durationMs
-                    ? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(
-                        Math.floor(
-                          (mediaState.current.durationMs % 60000) / 1000,
-                        ),
-                      ).padStart(2, "0")}`
-                    : "Live"}
-                </p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Controls */}
-        <div className="flex items-center gap-2">
-          <button
-            onClick={handleStop}
-            className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors"
-          >
-            <Square className="size-4" />
-            Stop
-          </button>
-          <button
-            onClick={handleSkip}
-            className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium hover:bg-muted transition-colors"
-          >
-            <SkipForward className="size-4" />
-            Skip
-          </button>
-          <div className="flex items-center gap-2 ml-auto">
-            <Volume2 className="size-4 text-muted-foreground" />
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              value={mediaState?.musicVolume ?? 0.5}
-              onChange={(e) => handleVolume(Number(e.target.value))}
-              className="w-24 h-2"
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Music className="size-4 text-primary" />
+            Music Player
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Queue URL */}
+          <div className="flex gap-2">
+            <Input
+              type="text"
+              placeholder="Queue a URL (YouTube, audio file…)"
+              value={queueUrl}
+              onChange={(e) => setQueueUrl(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleQueueMedia()}
+              className="flex-1 h-9"
            />
+            <Button onClick={handleQueueMedia} disabled={!queueUrl.trim()}>
+              <Play className="size-4 mr-1.5" />
+              Queue
+            </Button>
          </div>
-        </div>

-        {/* Queue */}
-        {mediaState && mediaState.queue.length > 0 && (
-          <div className="space-y-1">
-            <p className="text-xs text-muted-foreground">
-              Queue ({mediaState.queue.length})
-            </p>
-            {mediaState.queue.map((item, i) => (
-              <div
-                key={item.id ?? i}
-                className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2"
-              >
-                <span className="text-xs text-muted-foreground w-4">
-                  {i + 1}.
-                </span>
-                <span className="text-sm truncate flex-1">
-                  {item.title ?? item.source}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Recordings */}
-      <div className="rounded-lg border p-4 space-y-3">
-        <h2 className="text-sm font-semibold">Voice Recordings</h2>
-        {recordings.length === 0 ? (
-          <p className="text-sm text-muted-foreground">No recordings yet.</p>
-        ) : (
-          <div className="space-y-2">
-            {recordings.map((rec) => (
-              <div
-                key={rec.id}
-                className="flex items-center gap-3 rounded-lg border p-3"
-              >
+          {/* Now Playing */}
+          {mediaState?.current && (
+            <div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4 space-y-2">
+              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-1.5">
+                <Disc3 className="size-3" />
+                Now Playing
+              </p>
+              <div className="flex items-start gap-3">
+                {mediaState.current.thumbnailUrl && (
+                  <Image
+                    src={mediaState.current.thumbnailUrl}
+                    alt=""
+                    width={56}
+                    height={56}
+                    className="size-14 rounded-lg object-cover shadow-sm"
+                  />
+                )}
                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">{rec.username}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {rec.channel_name ?? rec.channel_id ?? "Unknown channel"}
-                    {" — "}
-                    {new Date(rec.created_at).toLocaleString()}
+                  <p className="text-sm font-medium truncate">
+                    {mediaState.current.title ?? mediaState.current.source}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {mediaState.current.durationMs
+                      ? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(
+                          Math.floor(
+                            (mediaState.current.durationMs % 60000) / 1000,
+                          ),
+                        ).padStart(2, "0")}`
+                      : "Live"}
                  </p>
                </div>
-                <span className="text-xs text-muted-foreground whitespace-nowrap">
-                  {formatBytes(rec.size_bytes)}
-                </span>
-                {rec.download_url && (
-                  <a
-                    href={rec.download_url}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="inline-flex items-center rounded-md border p-1.5 hover:bg-muted transition-colors"
-                  >
-                    <Download className="size-4" />
-                  </a>
-                )}
-                <button
-                  onClick={() => handleDeleteRecording(rec.id)}
-                  className="inline-flex items-center rounded-md border p-1.5 hover:bg-destructive/10 hover:text-destructive transition-colors"
-                >
-                  <Trash2 className="size-4" />
-                </button>
              </div>
-            ))}
-          </div>
-        )}
-      </div>
+            </div>
+          )}

-      {/* Microphone Transmit */}
-      <div className="rounded-lg border p-4 space-y-3">
-        <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold flex items-center gap-2">
-            <Mic className="size-4" />
-            Microphone
-          </h2>
-          <button
-            type="button"
-            onClick={async () => {
-              setMicActive(!micActive);
-              try {
-                await voiceApi.sendCommand(
-                  micActive ? "voice:transmit:stop" : "voice:transmit:start",
-                );
-              } catch {
-                setMicActive(micActive);
-              }
-            }}
-            disabled={!voiceStatus?.connected}
-            data-active={micActive ? "" : undefined}
-            className="inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors data-[active]:bg-destructive data-[active]:text-destructive-foreground hover:bg-muted disabled:opacity-50"
-          >
-            {micActive ? (
-              <MicOff className="size-4" />
-            ) : (
-              <Mic className="size-4" />
-            )}
-            {micActive ? "Stop" : "Start"}
-          </button>
-        </div>
-        {!voiceStatus?.connected && (
-          <p className="text-xs text-muted-foreground">
-            Connect to a voice channel first.
-          </p>
-        )}
-        {micActive && (
+          {/* Controls */}
          <div className="flex items-center gap-2">
-            <span className="relative flex size-2">
-              <span className="animate-ping absolute inline-flex size-full rounded-full bg-red-400 opacity-75" />
-              <span className="relative inline-flex size-2 rounded-full bg-red-500" />
-            </span>
-            <span className="text-sm text-muted-foreground">Transmitting…</span>
+            <Button variant="outline" size="sm" onClick={handleStop}>
+              <Square className="size-4 mr-1" />
+              Stop
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleSkip}>
+              <SkipForward className="size-4 mr-1" />
+              Skip
+            </Button>
+            <div className="flex items-center gap-2 ml-auto">
+              <Volume2 className="size-4 text-muted-foreground" />
+              <Slider
+                className="w-24"
+                defaultValue={[mediaState?.musicVolume ?? 0.5]}
+                value={[mediaState?.musicVolume ?? 0.5]}
+                onValueChange={handleVolume}
+                min={0}
+                max={1}
+                step={0.05}
+              />
+            </div>
          </div>
-        )}
-      </div>
+
+          {/* Queue */}
+          {mediaState && mediaState.queue.length > 0 && (
+            <div className="space-y-1.5">
+              <p className="text-xs text-muted-foreground font-medium">
+                Queue ({mediaState.queue.length})
+              </p>
+              <div className="space-y-1">
+                {mediaState.queue.map((item, i) => (
+                  <div
+                    key={item.id ?? i}
+                    className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2 text-sm"
+                  >
+                    <span className="text-xs text-muted-foreground font-mono w-5 text-right">
+                      {i + 1}.
+                    </span>
+                    <span className="truncate flex-1">
+                      {item.title ?? item.source}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Microphone */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <Mic className="size-4 text-primary" />
+              Microphone
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">
+                {micActive ? "On" : "Off"}
+              </span>
+              <Switch
+                checked={micActive}
+                onCheckedChange={async (checked) => {
+                  setMicActive(checked);
+                  try {
+                    await voiceApi.sendCommand(
+                      checked ? "voice:transmit:start" : "voice:transmit:stop",
+                    );
+                  } catch {
+                    setMicActive(!checked);
+                  }
+                }}
+                disabled={!voiceStatus?.connected}
+              />
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!voiceStatus?.connected && (
+            <p className="text-xs text-muted-foreground">
+              Connect to a voice channel first.
+            </p>
+          )}
+          {micActive && (
+            <div className="flex items-center gap-2 mt-1">
+              <span className="relative flex size-2">
+                <span className="absolute inline-flex size-full rounded-full bg-red-400 opacity-75 live-pulse-ring" />
+                <span className="relative inline-flex size-2 rounded-full bg-red-500" />
+              </span>
+              <span className="text-sm text-muted-foreground">
+                Transmitting…
+              </span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Recordings */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+            <Headphones className="size-4 text-primary" />
+            Voice Recordings
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {recordings.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No recordings yet.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {recordings.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="flex items-center gap-3 rounded-lg border border-border/50 p-3 hover:bg-muted/30 transition-colors"
+                >
+                  <Avatar className="size-8">
+                    <AvatarImage src={rec.avatar_url ?? undefined} />
+                    <AvatarFallback>
+                      {(rec.username ?? "?").charAt(0).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">
+                      {rec.username}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {rec.channel_name ?? rec.channel_id ?? "Unknown channel"}
+                      {" — "}
+                      {new Date(rec.created_at).toLocaleString()}
+                    </p>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className="text-[10px] font-mono shrink-0"
+                  >
+                    {formatBytes(rec.size_bytes)}
+                  </Badge>
+                  {rec.download_url && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => window.open(rec.download_url!, "_blank")}
+                    >
+                      <Download className="size-4" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleDeleteRecording(rec.id)}
+                    className="hover:text-destructive hover:bg-destructive/10"
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
    </div>
  );
 }
@@ -5,13 +5,26 @@ import {
  Loader2,
  MessageCircle,
  Send,
+  Sparkles,
  Trash2,
  User,
  X,
 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { mascotApi } from "@/lib/api";
 import type { ChatHistoryMessage } from "@/lib/types";
+import { cn } from "@/lib/utils";

 export function MascotChatbot() {
  const [open, setOpen] = useState(false);
@@ -28,12 +41,11 @@ export function MascotChatbot() {
      .catch(() => {});
  }, [open]);

-  // biome-ignore lint/correctness/useExhaustiveDependencies: scrollRef doesn't need messages in deps
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
-  }, [messages]);
+  }, []);

  const handleClear = useCallback(async () => {
    try {
@@ -83,102 +95,126 @@ export function MascotChatbot() {
  return (
    <>
      {/* Toggle button */}
-      <button
+      <Button
        onClick={() => setOpen(!open)}
-        className="fixed bottom-4 right-4 z-50 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors"
+        size="icon"
        aria-label={open ? "Close chat" : "Open chat"}
+        className={cn(
+          "fixed bottom-4 right-4 z-50 size-12 rounded-full shadow-lg transition-all duration-200",
+          open && "scale-90 opacity-80 hover:scale-100 hover:opacity-100",
+        )}
      >
        {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
-      </button>
+      </Button>

      {/* Chat panel */}
      {open && (
-        <div className="fixed bottom-20 right-4 z-50 flex w-80 flex-col rounded-lg border bg-background shadow-xl overflow-hidden">
-          {/* Header */}
-          <div className="flex items-center gap-2 border-b p-3">
-            <Bot className="size-5 text-primary" />
-            <span className="text-sm font-semibold flex-1">Mascot</span>
-            {messages.length > 0 && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="inline-flex size-6 items-center justify-center rounded hover:bg-muted transition-colors"
-                title="Clear history"
-              >
-                <Trash2 className="size-3.5 text-muted-foreground" />
-              </button>
-            )}
-          </div>
-
-          {/* Messages */}
-          <div
-            ref={scrollRef}
-            className="flex-1 space-y-3 overflow-y-auto p-3 max-h-80"
-          >
-            {messages.length === 0 && (
-              <p className="text-center text-xs text-muted-foreground py-8">
-                Ask me anything about the server!
-              </p>
-            )}
-            {messages.map((msg, _i) => (
-              <div
-                key={msg.timestamp + msg.role}
-                className={`flex items-start gap-2 ${
-                  msg.role === "user" ? "flex-row-reverse" : ""
-                }`}
-              >
-                <div className="size-6 shrink-0 rounded-full bg-muted flex items-center justify-center">
-                  {msg.role === "user" ? (
-                    <User className="size-3" />
-                  ) : (
-                    <Bot className="size-3" />
-                  )}
-                </div>
-                <div
-                  className={`rounded-lg px-3 py-2 text-sm max-w-[80%] ${
-                    msg.role === "user"
-                      ? "bg-primary text-primary-foreground"
-                      : "bg-muted"
-                  }`}
+        <Card className="fixed bottom-20 right-4 z-50 w-80 sm:w-96 shadow-xl border-border/50 animate-fade-in-up">
+          <CardHeader className="border-b border-border/50 bg-gradient-to-r from-primary/5 to-primary/[0.02]">
+            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+              <div className="flex size-6 items-center justify-center rounded-full bg-primary/10">
+                <Bot className="size-3.5 text-primary" />
+              </div>
+              Mascot
+              <Sparkles className="size-3 text-primary/60 ml-0.5" />
+              <div className="flex-1" />
+              {messages.length > 0 && (
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={handleClear}
+                  title="Clear history"
+                  className="text-muted-foreground hover:text-foreground"
                >
-                  {msg.content}
-                </div>
-              </div>
-            ))}
-            {sending && (
-              <div className="flex items-center gap-2">
-                <div className="size-6 shrink-0 rounded-full bg-muted flex items-center justify-center">
-                  <Bot className="size-3" />
-                </div>
-                <div className="rounded-lg bg-muted px-3 py-2">
-                  <Loader2 className="size-4 animate-spin" />
-                </div>
-              </div>
-            )}
-          </div>
+                  <Trash2 className="size-3.5" />
+                </Button>
+              )}
+            </CardTitle>
+          </CardHeader>

-          {/* Input */}
-          <div className="border-t p-3">
-            <div className="flex gap-2">
-              <input
+          <CardContent className="p-0">
+            <ScrollArea className="h-80">
+              <div ref={scrollRef} className="space-y-3 p-3">
+                {messages.length === 0 && (
+                  <p className="text-center text-xs text-muted-foreground py-12">
+                    Ask me anything about the server!
+                  </p>
+                )}
+                {messages.map((msg) => (
+                  <div
+                    key={msg.timestamp + msg.role}
+                    className={cn(
+                      "flex items-start gap-2",
+                      msg.role === "user" && "flex-row-reverse",
+                    )}
+                  >
+                    <Avatar className="size-6 shrink-0">
+                      <AvatarFallback className="text-[10px] bg-muted">
+                        {msg.role === "user" ? (
+                          <User className="size-3" />
+                        ) : (
+                          <Bot className="size-3" />
+                        )}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div
+                      className={cn(
+                        "rounded-xl px-3 py-2 text-sm max-w-[80%] leading-relaxed",
+                        msg.role === "user"
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-muted/70",
+                      )}
+                    >
+                      {msg.content}
+                    </div>
+                  </div>
+                ))}
+                {sending && (
+                  <div className="flex items-start gap-2">
+                    <Avatar className="size-6 shrink-0">
+                      <AvatarFallback className="text-[10px] bg-muted">
+                        <Bot className="size-3" />
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="rounded-xl bg-muted/70 px-3 py-2">
+                      <Loader2 className="size-4 animate-spin text-muted-foreground" />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </CardContent>
+
+          <CardFooter className="border-t border-border/50 p-3">
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                handleSend();
+              }}
+              className="flex w-full gap-2"
+            >
+              <Input
                type="text"
                placeholder="Ask the mascot…"
                value={input}
                onChange={(e) => setInput(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleSend()}
-                className="flex-1 h-8 rounded-md border border-input bg-background px-2 text-sm"
                disabled={sending}
+                className="h-8 flex-1"
              />
-              <button
-                onClick={handleSend}
+              <Button
+                type="submit"
+                size="icon-sm"
                disabled={!input.trim() || sending}
-                className="inline-flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
              >
-                <Send className="size-4" />
-              </button>
-            </div>
-          </div>
-        </div>
+                {sending ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Send className="size-4" />
+                )}
+              </Button>
+            </form>
+          </CardFooter>
+        </Card>
      )}
    </>
  );
@@ -1,19 +1,21 @@
-import * as React from "react"
+import * as React from "react";

-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;

 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );

  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);

-  return !!isMobile
+  return !!isMobile;
 }
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";

 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }