feat: rewrite dashboard layout with top nav, hidden sidebar, mascot, mini-player

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

@@ -2,17 +2,20 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Suspense } from "react";
-
-import { Chatbot } from "@/components/chatbot/chatbot";
-import { AppHeader } from "@/components/layout/app-header";
-import { AppSidebar } from "@/components/layout/app-sidebar";
+import { TopNav } from "@/components/layout/top-nav";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { WsProvider } from "@/lib/ws/context";
+import { MascotProvider } from "@/components/mascot/mascot-context";
+import { MascotContainer } from "@/components/mascot/mascot-container";
+import { MiniPlayer } from "@/components/media/mini-player";
+import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
+import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
+import { useState } from "react";
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 15_000,
+      staleTime: 10_000,
       retry: 1,
       refetchOnWindowFocus: false,
     },
@@ -24,28 +27,38 @@ export default function DashboardLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const [guildId, setGuildId] = useState("");
+
   return (
     <QueryClientProvider client={queryClient}>
       <WsProvider>
-        <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>
-          <MobileNav />
-        </div>
-        <Chatbot />
+        <MediaPlayerProvider>
+          <MascotProvider>
+            <div className="min-h-screen bg-canvas">
+              <TopNav />
+              <HiddenSidebar guildId={guildId} onGuildChange={(g) => setGuildId(g ?? "")} />
+
+              {/* 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>
+
+              <MobileNav />
+              <MiniPlayer />
+              <MascotContainer />
+            </div>
+          </MascotProvider>
+        </MediaPlayerProvider>
       </WsProvider>
     </QueryClientProvider>
   );