From 722c479e49beceff4047fa0412a6ef202c129e97 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Wed, 24 Dec 2025 00:27:52 +0400
Subject: [PATCH 1/6] refactor: flatten route groups into single root layout

Layout Structure:
- Remove (no-right-sidebar) and (with-right-sidebar) route groups
- Move pages directly under app/(root)/
- Delete redundant nested layout files

Root Layout:
- Add main content padding directly to root layout

Both nested layouts had identical styling, making the route group separation unnecessary.
This simplifies the directory structure and consolidates layout logic in one place.
---
 app/(root)/(no-right-sidebar)/layout.tsx              |  7 -------
 app/(root)/(with-right-sidebar)/layout.tsx            | 11 -----------
 .../{(with-right-sidebar) => }/ask-question/page.tsx  |  0
 .../{(with-right-sidebar) => }/collections/page.tsx   |  0
 .../{(no-right-sidebar) => }/community/page.tsx       |  0
 app/(root)/{(no-right-sidebar) => }/jobs/page.tsx     |  0
 app/(root)/layout.tsx                                 |  2 +-
 app/(root)/{(with-right-sidebar) => }/page.tsx        |  0
 app/(root)/{(no-right-sidebar) => }/profile/page.tsx  |  0
 app/(root)/{(no-right-sidebar) => }/tags/page.tsx     |  0
 10 files changed, 1 insertion(+), 19 deletions(-)
 delete mode 100644 app/(root)/(no-right-sidebar)/layout.tsx
 delete mode 100644 app/(root)/(with-right-sidebar)/layout.tsx
 rename app/(root)/{(with-right-sidebar) => }/ask-question/page.tsx (100%)
 rename app/(root)/{(with-right-sidebar) => }/collections/page.tsx (100%)
 rename app/(root)/{(no-right-sidebar) => }/community/page.tsx (100%)
 rename app/(root)/{(no-right-sidebar) => }/jobs/page.tsx (100%)
 rename app/(root)/{(with-right-sidebar) => }/page.tsx (100%)
 rename app/(root)/{(no-right-sidebar) => }/profile/page.tsx (100%)
 rename app/(root)/{(no-right-sidebar) => }/tags/page.tsx (100%)

diff --git a/app/(root)/(no-right-sidebar)/layout.tsx b/app/(root)/(no-right-sidebar)/layout.tsx
deleted file mode 100644
index 34cae74..0000000
--- a/app/(root)/(no-right-sidebar)/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// Full-width layout without right sidebar
-// Layout: [LeftSidebar (sticky)] [Main Content]
-const NoRightSidebarLayout = ({ children }: { children: React.ReactNode }) => {
-  return <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>;
-};
-
-export default NoRightSidebarLayout;
diff --git a/app/(root)/(with-right-sidebar)/layout.tsx b/app/(root)/(with-right-sidebar)/layout.tsx
deleted file mode 100644
index ad0517f..0000000
--- a/app/(root)/(with-right-sidebar)/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-// TODO: Add <RightSidebar> for tag widgets, hot questions, etc.
-// Layout: [LeftSidebar (sticky)] [Main Content] [RightSidebar]
-const WithRightSidebarLayout = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  return <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>;
-};
-
-export default WithRightSidebarLayout;
diff --git a/app/(root)/(with-right-sidebar)/ask-question/page.tsx b/app/(root)/ask-question/page.tsx
similarity index 100%
rename from app/(root)/(with-right-sidebar)/ask-question/page.tsx
rename to app/(root)/ask-question/page.tsx
diff --git a/app/(root)/(with-right-sidebar)/collections/page.tsx b/app/(root)/collections/page.tsx
similarity index 100%
rename from app/(root)/(with-right-sidebar)/collections/page.tsx
rename to app/(root)/collections/page.tsx
diff --git a/app/(root)/(no-right-sidebar)/community/page.tsx b/app/(root)/community/page.tsx
similarity index 100%
rename from app/(root)/(no-right-sidebar)/community/page.tsx
rename to app/(root)/community/page.tsx
diff --git a/app/(root)/(no-right-sidebar)/jobs/page.tsx b/app/(root)/jobs/page.tsx
similarity index 100%
rename from app/(root)/(no-right-sidebar)/jobs/page.tsx
rename to app/(root)/jobs/page.tsx
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index b4916a3..89d818d 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -9,7 +9,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
         <Navbar />
         <div className="flex flex-1">
           <LeftSidebar />
-          <main className="flex-1">{children}</main>
+          <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>
         </div>
       </div>
     </SidebarProvider>
diff --git a/app/(root)/(with-right-sidebar)/page.tsx b/app/(root)/page.tsx
similarity index 100%
rename from app/(root)/(with-right-sidebar)/page.tsx
rename to app/(root)/page.tsx
diff --git a/app/(root)/(no-right-sidebar)/profile/page.tsx b/app/(root)/profile/page.tsx
similarity index 100%
rename from app/(root)/(no-right-sidebar)/profile/page.tsx
rename to app/(root)/profile/page.tsx
diff --git a/app/(root)/(no-right-sidebar)/tags/page.tsx b/app/(root)/tags/page.tsx
similarity index 100%
rename from app/(root)/(no-right-sidebar)/tags/page.tsx
rename to app/(root)/tags/page.tsx

From 2982f5408e27549995417adf5930601d29c844ed Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Thu, 25 Dec 2025 03:54:33 +0400
Subject: [PATCH 2/6] chore: add shadcn/ui sidebar component with dependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Components:
- Add sidebar.tsx, input.tsx, separator.tsx, skeleton.tsx, tooltip.tsx
- Add use-mobile.ts hook for responsive behaviour
- Add biome-ignore comments for shadcn/ui lint compatibility

