feat: add app header, sidebar, and mobile navigation components

- Implemented AppHeader component with theme toggle and connection status.
- Created AppSidebar component for navigation with connection status indicator.
- Added MobileNav component for mobile navigation with responsive design.
- Introduced shared components: DetailStat, EmptyState, ErrorState, LoadingSkeleton, and StatCard for consistent UI.
- Developed hooks for async data fetching: useAsync, useConfig, useDashboard, useGuilds, useMedia, useMessages, useRecordings, and useVoice.
- Added chatbot API functions for sending messages and managing chat history.

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

@@ -2,24 +2,12 @@
 
 import { Suspense } from "react";
 
-import { Header } from "@/components/layout/header";
-import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
-import { Sidebar } from "@/components/layout/sidebar";
-import { MascotChatbot } from "@/components/mascot/mascot-chatbot";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Chatbot } from "@/components/chatbot/chatbot";
+import { AppHeader } from "@/components/layout/app-header";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { MobileNav } from "@/components/layout/mobile-nav";
 import { WsProvider } from "@/lib/ws/context";
 
-function LoadingFallback() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <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>
-  );
-}
-
 export default function DashboardLayout({
   children,
 }: {
@@ -27,19 +15,25 @@ export default function DashboardLayout({
 }) {
   return (
     <WsProvider>
-      <SidebarProvider defaultOpen={true}>
-        <div className="flex min-h-screen bg-background">
-          <Sidebar />
-          <SidebarInset className="flex flex-col">
-            <Header />
-            <main className="flex-1 p-4 md:p-6 pb-20 md:pb-6 animate-fade-in-up">
-              <Suspense fallback={<LoadingFallback />}>{children}</Suspense>
-            </main>
-          </SidebarInset>
-          <MobileTabBar />
+      <div className="flex h-screen overflow-hidden bg-background">
+        <AppSidebar />
+        <div className="flex flex-1 flex-col min-w-0">
+          <AppHeader />
+          <main className="flex-1 overflow-y-auto p-4 md:p-6 pb-20 md:pb-6">
+            <Suspense
+              fallback={
+                <div className="flex h-full items-center justify-center">
+                  <div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+                </div>
+              }
+            >
+              {children}
+            </Suspense>
+          </main>
         </div>
-      </SidebarProvider>
-      <MascotChatbot />
+        <MobileNav />
+      </div>
+      <Chatbot />
     </WsProvider>
   );
 }