PR.18 refactor/nav-layouts-toward-grok-way

refactor: adopt Grok-style layout with shadcn/ui sidebar

Author: michellepace

CLAUDE.md

@@ -26,6 +26,10 @@ npm run test:unit   # Vitest
 npm run test:e2e    # Playwright
 npm run test        # All tests (Vitest + Playwright)
 
+npm run analyse     # Bundle analyser UI (why is X bundled? bloat? splits?)
+
+fuser -k 3000/tcp 2>/dev/null; rm -f .next/dev/lock  # Kill dev server
+
 vercel list         # Recent deployments and status
 vercel env ls       # Check env vars are configured
 vercel whoami       # Verify CLI is authenticated

app/(root)/(no-right-sidebar)/layout.tsx

@@ -1,16 +1,39 @@
-import { LeftSidebar } from "@/components/navigation/left-sidebar";
-import { Navbar } from "@/components/navigation/navbar";
-import { SidebarProvider } from "@/components/sidebar-provider";
+import { cookies } from "next/headers";
+import { AppSidebar } from "@/components/app-sidebar";
+import { ContentTopBar } from "@/components/navigation/content-top-bar";
+import { MobileHeader } from "@/components/navigation/mobile-header";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import {
+  CONTENT_HORIZONTAL_PADDING,
+  cn,
+  MOBILE_HEADER_TOP_OFFSET,
+} from "@/lib/utils";
+
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
+  const cookieStore = await cookies();
+  const defaultOpen = cookieStore.get("sidebar_state")?.value !== "false";
 
-const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <SidebarProvider>
-      <div className="flex min-h-screen flex-col">
-        <Navbar />
-        <div className="flex flex-1">
-          <LeftSidebar />
-          <main className="flex-1">{children}</main>
-        </div>
+    <SidebarProvider defaultOpen={defaultOpen}>
+      {/* Mobile-only fixed header */}
+      <MobileHeader />
+
+      {/* Full-height sidebar */}
+      <AppSidebar />
+
+      {/* Content area */}
+      <div className="flex min-h-screen flex-1 flex-col">
+        {/* Desktop-only top bar */}
+        <ContentTopBar />
+        <main
+          className={cn(
+            "flex-1 pb-10 sm:pt-10",
+            MOBILE_HEADER_TOP_OFFSET,
+            CONTENT_HORIZONTAL_PADDING,
+          )}
+        >
+          {children}
+        </main>
       </div>
     </SidebarProvider>
   );