Configuration:
- Fix components.json CSS path from globals.css to app/globals.css
- Install @radix-ui/react-separator and @radix-ui/react-tooltip

The CSS path correction resolves Tailwind IntelliSense warnings in VS Code.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components.json             |   2 +-
 components/ui/input.tsx     |  21 ++
 components/ui/separator.tsx |  28 ++
 components/ui/sidebar.tsx   | 728 ++++++++++++++++++++++++++++++++++++
 components/ui/skeleton.tsx  |  13 +
 components/ui/tooltip.tsx   |  61 +++
 hooks/use-mobile.ts         |  21 ++
 package-lock.json           | 258 +++++++++++++
 package.json                |   2 +
 9 files changed, 1133 insertions(+), 1 deletion(-)
 create mode 100644 components/ui/input.tsx
 create mode 100644 components/ui/separator.tsx
 create mode 100644 components/ui/sidebar.tsx
 create mode 100644 components/ui/skeleton.tsx
 create mode 100644 components/ui/tooltip.tsx
 create mode 100644 hooks/use-mobile.ts

diff --git a/components.json b/components.json
index ce09c89..b27c50f 100644
--- a/components.json
+++ b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "globals.css",
+    "css": "app/globals.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..73ea867
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..50733e0
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..3399bdc
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,728 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      // biome-ignore lint/suspicious/noDocumentCookie: shadcn/ui component uses document.cookie for sidebar state persistence
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: shadcn/ui includes setOpenMobile for clarity
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: shadcn/ui includes setOpenMobile for clarity
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..0168998
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..8e35f88
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
new file mode 100644
index 0000000..a93d583
--- /dev/null
+++ b/hooks/use-mobile.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    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);
+  }, []);
+
+  return !!isMobile;
+}
diff --git a/package-lock.json b/package-lock.json
index 4fc03fe..b8ecd22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,9 @@
         "@clerk/nextjs": "^6.36.5",
         "@clerk/themes": "^2.4.46",
         "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@vercel/analytics": "^1.6.1",
         "@vercel/speed-insights": "^1.3.1",
         "class-variance-authority": "^0.7.1",
@@ -1323,6 +1325,44 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
@@ -2033,6 +2073,29 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -2202,6 +2265,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
@@ -2291,6 +2386,52 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
+      "integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
@@ -2309,6 +2450,58 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -2394,6 +2587,71 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
diff --git a/package.json b/package.json
index 49fded4..9487de6 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,9 @@
     "@clerk/nextjs": "^6.36.5",
     "@clerk/themes": "^2.4.46",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
     "class-variance-authority": "^0.7.1",

From d9ea9288b81bea111cfa46dc12021880aa1bc462 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Thu, 25 Dec 2025 07:45:01 +0400
Subject: [PATCH 3/6] refactor: migrate sidebar to shadcn/ui with cookie
 persistence
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar:
- Replace custom sidebar-provider with shadcn/ui SidebarProvider
- Create AppSidebar using SidebarHeader, SidebarContent, SidebarFooter, SidebarRail
- Add cookie-based state persistence (sidebar_state) for SSR-correct initial render
- Rename sidebar-toggle to sidebar-toggle-button, use shadcn useSidebar hook

Navigation:
- Simplify nav-link to mobile-only (desktop uses SidebarMenuButton directly)
- Extract shared utilities: isRouteActive(), getNavIconClasses(), NAV_LINK_*_CLASSES

Configuration:
- Adjust sidebar width to 14rem expanded, 3rem collapsed
- Change breakpoint from md to sm for sidebar visibility
- Set default theme to dark

Replaces localStorage-based state with cookie persistence, eliminating hydration
mismatches. Adds keyboard shortcut (Ctrl+B), edge-click rail toggle, and tooltip
support on collapsed menu items.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/(root)/layout.tsx                         |  16 ++-
 app/layout.tsx                                |   2 +-
 components/app-sidebar.tsx                    | 127 ++++++++++++++++++
 components/navigation/left-sidebar.tsx        |  59 --------
 components/navigation/nav-link.tsx            |  50 +++----
 ...r-toggle.tsx => sidebar-toggle-button.tsx} |  19 +--
 components/sidebar-provider.tsx               |  54 --------
 components/ui/sidebar.tsx                     |   6 +-
 e2e/navigation.spec.ts                        |   4 +-
 hooks/use-mobile.ts                           |   2 +-
 lib/utils.ts                                  |  20 +++
 11 files changed, 188 insertions(+), 171 deletions(-)
 create mode 100644 components/app-sidebar.tsx
 delete mode 100644 components/navigation/left-sidebar.tsx
 rename components/navigation/{sidebar-toggle.tsx => sidebar-toggle-button.tsx} (57%)
 delete mode 100644 components/sidebar-provider.tsx

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 89d818d..2746f15 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -1,14 +1,18 @@
-import { LeftSidebar } from "@/components/navigation/left-sidebar";
+import { cookies } from "next/headers";
+import { AppSidebar } from "@/components/app-sidebar";
 import { Navbar } from "@/components/navigation/navbar";
-import { SidebarProvider } from "@/components/sidebar-provider";
+import { SidebarProvider } from "@/components/ui/sidebar";
+
+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">
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <div className="flex min-h-screen w-full flex-col">
         <Navbar />
         <div className="flex flex-1">
-          <LeftSidebar />
+          <AppSidebar />
           <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>
         </div>
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 104addc..53b9a4c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
           <body className="flex min-h-full flex-col antialiased">
             <ThemeProvider
               attribute="class"
