From d14605b57f9007490bef054d5524033319219b67 Mon Sep 17 00:00:00 2001
From: Skylinerffm97 <marc.schilling.ffm@gmail.com>
Date: Mon, 28 Sep 2026 00:12:13 +0200
Subject: [PATCH 1/6] web(nav): make the Email, CRM and Resources sections
 collapsible

---
 web/src/components/layout/AppNav.tsx | 36 +++++++++++++++++++++++-----
 web/src/stores/slices/uiSlice.ts     | 29 ++++++++++++++++++++++
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/web/src/components/layout/AppNav.tsx b/web/src/components/layout/AppNav.tsx
index f88467465..c8cd17927 100644
--- a/web/src/components/layout/AppNav.tsx
+++ b/web/src/components/layout/AppNav.tsx
@@ -13,6 +13,7 @@ import {
     CableIcon,
     CalendarClockIcon,
     CheckSquareIcon,
+    ChevronDownIcon,
     CircleDollarSignIcon,
     FileTextIcon,
     FlameIcon,
@@ -33,7 +34,7 @@ import {
     XIcon,
     ZapIcon,
 } from "lucide-react";
-import { type ReactElement, type ReactNode, useMemo, useState } from "react";
+import { type ReactElement, type ReactNode, useId, useMemo, useState } from "react";
 import { useAppStore } from "@/stores";
 import useFeatureAccess from "@/hooks/useFeatureAccess";
 import { usePermission, type PermissionKey } from "@/hooks/usePermission";
@@ -207,6 +208,10 @@ const ICON_ROW = "group relative mx-auto flex size-8 items-center justify-center
 const LABEL_ROW = "group relative mx-2 w-[calc(100%-1rem)] flex items-center gap-2.5 px-2.5 h-7 rounded-md text-[12.5px] transition-colors duration-100";
 const rowClass = (collapsed: boolean) => (collapsed ? ICON_ROW : LABEL_ROW);
 
+function isNavItemActive(pathname: string, item: NavItem): boolean {
+    return pathname === item.url || pathname.startsWith(item.url + "/");
+}
+
 function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolean }) {
     const { pathname } = useLocation();
     const unseen = useAppStore((s) => s.unseenCount);
@@ -214,8 +219,7 @@ function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolea
     const hasItemPermission = usePermission(item.permission ?? "VIEW_CAMPAIGNS");
     const [deniedOpen, setDeniedOpen] = useState(false);
     const upgradeDialog = useUpgradeDialog();
-    const active =
-        pathname === item.url || pathname.startsWith(item.url + "/");
+    const active = isNavItemActive(pathname, item);
     const badge = item.badgeStoreKey === "unseenCount" ? unseen : undefined;
 
     // Role-gated items disappear from the sidebar for users that
@@ -685,18 +689,38 @@ function Section({
     first?: boolean;
     collapsed?: boolean;
 }) {
+    const id = useId();
+    const { pathname } = useLocation();
+    const sectionCollapsed = useAppStore((s) => s.navCollapsedSections[section.label] ?? false);
+    const toggleNavSection = useAppStore((s) => s.toggleNavSection);
+    const active = section.items.some((item) => isNavItemActive(pathname, item));
+    const hidden = !collapsed && sectionCollapsed;
+
     return (
         <div className={first ? "" : "mt-4 pt-4 border-t border-slate-200/50"}>
             {/* Collapsed, the hairline above the group carries the grouping on
                 its own — a tracked-uppercase label does not fit in 56px. */}
             {!collapsed && (
                 <div className="px-4 mb-1.5">
-                    <span className="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium">
+                    <button
+                        type="button"
+                        aria-expanded={!hidden}
+                        aria-controls={id}
+                        onClick={() => toggleNavSection(section.label)}
+                        className="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium inline-flex items-center gap-1.5 rounded-sm hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
+                    >
                         {section.label}
-                    </span>
+                        {hidden && active && (
+                            <span className="w-1.5 h-1.5 rounded-full bg-slate-400" aria-hidden />
+                        )}
+                        <ChevronDownIcon
+                            className={cn("w-3 h-3 transition-transform", hidden && "-rotate-90")}
+                            aria-hidden
+                        />
+                    </button>
                 </div>
             )}
-            <div className="space-y-px">
+            <div id={id} hidden={hidden} className="space-y-px">
                 {section.items.map((it) => (
                     <NavRow key={it.url} item={it} collapsed={collapsed} />
                 ))}
diff --git a/web/src/stores/slices/uiSlice.ts b/web/src/stores/slices/uiSlice.ts
index 7620e75bc..041fc2fcc 100644
--- a/web/src/stores/slices/uiSlice.ts
+++ b/web/src/stores/slices/uiSlice.ts
@@ -30,6 +30,7 @@ export interface UISlice {
   // and every store written before this had no version field at all.
   navCollapsed: boolean
   sidebarMobileOpen: boolean
+  navCollapsedSections: Record<string, boolean>
 
   // Theme
   theme: Theme
@@ -55,6 +56,7 @@ export interface UISlice {
   toggleSidebar: () => void
   setSidebarCollapsed: (collapsed: boolean) => void
   setSidebarMobileOpen: (open: boolean) => void
+  toggleNavSection: (label: string) => void
 
   // Actions - Theme
   setTheme: (theme: Theme) => void
@@ -79,6 +81,17 @@ const getInitialTheme = (): Theme => {
   return (localStorage.getItem('theme') as Theme) || 'system'
 }
 
+const getInitialNavCollapsedSections = (): Record<string, boolean> => {
+  if (typeof window === 'undefined') return {}
+  try {
+    const stored: unknown = JSON.parse(localStorage.getItem('nav.collapsedSections') || '{}')
+    if (!stored || typeof stored !== 'object' || Array.isArray(stored)) return {}
+    return Object.fromEntries(Object.entries(stored).filter(([, value]) => typeof value === 'boolean'))
+  } catch {
+    return {}
+  }
+}
+
 // The dashboard is light-only today: every surface is styled on white, so a
 // resolved dark theme would flip only the CSS-variable components (command
 // palette, toasts) and look broken. 'dark'/'system' are accepted but resolve
@@ -91,6 +104,7 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
   // Sidebar
   navCollapsed: false,
   sidebarMobileOpen: false,
+  navCollapsedSections: getInitialNavCollapsedSections(),
 
   // Theme
   theme: getInitialTheme(),
@@ -115,6 +129,21 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
   setSidebarMobileOpen: (sidebarMobileOpen) =>
     set((state) => (state.sidebarMobileOpen === sidebarMobileOpen ? state : { sidebarMobileOpen })),
 
+  toggleNavSection: (label) => {
+    const navCollapsedSections = {
+      ...get().navCollapsedSections,
+      [label]: !get().navCollapsedSections[label],
+    }
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('nav.collapsedSections', JSON.stringify(navCollapsedSections))
+      } catch {
+        // Keep toggling available when browser storage is unavailable.
+      }
+    }
+    set({ navCollapsedSections })
+  },
+
   // Actions - Theme
   setTheme: (theme) => {
     if (get().theme === theme) return

From 8ff5a81c16806553244e0df26394c9b2f7455ffa Mon Sep 17 00:00:00 2001
From: Skylinerffm97 <marc.schilling.ffm@gmail.com>
Date: Mon, 28 Sep 2026 00:57:08 +0200
Subject: [PATCH 2/6] web(nav): hide collapsed sections in the rail too, except
 the active page

---
 web/src/components/layout/AppNav.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/components/layout/AppNav.tsx b/web/src/components/layout/AppNav.tsx
index c8cd17927..ef1bb6c3e 100644
--- a/web/src/components/layout/AppNav.tsx
+++ b/web/src/components/layout/AppNav.tsx
@@ -693,8 +693,17 @@ function Section({
     const { pathname } = useLocation();
     const sectionCollapsed = useAppStore((s) => s.navCollapsedSections[section.label] ?? false);
     const toggleNavSection = useAppStore((s) => s.toggleNavSection);
+    const { canManage } = useFeatureAccess();
     const active = section.items.some((item) => isNavItemActive(pathname, item));
     const hidden = !collapsed && sectionCollapsed;
+    const visibleItems = collapsed
+        ? section.items.filter((item) =>
+            (!sectionCollapsed || isNavItemActive(pathname, item)) &&
+            (item.rolesAllowed !== "manage" || canManage),
+        )
+        : section.items;
+
+    if (collapsed && visibleItems.length === 0) return null;
 
     return (
         <div className={first ? "" : "mt-4 pt-4 border-t border-slate-200/50"}>
@@ -721,7 +730,7 @@ function Section({
                 </div>
             )}
             <div id={id} hidden={hidden} className="space-y-px">
-                {section.items.map((it) => (
+                {visibleItems.map((it) => (
                     <NavRow key={it.url} item={it} collapsed={collapsed} />
                 ))}
             </div>

From 032eb04fbafc71ae37e4abd941c6cd7f8bce3288 Mon Sep 17 00:00:00 2001
From: Skylinerffm97 <marc.schilling.ffm@gmail.com>
Date: Mon, 28 Sep 2026 21:35:35 +0200
Subject: [PATCH 3/6] web(nav): announce the current page in a folded section
 to screen readers, document collapsible sections

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/content/docs/guides/unibox.mdx  | 1 +
 web/src/components/layout/AppNav.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/content/docs/guides/unibox.mdx b/docs/content/docs/guides/unibox.mdx
index a01560cfd..8db0b6ba6 100644
--- a/docs/content/docs/guides/unibox.mdx
+++ b/docs/content/docs/guides/unibox.mdx
@@ -15,6 +15,7 @@ The columns are yours to size. Every choice here is remembered in the browser yo
 | --- | --- |
 | The divider between the list and the thread | Drag it to widen the conversation list so long subjects fit, or to give the space back to the thread. It also takes the keyboard once it has focus: arrow keys nudge it (hold `Shift` for a bigger step), `Home` and `End` go to the narrowest and widest the window allows, `Enter` (or a double-click) puts it back to the default. |
 | **Collapse** at the bottom of the left navigation, or `b` | Shrinks Warmbly's own navigation to an icon rail and gives the width to the page. Row labels become tooltips; unread mail keeps its count badge and an open [Advisor](/guides/advisor/) finding shows as a coloured dot on the icon. The same control expands it again. |
+| The section headers in the left navigation (Email, CRM, Resources) | Click one to fold its section away. Like the other layout choices, it is remembered in this browser. While a section is folded and you are on one of its pages, a small dot beside the header shows where you are. In the icon rail, folded sections stay hidden except the page you are on. |
 | The contact button in the thread header | Shows or hides the contact panel on the right. It starts closed when no preference is saved. Opening or closing it sticks across conversations, and existing preferences are preserved. |
 
 How wide the list can get depends on the window: the thread always keeps enough room to read a message, and the contact panel counts toward that when it is open, so the widest setting is narrower on a laptop than on a large monitor.
diff --git a/web/src/components/layout/AppNav.tsx b/web/src/components/layout/AppNav.tsx
index ef1bb6c3e..67995feb4 100644
--- a/web/src/components/layout/AppNav.tsx
+++ b/web/src/components/layout/AppNav.tsx
@@ -720,7 +720,10 @@ function Section({
                     >
                         {section.label}
                         {hidden && active && (
-                            <span className="w-1.5 h-1.5 rounded-full bg-slate-400" aria-hidden />
+                            <>
+                                <span className="w-1.5 h-1.5 rounded-full bg-slate-400" aria-hidden />
+                                <span className="sr-only">(contains current page)</span>
+                            </>
                         )}
                         <ChevronDownIcon
                             className={cn("w-3 h-3 transition-transform", hidden && "-rotate-90")}

From 77194fb46049ec47ffc8a3c32b7e6e53b024a41f Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Tue, 29 Sep 2026 01:33:20 -0700
Subject: [PATCH 4/6] feat: animate folding the sidebar's Email, CRM and
 Resources sections row by row, keep the current page visible in a folded
 section, flag an Advisor finding on the rows a section hides with a dot on
 its header, widen the header into a full-width target with a hover chevron,
 key the fold state by stable section ids inside the persisted
 warmbly-storage, and update the unibox layout guide

---
 docs/content/docs/guides/unibox.mdx  |   2 +-
 web/src/components/layout/AppNav.tsx | 145 ++++++++++++++++++++-------
 web/src/hooks/usePermission.ts       |   2 +-
 web/src/stores/slices/uiSlice.ts     |  37 +++----
 web/src/stores/useAppStore.ts        |   4 +-
 5 files changed, 125 insertions(+), 65 deletions(-)

diff --git a/docs/content/docs/guides/unibox.mdx b/docs/content/docs/guides/unibox.mdx
index 8db0b6ba6..a2735f1bc 100644
--- a/docs/content/docs/guides/unibox.mdx
+++ b/docs/content/docs/guides/unibox.mdx
@@ -15,7 +15,7 @@ The columns are yours to size. Every choice here is remembered in the browser yo
 | --- | --- |
 | The divider between the list and the thread | Drag it to widen the conversation list so long subjects fit, or to give the space back to the thread. It also takes the keyboard once it has focus: arrow keys nudge it (hold `Shift` for a bigger step), `Home` and `End` go to the narrowest and widest the window allows, `Enter` (or a double-click) puts it back to the default. |
 | **Collapse** at the bottom of the left navigation, or `b` | Shrinks Warmbly's own navigation to an icon rail and gives the width to the page. Row labels become tooltips; unread mail keeps its count badge and an open [Advisor](/guides/advisor/) finding shows as a coloured dot on the icon. The same control expands it again. |
-| The section headers in the left navigation (Email, CRM, Resources) | Click one to fold its section away. Like the other layout choices, it is remembered in this browser. While a section is folded and you are on one of its pages, a small dot beside the header shows where you are. In the icon rail, folded sections stay hidden except the page you are on. |
+| The section headers in the left navigation (Email, CRM, Resources) | Click one to fold its section away, and again to bring it back. Like the other layout choices, it is remembered in this browser. A folded section still shows the page you are on, and a coloured dot beside its header flags an open [Advisor](/guides/advisor/) finding on one of the pages it hides. The icon rail follows the same choice. |
 | The contact button in the thread header | Shows or hides the contact panel on the right. It starts closed when no preference is saved. Opening or closing it sticks across conversations, and existing preferences are preserved. |
 
 How wide the list can get depends on the window: the thread always keeps enough room to read a message, and the contact panel counts toward that when it is open, so the widest setting is narrower on a laptop than on a large monitor.
diff --git a/web/src/components/layout/AppNav.tsx b/web/src/components/layout/AppNav.tsx
index 67995feb4..d697f03d0 100644
--- a/web/src/components/layout/AppNav.tsx
+++ b/web/src/components/layout/AppNav.tsx
@@ -35,9 +35,10 @@ import {
     ZapIcon,
 } from "lucide-react";
 import { type ReactElement, type ReactNode, useId, useMemo, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useAppStore } from "@/stores";
 import useFeatureAccess from "@/hooks/useFeatureAccess";
-import { usePermission, type PermissionKey } from "@/hooks/usePermission";
+import { orgHasPermission, usePermission, type PermissionKey } from "@/hooks/usePermission";
 import { useUpgradeDialog } from "@/hooks/context/upgrade";
 import { PLAN_ACCENT_CLASSES, getPlan, type PlanID } from "@/lib/plans";
 import AccessLockedDialog from "./AccessLockedDialog";
@@ -59,6 +60,7 @@ import useAPIKeys from "@/lib/api/hooks/app/api-keys/useAPIKeys";
 import useIntegrationConnections from "@/lib/api/hooks/app/integrations/useIntegrationConnections";
 import AnimatedNumber from "@/components/ui/AnimatedNumber";
 import AdvisorNavBadge from "@/components/app/advisor/AdvisorNavBadge";
+import { useAdvisorSummary } from "@/lib/api/hooks/app/advisor/useAdvisor";
 import type { AdvisorSurface } from "@/lib/api/models/app/advisor/Advisor";
 import { UserNav } from "./UserNav";
 import { Logo } from "@/components/svg";
@@ -127,6 +129,8 @@ const REQUIRES_TO_MIN_PLAN: Record<NonNullable<NavItem["requires"]>, PlanID> = {
 };
 
 interface NavSection {
+    /** Stable key for the persisted fold state, so renaming a label keeps it. */
+    id: string;
     label: string;
     items: NavItem[];
 }
@@ -145,6 +149,7 @@ const topItems: NavItem[] = [
 
 const sections: NavSection[] = [
     {
+        id: "email",
         label: "Email",
         items: [
             { title: "Accounts", url: "/app/emails", icon: MailIcon, indicator: "accounts", advisorSurface: "emails", permission: "MANAGE_EMAILS", permissionLabel: "Manage mailboxes" },
@@ -157,6 +162,7 @@ const sections: NavSection[] = [
         ],
     },
     {
+        id: "crm",
         label: "CRM",
         items: [
             { title: "Pipelines", requires: "subscription", url: "/app/crm/pipelines", icon: GitBranchIcon, indicator: "pipelines", permission: "VIEW_CONTACTS", permissionLabel: "View contacts" },
@@ -166,6 +172,7 @@ const sections: NavSection[] = [
         ],
     },
     {
+        id: "resources",
         label: "Resources",
         items: [
             { title: "Templates", requires: "subscription", url: "/app/templates", icon: FileTextIcon, indicator: "templates" },
@@ -680,6 +687,31 @@ function IntegrationsActivity() {
     );
 }
 
+// The same urgency the rows badge, summed over the rows a folded section hides,
+// so folding Email cannot bury a critical deliverability finding.
+function FoldedAdvisorDot({ surfaces }: { surfaces: AdvisorSurface[] }) {
+    const { data } = useAdvisorSummary(surfaces.length > 0);
+    let critical = 0;
+    let urgent = 0;
+    for (const entry of data?.surfaces ?? []) {
+        if (!surfaces.includes(entry.surface)) continue;
+        critical += entry.critical;
+        urgent += entry.critical + entry.high;
+    }
+    if (urgent === 0) return null;
+    const label = `${urgent} ${urgent === 1 ? "issue" : "issues"} needing attention in this section`;
+    return (
+        <span
+            title={label}
+            className={cn("size-1.5 shrink-0 rounded-full", critical > 0 ? "bg-rose-500" : "bg-orange-500")}
+        >
+            <span className="sr-only">{label}</span>
+        </span>
+    );
+}
+
+const FOLD_EASE = [0.2, 0, 0, 1] as const;
+
 function Section({
     section,
     first = false,
@@ -691,51 +723,90 @@ function Section({
 }) {
     const id = useId();
     const { pathname } = useLocation();
-    const sectionCollapsed = useAppStore((s) => s.navCollapsedSections[section.label] ?? false);
+    const folded = useAppStore((s) => s.navCollapsedSections[section.id] ?? false);
     const toggleNavSection = useAppStore((s) => s.toggleNavSection);
-    const { canManage } = useFeatureAccess();
-    const active = section.items.some((item) => isNavItemActive(pathname, item));
-    const hidden = !collapsed && sectionCollapsed;
-    const visibleItems = collapsed
-        ? section.items.filter((item) =>
-            (!sectionCollapsed || isNavItemActive(pathname, item)) &&
-            (item.rolesAllowed !== "manage" || canManage),
-        )
-        : section.items;
+    const org = useAppStore((s) => s.currentOrganization);
+    const access = useFeatureAccess();
+    const reduceMotion = useReducedMotion();
 
-    if (collapsed && visibleItems.length === 0) return null;
+    // Folded, a section keeps only the row you are on, in the rail and the
+    // full sidebar alike, so where you are never folds away with the rest.
+    const permitted = section.items.filter((item) => item.rolesAllowed !== "manage" || access.canManage);
+    const shown = folded ? permitted.filter((item) => isNavItemActive(pathname, item)) : permitted;
+    const hiddenSurfaces = folded
+        ? permitted.flatMap((item) =>
+            !isNavItemActive(pathname, item) &&
+            item.advisorSurface &&
+            !(item.requires === "subscription" && access.locked) &&
+            (!item.permission || orgHasPermission(org, item.permission))
+                ? [item.advisorSurface]
+                : [],
+        )
+        : [];
+
+    if (collapsed && shown.length === 0) return null;
+
+    const transition = reduceMotion ? { duration: 0 } : { duration: 0.22, ease: FOLD_EASE };
 
     return (
         <div className={first ? "" : "mt-4 pt-4 border-t border-slate-200/50"}>
             {/* Collapsed, the hairline above the group carries the grouping on
                 its own — a tracked-uppercase label does not fit in 56px. */}
             {!collapsed && (
-                <div className="px-4 mb-1.5">
-                    <button
-                        type="button"
-                        aria-expanded={!hidden}
-                        aria-controls={id}
-                        onClick={() => toggleNavSection(section.label)}
-                        className="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium inline-flex items-center gap-1.5 rounded-sm hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
-                    >
-                        {section.label}
-                        {hidden && active && (
-                            <>
-                                <span className="w-1.5 h-1.5 rounded-full bg-slate-400" aria-hidden />
-                                <span className="sr-only">(contains current page)</span>
-                            </>
+                <button
+                    type="button"
+                    aria-expanded={!folded}
+                    aria-controls={id}
+                    onClick={() => toggleNavSection(section.id)}
+                    className="group/section mx-2 mb-1 flex h-6 w-[calc(100%-1rem)] items-center gap-1.5 rounded-md px-2 text-[10px] font-medium uppercase tracking-[0.14em] text-slate-400 transition-colors duration-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
+                >
+                    <span>{section.label}</span>
+                    {/* Always shown while folded so the state reads at a glance;
+                        expanded it appears on hover (always on touch). */}
+                    <ChevronDownIcon
+                        aria-hidden
+                        strokeWidth={2}
+                        className={cn(
+                            "size-3 shrink-0 transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none",
+                            folded
+                                ? "-rotate-90 opacity-100"
+                                : "opacity-100 md:opacity-0 md:group-hover/section:opacity-100 md:group-focus-visible/section:opacity-100",
                         )}
-                        <ChevronDownIcon
-                            className={cn("w-3 h-3 transition-transform", hidden && "-rotate-90")}
-                            aria-hidden
-                        />
-                    </button>
-                </div>
+                    />
+                    <span className="ml-auto flex items-center">
+                        <AnimatePresence initial={false}>
+                            {folded && hiddenSurfaces.length > 0 && (
+                                <motion.span
+                                    key="attention"
+                                    className="flex"
+                                    initial={{ opacity: 0, scale: 0.5 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 0.5 }}
+                                    transition={transition}
+                                >
+                                    <FoldedAdvisorDot surfaces={hiddenSurfaces} />
+                                </motion.span>
+                            )}
+                        </AnimatePresence>
+                    </span>
+                </button>
             )}
-            <div id={id} hidden={hidden} className="space-y-px">
-                {visibleItems.map((it) => (
-                    <NavRow key={it.url} item={it} collapsed={collapsed} />
-                ))}
+            <div id={id} className="space-y-px">
+                {/* Each row folds its own height, so the rows around the one
+                    you are on close in on it instead of the block snapping. */}
+                <AnimatePresence initial={false}>
+                    {shown.map((it) => (
+                        <motion.div
+                            key={it.url}
+                            initial={{ height: 0, opacity: 0, overflow: "hidden" }}
+                            animate={{ height: "auto", opacity: 1, transitionEnd: { overflow: "visible" } }}
+                            exit={{ height: 0, opacity: 0, overflow: "hidden" }}
+                            transition={transition}
+                        >
+                            <NavRow item={it} collapsed={collapsed} />
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
             </div>
         </div>
     );
@@ -1179,7 +1250,7 @@ export function AppNav({ open = false, onClose }: { open?: boolean; onClose?: ()
                 </div>
                 {sections.map((s, i) => (
                     <Section
-                        key={s.label}
+                        key={s.id}
                         section={s}
                         first={i === 0 && topItems.length === 0}
                         collapsed={iconOnly}
diff --git a/web/src/hooks/usePermission.ts b/web/src/hooks/usePermission.ts
index 107d39b31..7a46ef470 100644
--- a/web/src/hooks/usePermission.ts
+++ b/web/src/hooks/usePermission.ts
@@ -18,7 +18,7 @@ export function checkPermission(key: PermissionKey): boolean {
     return orgHasPermission(useAppStore.getState().currentOrganization, key);
 }
 
-function orgHasPermission(
+export function orgHasPermission(
     org: { role?: string; permissions?: number } | null | undefined,
     key: PermissionKey,
 ): boolean {
diff --git a/web/src/stores/slices/uiSlice.ts b/web/src/stores/slices/uiSlice.ts
index 041fc2fcc..4791b7461 100644
--- a/web/src/stores/slices/uiSlice.ts
+++ b/web/src/stores/slices/uiSlice.ts
@@ -30,6 +30,7 @@ export interface UISlice {
   // and every store written before this had no version field at all.
   navCollapsed: boolean
   sidebarMobileOpen: boolean
+  // Folded sidebar sections, keyed by the section's stable id (not its label).
   navCollapsedSections: Record<string, boolean>
 
   // Theme
@@ -56,7 +57,7 @@ export interface UISlice {
   toggleSidebar: () => void
   setSidebarCollapsed: (collapsed: boolean) => void
   setSidebarMobileOpen: (open: boolean) => void
-  toggleNavSection: (label: string) => void
+  toggleNavSection: (id: string) => void
 
   // Actions - Theme
   setTheme: (theme: Theme) => void
@@ -81,15 +82,11 @@ const getInitialTheme = (): Theme => {
   return (localStorage.getItem('theme') as Theme) || 'system'
 }
 
-const getInitialNavCollapsedSections = (): Record<string, boolean> => {
-  if (typeof window === 'undefined') return {}
-  try {
-    const stored: unknown = JSON.parse(localStorage.getItem('nav.collapsedSections') || '{}')
-    if (!stored || typeof stored !== 'object' || Array.isArray(stored)) return {}
-    return Object.fromEntries(Object.entries(stored).filter(([, value]) => typeof value === 'boolean'))
-  } catch {
-    return {}
-  }
+// Rehydration bypasses the setter, so a stored value that is not a map of
+// booleans (older build, hand edit) falls back to everything expanded.
+export const sanitizeNavCollapsedSections = (v: unknown): Record<string, boolean> => {
+  if (!v || typeof v !== 'object' || Array.isArray(v)) return {}
+  return Object.fromEntries(Object.entries(v).filter(([, folded]) => typeof folded === 'boolean'))
 }
 
 // The dashboard is light-only today: every surface is styled on white, so a
@@ -104,7 +101,7 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
   // Sidebar
   navCollapsed: false,
   sidebarMobileOpen: false,
-  navCollapsedSections: getInitialNavCollapsedSections(),
+  navCollapsedSections: {},
 
   // Theme
   theme: getInitialTheme(),
@@ -129,20 +126,10 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
   setSidebarMobileOpen: (sidebarMobileOpen) =>
     set((state) => (state.sidebarMobileOpen === sidebarMobileOpen ? state : { sidebarMobileOpen })),
 
-  toggleNavSection: (label) => {
-    const navCollapsedSections = {
-      ...get().navCollapsedSections,
-      [label]: !get().navCollapsedSections[label],
-    }
-    if (typeof window !== 'undefined') {
-      try {
-        localStorage.setItem('nav.collapsedSections', JSON.stringify(navCollapsedSections))
-      } catch {
-        // Keep toggling available when browser storage is unavailable.
-      }
-    }
-    set({ navCollapsedSections })
-  },
+  toggleNavSection: (id) =>
+    set((state) => ({
+      navCollapsedSections: { ...state.navCollapsedSections, [id]: !state.navCollapsedSections[id] },
+    })),
 
   // Actions - Theme
   setTheme: (theme) => {
diff --git a/web/src/stores/useAppStore.ts b/web/src/stores/useAppStore.ts
index 775208629..ef2f290df 100644
--- a/web/src/stores/useAppStore.ts
+++ b/web/src/stores/useAppStore.ts
@@ -3,7 +3,7 @@ import { devtools, persist } from 'zustand/middleware'
 import { useShallow } from 'zustand/react/shallow'
 import { createUserSlice, type UserSlice } from './slices/userSlice'
 import { createOrganizationSlice, type OrganizationSlice } from './slices/organizationSlice'
-import { createUISlice, clampUniboxListWidth, type UISlice } from './slices/uiSlice'
+import { createUISlice, clampUniboxListWidth, sanitizeNavCollapsedSections, type UISlice } from './slices/uiSlice'
 import { createShortcutSlice, type ShortcutSlice } from './slices/shortcutSlice'
 import { createDataSlice, type DataSlice } from './slices/dataSlice'
 import { createRealtimeSlice, type RealtimeSlice } from './slices/realtimeSlice'
@@ -47,12 +47,14 @@ export const useAppStore = create<AppStore>()(
             ...current,
             ...p,
             uniboxListWidth: clampUniboxListWidth(p.uniboxListWidth),
+            navCollapsedSections: sanitizeNavCollapsedSections(p.navCollapsedSections),
           }
         },
         partialize: (state) => ({
           // Only persist UI preferences
           theme: state.theme,
           navCollapsed: state.navCollapsed,
+          navCollapsedSections: state.navCollapsedSections,
           // Assistant panel layout (edge + width + floating window geometry)
           agentSide: state.agentSide,
           agentWidth: state.agentWidth,

From bed5194d66c8102a7672b3044862e28df9016182 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Tue, 29 Sep 2026 01:49:38 -0700
Subject: [PATCH 5/6] feat: animate collapsing the sidebar to its icon rail by
 morphing each nav row, the collapse toggle and the profile card in place
 (icons hold position while labels fade and clip), shrinking the section
 headers away, folding out rail sections with nothing left to show, and
 cross-fading the live stats panel with an eased height

---
 web/src/components/layout/AppNav.tsx  | 312 +++++++++++++++-----------
 web/src/components/layout/UserNav.tsx |  30 ++-
 2 files changed, 197 insertions(+), 145 deletions(-)

diff --git a/web/src/components/layout/AppNav.tsx b/web/src/components/layout/AppNav.tsx
index d697f03d0..7ebbfa089 100644
--- a/web/src/components/layout/AppNav.tsx
+++ b/web/src/components/layout/AppNav.tsx
@@ -34,7 +34,7 @@ import {
     XIcon,
     ZapIcon,
 } from "lucide-react";
-import { type ReactElement, type ReactNode, useId, useMemo, useState } from "react";
+import { type ReactElement, type ReactNode, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useAppStore } from "@/stores";
 import useFeatureAccess from "@/hooks/useFeatureAccess";
@@ -184,8 +184,9 @@ const sections: NavSection[] = [
     },
 ];
 
-// NavTip wraps a collapsed rail row in the themed tooltip, so an icon-only
-// row still says what it is. Expanded rows carry their label and need none.
+// NavTip wraps a rail row in the themed tooltip, so an icon-only row still
+// says what it is. The trigger stays mounted in both modes (only the content
+// is conditional) so a row is never remounted and can animate between them.
 function NavTip({
     collapsed,
     label,
@@ -195,26 +196,40 @@ function NavTip({
     label: string;
     children: ReactElement;
 }) {
-    if (!collapsed) return children;
+    // Controlled, so a hover in the expanded sidebar never opens a tip there.
+    const [open, setOpen] = useState(false);
     return (
         // Rooted in the rail's shared provider: after the first tip, moving to
         // the next row shows its name at once instead of waiting again.
-        <TooltipGroupRoot>
+        <TooltipGroupRoot open={collapsed && open} onOpenChange={setOpen}>
             <TooltipTrigger asChild>{children}</TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-                {label}
-            </TooltipContent>
+            {collapsed && (
+                <TooltipContent side="right" sideOffset={8}>
+                    {label}
+                </TooltipContent>
+            )}
         </TooltipGroupRoot>
     );
 }
 
-// The two row shapes. Collapsed, the rail is 56px wide, so a row is a centred
-// 32px icon target; expanded it is a full-width label row. Both are constants
-// because four call sites branch between them.
-const ICON_ROW = "group relative mx-auto flex size-8 items-center justify-center rounded-md transition-colors duration-100";
-const LABEL_ROW = "group relative mx-2 w-[calc(100%-1rem)] flex items-center gap-2.5 px-2.5 h-7 rounded-md text-[12.5px] transition-colors duration-100";
+// The two row shapes share one element and transition between each other in
+// step with the sidebar's width: the icon holds its place (it drifts 3px into
+// the rail's centre) while the label column fades and is clipped.
+const ROW_BASE = "group relative flex items-center rounded-md text-[12.5px] transition-[margin,width,height,padding,gap,background-color,color] duration-200 ease-out motion-reduce:transition-none";
+const ICON_ROW = `${ROW_BASE} mx-3 w-8 h-8 px-[9px] gap-0`;
+const LABEL_ROW = `${ROW_BASE} mx-2 w-[calc(100%-1rem)] h-7 px-2.5 gap-2.5`;
 const rowClass = (collapsed: boolean) => (collapsed ? ICON_ROW : LABEL_ROW);
 
+// Fades out fast on collapse, and back in once the column has room again.
+const labelFade = (collapsed: boolean) =>
+    cn(
+        "flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden whitespace-nowrap transition-opacity ease-out motion-reduce:transition-none",
+        collapsed ? "opacity-0 duration-100" : "opacity-100 duration-200 delay-75",
+    );
+
+// Rail-only marks (the unread count, an Advisor dot) fade in as the rail settles.
+const RAIL_MARK_IN = "animate-in fade-in-0 zoom-in-50 duration-200 delay-100 fill-mode-both motion-reduce:animate-none";
+
 function isNavItemActive(pathname: string, item: NavItem): boolean {
     return pathname === item.url || pathname.startsWith(item.url + "/");
 }
@@ -251,12 +266,11 @@ function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolea
                     )}
                 >
                     <LockIcon className="w-[13px] h-[13px] shrink-0 text-slate-300 group-hover:text-slate-500" strokeWidth={1.8} />
-                    {/* Collapsed, lucide marks its svg aria-hidden, so the name
-                        comes from a visually hidden span. NOT aria-label: that
-                        would override the whole subtree, silencing the badges
-                        the collapsed rail exists to keep. */}
-                    <span className={collapsed ? "sr-only" : "truncate flex-1 min-w-0 text-left"}>
-                        {collapsed ? `${item.title} · no access` : item.title}
+                    {/* The label stays in the tree when collapsed, so it names
+                        the row for a screen reader while the tooltip shows it. */}
+                    <span className={labelFade(collapsed)}>
+                        <span className="truncate flex-1 min-w-0 text-left">{item.title}</span>
+                        {collapsed && <span className="sr-only"> · no access</span>}
                     </span>
                 </button>
                 </NavTip>
@@ -297,10 +311,8 @@ function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolea
                 )}
             >
                 <LockIcon className="w-[13px] h-[13px] shrink-0 text-slate-300 group-hover:text-slate-500" strokeWidth={1.8} />
-                <span className={collapsed ? "sr-only" : "truncate flex-1 min-w-0 text-left"}>
-                    {collapsed ? `${item.title} · ${planBadge.label} plan` : item.title}
-                </span>
-                {!collapsed && (
+                <span className={labelFade(collapsed)}>
+                    <span className="truncate flex-1 min-w-0 text-left">{item.title}</span>
                     <span
                         className={cn(
                             "h-4 px-1.5 rounded text-[9.5px] font-semibold uppercase tracking-[0.06em] border inline-flex items-center",
@@ -308,8 +320,9 @@ function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolea
                         )}
                     >
                         {planBadge.label}
+                        {collapsed && <span className="sr-only"> plan</span>}
                     </span>
-                )}
+                </span>
             </button>
             </NavTip>
         );
@@ -329,90 +342,71 @@ function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolea
         />
     );
 
-    // Collapsed rail: the label and the ambient count clusters have nowhere to
-    // go, so the row keeps its icon plus the two signals worth interrupting
-    // for: the unread count, and an Advisor finding as a severity dot.
-    if (collapsed) {
-        return (
-            <NavTip collapsed label={item.title}>
-                <Link
-                    to={item.url}
-                    className={cn(
-                        ICON_ROW,
-                        active
-                            ? "bg-slate-200/70 text-slate-900"
-                            : locked
-                                ? "text-slate-400 hover:text-slate-700 hover:bg-slate-200/40"
-                                : "text-slate-600 hover:text-slate-900 hover:bg-slate-200/40",
-                    )}
-                >
-                    {icon}
-                    {/* The name is a hidden span rather than an aria-label so it
-                        composes with the count below it: an aria-label on the
-                        link would replace the whole subtree and announce
-                        "Inbox" where the expanded row announces "Inbox 12". */}
-                    <span className="sr-only">{item.title}</span>
-                    {item.advisorSurface && !locked && (
-                        <AdvisorNavBadge surface={item.advisorSurface} dot />
-                    )}
-                    {badge != null && badge > 0 && (
-                        <span className="absolute -right-0.5 -top-0.5 min-w-[15px] h-[15px] px-1 rounded-full bg-red-500 text-white text-[9px] font-medium leading-none flex items-center justify-center tabular-nums ring-2 ring-white">
-                            <span className="sr-only">{badge} unread</span>
-                            <span aria-hidden>{badge > 9 ? "9+" : badge}</span>
-                        </span>
-                    )}
-                </Link>
-            </NavTip>
-        );
-    }
-
+    // One element for both shapes. Collapsed, the label column (and the
+    // ambient count clusters in it) is clipped away, and the row keeps the two
+    // signals worth interrupting for: the unread count and an Advisor dot.
     return (
-        <Link
-            to={item.url}
-            title={planBadge ? `${item.title} · ${planBadge.label} plan` : undefined}
-            className={cn(
-                LABEL_ROW,
-                active
-                    ? "bg-slate-200/70 text-slate-900 font-medium"
-                    : locked
-                        ? "text-slate-400 hover:text-slate-700 hover:bg-slate-200/40"
-                        : "text-slate-600 hover:text-slate-900 hover:bg-slate-200/40",
-            )}
-        >
-            {icon}
-            {/* min-w-0 lets the label shrink/truncate so the count cluster (and its
-                separator) is never pushed off the row — longer labels like
-                "Campaigns"/"Accounts" used to clip it at narrower widths. */}
-            <span className="truncate flex-1 min-w-0">{item.title}</span>
-            {item.advisorSurface && !locked && <AdvisorNavBadge surface={item.advisorSurface} />}
-            {item.indicator === "campaigns" && !locked && <CampaignActivity />}
-            {item.indicator === "accounts" && !locked && <MailboxActivity />}
-            {item.indicator === "tasks" && !locked && <TasksActivity />}
-            {item.indicator === "meetings" && !locked && <MeetingsActivity />}
-            {item.indicator === "contacts" && !locked && <ContactsActivity />}
-            {item.indicator === "deals" && !locked && <DealsActivity />}
-            {item.indicator === "pipelines" && !locked && <PipelinesActivity />}
-            {item.indicator === "templates" && !locked && <TemplatesActivity />}
-            {item.indicator === "analytics" && !locked && <AnalyticsActivity />}
-            {item.indicator === "apikeys" && !locked && <ApiKeysActivity />}
-            {item.indicator === "integrations" && !locked && <IntegrationsActivity />}
-            {planBadge ? (
-                <span
-                    className={cn(
-                        "h-4 px-1.5 rounded text-[9.5px] font-semibold uppercase tracking-[0.06em] border inline-flex items-center",
-                        planBadge.classes,
+        <NavTip collapsed={collapsed} label={item.title}>
+            <Link
+                to={item.url}
+                title={!collapsed && planBadge ? `${item.title} · ${planBadge.label} plan` : undefined}
+                className={cn(
+                    rowClass(collapsed),
+                    active
+                        ? cn("bg-slate-200/70 text-slate-900", !collapsed && "font-medium")
+                        : locked
+                            ? "text-slate-400 hover:text-slate-700 hover:bg-slate-200/40"
+                            : "text-slate-600 hover:text-slate-900 hover:bg-slate-200/40",
+                )}
+            >
+                {icon}
+                {/* min-w-0 lets the label shrink/truncate so the count cluster (and its
+                    separator) is never pushed off the row — longer labels like
+                    "Campaigns"/"Accounts" used to clip it at narrower widths. */}
+                <span className={labelFade(collapsed)}>
+                    <span className="truncate flex-1 min-w-0">{item.title}</span>
+                    {item.advisorSurface && !locked && !collapsed && <AdvisorNavBadge surface={item.advisorSurface} />}
+                    {item.indicator === "campaigns" && !locked && <CampaignActivity />}
+                    {item.indicator === "accounts" && !locked && <MailboxActivity />}
+                    {item.indicator === "tasks" && !locked && <TasksActivity />}
+                    {item.indicator === "meetings" && !locked && <MeetingsActivity />}
+                    {item.indicator === "contacts" && !locked && <ContactsActivity />}
+                    {item.indicator === "deals" && !locked && <DealsActivity />}
+                    {item.indicator === "pipelines" && !locked && <PipelinesActivity />}
+                    {item.indicator === "templates" && !locked && <TemplatesActivity />}
+                    {item.indicator === "analytics" && !locked && <AnalyticsActivity />}
+                    {item.indicator === "apikeys" && !locked && <ApiKeysActivity />}
+                    {item.indicator === "integrations" && !locked && <IntegrationsActivity />}
+                    {planBadge ? (
+                        <span
+                            className={cn(
+                                "h-4 px-1.5 rounded text-[9.5px] font-semibold uppercase tracking-[0.06em] border inline-flex items-center",
+                                planBadge.classes,
+                            )}
+                        >
+                            {planBadge.label}
+                        </span>
+                    ) : (
+                        !collapsed && badge != null && badge > 0 && (
+                            <span className="text-[10px] font-medium bg-red-500 text-white rounded-full min-w-[16px] h-4 flex items-center justify-center px-1 tabular-nums">
+                                {badge > 99 ? "99+" : badge}
+                            </span>
+                        )
                     )}
-                >
-                    {planBadge.label}
                 </span>
-            ) : (
-                badge != null && badge > 0 && (
-                    <span className="text-[10px] font-medium bg-red-500 text-white rounded-full min-w-[16px] h-4 flex items-center justify-center px-1 tabular-nums">
-                        {badge > 99 ? "99+" : badge}
+                {collapsed && item.advisorSurface && !locked && (
+                    <span className={cn("pointer-events-none absolute inset-0", RAIL_MARK_IN)}>
+                        <AdvisorNavBadge surface={item.advisorSurface} dot />
                     </span>
-                )
-            )}
-        </Link>
+                )}
+                {collapsed && badge != null && badge > 0 && (
+                    <span className={cn("absolute -right-0.5 -top-0.5 min-w-[15px] h-[15px] px-1 rounded-full bg-red-500 text-white text-[9px] font-medium leading-none flex items-center justify-center tabular-nums ring-2 ring-white", RAIL_MARK_IN)}>
+                        <span className="sr-only">{badge} unread</span>
+                        <span aria-hidden>{badge > 9 ? "9+" : badge}</span>
+                    </span>
+                )}
+            </Link>
+        </NavTip>
     );
 }
 
@@ -744,21 +738,39 @@ function Section({
         )
         : [];
 
-    if (collapsed && shown.length === 0) return null;
-
+    // In the rail a folded section with nothing left to show goes, divider and all.
+    const gone = collapsed && shown.length === 0;
     const transition = reduceMotion ? { duration: 0 } : { duration: 0.22, ease: FOLD_EASE };
 
+    // The gap above the divider is animated padding rather than a margin, so
+    // it folds away with the section instead of collapsing through it.
+    const gap = first ? 0 : 16;
+
     return (
-        <div className={first ? "" : "mt-4 pt-4 border-t border-slate-200/50"}>
-            {/* Collapsed, the hairline above the group carries the grouping on
-                its own — a tracked-uppercase label does not fit in 56px. */}
-            {!collapsed && (
+        <motion.div
+            initial={false}
+            animate={
+                gone
+                    ? { height: 0, paddingTop: 0, opacity: 0, overflow: "hidden" }
+                    : { height: "auto", paddingTop: gap, opacity: 1, transitionEnd: { overflow: "visible" } }
+            }
+            transition={transition}
+            inert={gone}
+        >
+            <div className={first ? "" : "pt-4 border-t border-slate-200/50"}>
+                {/* Collapsed, the hairline above the group carries the grouping
+                    on its own: a tracked-uppercase label does not fit in 56px,
+                    so the header shrinks away with the sidebar's width. */}
                 <button
                     type="button"
                     aria-expanded={!folded}
                     aria-controls={id}
                     onClick={() => toggleNavSection(section.id)}
-                    className="group/section mx-2 mb-1 flex h-6 w-[calc(100%-1rem)] items-center gap-1.5 rounded-md px-2 text-[10px] font-medium uppercase tracking-[0.14em] text-slate-400 transition-colors duration-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
+                    inert={collapsed}
+                    className={cn(
+                        "group/section mx-2 flex w-[calc(100%-1rem)] items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-md px-2 text-[10px] font-medium uppercase tracking-[0.14em] text-slate-400 transition-[height,margin,opacity,color] duration-200 ease-out hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 motion-reduce:transition-none",
+                        collapsed ? "mb-0 h-0 opacity-0" : "mb-1 h-6 opacity-100",
+                    )}
                 >
                     <span>{section.label}</span>
                     {/* Always shown while folded so the state reads at a glance;
@@ -790,25 +802,25 @@ function Section({
                         </AnimatePresence>
                     </span>
                 </button>
-            )}
-            <div id={id} className="space-y-px">
-                {/* Each row folds its own height, so the rows around the one
-                    you are on close in on it instead of the block snapping. */}
-                <AnimatePresence initial={false}>
-                    {shown.map((it) => (
-                        <motion.div
-                            key={it.url}
-                            initial={{ height: 0, opacity: 0, overflow: "hidden" }}
-                            animate={{ height: "auto", opacity: 1, transitionEnd: { overflow: "visible" } }}
-                            exit={{ height: 0, opacity: 0, overflow: "hidden" }}
-                            transition={transition}
-                        >
-                            <NavRow item={it} collapsed={collapsed} />
-                        </motion.div>
-                    ))}
-                </AnimatePresence>
+                <div id={id} className="space-y-px">
+                    {/* Each row folds its own height, so the rows around the one
+                        you are on close in on it instead of the block snapping. */}
+                    <AnimatePresence initial={false}>
+                        {shown.map((it) => (
+                            <motion.div
+                                key={it.url}
+                                initial={{ height: 0, opacity: 0, overflow: "hidden" }}
+                                animate={{ height: "auto", opacity: 1, transitionEnd: { overflow: "visible" } }}
+                                exit={{ height: 0, opacity: 0, overflow: "hidden" }}
+                                transition={transition}
+                            >
+                                <NavRow item={it} collapsed={collapsed} />
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
+                </div>
             </div>
-        </div>
+        </motion.div>
     );
 }
 
@@ -840,6 +852,40 @@ function Section({
  * the mailboxes can send today under the scheduler's clamps, not their caps
  * added up.
  */
+// The panel's two shapes share nothing, so they cross-fade while the slot
+// eases to the incoming one's height instead of snapping to it.
+function LivePanelSlot({ collapsed }: { collapsed: boolean }) {
+    const reduceMotion = useReducedMotion();
+    const inner = useRef<HTMLDivElement>(null);
+    const [height, setHeight] = useState<number | "auto">("auto");
+
+    useLayoutEffect(() => {
+        const el = inner.current;
+        if (!el) return;
+        const observer = new ResizeObserver(() => setHeight(el.offsetHeight));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    const ease = reduceMotion ? { duration: 0 } : { duration: 0.2, ease: FOLD_EASE };
+    return (
+        <motion.div initial={false} animate={{ height }} transition={ease} className="shrink-0 overflow-hidden">
+            <div ref={inner} className="relative flow-root">
+                <AnimatePresence initial={false} mode="popLayout">
+                    <motion.div
+                        key={collapsed ? "rail" : "full"}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1, transition: reduceMotion ? { duration: 0 } : { duration: 0.15, delay: 0.08 } }}
+                        exit={{ opacity: 0, transition: reduceMotion ? { duration: 0 } : { duration: 0.1 } }}
+                    >
+                        <LivePanel collapsed={collapsed} />
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+        </motion.div>
+    );
+}
+
 function LivePanel({ collapsed = false }: { collapsed?: boolean }) {
     const emails = useAppStore((s) => s.emails);
     const unseenCount = useAppStore((s) => s.unseenCount);
@@ -1235,14 +1281,14 @@ export function AppNav({ open = false, onClose }: { open?: boolean; onClose?: ()
                     </button>
                 </div>
 
-            <LivePanel collapsed={iconOnly} />
+            <LivePanelSlot collapsed={iconOnly} />
 
             {/* overflow-x-hidden: mid-animation the rail is narrower than the
                 expanded rows still laid out inside it, and without this the
                 column grows a horizontal scrollbar for those 200ms. */}
             {/* Collapsed, pt-1 leaves room for the unread badge that sits
                 above the first row's corner, which the scroller would clip. */}
-            <nav className={cn("flex-1 overflow-y-auto overflow-x-hidden pb-3", iconOnly && "pt-1")}>
+            <nav className={cn("flex-1 overflow-y-auto overflow-x-hidden pb-3 transition-[padding] duration-200 ease-out", iconOnly && "pt-1")}>
                 <div className="space-y-px">
                     {topItems.map((it) => (
                         <NavRow key={it.url + it.title} item={it} collapsed={iconOnly} />
@@ -1312,9 +1358,9 @@ function CollapseToggle({
                 ) : (
                     <PanelLeftCloseIcon className="w-[14px] h-[14px] shrink-0 text-slate-400 group-hover:text-slate-600" strokeWidth={1.6} />
                 )}
-                {!collapsed && (
+                <span className={labelFade(collapsed)}>
                     <span className="truncate flex-1 min-w-0 text-left">Collapse</span>
-                )}
+                </span>
             </button>
         </ShortcutTooltip>
     );
diff --git a/web/src/components/layout/UserNav.tsx b/web/src/components/layout/UserNav.tsx
index 3aa2e28d2..989befaa2 100644
--- a/web/src/components/layout/UserNav.tsx
+++ b/web/src/components/layout/UserNav.tsx
@@ -46,11 +46,13 @@ export function UserNav({ collapsed = false }: { collapsed?: boolean }) {
             <PopoverMenuTrigger asChild>
                 <button
                     aria-label={collapsed ? displayName : undefined}
+                    // One element in both shapes so it eases with the sidebar's
+                    // width: the avatar drifts to the rail's centre, the name fades.
                     className={cn(
-                        "flex items-center rounded-md hover:bg-slate-200/40 transition-colors cursor-pointer",
+                        "flex items-center mx-3 my-2 rounded-md hover:bg-slate-200/40 cursor-pointer transition-[width,padding,gap,background-color] duration-200 ease-out motion-reduce:transition-none",
                         collapsed
-                            ? "mx-auto my-2 size-8 justify-center"
-                            : "gap-2.5 mx-3 my-2 px-1.5 py-1 w-[calc(100%-1.5rem)]",
+                            ? "w-8 gap-0 p-0.5"
+                            : "w-[calc(100%-1.5rem)] gap-2.5 px-1.5 py-1",
                     )}
                 >
                     <div className="w-7 h-7 rounded-full bg-slate-900 flex items-center justify-center shrink-0 overflow-hidden">
@@ -66,16 +68,20 @@ export function UserNav({ collapsed = false }: { collapsed?: boolean }) {
                             </span>
                         )}
                     </div>
-                    {!collapsed && (
-                        <div className="flex-1 min-w-0 text-left">
-                            <div className="text-[13px] text-slate-900 truncate">
-                                {displayName}
-                            </div>
-                            <div className="text-[10.5px] text-slate-500 truncate">
-                                {user.email}
-                            </div>
+                    <div
+                        aria-hidden={collapsed || undefined}
+                        className={cn(
+                            "flex-1 min-w-0 overflow-hidden whitespace-nowrap text-left transition-opacity ease-out motion-reduce:transition-none",
+                            collapsed ? "opacity-0 duration-100" : "opacity-100 duration-200 delay-75",
+                        )}
+                    >
+                        <div className="text-[13px] text-slate-900 truncate">
+                            {displayName}
                         </div>
-                    )}
+                        <div className="text-[10.5px] text-slate-500 truncate">
+                            {user.email}
+                        </div>
+                    </div>
                 </button>
             </PopoverMenuTrigger>
 

From 0c0b9326911397910ff994f2f06fb38ecdeca88f Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <meszmatew@gmail.com>
Date: Tue, 29 Sep 2026 04:28:59 -0700
Subject: [PATCH 6/6] feat: mark the sidebar row for the current page with
 aria-current so a folded section announces where you are, and assert in the
 unibox layout test that the collapsed rail keeps its label in the link as a
 faded column rather than an sr-only span

---
 web/src/app/app/unibox/uniboxLayout.test.tsx | 12 ++++++------
 web/src/components/layout/AppNav.tsx         |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/src/app/app/unibox/uniboxLayout.test.tsx b/web/src/app/app/unibox/uniboxLayout.test.tsx
index 956f9ccea..f2d66a65e 100644
--- a/web/src/app/app/unibox/uniboxLayout.test.tsx
+++ b/web/src/app/app/unibox/uniboxLayout.test.tsx
@@ -175,14 +175,14 @@ describe("unibox desktop layout (#473)", SUITE, () => {
 
             expect(useAppStore.getState().navCollapsed).toBe(true);
             expect(aside.className).toContain("md:w-14");
-            // Same destination, no VISIBLE label: the name moves into a
-            // visually hidden span, because lucide marks its svg aria-hidden
-            // and the link would otherwise announce as nothing at all. It must
-            // not become an aria-label: that would override the whole subtree
-            // and silence the unread count nested in the same link.
+            // Same destination, no VISIBLE label: the label column is faded and
+            // clipped but stays in the link, because lucide marks its svg
+            // aria-hidden and the link would otherwise announce as nothing at
+            // all. It must not become an aria-label: that would override the
+            // whole subtree and silence the unread count nested in the same link.
             expect(settingsLink().getAttribute("aria-label")).toBeNull();
             expect(settingsLink().textContent).toBe("Settings");
-            expect(settingsLink().querySelector("span")?.className).toContain("sr-only");
+            expect(settingsLink().querySelector("span")?.className).toContain("opacity-0");
 
             // `b` is the documented shortcut for the same thing. It was wired to
             // the store while nothing rendered from it; this is what makes it
diff --git a/web/src/components/layout/AppNav.tsx b/web/src/components/layout/AppNav.tsx
index 7ebbfa089..0d0ea550e 100644
--- a/web/src/components/layout/AppNav.tsx
+++ b/web/src/components/layout/AppNav.tsx
@@ -349,6 +349,7 @@ function NavRow({ item, collapsed = false }: { item: NavItem; collapsed?: boolea
         <NavTip collapsed={collapsed} label={item.title}>
             <Link
                 to={item.url}
+                aria-current={active ? "page" : undefined}
                 title={!collapsed && planBadge ? `${item.title} · ${planBadge.label} plan` : undefined}
                 className={cn(
                     rowClass(collapsed),