refactor: remove unused UI components and replace GlassCard with Card in voice components

- Deleted Item, Kbd, Marker, Message, NativeSelect, Questionnaire, Spinner components.
- Replaced GlassCard with Card in VoiceActivityTimeline, VoiceConnectionCard, ListenControl, MicControl, and SpeakerWaveform components.
- Introduced AppSidebar and ThemeToggle components for improved navigation and theme management.

services/frontend/src/app/(dashboard)/layout.tsx

@@ -7,10 +7,15 @@ import {
   ChatbotProvider,
   useChatbot,
 } from "@/components/chatbot/chatbot-context";
-import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
-import { MobileNav } from "@/components/layout/mobile-nav";
-import { TopNav } from "@/components/layout/top-nav";
+import { AppSidebar } from "@/components/layout/app-sidebar";
 import { MiniPlayer } from "@/components/media/mini-player";
+import { GuildSelector } from "@/components/shared/guild-selector";
+import { Separator } from "@/components/ui/separator";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
 import { useWebSocket, WsProvider } from "@/lib/ws/context";
 
@@ -69,29 +74,41 @@ export default function DashboardLayout({
           <ChatbotProvider>
             <ChatbotGuildSync guildId={guildId} />
             <ChatbotExpressionSync />
-            <div className="min-h-screen bg-canvas">
-              <TopNav />
-              <HiddenSidebar
-                guildId={guildId}
-                onGuildChange={(g) => setGuildId(g ?? "")}
-              />
+            <div className="min-h-svh bg-canvas">
+              <SidebarProvider>
+                <AppSidebar />
+                <SidebarInset className="gap-0">
+                  <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 bg-canvas">
+                    <SidebarTrigger className="-ml-1" />
+                    <Separator
+                      orientation="vertical"
+                      className="mr-2 h-6 max-md:hidden"
+                    />
+                    <div className="font-semibold max-md:hidden">Overview</div>
+                    <div className="ms-auto">
+                      <GuildSelector
+                        value={guildId}
+                        onChange={(g) => setGuildId(g ?? "")}
+                      />
+                    </div>
+                  </header>
 
-              {/* Sub-nav space — filled per-page */}
-              <div className="pt-11">
-                <main className="p-4 md:p-6 pb-24 md:pb-6 max-w-[1600px] mx-auto">
-                  <Suspense
-                    fallback={
-                      <div className="flex h-[60vh] items-center justify-center">
-                        <div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
-                      </div>
-                    }
-                  >
-                    {children}
-                  </Suspense>
-                </main>
-              </div>
+                  <main className="flex flex-1 flex-col gap-4 p-4 pb-28 md:p-6 lg:pb-8">
+                    <div className="mx-auto w-full max-w-[1440px]">
+                      <Suspense
+                        fallback={
+                          <div className="flex h-[60vh] items-center justify-center">
+                            <div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+                          </div>
+                        }
+                      >
+                        {children}
+                      </Suspense>
+                    </div>
+                  </main>
+                </SidebarInset>
+              </SidebarProvider>
 
-              <MobileNav />
               <MiniPlayer />
               <ChatbotContainer />
             </div>

services/frontend/src/app/(dashboard)/messages/view.tsx

@@ -3,8 +3,6 @@
 import { Flag, Image, Loader2, Search } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import { GlassCard } from "@/components/glass/card";
-import { GlassPanel } from "@/components/glass/panel";
 import { SubNav } from "@/components/layout/sub-nav";
 import { Lightbox } from "@/components/messages/lightbox";
 import { extractFirstImage } from "@/components/messages/message-card";
@@ -13,6 +11,7 @@ import { MessageList } from "@/components/messages/message-list";
 import { SearchOverlay } from "@/components/messages/search-overlay";
 import { EmptyState, ErrorState, LoadingSkeleton } from "@/components/shared";
 import { GuildSelector } from "@/components/shared/guild-selector";
+import { Card } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
@@ -218,12 +217,14 @@ export default function MessagesView({
           {detailId && (
             <div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
               {detailLoading ? (
-                <GlassPanel
-                  dense
-                  className="flex items-center justify-center py-12"
+                <Card
+                  className={cn(
+                    "flex items-center justify-center py-12",
+                    "[--card-spacing:0px]",
+                  )}
                 >
                   <Loader2 className="size-5 animate-spin text-text-secondary/60" />
-                </GlassPanel>
+                </Card>
               ) : detailMessage ? (
                 <div className="space-y-3">
                   <button
@@ -337,10 +338,14 @@ function ReviewList({
   return (
     <div className="space-y-2">
       {items.map((item) => (
-        <GlassCard
+        <Card
           key={item.id}
-          variant="danger"
-          className="cursor-pointer p-3"
+          className={cn(
+            "cursor-pointer p-3",
+            "border border-red-500/30 ring-red-500/20",
+            "[--card-spacing:0px]",
+            "rounded-2xl",
+          )}
           onClick={() => onSelect(item.id)}
         >
           <div className="flex items-start gap-2">
@@ -351,7 +356,7 @@ function ReviewList({
               </p>
             </div>
           </div>
-        </GlassCard>
+        </Card>
       ))}
       {items.length === 0 && (
         <EmptyState

services/frontend/src/app/globals.css

@@ -56,6 +56,16 @@
   /* Ring / focus outline for shadcn outline-ring utility */
   --color-ring: var(--color-primary);
 
+  /* Sidebar (shadcn) */
+  --color-sidebar: oklch(1 0 0 / 0.6);
+  --color-sidebar-foreground: var(--color-text-primary);
+  --color-sidebar-primary: var(--color-primary);
+  --color-sidebar-primary-foreground: var(--color-primary-foreground);
+  --color-sidebar-accent: oklch(0.93 0.01 250 / 0.7);
+  --color-sidebar-accent-foreground: var(--color-text-primary);
+  --color-sidebar-border: var(--color-border);
+  --color-sidebar-ring: var(--color-ring);
+
   /* Radius */
   --radius-card: 16px;
   --radius-panel: 12px;
@@ -102,6 +112,16 @@
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-ring: var(--color-primary);
+
+  /* Sidebar (shadcn) */
+  --color-sidebar: oklch(0.11 0.02 245 / 0.55);
+  --color-sidebar-foreground: var(--color-text-primary);
+  --color-sidebar-primary: var(--color-primary);
+  --color-sidebar-primary-foreground: var(--color-primary-foreground);
+  --color-sidebar-accent: oklch(0.17 0.02 245 / 0.7);
+  --color-sidebar-accent-foreground: var(--color-text-primary);
+  --color-sidebar-border: var(--color-border);
+  --color-sidebar-ring: var(--color-ring);
 }
 
 @layer utilities {

services/frontend/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
 
@@ -30,7 +31,15 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className="min-h-full flex flex-col">
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          enableColorScheme={false}
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
         <Toaster position="bottom-right" richColors closeButton />
       </body>
     </html>