-              defaultTheme="system"
+              defaultTheme="dark"
               enableSystem
               disableTransitionOnChange
             >
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
new file mode 100644
index 0000000..e7ed48d
--- /dev/null
+++ b/components/app-sidebar.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { SignedIn, UserButton } from "@clerk/nextjs";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ThemeLogo } from "@/components/navigation/full-logo";
+import { NAV_LINKS } from "@/components/navigation/nav-links.constants";
+import { SidebarToggleButton } from "@/components/navigation/sidebar-toggle-button";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import {
+  cn,
+  getNavIconClasses,
+  isRouteActive,
+  NAV_LINK_ACTIVE_CLASSES,
+  NAV_LINK_INACTIVE_CLASSES,
+} from "@/lib/utils";
+
+// Navbar height minus 1px overlap to hide navbar shadow-sm
+const SIDEBAR_TOP_OFFSET = 72;
+
+export function AppSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <Sidebar
+      id="app-sidebar"
+      collapsible="icon"
+      style={{
+        top: `${SIDEBAR_TOP_OFFSET}px`,
+        height: `calc(100svh - ${SIDEBAR_TOP_OFFSET}px)`,
+      }}
+    >
+      {/* Header: Logo */}
+      <SidebarHeader className="p-2">
+        <Link
+          href="/"
+          aria-label="DevFlow home"
+          className="flex items-center group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center"
+        >
+          {/* Icon-only when collapsed */}
+          {/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */}
+          {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}
+          <img
+            src="/images/site-logo.svg"
+            className="size-7 group-data-[collapsible=icon]:block hidden"
+          />
+          {/* Full logo when expanded */}
+          <ThemeLogo className="group-data-[collapsible=icon]:hidden" />
+        </Link>
+      </SidebarHeader>
+
+      {/* Main Navigation */}
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu className="gap-3">
+              {NAV_LINKS.map((link) => {
+                const isActive = isRouteActive(pathname, link.route);
+
+                return (
+                  <SidebarMenuItem key={link.route}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={isActive}
+                      tooltip={link.label}
+                      className={cn(
+                        "rounded-lg",
+                        isActive
+                          ? `${NAV_LINK_ACTIVE_CLASSES} hover:bg-(image:--gradient-primary) hover:text-primary-foreground`
+                          : NAV_LINK_INACTIVE_CLASSES,
+                      )}
+                    >
+                      <Link href={link.route}>
+                        <Image
+                          src={link.imgURL}
+                          alt=""
+                          width={20}
+                          height={20}
+                          className={getNavIconClasses(isActive)}
+                        />
+                        <span>{link.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      {/* Footer: UserButton + Toggle */}
+      <SidebarFooter className="p-2">
+        <div
+          className={cn(
+            "flex items-center gap-2",
+            // Expanded: horizontal row with space between
+            "justify-between",
+            // Collapsed (icon mode): vertical stack
+            "group-data-[collapsible=icon]:flex-col",
+            "group-data-[collapsible=icon]:justify-start",
+          )}
+        >
+          <SignedIn>
+            <UserButton />
+          </SignedIn>
+          <SidebarToggleButton />
+        </div>
+      </SidebarFooter>
+
+      {/* Edge-click rail to toggle */}
+      <SidebarRail />
+    </Sidebar>
+  );
+}
diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx
deleted file mode 100644
index a596b72..0000000
--- a/components/navigation/left-sidebar.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client";
-
-import { SignedIn, UserButton } from "@clerk/nextjs";
-import { NavLink } from "@/components/navigation/nav-link";
-import { NAV_LINKS } from "@/components/navigation/nav-links.constants";
-import { SidebarToggle } from "@/components/navigation/sidebar-toggle";
-import { useSidebar } from "@/components/sidebar-provider";
-import { cn } from "@/lib/utils";
-
-// Navbar height minus overlap to hide shadow-sm
-const SIDEBAR_TOP_OFFSET = 72; // 73px navbar - 1px overlap
-
-export function LeftSidebar() {
-  const { isCollapsed } = useSidebar();
-
-  return (
-    <aside
-      style={{
-        top: SIDEBAR_TOP_OFFSET,
-        height: `calc(100vh - ${SIDEBAR_TOP_OFFSET}px)`,
-      }}
-      className={cn(
-        "sticky z-50 hidden flex-col justify-between overflow-y-auto border-r border-sidebar-border bg-sidebar p-4 transition-[width] duration-500 ease-in-out sm:flex",
-        isCollapsed ? "w-16" : "w-56",
-      )}
-    >
-      {/* Top: Navigation Links */}
-      <nav
-        className={cn("flex flex-col gap-3", isCollapsed && "items-center")}
-        aria-label="Main navigation"
-      >
-        {NAV_LINKS.map((link) => (
-          <NavLink
-            key={link.route}
-            imgURL={link.imgURL}
-            route={link.route}
-            label={link.label}
-            variant="rail"
-          />
-        ))}
-      </nav>
-
-      {/* Bottom: User Avatar + Toggle */}
-      <div
-        className={cn(
-          "flex items-center gap-2",
-          // Collapsed: vertical stack (UserButton above, toggle below)
-          // Expanded: horizontal row (UserButton left, toggle right)
-          isCollapsed ? "flex-col" : "justify-between",
-        )}
-      >
-        <SignedIn>
-          <UserButton />
-        </SignedIn>
-        <SidebarToggle />
-      </div>
-    </aside>
-  );
-}
diff --git a/components/navigation/nav-link.tsx b/components/navigation/nav-link.tsx
index b9cb35f..3ab89dd 100644
--- a/components/navigation/nav-link.tsx
+++ b/components/navigation/nav-link.tsx
@@ -4,60 +4,46 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { NavLink as NavLinkType } from "@/components/navigation/nav-links.constants";
-import { useSidebar } from "@/components/sidebar-provider";
-import { cn } from "@/lib/utils";
+import {
+  cn,
+  getNavIconClasses,
+  isRouteActive,
+  NAV_LINK_ACTIVE_CLASSES,
+  NAV_LINK_INACTIVE_CLASSES,
+} from "@/lib/utils";
 
 type NavLinkProps = NavLinkType & {
   /** Passed by SheetClose asChild to close the sheet on click */
   onClick?: () => void;
-  /**
-   * - "rail": Sidebar nav — icon-only when collapsed, icon + label when expanded
-   * - "mobile": Touch-optimised — always full with generous padding (px-4 py-3)
-   */
-  variant?: "rail" | "mobile";
 };
 
-export function NavLink({
-  imgURL,
-  route,
-  label,
-  onClick,
-  variant = "mobile",
-}: NavLinkProps) {
+/**
+ * Mobile navigation link for Sheet menu.
+ * Desktop sidebar uses SidebarMenuButton directly in AppSidebar.
+ */
+export function NavLink({ imgURL, route, label, onClick }: NavLinkProps) {
   const pathname = usePathname();
-  const { isCollapsed } = useSidebar();
-  const isActive = pathname === route || pathname.startsWith(`${route}/`);
-
-  const isRail = variant === "rail";
-  // For rail variant, show icon-only if collapsed, icon+label if expanded
-  const showIconOnly = isRail && isCollapsed;
+  const isActive = isRouteActive(pathname, route);
 
   return (
     <Link
       href={route}
       onClick={onClick}
       className={cn(
-        "flex items-center rounded-lg",
+        "flex items-center gap-3 rounded-lg px-4 py-3",
         isActive
-          ? "bg-(image:--gradient-primary) font-bold text-primary-foreground"
-          : "font-medium text-sidebar-foreground hover:bg-muted",
-        // Rail: icon-only when collapsed, icon+label when expanded
-        isRail
-          ? showIconOnly
-            ? "size-10 justify-center" // No gap needed - icon only
-            : "w-full justify-start gap-3 p-2" // Gap for icon-label spacing
-          : "gap-3 px-4 py-3", // Mobile: gap for consistency
+          ? NAV_LINK_ACTIVE_CLASSES
+          : `${NAV_LINK_INACTIVE_CLASSES} text-sidebar-foreground hover:bg-muted`,
       )}
-      aria-label={showIconOnly ? label : undefined}
     >
       <Image
         src={imgURL}
         alt=""
         width={20}
         height={20}
-        className={cn(!isActive && "invert-colors", "shrink-0")}
+        className={getNavIconClasses(isActive)}
       />
-      <span className={cn(showIconOnly && "sr-only")}>{label}</span>
+      <span>{label}</span>
     </Link>
   );
 }
diff --git a/components/navigation/sidebar-toggle.tsx b/components/navigation/sidebar-toggle-button.tsx
similarity index 57%
rename from components/navigation/sidebar-toggle.tsx
rename to components/navigation/sidebar-toggle-button.tsx
index 49ca41c..9221c6d 100644
--- a/components/navigation/sidebar-toggle.tsx
+++ b/components/navigation/sidebar-toggle-button.tsx
@@ -1,33 +1,26 @@
 "use client";
 
 import { ChevronsLeft, ChevronsRight } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useSidebar } from "@/components/sidebar-provider";
 import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
 
-export function SidebarToggle() {
-  const { isCollapsed, toggle } = useSidebar();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
-  // Render placeholder during SSR to prevent hydration mismatch
-  if (!mounted) {
-    return <div className="size-10" aria-hidden="true" />;
-  }
+export function SidebarToggleButton() {
+  const { state, toggleSidebar } = useSidebar();
+  const isCollapsed = state === "collapsed";
 
   return (
     <Button
       variant="ghost"
       size="icon-lg"
-      onClick={toggle}
+      onClick={toggleSidebar}
       className={cn(
         "shrink-0 rounded-full text-sidebar-foreground",
         !isCollapsed && "bg-muted",
       )}
       aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
       aria-expanded={!isCollapsed}
+      aria-controls="app-sidebar"
     >
       {isCollapsed ? (
         <ChevronsRight className="size-5" />
diff --git a/components/sidebar-provider.tsx b/components/sidebar-provider.tsx
deleted file mode 100644
index 337a029..0000000
--- a/components/sidebar-provider.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState } from "react";
-
-type SidebarContextType = {
-  isCollapsed: boolean;
-  toggle: () => void;
-};
-
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
-
-const STORAGE_KEY = "devflow-sidebar-collapsed";
-const LG_BREAKPOINT = 1024; // Tailwind's lg breakpoint
-
-export function SidebarProvider({ children }: { children: React.ReactNode }) {
-  // Default to expanded (false) - same as server render
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  // Set initial state after mount: user preference > responsive default
-  useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
-
-    if (stored !== null) {
-      // User preference takes priority
-      setIsCollapsed(stored === "true");
-    } else {
-      // No preference: collapse on smaller screens, expand on lg+
-      setIsCollapsed(window.innerWidth < LG_BREAKPOINT);
-    }
-  }, []);
-
-  const toggle = () => {
-    setIsCollapsed((prev) => {
-      const next = !prev;
-      localStorage.setItem(STORAGE_KEY, String(next));
-      return next;
-    });
-  };
-
-  // Always render children - SSR renders with default state (expanded)
-  return (
-    <SidebarContext.Provider value={{ isCollapsed, toggle }}>
-      {children}
-    </SidebarContext.Provider>
-  );
-}
-
-export function useSidebar() {
-  const context = useContext(SidebarContext);
-  if (context === undefined) {
-    throw new Error("useSidebar must be used within SidebarProvider");
-  }
-  return context;
-}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 3399bdc..39ddbb2 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -26,7 +26,7 @@ import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH = "14rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -209,7 +209,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer text-sidebar-foreground hidden sm:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -231,7 +231,7 @@ function Sidebar({
       <div
         data-slot="sidebar-container"
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear sm:flex",
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
index 5b6cced..21a0124 100644
--- a/e2e/navigation.spec.ts
+++ b/e2e/navigation.spec.ts
@@ -9,8 +9,8 @@ test.describe("Navigation - Desktop", () => {
     await page.goto("/");
 
     for (const link of NAV_LINKS) {
-      // Desktop sidebar links are always visible
-      const navLink = page.getByRole("link", { name: link.label });
+      // Desktop sidebar links are always visible (exact: true avoids matching "DevFlow home" logo link)
+      const navLink = page.getByRole("link", { name: link.label, exact: true });
       await navLink.click();
       await expect(page).toHaveURL(link.route);
     }
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
index a93d583..97770e2 100644
--- a/hooks/use-mobile.ts
+++ b/hooks/use-mobile.ts
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 640; // tailwind sm breakpoint
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
diff --git a/lib/utils.ts b/lib/utils.ts
index 365058c..ec45c3b 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -4,3 +4,23 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Check if a route is active (exact match or nested route).
+ * Used by navigation components for active state styling.
+ */
+export function isRouteActive(pathname: string, route: string): boolean {
+  return pathname === route || pathname.startsWith(`${route}/`);
+}
+
+// Navigation styling constants - shared between desktop sidebar and mobile nav
+export const NAV_LINK_ACTIVE_CLASSES =
+  "bg-(image:--gradient-primary) font-bold text-primary-foreground";
+export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
+
+/**
+ * Get icon classes for navigation items (handles inversion for inactive state).
+ */
+export function getNavIconClasses(isActive: boolean): string {
+  return cn(!isActive && "invert-colors", "shrink-0");
+}

From 84246dcbbd7ed93a615eb9974fda2dec60ddf79a Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Thu, 25 Dec 2025 09:26:04 +0400
Subject: [PATCH 4/6] refactor: adopt Grok-style layout with full-height
 sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigation:
- Delete `navbar.tsx` in favour of split desktop/mobile headers
- Add `content-top-bar.tsx` for desktop (sticky, inside content area)
- Add `mobile-header.tsx` for mobile (fixed, viewport-wide)
- Make sidebar full viewport height (remove 72px offset)

Theming:
- Add `HEADER_HEIGHT`, `CONTENT_HORIZONTAL_PADDING`, `MOBILE_HEADER_TOP_OFFSET` to utils
- Add tooltip variants (default, sidebar) using class-variance-authority
- Reduce logo height from 7 to 6 across components

Tests:
- Add exact: true to navigation link selectors to avoid logo matches

Moves the sidebar flush with viewport top while desktop search/auth controls shift
into a content-area top bar. Mobile retains fixed header with hamburger menu.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CLAUDE.md                                 |   2 +
 app/(root)/layout.tsx                     |  33 +++++++--
 components/app-sidebar.tsx                |  22 ++----
 components/navigation/content-top-bar.tsx |  34 +++++++++
 components/navigation/full-logo.tsx       |   2 +-
 components/navigation/mobile-header.tsx   |  28 +++++++
 components/navigation/mobile-nav.tsx      |   2 +-
 components/navigation/navbar.tsx          |  49 -------------
 components/ui/sidebar.tsx                 |   1 +
 components/ui/tooltip.tsx                 |  42 +++++++++--
 e2e/navigation.spec.ts                    |  22 ++++--
 lib/utils.ts                              |   5 ++
 x_docs/figma/grok-screenshot.jpg          | Bin 0 -> 45983 bytes
 x_docs/mine/2025-12-25-layout-refactor.md |  85 ++++++++++++++++++++++
 14 files changed, 240 insertions(+), 87 deletions(-)
 create mode 100644 components/navigation/content-top-bar.tsx
 create mode 100644 components/navigation/mobile-header.tsx
 delete mode 100644 components/navigation/navbar.tsx
 create mode 100755 x_docs/figma/grok-screenshot.jpg
 create mode 100644 x_docs/mine/2025-12-25-layout-refactor.md

diff --git a/CLAUDE.md b/CLAUDE.md
index e41422b..702154e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -26,6 +26,8 @@ npm run test:unit   # Vitest
 npm run test:e2e    # Playwright
 npm run test        # All tests (Vitest + Playwright)
 
+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
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 2746f15..f812917 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -1,7 +1,13 @@
 import { cookies } from "next/headers";
 import { AppSidebar } from "@/components/app-sidebar";
-import { Navbar } from "@/components/navigation/navbar";
+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();
@@ -9,12 +15,25 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
 
   return (
     <SidebarProvider defaultOpen={defaultOpen}>
-      <div className="flex min-h-screen w-full flex-col">
-        <Navbar />
-        <div className="flex flex-1">
-          <AppSidebar />
-          <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>
-        </div>
+      {/* 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>
   );
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index e7ed48d..c952b51 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -27,34 +27,24 @@ import {
   NAV_LINK_INACTIVE_CLASSES,
 } from "@/lib/utils";
 
-// Navbar height minus 1px overlap to hide navbar shadow-sm
-const SIDEBAR_TOP_OFFSET = 72;
-
 export function AppSidebar() {
   const pathname = usePathname();
 
   return (
-    <Sidebar
-      id="app-sidebar"
-      collapsible="icon"
-      style={{
-        top: `${SIDEBAR_TOP_OFFSET}px`,
-        height: `calc(100svh - ${SIDEBAR_TOP_OFFSET}px)`,
-      }}
-    >
-      {/* Header: Logo */}
-      <SidebarHeader className="p-2">
+    <Sidebar id="app-sidebar" collapsible="icon">
+      {/* Header: Logo - h-14 matches ContentTopBar height */}
+      <SidebarHeader className="h-14 flex-row items-center px-3">
         <Link
           href="/"
-          aria-label="DevFlow home"
-          className="flex items-center group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center"
+          aria-label="DevFlow sidebar logo"
+          className="flex items-center group-data-[collapsible=icon]:size-6 group-data-[collapsible=icon]:justify-center"
         >
           {/* Icon-only when collapsed */}
           {/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */}
           {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}
           <img
             src="/images/site-logo.svg"
-            className="size-7 group-data-[collapsible=icon]:block hidden"
+            className="size-6 group-data-[collapsible=icon]:block hidden"
           />
           {/* Full logo when expanded */}
           <ThemeLogo className="group-data-[collapsible=icon]:hidden" />
diff --git a/components/navigation/content-top-bar.tsx b/components/navigation/content-top-bar.tsx
new file mode 100644
index 0000000..e05e16c
--- /dev/null
+++ b/components/navigation/content-top-bar.tsx
@@ -0,0 +1,34 @@
+import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
+import { ThemeToggle } from "@/components/navigation/theme-toggle";
+import { Button } from "@/components/ui/button";
+import { CONTENT_HORIZONTAL_PADDING, cn, HEADER_HEIGHT } from "@/lib/utils";
+
+export function ContentTopBar() {
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex",
+        HEADER_HEIGHT,
+        CONTENT_HORIZONTAL_PADDING,
+      )}
+    >
+      {/* Left: Search - grows and centres */}
+      <div className="flex flex-1 justify-center">
+        <p className="text-muted-foreground">Global Search</p>
+      </div>
+
+      {/* Right: Theme + Auth - fixed width */}
+      <div className="flex flex-none items-center gap-2">
+        <ThemeToggle />
+        <SignedOut>
+          <SignInButton>
+            <Button variant="ghost">Sign in</Button>
+          </SignInButton>
+          <SignUpButton>
+            <Button>Sign up</Button>
+          </SignUpButton>
+        </SignedOut>
+      </div>
+    </header>
+  );
+}
diff --git a/components/navigation/full-logo.tsx b/components/navigation/full-logo.tsx
index 41c5735..0a91628 100644
--- a/components/navigation/full-logo.tsx
+++ b/components/navigation/full-logo.tsx
@@ -17,7 +17,7 @@ export function ThemeLogo({ className }: ThemeLogoProps) {
     <span
       style={{ aspectRatio: `${LOGO_WIDTH}/${LOGO_HEIGHT}` }}
       className={cn(
-        "h-7 bg-(image:--logo-full-themed) bg-contain bg-no-repeat",
+        "h-6 bg-(image:--logo-full-themed) bg-contain bg-no-repeat",
         className,
       )}
       role="img"
diff --git a/components/navigation/mobile-header.tsx b/components/navigation/mobile-header.tsx
new file mode 100644
index 0000000..52df6f8
--- /dev/null
+++ b/components/navigation/mobile-header.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { MobileNav } from "@/components/navigation/mobile-nav";
+import { ThemeToggle } from "@/components/navigation/theme-toggle";
+import { cn, HEADER_HEIGHT } from "@/lib/utils";
+
+export function MobileHeader() {
+  return (
+    <header
+      className={cn(
+        "fixed top-0 z-50 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
+        HEADER_HEIGHT,
+      )}
+    >
+      {/* Left: Logo icon */}
+      <Link href="/" aria-label="DevFlow mobile logo">
+        {/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */}
+        {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}
+        <img src="/images/site-logo.svg" className="size-7" />
+      </Link>
+
+      {/* Right: Theme toggle + hamburger */}
+      <div className="flex items-center gap-2">
+        <ThemeToggle />
+        <MobileNav />
+      </div>
+    </header>
+  );
+}
diff --git a/components/navigation/mobile-nav.tsx b/components/navigation/mobile-nav.tsx
index 736608e..ebf6fd0 100644
--- a/components/navigation/mobile-nav.tsx
+++ b/components/navigation/mobile-nav.tsx
@@ -75,7 +75,7 @@ export function MobileNav() {
           </SheetClose>
 
           {/* Navigation Links */}
-          <nav className="flex flex-col gap-3 pt-9">
+          <nav className="flex flex-col gap-3 pt-4">
             {NAV_LINKS.map((link) => (
               <SheetClose key={link.route} asChild>
                 <NavLink
diff --git a/components/navigation/navbar.tsx b/components/navigation/navbar.tsx
deleted file mode 100644
index ad27520..0000000
--- a/components/navigation/navbar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
-import Link from "next/link";
-import { ThemeLogo } from "@/components/navigation/full-logo";
-import { MobileNav } from "@/components/navigation/mobile-nav";
-import { ThemeToggle } from "@/components/navigation/theme-toggle";
-import { Button } from "@/components/ui/button";
-
-export const Navbar = () => (
-  <nav
-    aria-label="Primary navigation"
-    className="sticky top-0 z-50 flex w-full items-center justify-between bg-sidebar py-4 pl-4 pr-6 shadow-sm md:pr-8 lg:pr-12"
-  >
-    {/* Left: Logo (responsive) */}
-    <Link href="/" className="flex items-center">
-      {/* Mobile: icon only */}
-      {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}
-      <img
-        src="/images/site-logo.svg"
-        alt="DevFlow logo"
-        className="size-7 sm:hidden"
-      />
-      {/* Desktop: full themed logo */}
-      <ThemeLogo className="hidden sm:block" />
-    </Link>
-
-    {/* Centre: Global Search placeholder (md+ only) */}
-    <p className="absolute left-1/2 hidden -translate-x-1/2 text-sidebar-foreground md:block">
-      Global Search
-    </p>
-
-    {/* Right: Theme toggle + Auth + Mobile nav */}
-    <div className="flex items-center gap-2">
-      <ThemeToggle />
-      {/* Desktop auth - only shown when signed out (avatar in sidebar when signed in) */}
-      <SignedOut>
-        <div className="hidden items-center gap-4 sm:flex">
-          <SignInButton>
-            <Button variant="ghost">Sign in</Button>
-          </SignInButton>
-          <SignUpButton>
-            <Button>Sign up</Button>
-          </SignUpButton>
-        </div>
-      </SignedOut>
-      {/* Mobile hamburger - visible only on mobile */}
-      <MobileNav />
-    </div>
-  </nav>
-);
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 39ddbb2..73edebb 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -538,6 +538,7 @@ function SidebarMenuButton({
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent
+        variant="sidebar"
         side="right"
         align="center"
         hidden={state !== "collapsed" || isMobile}
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 8e35f88..b2ede2d 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,10 +1,41 @@
 "use client";
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+const tooltipVariants = cva(
+  "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground text-background",
+        sidebar: "bg-sidebar-accent text-sidebar-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const tooltipArrowVariants = cva(
+  "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground fill-foreground",
+        sidebar: "bg-sidebar-accent fill-sidebar-accent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -37,22 +68,21 @@ function TooltipTrigger({
 function TooltipContent({
   className,
   sideOffset = 0,
+  variant,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipVariants>) {
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className,
-        )}
+        className={cn(tooltipVariants({ variant }), className)}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className={tooltipArrowVariants({ variant })} />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts
index 21a0124..6ffbc81 100644
--- a/e2e/navigation.spec.ts
+++ b/e2e/navigation.spec.ts
@@ -9,7 +9,7 @@ test.describe("Navigation - Desktop", () => {
     await page.goto("/");
 
     for (const link of NAV_LINKS) {
-      // Desktop sidebar links are always visible (exact: true avoids matching "DevFlow home" logo link)
+      // exact: true avoids matching logo links (e.g. "DevFlow sidebar logo")
       const navLink = page.getByRole("link", { name: link.label, exact: true });
       await navLink.click();
       await expect(page).toHaveURL(link.route);
@@ -29,8 +29,8 @@ test.describe("Navigation - Mobile", () => {
       // Open mobile menu
       await page.getByRole("button", { name: /open navigation/i }).click();
 
-      // Verify link is visible in menu
-      const navLink = page.getByRole("link", { name: link.label });
+      // Verify link is visible in menu (exact: true avoids matching logo links)
+      const navLink = page.getByRole("link", { name: link.label, exact: true });
       await expect(navLink).toBeVisible();
 
       // Click link and verify navigation
@@ -47,11 +47,15 @@ test.describe("Navigation - Mobile", () => {
 
     // Open menu
     await page.getByRole("button", { name: /open navigation/i }).click();
-    await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "Home", exact: true }),
+    ).toBeVisible();
 
     // Close via Sheet's built-in X button (sr-only "Close", top-right inside sheet)
     await page.getByRole("button", { name: "Close", exact: true }).click();
-    await expect(page.getByRole("link", { name: "Home" })).not.toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "Home", exact: true }),
+    ).not.toBeVisible();
   });
 
   test("mobile menu closes when user taps overlay", async ({ page }) => {
@@ -59,13 +63,17 @@ test.describe("Navigation - Mobile", () => {
 
     // Open menu
     await page.getByRole("button", { name: /open navigation/i }).click();
-    await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "Home", exact: true }),
+    ).toBeVisible();
 
     // Close by clicking the overlay (aria-label="Dismiss menu")
     // Use force:true as the sheet content can intercept pointer events on some browsers
     await page
       .getByRole("button", { name: "Dismiss menu" })
       .click({ force: true });
-    await expect(page.getByRole("link", { name: "Home" })).not.toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "Home", exact: true }),
+    ).not.toBeVisible();
   });
 });
diff --git a/lib/utils.ts b/lib/utils.ts
index ec45c3b..f9ef532 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -18,6 +18,11 @@ export const NAV_LINK_ACTIVE_CLASSES =
   "bg-(image:--gradient-primary) font-bold text-primary-foreground";
 export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
 
+// Layout constants - shared between headers and main content
+export const CONTENT_HORIZONTAL_PADDING = "px-6 md:px-8 lg:px-12";
+export const HEADER_HEIGHT = "h-14";
+export const MOBILE_HEADER_TOP_OFFSET = "pt-14"; // Compensates for fixed mobile header
+
 /**
  * Get icon classes for navigation items (handles inversion for inactive state).
  */
diff --git a/x_docs/figma/grok-screenshot.jpg b/x_docs/figma/grok-screenshot.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..4a18a9108626ab42ca128f3947fcbaa2f75a9533
GIT binary patch
literal 45983
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

literal 0
HcmV?d00001

diff --git a/x_docs/mine/2025-12-25-layout-refactor.md b/x_docs/mine/2025-12-25-layout-refactor.md
new file mode 100644
index 0000000..bfc6594
--- /dev/null
+++ b/x_docs/mine/2025-12-25-layout-refactor.md
@@ -0,0 +1,85 @@
+# Summary: Layout Refactor Context
+
+> **Historical document** — Preserved to show the planning and implementation of the Grok-style layout refactor. The refactor is now complete.
+
+## Before (Prior State)
+
+shadcn/ui Sidebar was implemented with navbar above. Key files at that time:
+
+| File | Purpose |
+| ------ | --------- |
+| `components/app-sidebar.tsx` | Main sidebar using shadcn components |
+| `components/ui/sidebar.tsx` | shadcn sidebar primitives (modified widths) |
+| `components/navigation/sidebar-toggle-button.tsx` | Custom chevron toggle |
+| `components/navigation/navbar.tsx` | Full-width navbar above sidebar |
+| `app/(root)/layout.tsx` | Cookie-based SidebarProvider |
+
+### Layout Architecture (Before)
+
+```text
+┌─────────────────────────────────────────────┐
+│              Navbar (sticky top)            │  ← Full width, 73px height
+├────────┬────────────────────────────────────┤
+│        │                                    │
+│ Sidebar│         Main Content               │  ← Sidebar starts at top: 72px
+│ (left) │                                    │
+│        │                                    │
+└────────┴────────────────────────────────────┘
+```
+
+## After (Implemented)
+
+### Layout Architecture (Grok-style)
+
+```text
+┌─────────┬────────────────────────────────┬──────────────┐
+│         │     Search (centred in         │ Theme │ Auth │
+│ Sidebar │     remaining space)           │ (viewport edge)
+│ (full   ├────────────────────────────────┴──────────────┤
+│ height) │              Main Content                     │
+└─────────┴───────────────────────────────────────────────┘
+```
+
+Hybrid flex layout in `ContentTopBar`:
+
+- Search uses `flex-1 flex justify-center` — grows to fill space, content centred
+- Theme/auth uses `flex-none` — fixed width, pinned to viewport edge
+
+### Key Changes Made
+
+| Aspect | Before | After |
+| -------- | --------- | --------------------- |
+| Sidebar height | `calc(100vh - 72px)` | `100vh` (full height) |
+| Sidebar top | `72px` (below navbar) | `0` (flush with viewport) |
+| Navbar | Full width, above sidebar | Replaced with content-area "top bar" |
+| Logo | In navbar (desktop) + sidebar header | Sidebar header only |
+| Mobile header | Part of navbar | Separate `MobileHeader` component |
+
+## Implementation Summary
+
+1. **Deleted `navbar.tsx`** — replaced with two new components
+2. **Created `content-top-bar.tsx`** — desktop-only sticky header in content area
+3. **Created `mobile-header.tsx`** — mobile-only fixed header with logo + hamburger
+4. **Updated `app-sidebar.tsx`** — removed `SIDEBAR_TOP_OFFSET` for full height
+5. **Updated `layout.tsx`** — new structure with MobileHeader + AppSidebar + content wrapper
+
+## Files (Current)
+
+| File | Purpose |
+| ------ | --------- |
+| `components/app-sidebar.tsx` | Full-height sidebar with logo, nav, user controls |
+| `components/navigation/content-top-bar.tsx` | Desktop top bar (search, theme, auth) |
+| `components/navigation/mobile-header.tsx` | Mobile header (logo, theme, hamburger) |
+| `components/navigation/mobile-nav.tsx` | Sheet-based mobile navigation (unchanged) |
+| `app/(root)/layout.tsx` | Grok-style layout structure |
+
+## shadcn/ui Patterns in Use
+
+- `SidebarProvider` with cookie persistence
+- `Sidebar collapsible="icon"` for icon-rail mode
+- `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarRail`
+- `useSidebar()` hook for state access
+
+## Visual Reference
+
+- `grok-screenshot.jpg` — Target layout inspiration

From 202c77b91c3cd4b51fd3ad86a46e6feb42159b1b Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Thu, 25 Dec 2025 19:46:50 +0400
Subject: [PATCH 5/6] chore: add bundle analyser script

Adds `npm run analyse` using Next.js experimental-analyze feature for inspecting
bundle composition, identifying bloat, and verifying code splits.
---
 CLAUDE.md    | 2 ++
 package.json | 1 +
 2 files changed, 3 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 702154e..c65eca3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -26,6 +26,8 @@ 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
diff --git a/package.json b/package.json
index 9487de6..2cb4e0c 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "analyse": "next experimental-analyze",
     "start": "next start",
     "lint": "biome check --write --error-on-warnings",
     "lint:md": "markdownlint-cli2 '**/*.md' '#node_modules' --fix",

From f702f3e7e756b8191d72a9a9f297262adc983786 Mon Sep 17 00:00:00 2001
From: Michelle <michelle@michellepace.com>
Date: Thu, 25 Dec 2025 19:51:54 +0400
Subject: [PATCH 6/6] style: coderabbit | update gradient syntax to Tailwind v4
 format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Components:
- Replace `bg-[image:var(--gradient-primary)]` with `bg-(image:--gradient-primary)`
- Apply fix to ClerkProvider and button gradient variant

Tailwind v4 uses the new `bg-(image:--custom-property)` syntax for CSS custom
properties in arbitrary values, replacing the v3 `bg-[image:var(--property)]`
format.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/clerk-provider.tsx | 2 +-
 components/ui/button.tsx      | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/clerk-provider.tsx b/components/clerk-provider.tsx
index 3765916..8efbe20 100644
--- a/components/clerk-provider.tsx
+++ b/components/clerk-provider.tsx
@@ -19,7 +19,7 @@ export function ClerkProvider({
         },
         elements: {
           formButtonPrimary:
-            "bg-[image:var(--gradient-primary)] text-white hover:opacity-90",
+            "bg-(image:--gradient-primary) text-white hover:opacity-90",
           footer: "bg-card",
           avatarBox: "size-8",
         },
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 6fc50bd..d4526e4 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -19,8 +19,7 @@ const buttonVariants = cva(
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
-        gradient:
-          "bg-[image:var(--gradient-primary)] text-white hover:opacity-90",
+        gradient: "bg-(image:--gradient-primary) text-white hover:opacity-90",
         soft: "bg-card dark:bg-secondary hover:opacity-90",
         muted:
           "bg-secondary dark:bg-card text-secondary-foreground dark:text-card-foreground border border-secondary hover:opacity-90",