From 7a213fd7376147f1b3220a29c28f5eed9be6a026 Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Sat, 26 Sep 2026 16:04:48 +0000
Subject: [PATCH 1/8] Let the desktop sidebar fold to icons and be resized, and
 remember both

A toggle in the sidebar's header folds it to an icon-only rail and back. Folded, every entry keeps its name for assistive technology and shows it as a tooltip on hover and keyboard focus (with its count or status, if it has one); counts become a bubble on the icon, section headings a short rule, and the footer shows the avatar, settings, the project's monogram and a logout icon.

Open, its right edge can be dragged between 240 and 400px, or moved with the arrow keys, Home and End as a focusable separator; a double click resets it to 286px, and dragging well past the minimum folds it. Width and folded state are kept in localStorage per browser. The mobile drawer is unchanged.
---
 src/App.tsx                                   |  10 +-
 src/components/layout/SideBar.tsx             | 123 ++++++++++++++---
 src/components/layout/SidebarNavLink.tsx      |  86 +++++++++++-
 src/components/layout/SidebarResizeHandle.tsx | 129 ++++++++++++++++++
 src/components/layout/useSidebarLayout.ts     |  86 ++++++++++++
 .../projects/components/ProjectSwitcher.tsx   |  18 ++-
 src/styles/index.css                          |  19 +++
 tests/unit/a11y/SideBar.a11y.test.tsx         |  20 +++
 tests/unit/components/layout/SideBar.test.tsx |  92 ++++++++++++-
 9 files changed, 551 insertions(+), 32 deletions(-)
 create mode 100644 src/components/layout/SidebarResizeHandle.tsx
 create mode 100644 src/components/layout/useSidebarLayout.ts

diff --git a/src/App.tsx b/src/App.tsx
index c66affee8..3903feeed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -111,11 +111,15 @@ function AppContent() {
           screen — see momentStage.ts in the moments feature. */}
         <main
           data-moment-stage
-          className={`relative min-h-screen min-w-0 flex-1 pt-[64px] lg:pt-0 ${
+          className={`app-sidebar-eases relative min-h-screen min-w-0 flex-1 pt-[64px] lg:pt-0 ${
             // The sidebar is `fixed` from `lg` up (see SideBar), so it is out of
             // flow and the page has to leave its width free itself. In focus mode
-            // it slides away over the content, so the margin goes with it.
-            signedIn && !isFocused ? "lg:ml-[var(--app-sidebar-width)]" : ""
+            // it slides away over the content, so the margin goes with it. Its
+            // width can be changed and folded, so it is read from the variable
+            // the sidebar keeps, falling back to the default before it has run.
+            signedIn && !isFocused
+              ? "lg:ml-[var(--app-sidebar-desktop-width,var(--app-sidebar-width))]"
+              : ""
           }`}
         >
           <AppRouter />
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index b26492a31..844ad9686 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -1,7 +1,7 @@
-import { useId, useState } from "react";
+import { useId, useLayoutEffect, useState } from "react";
 import { motion, useMotionValue } from "framer-motion";
 import { NavLink, useLocation } from "react-router-dom";
-import { LogOut, Menu, Settings, X } from "lucide-react";
+import { LogOut, Menu, PanelLeftClose, PanelLeftOpen, Settings, X } from "lucide-react";
 import { UserAvatar } from "../common/UserAvatar";
 import { useAuth } from "../../context/useAuth";
 import { canAccessRoute, isOnboardingAccessible, type AppRoute } from "../../auth/accessPolicy";
@@ -29,6 +29,8 @@ import {
 } from "./SidebarNavIcons";
 import { SidebarLogo } from "./SidebarLogo";
 import { SidebarNavLink } from "./SidebarNavLink";
+import { SidebarResizeHandle } from "./SidebarResizeHandle";
+import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH_VAR, useSidebarLayout } from "./useSidebarLayout";
 import { hoverSpringToken } from "../../styles/tokens";
 
 type SidebarNavItem = {
@@ -56,6 +58,10 @@ type SidebarContentProps = {
   openEscalationCount?: number;
   /** Skip requests the project manager answered that the member has not looked at yet. */
   unseenSkipAnswerCount?: number;
+  /** Folded to icons -- the desktop sidebar only; the mobile drawer is always full width. */
+  collapsed?: boolean;
+  /** Folds or unfolds the desktop sidebar. Without it there is no toggle (the mobile drawer). */
+  onToggleCollapsed?: () => void;
 };
 
 /**
@@ -167,6 +173,8 @@ function SidebarContent({
   hasPmAttentionItems = false,
   openEscalationCount = 0,
   unseenSkipAnswerCount = 0,
+  collapsed = false,
+  onToggleCollapsed,
 }: SidebarContentProps) {
   const { profile, logout, status } = useAuth();
   const { canManageSelected } = useProjectContext();
@@ -258,10 +266,39 @@ function SidebarContent({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-app-bg text-app-text">
-      <div className="flex shrink-0 items-center gap-3 px-[24px] py-[24px]">
+      <div
+        className={`flex shrink-0 items-center gap-3 py-[24px] ${
+          collapsed ? "flex-col px-0" : "px-[24px]"
+        }`}
+      >
         <SidebarLogo />
 
-        <h1 className="text-lg leading-none font-bold tracking-tight text-app-text">SprintStart</h1>
+        <h1
+          className={
+            collapsed ? "sr-only" : "text-lg leading-none font-bold tracking-tight text-app-text"
+          }
+        >
+          SprintStart
+        </h1>
+
+        {onToggleCollapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapsed}
+            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            aria-expanded={!collapsed}
+            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-app-text-muted transition-colors hover:bg-app-surface-hover hover:text-app-text focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none ${
+              collapsed ? "" : "ml-auto"
+            }`}
+          >
+            {collapsed ? (
+              <PanelLeftOpen aria-hidden="true" className="h-[18px] w-[18px]" />
+            ) : (
+              <PanelLeftClose aria-hidden="true" className="h-[18px] w-[18px]" />
+            )}
+          </button>
+        )}
       </div>
 
       <nav
@@ -276,12 +313,15 @@ function SidebarContent({
         onPointerLeave={() => pointerY.set(Number.NEGATIVE_INFINITY)}
         // 24px inner padding. This and DOCK_HOVER_SCALE trade directly
         // against each other: the item grows rightwards from a fixed
-        // left edge, so 286px sidebar - 2x24 = 238px wide, x1.06 = 252px,
+        // left edge, so at the default 286px sidebar - 2x24 = 238px wide, x1.06 = 252px,
         // finishing ~10px short of the border. Pulling the content
         // further left again would need a smaller scale to keep that
         // gap. Header and footer share the inset, so everything lines
         // up on one left edge.
-        className="app-scrollbar min-h-0 flex-1 space-y-[5px] overflow-x-hidden overflow-y-auto px-[24px] py-[20px]"
+        // Folded to icons the inset shrinks to 16px, which leaves each 44px row centred.
+        className={`app-scrollbar min-h-0 flex-1 space-y-[5px] overflow-x-hidden overflow-y-auto py-[20px] ${
+          collapsed ? "px-[16px]" : "px-[24px]"
+        }`}
       >
         {sections.map((section, sectionIndex) => (
           <div
@@ -289,9 +329,21 @@ function SidebarContent({
             className={sectionIndex > 0 ? "pt-[20px]" : undefined}
           >
             {section.heading ? (
-              <p className="px-[12px] pb-[8px] text-[10px] font-semibold tracking-[0.18em] text-app-text-muted uppercase">
-                {section.heading}
-              </p>
+              collapsed ? (
+                // No room for the words: a short rule marks where the group starts, and the
+                // heading stays for assistive technology.
+                <>
+                  <p className="sr-only">{section.heading}</p>
+                  <span
+                    aria-hidden="true"
+                    className="mx-auto mb-[12px] block h-px w-6 bg-app-border"
+                  />
+                </>
+              ) : (
+                <p className="px-[12px] pb-[8px] text-[10px] font-semibold tracking-[0.18em] text-app-text-muted uppercase">
+                  {section.heading}
+                </p>
+              )
             ) : null}
 
             <div className="space-y-[5px]">
@@ -327,6 +379,7 @@ function SidebarContent({
                     item.path === ESCALATION_INBOX_PATH ? describeOpenEscalations : undefined
                   }
                   onNavigate={onNavigate}
+                  collapsed={collapsed}
                 />
               ))}
             </div>
@@ -337,10 +390,18 @@ function SidebarContent({
       {/* Floating glass card instead of a full-bleed bar. The 12px outer
                 gutter plus 12px inner padding lines its content up with the
                 24px inset used by the nav items above. */}
-      <div className="shrink-0 px-[12px] pt-[8px] pb-[16px]">
-        <div className="space-y-[12px] rounded-[18px] border border-app-border/70 bg-app-surface/70 p-[12px] shadow-[0_10px_30px_-18px_rgba(0,0,0,0.5)] backdrop-blur-xl">
+      <div className={`shrink-0 pt-[8px] pb-[16px] ${collapsed ? "px-[8px]" : "px-[12px]"}`}>
+        <div
+          className={`space-y-[12px] rounded-[18px] border border-app-border/70 bg-app-surface/70 shadow-[0_10px_30px_-18px_rgba(0,0,0,0.5)] backdrop-blur-xl ${
+            collapsed ? "p-[6px]" : "p-[12px]"
+          }`}
+        >
           {profile && (
-            <div className="flex items-center justify-between gap-2 py-[2px]">
+            <div
+              className={`flex items-center gap-2 py-[2px] ${
+                collapsed ? "flex-col" : "justify-between"
+              }`}
+            >
               <div className="flex items-center gap-3 overflow-hidden">
                 <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-app-surface-muted">
                   <UserAvatar
@@ -351,7 +412,7 @@ function SidebarContent({
                   />
                 </div>
 
-                <div className="flex flex-col overflow-hidden">
+                <div className={collapsed ? "sr-only" : "flex flex-col overflow-hidden"}>
                   <span className="truncate text-sm font-semibold text-app-text">
                     {profile.username}
                   </span>
@@ -386,7 +447,7 @@ function SidebarContent({
             </div>
           )}
 
-          <ProjectSwitcher className="w-full" />
+          <ProjectSwitcher className="w-full" compact={collapsed} />
 
           <motion.button
             type="button"
@@ -397,10 +458,12 @@ function SidebarContent({
             whileHover={status === "loading" ? undefined : { scale: 1.02 }}
             whileTap={status === "loading" ? undefined : { scale: 0.98 }}
             transition={hoverSpringToken}
+            aria-label={collapsed ? "Logout" : undefined}
+            title={collapsed ? "Logout" : undefined}
             className="flex h-[40px] w-full items-center justify-center gap-[12px] rounded-[12px] border border-app-danger-border/40 bg-app-danger-bg/70 text-sm font-medium text-app-danger-text backdrop-blur-md transition-colors hover:border-app-danger-solid hover:bg-app-danger-solid hover:text-white focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
           >
-            <LogOut className="h-[16px] w-[16px]" />
-            Logout
+            <LogOut aria-hidden="true" className="h-[16px] w-[16px]" />
+            {!collapsed && "Logout"}
           </motion.button>
         </div>
       </div>
@@ -452,6 +515,20 @@ export function SideBar() {
     pathname,
   );
 
+  // The desktop sidebar's width and folded state, remembered across visits. The mobile drawer
+  // does not use either: it keeps its fixed width and opens over the page.
+  const sidebarLayout = useSidebarLayout();
+  const desktopWidth = sidebarLayout.collapsed ? SIDEBAR_COLLAPSED_WIDTH : sidebarLayout.width;
+  // On the root, where the page's own margin reads it too. Set before paint, so a folded sidebar
+  // never shows at full width for a frame on load.
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty(SIDEBAR_WIDTH_VAR, `${desktopWidth}px`);
+    return () => {
+      root.style.removeProperty(SIDEBAR_WIDTH_VAR);
+    };
+  }, [desktopWidth]);
+
   const closeMobileSidebar = () => {
     setIsMobileSidebarOpen(false);
   };
@@ -460,14 +537,26 @@ export function SideBar() {
     <>
       <aside
         aria-label="Desktop Sidebar"
-        className="fixed top-0 bottom-0 left-0 hidden w-[var(--app-sidebar-width)] flex-col border-r border-app-border bg-app-bg lg:flex"
+        // Fixed from `lg` up and out of the page's flow (the page leaves its width free, see
+        // App), so the width lives in a CSS variable both read. It eases when the sidebar folds
+        // and follows the pointer exactly while the edge is dragged (`app-sidebar-eases`).
+        className="app-sidebar-eases fixed top-0 bottom-0 left-0 hidden w-[var(--app-sidebar-desktop-width,var(--app-sidebar-width))] flex-col border-r border-app-border bg-app-bg lg:flex"
       >
         <SidebarContent
           aria-label="Desktop Navigation"
           hasPmAttentionItems={hasPmAttentionItems}
           openEscalationCount={openEscalationCount}
           unseenSkipAnswerCount={unseenSkipAnswerCount}
+          collapsed={sidebarLayout.collapsed}
+          onToggleCollapsed={sidebarLayout.toggleCollapsed}
         />
+        {!sidebarLayout.collapsed && (
+          <SidebarResizeHandle
+            width={sidebarLayout.width}
+            onResize={sidebarLayout.setWidth}
+            onCollapse={() => sidebarLayout.setCollapsed(true)}
+          />
+        )}
       </aside>
 
       <header className="fixed top-0 right-0 left-0 z-40 flex h-[64px] items-center justify-between border-b border-app-border bg-app-bg px-[16px] lg:hidden">
diff --git a/src/components/layout/SidebarNavLink.tsx b/src/components/layout/SidebarNavLink.tsx
index 68202bde7..de81b5c26 100644
--- a/src/components/layout/SidebarNavLink.tsx
+++ b/src/components/layout/SidebarNavLink.tsx
@@ -1,5 +1,6 @@
 import { motion, useReducedMotion, useSpring, useTransform, type MotionValue } from "framer-motion";
 import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { NavLink } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
 import type { SidebarIcon } from "./SidebarNavIcons";
@@ -179,6 +180,12 @@ type SidebarNavLinkProps = {
   busy?: boolean;
   busyLabel?: string;
   onNavigate?: () => void;
+  /**
+   * The desktop sidebar folded to icons: the label is kept for assistive technology only and
+   * shown as a tooltip beside the icon on hover and keyboard focus, and a count shrinks to a
+   * bubble on the icon's corner.
+   */
+  collapsed?: boolean;
 };
 
 const BASE_LINK_CLASS = [
@@ -215,6 +222,7 @@ export function SidebarNavLink({
   busy = false,
   busyLabel,
   onNavigate,
+  collapsed = false,
 }: SidebarNavLinkProps) {
   const prefersReducedMotion = useReducedMotion();
   const indicatorTransition = prefersReducedMotion ? { duration: 0 } : slidingIndicatorSpringToken;
@@ -240,6 +248,16 @@ export function SidebarNavLink({
   // full lift outright.
   const [isFocused, setIsFocused] = useState(false);
 
+  // Where the collapsed entry's tooltip sits, measured when it is asked for (pointer over the
+  // entry, or keyboard focus on it) -- `null` while hidden. Drawn in a portal at a fixed position:
+  // the nav clips anything that reaches past its edge, which is exactly where a tooltip goes.
+  const [tooltipAt, setTooltipAt] = useState<{ x: number; y: number } | null>(null);
+  const showTooltip = () => {
+    const rect = elementRef.current?.getBoundingClientRect();
+    if (collapsed && rect) setTooltipAt({ x: rect.right + 10, y: rect.top + rect.height / 2 });
+  };
+  const hideTooltip = () => setTooltipAt(null);
+
   // The row's centre, measured once per render instead of on every pointer
   // move. `getBoundingClientRect` forces layout, and doing that for every
   // entry on every move is exactly the work that makes a fast sweep feel
@@ -338,8 +356,20 @@ export function SidebarNavLink({
         transformOrigin: "left center",
         willChange: "transform",
       }}
-      onFocusCapture={() => setIsFocused(true)}
-      onBlurCapture={() => setIsFocused(false)}
+      onFocusCapture={() => {
+        setIsFocused(true);
+        showTooltip();
+      }}
+      onBlurCapture={() => {
+        setIsFocused(false);
+        hideTooltip();
+      }}
+      onPointerEnter={showTooltip}
+      onPointerLeave={hideTooltip}
+      onKeyDown={(event) => {
+        // The usual way out of a tooltip that is in the way.
+        if (event.key === "Escape") hideTooltip();
+      }}
     >
       <NavLink
         to={to}
@@ -525,7 +555,9 @@ export function SidebarNavLink({
                   )}
                 </motion.span>
 
-                <span>{label}</span>
+                {/* Folded to icons, the label is still the entry's accessible name -- and the
+                    tooltip's text, for everyone else. */}
+                <span className={collapsed ? "sr-only" : undefined}>{label}</span>
 
                 {/* One trailing slot, not two. The count takes it when there is
                                     one: a number and the active dot side by side read as
@@ -533,7 +565,12 @@ export function SidebarNavLink({
                                     you are already on has less to tell you than the one
                                     with work waiting behind it. */}
                 {busy ? (
-                  <span className="ml-auto flex items-center" role="status">
+                  <span
+                    className={
+                      collapsed ? "absolute -top-1 -right-1 flex" : "ml-auto flex items-center"
+                    }
+                    role="status"
+                  >
                     <span
                       aria-hidden="true"
                       className={`h-[14px] w-[14px] rounded-full border-2 border-t-transparent motion-safe:animate-spin ${
@@ -543,7 +580,16 @@ export function SidebarNavLink({
                     <span className="sr-only">{busyLabel ?? "In progress"}</span>
                   </span>
                 ) : count > 0 ? (
-                  <span className="ml-auto flex items-center">
+                  // Folded to icons, the count sits on the icon's corner. Its words (what a screen
+                  // reader hears) are its tooltip, since a bare number does not say of what.
+                  <span
+                    className={
+                      collapsed
+                        ? "absolute -top-2 -right-2.5 flex items-center"
+                        : "ml-auto flex items-center"
+                    }
+                    title={countLabel?.(count)}
+                  >
                     {/* The same amber as the icon beside it, and the same
                                             amber on the active row as off it. This is the
                                             second half of one signal, not a badge of its
@@ -559,7 +605,7 @@ export function SidebarNavLink({
                     </span>
                     <span className="sr-only">{countLabel?.(count) ?? `${count} waiting`}</span>
                   </span>
-                ) : isHighlighted ? (
+                ) : isHighlighted && !collapsed ? (
                   <span className="ml-auto h-[6px] w-[6px] rounded-full bg-white" />
                 ) : null}
               </span>
@@ -567,6 +613,34 @@ export function SidebarNavLink({
           );
         }}
       </NavLink>
+
+      {collapsed &&
+        tooltipAt &&
+        createPortal(
+          // Hidden from assistive technology: the entry's own name and status already say all
+          // of this; the tooltip is the same words for someone who can only see an icon.
+          <span
+            aria-hidden="true"
+            style={{ left: tooltipAt.x, top: tooltipAt.y }}
+            className="pointer-events-none fixed z-[70] -translate-y-1/2 rounded-lg border border-app-border bg-app-surface px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-app-text shadow-lg"
+          >
+            {label}
+            {busy ? (
+              <span className="block text-[11px] font-normal text-app-text-muted">
+                {busyLabel ?? "In progress"}
+              </span>
+            ) : count > 0 ? (
+              <span className="block text-[11px] font-normal text-app-text-muted">
+                {countLabel?.(count) ?? `${count} waiting`}
+              </span>
+            ) : needsAttention ? (
+              <span className="block text-[11px] font-normal text-app-text-muted">
+                {attentionLabel ?? "Needs attention"}
+              </span>
+            ) : null}
+          </span>,
+          document.body,
+        )}
     </motion.div>
   );
 }
diff --git a/src/components/layout/SidebarResizeHandle.tsx b/src/components/layout/SidebarResizeHandle.tsx
new file mode 100644
index 000000000..0cebc6721
--- /dev/null
+++ b/src/components/layout/SidebarResizeHandle.tsx
@@ -0,0 +1,129 @@
+import { useRef, type KeyboardEvent, type PointerEvent } from "react";
+import {
+  SIDEBAR_DEFAULT_WIDTH,
+  SIDEBAR_WIDTH_VAR,
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_WIDTH,
+  SIDEBAR_WIDTH_STEP,
+  clampSidebarWidth,
+} from "./useSidebarLayout";
+
+/** Dragged this far past the minimum, the sidebar folds to icons instead of stopping there. */
+const COLLAPSE_OVERSHOOT_PX = 80;
+
+type SidebarResizeHandleProps = {
+  width: number;
+  onResize: (width: number) => void;
+  onCollapse: () => void;
+};
+
+/** Marks a drag on the root element, where `app-sidebar-eases` holds its transition off meanwhile. */
+function setDragging(dragging: boolean) {
+  if (dragging) document.documentElement.dataset.sidebarResizing = "true";
+  else delete document.documentElement.dataset.sidebarResizing;
+}
+
+/**
+ * The desktop sidebar's right edge, as something to drag: wider or narrower within
+ * {@link SIDEBAR_MIN_WIDTH} and {@link SIDEBAR_MAX_WIDTH}, folded to icons when pulled well past
+ * the minimum, back to the default on a double click.
+ *
+ * While dragging it writes the width straight into the sidebar's CSS variable (which the page's
+ * margin reads too) and only hands the result back on release: a state update per pointer move
+ * would re-render every entry of the sidebar sixty times a second for a line that just follows
+ * the mouse.
+ *
+ * A `separator` with a value, so it is reachable and usable from the keyboard too: the arrow
+ * keys move the edge, Home and End jump to the limits, Enter folds the sidebar to icons.
+ */
+export function SidebarResizeHandle({ width, onResize, onCollapse }: SidebarResizeHandleProps) {
+  const drag = useRef<{ startX: number; startWidth: number; raw: number } | null>(null);
+
+  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = { startX: event.clientX, startWidth: width, raw: width };
+    setDragging(true);
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const current = drag.current;
+    if (!current) return;
+    current.raw = current.startWidth + event.clientX - current.startX;
+    document.documentElement.style.setProperty(
+      SIDEBAR_WIDTH_VAR,
+      `${clampSidebarWidth(current.raw)}px`,
+    );
+  };
+
+  const endDrag = (event: PointerEvent<HTMLDivElement>) => {
+    const current = drag.current;
+    if (!current) return;
+    drag.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    setDragging(false);
+    // The sidebar writes the variable again from its state on the next render.
+    if (current.raw < SIDEBAR_MIN_WIDTH - COLLAPSE_OVERSHOOT_PX) {
+      // Keeps the width it had, for when it is opened again.
+      onCollapse();
+    } else {
+      onResize(current.raw);
+    }
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const next =
+      event.key === "ArrowLeft"
+        ? width - SIDEBAR_WIDTH_STEP
+        : event.key === "ArrowRight"
+          ? width + SIDEBAR_WIDTH_STEP
+          : event.key === "Home"
+            ? SIDEBAR_MIN_WIDTH
+            : event.key === "End"
+              ? SIDEBAR_MAX_WIDTH
+              : null;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onCollapse();
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    onResize(next);
+  };
+
+  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex --
+     A focusable `separator` with a value is the ARIA pattern for a splitter, and an interactive
+     widget when focusable; the lint rules treat every separator as static. */
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize sidebar"
+      aria-valuenow={width}
+      aria-valuemin={SIDEBAR_MIN_WIDTH}
+      aria-valuemax={SIDEBAR_MAX_WIDTH}
+      tabIndex={0}
+      title="Drag to resize, double-click to reset"
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      onDoubleClick={() => onResize(SIDEBAR_DEFAULT_WIDTH)}
+      onKeyDown={onKeyDown}
+      // A wide, invisible grip centred on the border; the line itself only shows on hover, focus
+      // or drag.
+      className="group absolute top-0 -right-1.5 z-20 flex h-full w-3 cursor-col-resize touch-none justify-center focus-visible:outline-none"
+    >
+      <span
+        aria-hidden="true"
+        className="h-full w-0.5 bg-transparent transition-colors group-hover:bg-app-brand-border-strong group-focus-visible:bg-app-focus group-active:bg-app-brand"
+      />
+    </div>
+  );
+  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+}
diff --git a/src/components/layout/useSidebarLayout.ts b/src/components/layout/useSidebarLayout.ts
new file mode 100644
index 000000000..babd00ada
--- /dev/null
+++ b/src/components/layout/useSidebarLayout.ts
@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useState } from "react";
+
+/** The desktop sidebar's width before anyone has changed it. */
+export const SIDEBAR_DEFAULT_WIDTH = 286;
+/**
+ * Narrow enough to give a page room, wide enough that the longest entry ("Access Management")
+ * and a count badge still fit on one line beside their icon.
+ */
+export const SIDEBAR_MIN_WIDTH = 240;
+/** Past this the sidebar stops being navigation and starts taking the page's space. */
+export const SIDEBAR_MAX_WIDTH = 400;
+/** Icons only: an entry's 44px row plus the nav's padding. */
+export const SIDEBAR_COLLAPSED_WIDTH = 76;
+/** How far one arrow key press on the resize handle moves the edge. */
+export const SIDEBAR_WIDTH_STEP = 16;
+
+const STORAGE_KEY = "sprintstart.sidebar-layout";
+
+/**
+ * The CSS variable the desktop sidebar's width lives in, on the root element: the sidebar is
+ * `fixed`, so the page leaves room for it with a margin that reads the same variable. Separate
+ * from `--app-sidebar-width`, which the mobile drawer keeps using at its fixed width.
+ */
+export const SIDEBAR_WIDTH_VAR = "--app-sidebar-desktop-width";
+
+export type SidebarLayout = { width: number; collapsed: boolean };
+
+export function clampSidebarWidth(width: number): number {
+  return Math.round(Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, width)));
+}
+
+const DEFAULT_LAYOUT: SidebarLayout = { width: SIDEBAR_DEFAULT_WIDTH, collapsed: false };
+
+/**
+ * Reads the saved layout, falling back to the default for anything missing or malformed.
+ * Storage can throw outright (a private window, blocked site data), which is just "nothing saved".
+ */
+function readLayout(): SidebarLayout {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULT_LAYOUT;
+    const saved = JSON.parse(raw) as Partial<SidebarLayout> | null;
+    return {
+      width:
+        typeof saved?.width === "number" && Number.isFinite(saved.width)
+          ? clampSidebarWidth(saved.width)
+          : SIDEBAR_DEFAULT_WIDTH,
+      collapsed: saved?.collapsed === true,
+    };
+  } catch {
+    return DEFAULT_LAYOUT;
+  }
+}
+
+/**
+ * The desktop sidebar's width and whether it is collapsed to icons, kept in `localStorage` so
+ * both are still there on the next visit.
+ *
+ * Per browser rather than per account: how wide a sidebar should be depends on the screen it is
+ * on, and the same person on a laptop and on a wide monitor wants two different answers.
+ */
+export function useSidebarLayout() {
+  const [layout, setLayout] = useState<SidebarLayout>(readLayout);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
+    } catch {
+      // Not saved; the layout still holds for this visit.
+    }
+  }, [layout]);
+
+  const setWidth = useCallback((width: number) => {
+    setLayout((current) => ({ ...current, width: clampSidebarWidth(width) }));
+  }, []);
+
+  const setCollapsed = useCallback((collapsed: boolean) => {
+    setLayout((current) => ({ ...current, collapsed }));
+  }, []);
+
+  const toggleCollapsed = useCallback(() => {
+    setLayout((current) => ({ ...current, collapsed: !current.collapsed }));
+  }, []);
+
+  return { ...layout, setWidth, setCollapsed, toggleCollapsed };
+}
diff --git a/src/features/projects/components/ProjectSwitcher.tsx b/src/features/projects/components/ProjectSwitcher.tsx
index 6453060eb..2b3c5d45b 100644
--- a/src/features/projects/components/ProjectSwitcher.tsx
+++ b/src/features/projects/components/ProjectSwitcher.tsx
@@ -13,6 +13,8 @@ const SWITCHER_CHORD = IS_MAC ? "⌘ + K" : "Ctrl + K";
 
 type ProjectSwitcherProps = {
   className?: string;
+  /** Only the project's monogram, for the sidebar folded to icons. Same button, same modal. */
+  compact?: boolean;
 };
 
 /**
@@ -22,7 +24,7 @@ type ProjectSwitcherProps = {
  * sidebar layout is unaffected for those users. Opens a modal picker on click
  * or with Cmd/Ctrl+K; focus trapping and restoration are handled by `Modal`.
  */
-export function ProjectSwitcher({ className = "" }: ProjectSwitcherProps) {
+export function ProjectSwitcher({ className = "", compact = false }: ProjectSwitcherProps) {
   const {
     projects,
     selectedProject,
@@ -75,12 +77,18 @@ export function ProjectSwitcher({ className = "" }: ProjectSwitcherProps) {
         aria-haspopup="dialog"
         aria-expanded={isOpen}
         aria-label={`Switch project. Current project: ${triggerLabel}`}
-        title={`Switch project (${SWITCHER_CHORD})`}
+        title={
+          compact
+            ? `${triggerLabel} — switch project (${SWITCHER_CHORD})`
+            : `Switch project (${SWITCHER_CHORD})`
+        }
         onClick={() => setIsOpen(true)}
         whileHover={{ scale: 1.02 }}
         whileTap={{ scale: 0.98 }}
         transition={hoverSpringToken}
-        className="group flex h-[52px] w-full items-center gap-[10px] rounded-[14px] border border-app-border/70 bg-app-bg/60 px-[10px] text-left backdrop-blur-md transition-colors hover:border-app-brand-border hover:bg-app-surface-hover/70 focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none"
+        className={`group flex h-[52px] w-full items-center gap-[10px] rounded-[14px] border border-app-border/70 bg-app-bg/60 text-left backdrop-blur-md ${
+          compact ? "justify-center px-0" : "px-[10px]"
+        } transition-colors hover:border-app-brand-border hover:bg-app-surface-hover/70 focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none`}
       >
         {selectedProject ? (
           <span
@@ -95,7 +103,7 @@ export function ProjectSwitcher({ className = "" }: ProjectSwitcherProps) {
           </span>
         )}
 
-        <span className="flex min-w-0 flex-col gap-[3px]">
+        <span className={compact ? "hidden" : "flex min-w-0 flex-col gap-[3px]"}>
           <span className="truncate text-sm leading-tight font-semibold text-app-text">
             {triggerLabel}
           </span>
@@ -116,7 +124,7 @@ export function ProjectSwitcher({ className = "" }: ProjectSwitcherProps) {
           )}
         </span>
 
-        <span className="ml-auto flex shrink-0 items-center gap-1">
+        <span className={compact ? "hidden" : "ml-auto flex shrink-0 items-center gap-1"}>
           <ShortcutHint keys={SWITCHER_CHORD} className="border-app-border text-app-text-muted" />
           <ChevronsUpDown className="h-4 w-4 text-app-text-muted transition-colors group-hover:text-app-text" />
         </span>
diff --git a/src/styles/index.css b/src/styles/index.css
index 561788786..6a5cd7989 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -442,6 +442,25 @@ body {
   }
 }
 
+/* The desktop sidebar and the page's margin beside it ease together when the sidebar folds to
+   icons, and follow the pointer exactly while its edge is dragged (`SidebarResizeHandle` marks
+   the drag on the root). */
+.app-sidebar-eases {
+  transition:
+    width 300ms ease-out,
+    margin-left 300ms ease-out;
+}
+
+html[data-sidebar-resizing] .app-sidebar-eases {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .app-sidebar-eases {
+    transition: none;
+  }
+}
+
 .app-page-frame {
   width: 100%;
   padding-left: var(--app-page-gutter);
diff --git a/tests/unit/a11y/SideBar.a11y.test.tsx b/tests/unit/a11y/SideBar.a11y.test.tsx
index dbe1930d8..2e9a567ed 100644
--- a/tests/unit/a11y/SideBar.a11y.test.tsx
+++ b/tests/unit/a11y/SideBar.a11y.test.tsx
@@ -73,4 +73,24 @@ describe("SideBar Accessibility", () => {
       "true",
     );
   });
+
+  it("has no axe violations folded to icons either", async () => {
+    const user = userEvent.setup();
+    window.localStorage.clear();
+    const { baseElement } = render(
+      <MemoryRouter>
+        <main>
+          <SideBar />
+        </main>
+      </MemoryRouter>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Collapse sidebar" }));
+
+    expect(screen.getByRole("button", { name: "Expand sidebar" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(await axe(baseElement)).toHaveNoViolations();
+  });
 });
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 4c5146917..603ab8554 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { MemoryRouter } from "react-router-dom";
@@ -390,6 +390,96 @@ describe("SideBar", () => {
     });
   });
 
+  describe("desktop sidebar size", () => {
+    const signIn = () =>
+      vi.mocked(useAuthHook.useAuth).mockReturnValue({
+        status: "authenticated",
+        profile: mockProfile,
+        login: vi.fn(),
+        logout: vi.fn(),
+        refetchProfile: vi.fn(),
+      });
+    const desktop = () => screen.getByRole("complementary", { name: "Desktop Sidebar" });
+    // The width lives in a CSS variable on the root, which the page's margin reads as well.
+    const sidebarWidth = () =>
+      document.documentElement.style.getPropertyValue("--app-sidebar-desktop-width");
+    // Closed, the drawer is `inert` and hidden from the accessibility tree, so no role query finds it.
+    const mobile = () => document.querySelector<HTMLElement>('aside[aria-label="Mobile Sidebar"]')!;
+
+    it("folds to icons, keeps every entry named, and remembers it", async () => {
+      const user = userEvent.setup();
+      signIn();
+      const { unmount } = renderWithProviders(<SideBar />);
+
+      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+
+      expect(sidebarWidth()).toBe("76px");
+      // Icon only, but still a link with its name.
+      expect(within(desktop()).getByRole("link", { name: /Dashboard/ })).toBeInTheDocument();
+      expect(within(desktop()).queryByRole("separator")).not.toBeInTheDocument();
+
+      unmount();
+      renderWithProviders(<SideBar />);
+      expect(sidebarWidth()).toBe("76px");
+      expect(within(desktop()).getByRole("button", { name: "Expand sidebar" })).toBeInTheDocument();
+    });
+
+    it("shows an entry's name as a tooltip when it gets keyboard focus while folded", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+      within(desktop())
+        .getByRole("link", { name: /Dashboard/ })
+        .focus();
+
+      // Rendered into the page body so the nav cannot clip it.
+      await waitFor(() =>
+        expect(
+          [...document.body.children].some(
+            (child) => child.textContent === "Dashboard" && child.classList.contains("fixed"),
+          ),
+        ).toBe(true),
+      );
+    });
+
+    it("resizes from the keyboard within its limits, and remembers the width", async () => {
+      const user = userEvent.setup();
+      signIn();
+      const { unmount } = renderWithProviders(<SideBar />);
+
+      const handle = within(desktop()).getByRole("separator", { name: "Resize sidebar" });
+      expect(handle).toHaveAttribute("aria-valuenow", "286");
+
+      handle.focus();
+      await user.keyboard("{ArrowRight}{ArrowRight}");
+      expect(sidebarWidth()).toBe("318px");
+
+      await user.keyboard("{End}{ArrowRight}");
+      expect(sidebarWidth()).toBe("400px");
+
+      await user.keyboard("{Home}{ArrowLeft}");
+      expect(sidebarWidth()).toBe("240px");
+
+      unmount();
+      renderWithProviders(<SideBar />);
+      expect(within(desktop()).getByRole("separator")).toHaveAttribute("aria-valuenow", "240");
+    });
+
+    it("leaves the mobile drawer as it was", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+
+      expect(mobile()).toHaveClass("w-[var(--app-sidebar-width)]");
+      expect(mobile().querySelector('[aria-label="Collapse sidebar"]')).toBeNull();
+      expect(mobile().querySelector('[role="separator"]')).toBeNull();
+    });
+  });
+
   /**
    * The buddy is the other half of the chat's page, not a page of its own — one header, one
    * switch, two conversations. Before this the sidebar highlighted nothing at all on `/buddy`,

From c578a2e14da7ca6514c62bfa958f8d0f2ff0268e Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 12:55:14 +0000
Subject: [PATCH 2/8] Let the folded sidebar be pulled open by its edge, and
 turn one chevron for the toggle

The resize edge now stays on the folded rail: dragging it out past 160px opens the sidebar at the width under the pointer, and dragging an open one back past that point folds it. Both happen as the pointer crosses the threshold rather than on release, so the rail snaps open or shut under the mouse. Folded, the right arrow and End open it from the keyboard, Enter toggles, and a double click opens it at the default width.

The toggle button shows a single double chevron that turns round as the sidebar folds and leans the way it would move on hover, instead of the two panel icons.
---
 src/components/layout/SideBar.tsx             | 34 ++++---
 src/components/layout/SidebarResizeHandle.tsx | 98 +++++++++++++++----
 tests/unit/components/layout/SideBar.test.tsx | 29 +++++-
 3 files changed, 125 insertions(+), 36 deletions(-)

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 844ad9686..fb06da9a0 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -1,7 +1,7 @@
 import { useId, useLayoutEffect, useState } from "react";
 import { motion, useMotionValue } from "framer-motion";
 import { NavLink, useLocation } from "react-router-dom";
-import { LogOut, Menu, PanelLeftClose, PanelLeftOpen, Settings, X } from "lucide-react";
+import { ChevronsLeft, LogOut, Menu, Settings, X } from "lucide-react";
 import { UserAvatar } from "../common/UserAvatar";
 import { useAuth } from "../../context/useAuth";
 import { canAccessRoute, isOnboardingAccessible, type AppRoute } from "../../auth/accessPolicy";
@@ -288,15 +288,20 @@ function SidebarContent({
             aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
             aria-expanded={!collapsed}
             title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-            className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-app-text-muted transition-colors hover:bg-app-surface-hover hover:text-app-text focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none ${
+            className={`group/fold flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-app-text-muted transition-colors hover:bg-app-surface-hover hover:text-app-text focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none ${
               collapsed ? "" : "ml-auto"
             }`}
           >
-            {collapsed ? (
-              <PanelLeftOpen aria-hidden="true" className="h-[18px] w-[18px]" />
-            ) : (
-              <PanelLeftClose aria-hidden="true" className="h-[18px] w-[18px]" />
-            )}
+            {/* One chevron pair that turns round with the sidebar, and leans the way it would go
+                on hover: points left while open (fold in), right while folded (pull out). */}
+            <ChevronsLeft
+              aria-hidden="true"
+              className={`h-[18px] w-[18px] transition-transform duration-300 ease-out motion-reduce:transition-none ${
+                collapsed
+                  ? "rotate-180 group-hover/fold:translate-x-0.5"
+                  : "group-hover/fold:-translate-x-0.5"
+              }`}
+            />
           </button>
         )}
       </div>
@@ -550,13 +555,14 @@ export function SideBar() {
           collapsed={sidebarLayout.collapsed}
           onToggleCollapsed={sidebarLayout.toggleCollapsed}
         />
-        {!sidebarLayout.collapsed && (
-          <SidebarResizeHandle
-            width={sidebarLayout.width}
-            onResize={sidebarLayout.setWidth}
-            onCollapse={() => sidebarLayout.setCollapsed(true)}
-          />
-        )}
+        {/* Also on the folded rail: its edge pulls the sidebar open again. */}
+        <SidebarResizeHandle
+          width={sidebarLayout.width}
+          collapsed={sidebarLayout.collapsed}
+          onResize={sidebarLayout.setWidth}
+          onCollapse={() => sidebarLayout.setCollapsed(true)}
+          onExpand={() => sidebarLayout.setCollapsed(false)}
+        />
       </aside>
 
       <header className="fixed top-0 right-0 left-0 z-40 flex h-[64px] items-center justify-between border-b border-app-border bg-app-bg px-[16px] lg:hidden">
diff --git a/src/components/layout/SidebarResizeHandle.tsx b/src/components/layout/SidebarResizeHandle.tsx
index 0cebc6721..a46b872a5 100644
--- a/src/components/layout/SidebarResizeHandle.tsx
+++ b/src/components/layout/SidebarResizeHandle.tsx
@@ -1,5 +1,6 @@
 import { useRef, type KeyboardEvent, type PointerEvent } from "react";
 import {
+  SIDEBAR_COLLAPSED_WIDTH,
   SIDEBAR_DEFAULT_WIDTH,
   SIDEBAR_WIDTH_VAR,
   SIDEBAR_MAX_WIDTH,
@@ -10,11 +11,19 @@ import {
 
 /** Dragged this far past the minimum, the sidebar folds to icons instead of stopping there. */
 const COLLAPSE_OVERSHOOT_PX = 80;
+/**
+ * Where the edge switches between folded and open, in both directions: pulled left of it the
+ * sidebar folds, pulled right of it (out of the folded rail) the sidebar opens again.
+ */
+const COLLAPSE_THRESHOLD = SIDEBAR_MIN_WIDTH - COLLAPSE_OVERSHOOT_PX;
 
 type SidebarResizeHandleProps = {
+  /** The open width -- kept while folded, for when it opens again. */
   width: number;
+  collapsed: boolean;
   onResize: (width: number) => void;
   onCollapse: () => void;
+  onExpand: () => void;
 };
 
 /** Marks a drag on the root element, where `app-sidebar-eases` holds its transition off meanwhile. */
@@ -26,7 +35,11 @@ function setDragging(dragging: boolean) {
 /**
  * The desktop sidebar's right edge, as something to drag: wider or narrower within
  * {@link SIDEBAR_MIN_WIDTH} and {@link SIDEBAR_MAX_WIDTH}, folded to icons when pulled well past
- * the minimum, back to the default on a double click.
+ * the minimum, back to the default on a double click. Folded, the same edge pulls it open again,
+ * so neither direction needs the toggle button.
+ *
+ * Folding and opening happen as the pointer crosses {@link COLLAPSE_THRESHOLD}, not on release:
+ * the rail snaps shut or open under the pointer, so what is let go of is what stays.
  *
  * While dragging it writes the width straight into the sidebar's CSS variable (which the page's
  * margin reads too) and only hands the result back on release: a state update per pointer move
@@ -34,16 +47,29 @@ function setDragging(dragging: boolean) {
  * the mouse.
  *
  * A `separator` with a value, so it is reachable and usable from the keyboard too: the arrow
- * keys move the edge, Home and End jump to the limits, Enter folds the sidebar to icons.
+ * keys move the edge, Home and End jump to the limits, Enter folds the sidebar to icons or opens
+ * it again. Folded, the right arrow and End open it.
  */
-export function SidebarResizeHandle({ width, onResize, onCollapse }: SidebarResizeHandleProps) {
-  const drag = useRef<{ startX: number; startWidth: number; raw: number } | null>(null);
+export function SidebarResizeHandle({
+  width,
+  collapsed,
+  onResize,
+  onCollapse,
+  onExpand,
+}: SidebarResizeHandleProps) {
+  const drag = useRef<{
+    startX: number;
+    startWidth: number;
+    raw: number;
+    collapsed: boolean;
+  } | null>(null);
 
   const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
     if (event.button !== 0) return;
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
-    drag.current = { startX: event.clientX, startWidth: width, raw: width };
+    const startWidth = collapsed ? SIDEBAR_COLLAPSED_WIDTH : width;
+    drag.current = { startX: event.clientX, startWidth, raw: startWidth, collapsed };
     setDragging(true);
   };
 
@@ -51,6 +77,22 @@ export function SidebarResizeHandle({ width, onResize, onCollapse }: SidebarResi
     const current = drag.current;
     if (!current) return;
     current.raw = current.startWidth + event.clientX - current.startX;
+    const folds = current.raw < COLLAPSE_THRESHOLD;
+
+    if (folds !== current.collapsed) {
+      // One state update per crossing, not per move: the sidebar has to swap between its folded
+      // and open layout, which the CSS variable alone cannot do.
+      current.collapsed = folds;
+      if (folds) {
+        onCollapse();
+      } else {
+        // Opens at the width under the pointer, not at the one it had before it folded.
+        onResize(current.raw);
+        onExpand();
+      }
+    }
+    // Folded, the sidebar writes the rail's width itself.
+    if (folds) return;
     document.documentElement.style.setProperty(
       SIDEBAR_WIDTH_VAR,
       `${clampSidebarWidth(current.raw)}px`,
@@ -65,16 +107,27 @@ export function SidebarResizeHandle({ width, onResize, onCollapse }: SidebarResi
       event.currentTarget.releasePointerCapture(event.pointerId);
     }
     setDragging(false);
-    // The sidebar writes the variable again from its state on the next render.
-    if (current.raw < SIDEBAR_MIN_WIDTH - COLLAPSE_OVERSHOOT_PX) {
-      // Keeps the width it had, for when it is opened again.
-      onCollapse();
-    } else {
-      onResize(current.raw);
-    }
+    // Folded or opened already while crossing the threshold; an open edge still has to hand its
+    // final width back. The sidebar writes the variable again from its state on the next render.
+    if (!current.collapsed) onResize(current.raw);
   };
 
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (collapsed) onExpand();
+      else onCollapse();
+      return;
+    }
+    if (collapsed) {
+      // Folded there is no width to move; growing it means opening it, at the width it had.
+      if (event.key === "ArrowRight" || event.key === "End") {
+        event.preventDefault();
+        onExpand();
+      }
+      return;
+    }
+
     const next =
       event.key === "ArrowLeft"
         ? width - SIDEBAR_WIDTH_STEP
@@ -86,11 +139,6 @@ export function SidebarResizeHandle({ width, onResize, onCollapse }: SidebarResi
               ? SIDEBAR_MAX_WIDTH
               : null;
 
-    if (event.key === "Enter") {
-      event.preventDefault();
-      onCollapse();
-      return;
-    }
     if (next === null) return;
     event.preventDefault();
     onResize(next);
@@ -104,16 +152,24 @@ export function SidebarResizeHandle({ width, onResize, onCollapse }: SidebarResi
       role="separator"
       aria-orientation="vertical"
       aria-label="Resize sidebar"
-      aria-valuenow={width}
-      aria-valuemin={SIDEBAR_MIN_WIDTH}
+      aria-valuenow={collapsed ? SIDEBAR_COLLAPSED_WIDTH : width}
+      aria-valuemin={collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_MIN_WIDTH}
       aria-valuemax={SIDEBAR_MAX_WIDTH}
+      aria-valuetext={collapsed ? "Collapsed" : `${width} pixels`}
       tabIndex={0}
-      title="Drag to resize, double-click to reset"
+      title={
+        collapsed
+          ? "Drag to expand, double-click to reset"
+          : "Drag to resize, double-click to reset"
+      }
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}
       onPointerUp={endDrag}
       onPointerCancel={endDrag}
-      onDoubleClick={() => onResize(SIDEBAR_DEFAULT_WIDTH)}
+      onDoubleClick={() => {
+        onResize(SIDEBAR_DEFAULT_WIDTH);
+        if (collapsed) onExpand();
+      }}
       onKeyDown={onKeyDown}
       // A wide, invisible grip centred on the border; the line itself only shows on hover, focus
       // or drag.
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 603ab8554..6afb0a3fd 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -416,7 +416,11 @@ describe("SideBar", () => {
       expect(sidebarWidth()).toBe("76px");
       // Icon only, but still a link with its name.
       expect(within(desktop()).getByRole("link", { name: /Dashboard/ })).toBeInTheDocument();
-      expect(within(desktop()).queryByRole("separator")).not.toBeInTheDocument();
+      // The edge stays, to pull it open again.
+      expect(within(desktop()).getByRole("separator")).toHaveAttribute(
+        "aria-valuetext",
+        "Collapsed",
+      );
 
       unmount();
       renderWithProviders(<SideBar />);
@@ -467,6 +471,29 @@ describe("SideBar", () => {
       expect(within(desktop()).getByRole("separator")).toHaveAttribute("aria-valuenow", "240");
     });
 
+    it("opens again from its edge while folded, at the width it had", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      const handle = within(desktop()).getByRole("separator", { name: "Resize sidebar" });
+      handle.focus();
+      await user.keyboard("{ArrowRight}{Enter}");
+      expect(sidebarWidth()).toBe("76px");
+
+      await user.keyboard("{ArrowLeft}");
+      expect(sidebarWidth()).toBe("76px");
+
+      await user.keyboard("{ArrowRight}");
+      expect(sidebarWidth()).toBe("302px");
+      expect(
+        within(desktop()).getByRole("button", { name: "Collapse sidebar" }),
+      ).toBeInTheDocument();
+
+      await user.keyboard("{Enter}{Enter}");
+      expect(sidebarWidth()).toBe("302px");
+    });
+
     it("leaves the mobile drawer as it was", async () => {
       const user = userEvent.setup();
       signIn();

From 893008275fa5b79c06cf2868e3a231a97db14453 Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 13:09:08 +0000
Subject: [PATCH 3/8] Give the folded sidebar one account icon and the toggle a
 fixed place on the edge

Folded, the footer is a single avatar button instead of the card squeezed into the rail. Hovering it, or clicking or pressing it, slides the full footer card (profile, settings, project switcher, logout) out beside the rail; it closes when the pointer leaves, on Escape, on a click elsewhere and on navigating. The card stays mounted while hidden, so the project switcher's Cmd/Ctrl+K and modal keep working.

The fold toggle moves out of the header onto the sidebar's edge at the logo's height, so it no longer jumps between two places. Its icon is now a drawn window with a rail that is wide while open and a sliver while folded, and leans towards the other state on hover.
---
 src/components/layout/SideBar.tsx             | 214 +++++++++---------
 .../layout/SidebarAccountFlyout.tsx           | 142 ++++++++++++
 src/components/layout/SidebarToggleIcon.tsx   |  63 ++++++
 tests/unit/components/layout/SideBar.test.tsx |  22 ++
 4 files changed, 335 insertions(+), 106 deletions(-)
 create mode 100644 src/components/layout/SidebarAccountFlyout.tsx
 create mode 100644 src/components/layout/SidebarToggleIcon.tsx

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index fb06da9a0..a320dee50 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -1,7 +1,7 @@
 import { useId, useLayoutEffect, useState } from "react";
 import { motion, useMotionValue } from "framer-motion";
 import { NavLink, useLocation } from "react-router-dom";
-import { ChevronsLeft, LogOut, Menu, Settings, X } from "lucide-react";
+import { LogOut, Menu, Settings, X } from "lucide-react";
 import { UserAvatar } from "../common/UserAvatar";
 import { useAuth } from "../../context/useAuth";
 import { canAccessRoute, isOnboardingAccessible, type AppRoute } from "../../auth/accessPolicy";
@@ -30,6 +30,8 @@ import {
 import { SidebarLogo } from "./SidebarLogo";
 import { SidebarNavLink } from "./SidebarNavLink";
 import { SidebarResizeHandle } from "./SidebarResizeHandle";
+import { SidebarAccountFlyout } from "./SidebarAccountFlyout";
+import { SidebarToggleIcon } from "./SidebarToggleIcon";
 import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH_VAR, useSidebarLayout } from "./useSidebarLayout";
 import { hoverSpringToken } from "../../styles/tokens";
 
@@ -60,8 +62,6 @@ type SidebarContentProps = {
   unseenSkipAnswerCount?: number;
   /** Folded to icons -- the desktop sidebar only; the mobile drawer is always full width. */
   collapsed?: boolean;
-  /** Folds or unfolds the desktop sidebar. Without it there is no toggle (the mobile drawer). */
-  onToggleCollapsed?: () => void;
 };
 
 /**
@@ -174,7 +174,6 @@ function SidebarContent({
   openEscalationCount = 0,
   unseenSkipAnswerCount = 0,
   collapsed = false,
-  onToggleCollapsed,
 }: SidebarContentProps) {
   const { profile, logout, status } = useAuth();
   const { canManageSelected } = useProjectContext();
@@ -264,11 +263,80 @@ function SidebarContent({
     .flatMap((section) => section.items.map((item) => item.path))
     .join("|")}`;
 
+  /** The footer card, the same in the open sidebar and in the folded rail's flyout. */
+  const footerCard = (
+    <div className="space-y-[12px] rounded-[18px] border border-app-border/70 bg-app-surface/70 p-[12px] shadow-[0_10px_30px_-18px_rgba(0,0,0,0.5)] backdrop-blur-xl">
+      {profile && (
+        <div className="flex items-center justify-between gap-2 py-[2px]">
+          <div className="flex items-center gap-3 overflow-hidden">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-app-surface-muted">
+              <UserAvatar
+                size={32}
+                profileIcon={profile.profileIcon}
+                fallbackName={`${profile.firstName} ${profile.lastName}`.trim()}
+                seed={profile.id}
+              />
+            </div>
+
+            <div className="flex flex-col overflow-hidden">
+              <span className="truncate text-sm font-semibold text-app-text">
+                {profile.username}
+              </span>
+
+              <span className="truncate text-[10px] font-medium tracking-wider text-app-text-muted uppercase">
+                {profile.permissionGroup.replace("_", " ")}
+              </span>
+            </div>
+          </div>
+          <motion.div
+            whileHover={{ scale: 1.18 }}
+            whileTap={{ scale: 0.92 }}
+            transition={hoverSpringToken}
+            className="shrink-0"
+          >
+            <NavLink
+              to="/settings"
+              onClick={onNavigate}
+              className={({ isActive }) =>
+                `flex h-9 w-9 items-center justify-center rounded-[10px] transition-colors ${
+                  isActive
+                    ? "bg-app-brand-soft text-app-brand"
+                    : "text-app-text-muted hover:bg-app-surface-hover hover:text-app-text"
+                }`
+              }
+              title="Settings"
+              aria-label="Settings"
+            >
+              <Settings className="h-[18px] w-[18px]" />
+            </NavLink>
+          </motion.div>
+        </div>
+      )}
+
+      <ProjectSwitcher className="w-full" />
+
+      <motion.button
+        type="button"
+        onClick={() => {
+          void logout();
+        }}
+        disabled={status === "loading"}
+        whileHover={status === "loading" ? undefined : { scale: 1.02 }}
+        whileTap={status === "loading" ? undefined : { scale: 0.98 }}
+        transition={hoverSpringToken}
+        className="flex h-[40px] w-full items-center justify-center gap-[12px] rounded-[12px] border border-app-danger-border/40 bg-app-danger-bg/70 text-sm font-medium text-app-danger-text backdrop-blur-md transition-colors hover:border-app-danger-solid hover:bg-app-danger-solid hover:text-white focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <LogOut aria-hidden="true" className="h-[16px] w-[16px]" />
+        Logout
+      </motion.button>
+    </div>
+  );
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-app-bg text-app-text">
       <div
         className={`flex shrink-0 items-center gap-3 py-[24px] ${
-          collapsed ? "flex-col px-0" : "px-[24px]"
+          collapsed ? "justify-center px-0" : "px-[24px]"
         }`}
       >
         <SidebarLogo />
@@ -280,30 +348,6 @@ function SidebarContent({
         >
           SprintStart
         </h1>
-
-        {onToggleCollapsed && (
-          <button
-            type="button"
-            onClick={onToggleCollapsed}
-            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-            aria-expanded={!collapsed}
-            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-            className={`group/fold flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-app-text-muted transition-colors hover:bg-app-surface-hover hover:text-app-text focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none ${
-              collapsed ? "" : "ml-auto"
-            }`}
-          >
-            {/* One chevron pair that turns round with the sidebar, and leans the way it would go
-                on hover: points left while open (fold in), right while folded (pull out). */}
-            <ChevronsLeft
-              aria-hidden="true"
-              className={`h-[18px] w-[18px] transition-transform duration-300 ease-out motion-reduce:transition-none ${
-                collapsed
-                  ? "rotate-180 group-hover/fold:translate-x-0.5"
-                  : "group-hover/fold:-translate-x-0.5"
-              }`}
-            />
-          </button>
-        )}
       </div>
 
       <nav
@@ -394,84 +438,31 @@ function SidebarContent({
 
       {/* Floating glass card instead of a full-bleed bar. The 12px outer
                 gutter plus 12px inner padding lines its content up with the
-                24px inset used by the nav items above. */}
-      <div className={`shrink-0 pt-[8px] pb-[16px] ${collapsed ? "px-[8px]" : "px-[12px]"}`}>
-        <div
-          className={`space-y-[12px] rounded-[18px] border border-app-border/70 bg-app-surface/70 shadow-[0_10px_30px_-18px_rgba(0,0,0,0.5)] backdrop-blur-xl ${
-            collapsed ? "p-[6px]" : "p-[12px]"
-          }`}
-        >
-          {profile && (
-            <div
-              className={`flex items-center gap-2 py-[2px] ${
-                collapsed ? "flex-col" : "justify-between"
-              }`}
-            >
-              <div className="flex items-center gap-3 overflow-hidden">
-                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-app-surface-muted">
-                  <UserAvatar
-                    size={32}
-                    profileIcon={profile.profileIcon}
-                    fallbackName={`${profile.firstName} ${profile.lastName}`.trim()}
-                    seed={profile.id}
-                  />
-                </div>
-
-                <div className={collapsed ? "sr-only" : "flex flex-col overflow-hidden"}>
-                  <span className="truncate text-sm font-semibold text-app-text">
-                    {profile.username}
-                  </span>
-
-                  <span className="truncate text-[10px] font-medium tracking-wider text-app-text-muted uppercase">
-                    {profile.permissionGroup.replace("_", " ")}
-                  </span>
-                </div>
-              </div>
-              <motion.div
-                whileHover={{ scale: 1.18 }}
-                whileTap={{ scale: 0.92 }}
-                transition={hoverSpringToken}
-                className="shrink-0"
-              >
-                <NavLink
-                  to="/settings"
-                  onClick={onNavigate}
-                  className={({ isActive }) =>
-                    `flex h-9 w-9 items-center justify-center rounded-[10px] transition-colors ${
-                      isActive
-                        ? "bg-app-brand-soft text-app-brand"
-                        : "text-app-text-muted hover:bg-app-surface-hover hover:text-app-text"
-                    }`
-                  }
-                  title="Settings"
-                  aria-label="Settings"
-                >
-                  <Settings className="h-[18px] w-[18px]" />
-                </NavLink>
-              </motion.div>
-            </div>
-          )}
-
-          <ProjectSwitcher className="w-full" compact={collapsed} />
-
-          <motion.button
-            type="button"
-            onClick={() => {
-              void logout();
-            }}
-            disabled={status === "loading"}
-            whileHover={status === "loading" ? undefined : { scale: 1.02 }}
-            whileTap={status === "loading" ? undefined : { scale: 0.98 }}
-            transition={hoverSpringToken}
-            aria-label={collapsed ? "Logout" : undefined}
-            title={collapsed ? "Logout" : undefined}
-            className="flex h-[40px] w-full items-center justify-center gap-[12px] rounded-[12px] border border-app-danger-border/40 bg-app-danger-bg/70 text-sm font-medium text-app-danger-text backdrop-blur-md transition-colors hover:border-app-danger-solid hover:bg-app-danger-solid hover:text-white focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                24px inset used by the nav items above. Folded, the card slides
+                out from the avatar instead of being squeezed into the rail. */}
+      {collapsed ? (
+        <div className="flex shrink-0 justify-center pt-[8px] pb-[16px]">
+          <SidebarAccountFlyout
+            label="Account and project"
+            trigger={
+              profile ? (
+                <UserAvatar
+                  size={32}
+                  profileIcon={profile.profileIcon}
+                  fallbackName={`${profile.firstName} ${profile.lastName}`.trim()}
+                  seed={profile.id}
+                />
+              ) : (
+                <Settings aria-hidden="true" className="h-[18px] w-[18px] text-app-text-muted" />
+              )
+            }
           >
-            <LogOut aria-hidden="true" className="h-[16px] w-[16px]" />
-            {!collapsed && "Logout"}
-          </motion.button>
+            {footerCard}
+          </SidebarAccountFlyout>
         </div>
-      </div>
+      ) : (
+        <div className="shrink-0 px-[12px] pt-[8px] pb-[16px]">{footerCard}</div>
+      )}
     </div>
   );
 }
@@ -553,8 +544,19 @@ export function SideBar() {
           openEscalationCount={openEscalationCount}
           unseenSkipAnswerCount={unseenSkipAnswerCount}
           collapsed={sidebarLayout.collapsed}
-          onToggleCollapsed={sidebarLayout.toggleCollapsed}
         />
+        {/* On the edge at the logo's height, so it sits in the same place open and folded and
+            only travels with the edge itself. Above the resize grip, which it overlaps. */}
+        <button
+          type="button"
+          onClick={sidebarLayout.toggleCollapsed}
+          aria-label={sidebarLayout.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          aria-expanded={!sidebarLayout.collapsed}
+          title={sidebarLayout.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          className="group/toggle absolute top-[32px] -right-[14px] z-30 flex h-7 w-7 items-center justify-center rounded-full border border-app-border bg-app-bg text-app-text-muted shadow-[0_4px_12px_-6px_rgba(0,0,0,0.4)] transition-colors hover:border-app-brand-border hover:text-app-brand focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none"
+        >
+          <SidebarToggleIcon collapsed={sidebarLayout.collapsed} className="h-4 w-4" />
+        </button>
         {/* Also on the folded rail: its edge pulls the sidebar open again. */}
         <SidebarResizeHandle
           width={sidebarLayout.width}
diff --git a/src/components/layout/SidebarAccountFlyout.tsx b/src/components/layout/SidebarAccountFlyout.tsx
new file mode 100644
index 000000000..67df8a665
--- /dev/null
+++ b/src/components/layout/SidebarAccountFlyout.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useLocation } from "react-router-dom";
+
+/** Long enough to cross the gap from the icon to the card without it closing in between. */
+const CLOSE_DELAY_MS = 200;
+
+type SidebarAccountFlyoutProps = {
+  /** What the folded rail shows in place of the footer card: the user's avatar. */
+  trigger: ReactNode;
+  /** Names the button for assistive technology, since it shows only a picture. */
+  label: string;
+  /** The footer card as the open sidebar shows it. */
+  children: ReactNode;
+};
+
+/**
+ * The sidebar footer for the rail folded to icons: one icon that slides the full footer card
+ * out beside the rail on hover, or on click and from the keyboard, where there is no hover.
+ *
+ * The card stays mounted while hidden (`inert` and transparent) rather than being removed: the
+ * project switcher inside it owns the Cmd/Ctrl+K shortcut and its modal, and both have to keep
+ * working while the card is closed -- including after the pointer has left it for the modal.
+ *
+ * Drawn in a portal at a fixed position beside the rail, which reads the rail's width from the
+ * same CSS variable the sidebar does: the nav and footer clip anything past their edge.
+ */
+export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccountFlyoutProps) {
+  const [open, setOpen] = useState(false);
+  const panelId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const closeTimer = useRef<number | undefined>(undefined);
+
+  const cancelClose = () => window.clearTimeout(closeTimer.current);
+  const openNow = () => {
+    cancelClose();
+    setOpen(true);
+  };
+  const closeSoon = () => {
+    cancelClose();
+    closeTimer.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
+  };
+
+  useEffect(() => cancelClose, []);
+
+  // Going somewhere from it (Settings) is done with it. Adjusted while rendering rather than in
+  // an effect, so the card never shows open on the new page for a frame.
+  const { pathname } = useLocation();
+  const [openedAt, setOpenedAt] = useState(pathname);
+  if (openedAt !== pathname) {
+    setOpenedAt(pathname);
+    setOpen(false);
+  }
+
+  // Escape and a click anywhere else close it, as for any popover.
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      const focusWasInside = panelRef.current?.contains(document.activeElement) ?? false;
+      setOpen(false);
+      if (focusWasInside) triggerRef.current?.focus();
+    };
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (panelRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={label}
+        aria-expanded={open}
+        aria-controls={panelId}
+        // Hover only for a mouse: a touch "enter" is followed by a click, which would toggle it
+        // straight back shut.
+        onPointerEnter={(event) => event.pointerType === "mouse" && openNow()}
+        onPointerLeave={(event) => event.pointerType === "mouse" && closeSoon()}
+        onClick={(event) => {
+          cancelClose();
+          const opening = !open;
+          setOpen(opening);
+          // From the keyboard, into the card: portalled to the end of the page, it is not next
+          // in the tab order.
+          if (opening && event.detail === 0) {
+            window.requestAnimationFrame(() =>
+              panelRef.current
+                ?.querySelector<HTMLElement>("a[href], button:not(:disabled)")
+                ?.focus(),
+            );
+          }
+        }}
+        className={`flex h-11 w-11 items-center justify-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none ${
+          open
+            ? "border-app-brand-border bg-app-brand-soft"
+            : "border-app-border/70 bg-app-surface/70 hover:border-app-brand-border"
+        }`}
+      >
+        {trigger}
+      </button>
+
+      {createPortal(
+        <div
+          ref={panelRef}
+          id={panelId}
+          role="group"
+          aria-label={label}
+          inert={!open}
+          onPointerEnter={(event) => event.pointerType === "mouse" && openNow()}
+          onPointerLeave={(event) => event.pointerType === "mouse" && closeSoon()}
+          onBlur={(event) => {
+            const next = event.relatedTarget as Node | null;
+            if (next && !panelRef.current?.contains(next) && !triggerRef.current?.contains(next)) {
+              setOpen(false);
+            }
+          }}
+          // Slides out of the rail from its bottom-left corner, the way the footer card would
+          // have unfolded had there been room for it.
+          className={`fixed bottom-[16px] left-[calc(var(--app-sidebar-desktop-width,var(--app-sidebar-width))+10px)] z-40 hidden w-[262px] origin-bottom-left transition duration-200 ease-out motion-reduce:transition-none lg:block ${
+            open
+              ? "translate-x-0 scale-100 opacity-100"
+              : "pointer-events-none -translate-x-3 scale-95 opacity-0"
+          }`}
+        >
+          {children}
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}
diff --git a/src/components/layout/SidebarToggleIcon.tsx b/src/components/layout/SidebarToggleIcon.tsx
new file mode 100644
index 000000000..616bf5917
--- /dev/null
+++ b/src/components/layout/SidebarToggleIcon.tsx
@@ -0,0 +1,63 @@
+import { useId } from "react";
+
+type SidebarToggleIconProps = {
+  collapsed: boolean;
+  className?: string;
+};
+
+/**
+ * A window with a rail down its left side, drawn at the width the sidebar has: wide while it is
+ * open, a sliver while it is folded. It shows the sidebar's state rather than a direction, and
+ * on hover the rail leans towards the other state, so the button previews what a click does.
+ *
+ * Drawn here rather than taken from lucide because the rail has to move: it scales from its left
+ * edge and the divider travels with its right edge, both as CSS transforms (in the SVG's own
+ * units, which CSS pixels are inside a `viewBox`), under a parent `group/toggle`.
+ */
+export function SidebarToggleIcon({ collapsed, className = "" }: SidebarToggleIconProps) {
+  const clipId = useId();
+  // The rail is 8 units wide when open (x 3 to 11). Its right edge, where the divider sits,
+  // moves by 8 x (scale - 1) when it scales from the left.
+  const rail = collapsed
+    ? "scale-x-[0.4] group-hover/toggle:scale-x-[0.7]"
+    : "scale-x-100 group-hover/toggle:scale-x-[0.65]";
+  const divider = collapsed
+    ? "translate-x-[-4.8px] group-hover/toggle:translate-x-[-2.4px]"
+    : "translate-x-0 group-hover/toggle:translate-x-[-2.8px]";
+  const moves = "transition-[scale,translate] duration-300 ease-out motion-reduce:transition-none";
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.75}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <defs>
+        <clipPath id={clipId}>
+          <rect x="3" y="4" width="18" height="16" rx="3" />
+        </clipPath>
+      </defs>
+      {/* Clipped on a group, not on the rail: a clip on the rail would scale with it and squash
+          the window's rounded corners. */}
+      <g clipPath={`url(#${clipId})`}>
+        <rect
+          x="3"
+          y="4"
+          width="8"
+          height="16"
+          stroke="none"
+          fill="currentColor"
+          fillOpacity={0.3}
+          className={`origin-left [transform-box:fill-box] ${rail} ${moves}`}
+        />
+      </g>
+      <line x1="11" y1="4" x2="11" y2="20" className={`${divider} ${moves}`} />
+      <rect x="3" y="4" width="18" height="16" rx="3" />
+    </svg>
+  );
+}
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 6afb0a3fd..9052ba808 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -428,6 +428,28 @@ describe("SideBar", () => {
       expect(within(desktop()).getByRole("button", { name: "Expand sidebar" })).toBeInTheDocument();
     });
 
+    it("folds the footer into one icon that slides the full card out", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+
+      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+
+      const trigger = within(desktop()).getByRole("button", { name: "Account and project" });
+      const card = document.getElementById(trigger.getAttribute("aria-controls")!)!;
+      expect(card).toHaveAttribute("inert");
+
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+      expect(card).not.toHaveAttribute("inert");
+      expect(within(card).getByRole("button", { name: "Logout" })).toBeInTheDocument();
+      expect(within(card).getByRole("link", { name: "Settings" })).toBeInTheDocument();
+
+      await user.keyboard("{Escape}");
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+      expect(card).toHaveAttribute("inert");
+    });
+
     it("shows an entry's name as a tooltip when it gets keyboard focus while folded", async () => {
       const user = userEvent.setup();
       signIn();

From ff2bbeca8f001b112ffa97462c0c48b1b1fd4d5d Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 13:21:16 +0000
Subject: [PATCH 4/8] Let the sidebar's logo fold and unfold it, with a tooltip
 saying which

A click on the logo in the desktop sidebar folds or unfolds it, and hovering it shows "Collapse sidebar" or "Expand sidebar" (beside the badge on the folded rail, below it while open). The edge button stays, as the keyboard's way to the same thing.

A click within 600ms of the previous one only counts towards the five-click gravity egg, so the egg drops the badge instead of flapping the sidebar while it falls. The mobile header's logo is unchanged.
---
 src/components/layout/SideBar.tsx             |  8 +-
 src/components/layout/SidebarLogo.tsx         | 77 ++++++++++++++++++-
 tests/unit/components/layout/SideBar.test.tsx | 14 ++++
 3 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index a320dee50..99acf940d 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -62,6 +62,8 @@ type SidebarContentProps = {
   unseenSkipAnswerCount?: number;
   /** Folded to icons -- the desktop sidebar only; the mobile drawer is always full width. */
   collapsed?: boolean;
+  /** Lets the logo fold and unfold the desktop sidebar. Left out on the mobile drawer. */
+  onToggleCollapsed?: () => void;
 };
 
 /**
@@ -174,6 +176,7 @@ function SidebarContent({
   openEscalationCount = 0,
   unseenSkipAnswerCount = 0,
   collapsed = false,
+  onToggleCollapsed,
 }: SidebarContentProps) {
   const { profile, logout, status } = useAuth();
   const { canManageSelected } = useProjectContext();
@@ -339,7 +342,9 @@ function SidebarContent({
           collapsed ? "justify-center px-0" : "px-[24px]"
         }`}
       >
-        <SidebarLogo />
+        <SidebarLogo
+          sidebarToggle={onToggleCollapsed ? { collapsed, onToggle: onToggleCollapsed } : undefined}
+        />
 
         <h1
           className={
@@ -544,6 +549,7 @@ export function SideBar() {
           openEscalationCount={openEscalationCount}
           unseenSkipAnswerCount={unseenSkipAnswerCount}
           collapsed={sidebarLayout.collapsed}
+          onToggleCollapsed={sidebarLayout.toggleCollapsed}
         />
         {/* On the edge at the logo's height, so it sits in the same place open and folded and
             only travels with the edge itself. Above the resize grip, which it overlaps. */}
diff --git a/src/components/layout/SidebarLogo.tsx b/src/components/layout/SidebarLogo.tsx
index 5497b1975..312d1e958 100644
--- a/src/components/layout/SidebarLogo.tsx
+++ b/src/components/layout/SidebarLogo.tsx
@@ -1,9 +1,26 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { motion, useReducedMotion, type TargetAndTransition, type Variants } from "framer-motion";
 import { useRepeatClicks } from "../../features/easter-eggs/hooks/useRepeatClicks";
 import { hoverSpringToken, logoHopSpringToken } from "../../styles/tokens";
 
 const BADGE_SIZE = 44;
+
+/**
+ * A click this soon after the previous one counts towards the gravity egg only, instead of
+ * folding the sidebar again: five quick clicks should drop the badge, not flap the sidebar five
+ * times while it falls.
+ */
+const TOGGLE_REPEAT_GUARD_MS = 600;
+
+type SidebarLogoProps = {
+  className?: string;
+  /**
+   * Makes the badge fold and unfold the desktop sidebar, with a tooltip saying which. Left out
+   * on the mobile header, where the badge stays decoration with its egg.
+   */
+  sidebarToggle?: { collapsed: boolean; onToggle: () => void };
+};
 const MARK_SIZE = 28;
 
 /**
@@ -77,17 +94,47 @@ const NOZZLE_ORIGIN = { transformOrigin: "7px 17px", transformBox: "view-box" }
  * in the corner of the eye stops reading as charm and starts reading as a
  * fault.
  */
-export function SidebarLogo({ className = "" }: { className?: string }) {
+export function SidebarLogo({ className = "", sidebarToggle }: SidebarLogoProps) {
   const prefersReducedMotion = useReducedMotion();
+  const badgeRef = useRef<HTMLDivElement>(null);
+  const lastClickAt = useRef(0);
+
+  // Where the toggle's tooltip sits, `null` while hidden. Beside the badge on the folded rail,
+  // like the entries' tooltips there; below it while open, where the name sits beside it. In a
+  // portal at a fixed position, so nothing in the sidebar clips it.
+  const [hintAt, setHintAt] = useState<{ x: number; y: number; side: "right" | "below" } | null>(
+    null,
+  );
 
   // The gravity easter egg: five clicks drop the badge off its shelf.
   // Reduced motion skips the animation entirely (pure motion has no honest
   // static equivalent) — the counter still consumes, nothing plays.
   const [dropPhase, setDropPhase] = useState<DropPhase>("idle");
-  const handleLogoClick = useRepeatClicks(5, () => {
+  const countEggClick = useRepeatClicks(5, () => {
     if (!prefersReducedMotion && dropPhase === "idle") setDropPhase("falling");
   });
 
+  const showHint = () => {
+    const rect = badgeRef.current?.getBoundingClientRect();
+    if (!sidebarToggle || !rect || dropPhase !== "idle") return;
+    setHintAt(
+      sidebarToggle.collapsed
+        ? { x: rect.right + 10, y: rect.top + rect.height / 2, side: "right" }
+        : { x: rect.left, y: rect.bottom + 8, side: "below" },
+    );
+  };
+
+  const handleLogoClick = () => {
+    const now = Date.now();
+    const isQuickRepeat = now - lastClickAt.current < TOGGLE_REPEAT_GUARD_MS;
+    lastClickAt.current = now;
+    // The badge moves with the sidebar, so a tooltip measured before the click would point at
+    // where it was; it comes back on the next hover.
+    setHintAt(null);
+    if (sidebarToggle && !isQuickRepeat) sidebarToggle.onToggle();
+    countEggClick();
+  };
+
   /** Walks the choreography forward as each beat's animation completes. */
   const advanceDrop = () => {
     setDropPhase((current) => {
@@ -162,6 +209,7 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
 
   return (
     <motion.div
+      ref={badgeRef}
       initial="rest"
       animate={dropPhase === "idle" ? "rest" : DROP_PHASES[dropPhase]}
       // Hover lift is suppressed while the gravity sequence plays so the
@@ -170,6 +218,8 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
       variants={badgeVariants}
       onAnimationComplete={advanceDrop}
       onClick={handleLogoClick}
+      onPointerEnter={(event) => event.pointerType === "mouse" && showHint()}
+      onPointerLeave={() => setHintAt(null)}
       data-drop-phase={dropPhase}
       // The logo is deliberately decorative markup — the egg behind it is
       // pure whimsy with no function, and making it tab-focusable on both
@@ -183,7 +233,9 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
       // The pointer cursor stays: unlike a plain decorative wrapper this one
       // does answer clicks (that is the whole egg), and it is the only hint
       // anybody gets that the badge is worth touching. It is not a home link
-      // on any surface, so it promises no navigation.
+      // on any surface, so it promises no navigation. In the desktop sidebar it
+      // also folds and unfolds it (`sidebarToggle`) -- a mouse shortcut beside
+      // the edge's toggle button, which is the keyboard's way to the same thing.
       style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
       className={`relative flex shrink-0 cursor-pointer items-center justify-center rounded-[12px] bg-app-brand shadow-lg select-none ${className}`}
     >
@@ -234,6 +286,23 @@ export function SidebarLogo({ className = "" }: { className?: string }) {
           <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
         </g>
       </motion.svg>
+
+      {hintAt &&
+        sidebarToggle &&
+        createPortal(
+          // Hidden from assistive technology: the edge's toggle button already says this, and
+          // the badge itself is not reachable without a pointer.
+          <span
+            aria-hidden="true"
+            style={{ left: hintAt.x, top: hintAt.y }}
+            className={`pointer-events-none fixed z-[70] rounded-lg border border-app-border bg-app-surface px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-app-text shadow-lg ${
+              hintAt.side === "right" ? "-translate-y-1/2" : ""
+            }`}
+          >
+            {sidebarToggle.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          </span>,
+          document.body,
+        )}
     </motion.div>
   );
 }
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 9052ba808..8d666878a 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -516,6 +516,20 @@ describe("SideBar", () => {
       expect(sidebarWidth()).toBe("302px");
     });
 
+    it("folds and unfolds from the logo, but not on the egg's quick repeat clicks", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+      const logo = () => desktop().querySelector<HTMLElement>("[data-drop-phase]")!;
+
+      await user.click(logo());
+      expect(sidebarWidth()).toBe("76px");
+
+      // Straight after: counts towards the gravity egg, leaves the sidebar folded.
+      await user.click(logo());
+      expect(sidebarWidth()).toBe("76px");
+    });
+
     it("leaves the mobile drawer as it was", async () => {
       const user = userEvent.setup();
       signIn();

From d071b104fc8008327b9aa61f4f75089d9dc8cecb Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 13:26:33 +0000
Subject: [PATCH 5/8] Drop the edge's fold button now that the logo does it

The round button on the sidebar's edge doubled the logo, which folds and unfolds the sidebar with its own tooltip, and read as a stray glitch beside it; it and its drawn panel icon go. From the keyboard, Enter on the resize edge still folds and unfolds. The tests fold through the logo instead of the button.
---
 src/components/layout/SideBar.tsx             | 13 ----
 src/components/layout/SidebarLogo.tsx         |  8 +--
 src/components/layout/SidebarToggleIcon.tsx   | 63 -------------------
 tests/unit/a11y/SideBar.a11y.test.tsx         | 16 +++--
 tests/unit/components/layout/SideBar.test.tsx | 22 +++----
 5 files changed, 25 insertions(+), 97 deletions(-)
 delete mode 100644 src/components/layout/SidebarToggleIcon.tsx

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 99acf940d..f30d4977c 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -31,7 +31,6 @@ import { SidebarLogo } from "./SidebarLogo";
 import { SidebarNavLink } from "./SidebarNavLink";
 import { SidebarResizeHandle } from "./SidebarResizeHandle";
 import { SidebarAccountFlyout } from "./SidebarAccountFlyout";
-import { SidebarToggleIcon } from "./SidebarToggleIcon";
 import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH_VAR, useSidebarLayout } from "./useSidebarLayout";
 import { hoverSpringToken } from "../../styles/tokens";
 
@@ -551,18 +550,6 @@ export function SideBar() {
           collapsed={sidebarLayout.collapsed}
           onToggleCollapsed={sidebarLayout.toggleCollapsed}
         />
-        {/* On the edge at the logo's height, so it sits in the same place open and folded and
-            only travels with the edge itself. Above the resize grip, which it overlaps. */}
-        <button
-          type="button"
-          onClick={sidebarLayout.toggleCollapsed}
-          aria-label={sidebarLayout.collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          aria-expanded={!sidebarLayout.collapsed}
-          title={sidebarLayout.collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          className="group/toggle absolute top-[32px] -right-[14px] z-30 flex h-7 w-7 items-center justify-center rounded-full border border-app-border bg-app-bg text-app-text-muted shadow-[0_4px_12px_-6px_rgba(0,0,0,0.4)] transition-colors hover:border-app-brand-border hover:text-app-brand focus-visible:ring-2 focus-visible:ring-app-focus focus-visible:outline-none"
-        >
-          <SidebarToggleIcon collapsed={sidebarLayout.collapsed} className="h-4 w-4" />
-        </button>
         {/* Also on the folded rail: its edge pulls the sidebar open again. */}
         <SidebarResizeHandle
           width={sidebarLayout.width}
diff --git a/src/components/layout/SidebarLogo.tsx b/src/components/layout/SidebarLogo.tsx
index 312d1e958..faa63402b 100644
--- a/src/components/layout/SidebarLogo.tsx
+++ b/src/components/layout/SidebarLogo.tsx
@@ -234,8 +234,8 @@ export function SidebarLogo({ className = "", sidebarToggle }: SidebarLogoProps)
       // does answer clicks (that is the whole egg), and it is the only hint
       // anybody gets that the badge is worth touching. It is not a home link
       // on any surface, so it promises no navigation. In the desktop sidebar it
-      // also folds and unfolds it (`sidebarToggle`) -- a mouse shortcut beside
-      // the edge's toggle button, which is the keyboard's way to the same thing.
+      // also folds and unfolds it (`sidebarToggle`); from the keyboard the same
+      // is Enter on the sidebar's resize edge.
       style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
       className={`relative flex shrink-0 cursor-pointer items-center justify-center rounded-[12px] bg-app-brand shadow-lg select-none ${className}`}
     >
@@ -290,8 +290,8 @@ export function SidebarLogo({ className = "", sidebarToggle }: SidebarLogoProps)
       {hintAt &&
         sidebarToggle &&
         createPortal(
-          // Hidden from assistive technology: the edge's toggle button already says this, and
-          // the badge itself is not reachable without a pointer.
+          // Hidden from assistive technology: the badge is not reachable without a pointer, and
+          // the resize edge (Enter folds and unfolds) is their way to the same thing.
           <span
             aria-hidden="true"
             style={{ left: hintAt.x, top: hintAt.y }}
diff --git a/src/components/layout/SidebarToggleIcon.tsx b/src/components/layout/SidebarToggleIcon.tsx
deleted file mode 100644
index 616bf5917..000000000
--- a/src/components/layout/SidebarToggleIcon.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useId } from "react";
-
-type SidebarToggleIconProps = {
-  collapsed: boolean;
-  className?: string;
-};
-
-/**
- * A window with a rail down its left side, drawn at the width the sidebar has: wide while it is
- * open, a sliver while it is folded. It shows the sidebar's state rather than a direction, and
- * on hover the rail leans towards the other state, so the button previews what a click does.
- *
- * Drawn here rather than taken from lucide because the rail has to move: it scales from its left
- * edge and the divider travels with its right edge, both as CSS transforms (in the SVG's own
- * units, which CSS pixels are inside a `viewBox`), under a parent `group/toggle`.
- */
-export function SidebarToggleIcon({ collapsed, className = "" }: SidebarToggleIconProps) {
-  const clipId = useId();
-  // The rail is 8 units wide when open (x 3 to 11). Its right edge, where the divider sits,
-  // moves by 8 x (scale - 1) when it scales from the left.
-  const rail = collapsed
-    ? "scale-x-[0.4] group-hover/toggle:scale-x-[0.7]"
-    : "scale-x-100 group-hover/toggle:scale-x-[0.65]";
-  const divider = collapsed
-    ? "translate-x-[-4.8px] group-hover/toggle:translate-x-[-2.4px]"
-    : "translate-x-0 group-hover/toggle:translate-x-[-2.8px]";
-  const moves = "transition-[scale,translate] duration-300 ease-out motion-reduce:transition-none";
-
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.75}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      className={className}
-    >
-      <defs>
-        <clipPath id={clipId}>
-          <rect x="3" y="4" width="18" height="16" rx="3" />
-        </clipPath>
-      </defs>
-      {/* Clipped on a group, not on the rail: a clip on the rail would scale with it and squash
-          the window's rounded corners. */}
-      <g clipPath={`url(#${clipId})`}>
-        <rect
-          x="3"
-          y="4"
-          width="8"
-          height="16"
-          stroke="none"
-          fill="currentColor"
-          fillOpacity={0.3}
-          className={`origin-left [transform-box:fill-box] ${rail} ${moves}`}
-        />
-      </g>
-      <line x1="11" y1="4" x2="11" y2="20" className={`${divider} ${moves}`} />
-      <rect x="3" y="4" width="18" height="16" rx="3" />
-    </svg>
-  );
-}
diff --git a/tests/unit/a11y/SideBar.a11y.test.tsx b/tests/unit/a11y/SideBar.a11y.test.tsx
index 2e9a567ed..eca8ec4d3 100644
--- a/tests/unit/a11y/SideBar.a11y.test.tsx
+++ b/tests/unit/a11y/SideBar.a11y.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 import { axe } from "vitest-axe";
@@ -85,12 +85,16 @@ describe("SideBar Accessibility", () => {
       </MemoryRouter>,
     );
 
-    await user.click(screen.getByRole("button", { name: "Collapse sidebar" }));
-
-    expect(screen.getByRole("button", { name: "Expand sidebar" })).toHaveAttribute(
-      "aria-expanded",
-      "false",
+    // The logo folds it: decoration for assistive technology, the resize edge is their way.
+    await user.click(
+      screen
+        .getByRole("complementary", { name: "Desktop Sidebar" })
+        .querySelector<HTMLElement>("[data-drop-phase]")!,
     );
+
+    expect(
+      within(screen.getByRole("complementary", { name: "Desktop Sidebar" })).getByRole("separator"),
+    ).toHaveAttribute("aria-valuetext", "Collapsed");
     expect(await axe(baseElement)).toHaveNoViolations();
   });
 });
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 8d666878a..26cb1bd2a 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -405,13 +405,15 @@ describe("SideBar", () => {
       document.documentElement.style.getPropertyValue("--app-sidebar-desktop-width");
     // Closed, the drawer is `inert` and hidden from the accessibility tree, so no role query finds it.
     const mobile = () => document.querySelector<HTMLElement>('aside[aria-label="Mobile Sidebar"]')!;
+    // The logo folds and unfolds it; the resize edge's Enter is the keyboard's way.
+    const logo = () => desktop().querySelector<HTMLElement>("[data-drop-phase]")!;
 
     it("folds to icons, keeps every entry named, and remembers it", async () => {
       const user = userEvent.setup();
       signIn();
       const { unmount } = renderWithProviders(<SideBar />);
 
-      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+      await user.click(logo());
 
       expect(sidebarWidth()).toBe("76px");
       // Icon only, but still a link with its name.
@@ -425,7 +427,10 @@ describe("SideBar", () => {
       unmount();
       renderWithProviders(<SideBar />);
       expect(sidebarWidth()).toBe("76px");
-      expect(within(desktop()).getByRole("button", { name: "Expand sidebar" })).toBeInTheDocument();
+      expect(within(desktop()).getByRole("separator")).toHaveAttribute(
+        "aria-valuetext",
+        "Collapsed",
+      );
     });
 
     it("folds the footer into one icon that slides the full card out", async () => {
@@ -433,7 +438,7 @@ describe("SideBar", () => {
       signIn();
       renderWithProviders(<SideBar />);
 
-      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+      await user.click(logo());
 
       const trigger = within(desktop()).getByRole("button", { name: "Account and project" });
       const card = document.getElementById(trigger.getAttribute("aria-controls")!)!;
@@ -455,7 +460,7 @@ describe("SideBar", () => {
       signIn();
       renderWithProviders(<SideBar />);
 
-      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+      await user.click(logo());
       within(desktop())
         .getByRole("link", { name: /Dashboard/ })
         .focus();
@@ -508,9 +513,7 @@ describe("SideBar", () => {
 
       await user.keyboard("{ArrowRight}");
       expect(sidebarWidth()).toBe("302px");
-      expect(
-        within(desktop()).getByRole("button", { name: "Collapse sidebar" }),
-      ).toBeInTheDocument();
+      expect(handle).toHaveAttribute("aria-valuetext", "302 pixels");
 
       await user.keyboard("{Enter}{Enter}");
       expect(sidebarWidth()).toBe("302px");
@@ -520,8 +523,6 @@ describe("SideBar", () => {
       const user = userEvent.setup();
       signIn();
       renderWithProviders(<SideBar />);
-      const logo = () => desktop().querySelector<HTMLElement>("[data-drop-phase]")!;
-
       await user.click(logo());
       expect(sidebarWidth()).toBe("76px");
 
@@ -535,10 +536,9 @@ describe("SideBar", () => {
       signIn();
       renderWithProviders(<SideBar />);
 
-      await user.click(within(desktop()).getByRole("button", { name: "Collapse sidebar" }));
+      await user.click(logo());
 
       expect(mobile()).toHaveClass("w-[var(--app-sidebar-width)]");
-      expect(mobile().querySelector('[aria-label="Collapse sidebar"]')).toBeNull();
       expect(mobile().querySelector('[role="separator"]')).toBeNull();
     });
   });

From 1893a7b0f414e19833ea0a435a2c522b57db0e06 Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 13:49:47 +0000
Subject: [PATCH 6/8] Keep the folded footer card open when its icon is clicked
 after hovering

Hovering the avatar opened the card and the click that followed toggled it shut again, so the natural mouse gesture closed what it had just opened. The card now tells a hover-open (follows the pointer) from a click-open (stays until Escape, a click elsewhere or a second click), and a click on a hover-open card pins it. The test looks the Settings link up by prefix, since dev now puts its shortcut in the name.
---
 .../layout/SidebarAccountFlyout.tsx           | 28 +++++++++++++------
 tests/unit/components/layout/SideBar.test.tsx |  2 +-
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/SidebarAccountFlyout.tsx b/src/components/layout/SidebarAccountFlyout.tsx
index 67df8a665..268965759 100644
--- a/src/components/layout/SidebarAccountFlyout.tsx
+++ b/src/components/layout/SidebarAccountFlyout.tsx
@@ -26,7 +26,14 @@ type SidebarAccountFlyoutProps = {
  * same CSS variable the sidebar does: the nav and footer clip anything past their edge.
  */
 export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccountFlyoutProps) {
-  const [open, setOpen] = useState(false);
+  /**
+   * Opened by hover it follows the pointer and closes when it leaves; opened by a click (or
+   * clicked while hovered open) it stays until Escape, a click elsewhere or a second click.
+   * Without the difference, hovering the icon and then clicking it -- the natural thing to do
+   * with a mouse -- closed the card the hover had just opened.
+   */
+  const [mode, setMode] = useState<"closed" | "hover" | "pinned">("closed");
+  const open = mode !== "closed";
   const panelId = useId();
   const triggerRef = useRef<HTMLButtonElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
@@ -35,11 +42,14 @@ export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccoun
   const cancelClose = () => window.clearTimeout(closeTimer.current);
   const openNow = () => {
     cancelClose();
-    setOpen(true);
+    setMode((current) => (current === "pinned" ? current : "hover"));
   };
   const closeSoon = () => {
     cancelClose();
-    closeTimer.current = window.setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
+    closeTimer.current = window.setTimeout(
+      () => setMode((current) => (current === "pinned" ? current : "closed")),
+      CLOSE_DELAY_MS,
+    );
   };
 
   useEffect(() => cancelClose, []);
@@ -50,7 +60,7 @@ export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccoun
   const [openedAt, setOpenedAt] = useState(pathname);
   if (openedAt !== pathname) {
     setOpenedAt(pathname);
-    setOpen(false);
+    setMode("closed");
   }
 
   // Escape and a click anywhere else close it, as for any popover.
@@ -59,13 +69,13 @@ export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccoun
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
       const focusWasInside = panelRef.current?.contains(document.activeElement) ?? false;
-      setOpen(false);
+      setMode("closed");
       if (focusWasInside) triggerRef.current?.focus();
     };
     const onPointerDown = (event: PointerEvent) => {
       const target = event.target as Node;
       if (panelRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
-      setOpen(false);
+      setMode("closed");
     };
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("pointerdown", onPointerDown);
@@ -89,8 +99,8 @@ export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccoun
         onPointerLeave={(event) => event.pointerType === "mouse" && closeSoon()}
         onClick={(event) => {
           cancelClose();
-          const opening = !open;
-          setOpen(opening);
+          const opening = mode !== "pinned";
+          setMode(opening ? "pinned" : "closed");
           // From the keyboard, into the card: portalled to the end of the page, it is not next
           // in the tab order.
           if (opening && event.detail === 0) {
@@ -122,7 +132,7 @@ export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccoun
           onBlur={(event) => {
             const next = event.relatedTarget as Node | null;
             if (next && !panelRef.current?.contains(next) && !triggerRef.current?.contains(next)) {
-              setOpen(false);
+              setMode("closed");
             }
           }}
           // Slides out of the rail from its bottom-left corner, the way the footer card would
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 346d4a363..8ba41903e 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -449,7 +449,7 @@ describe("SideBar", () => {
       expect(trigger).toHaveAttribute("aria-expanded", "true");
       expect(card).not.toHaveAttribute("inert");
       expect(within(card).getByRole("button", { name: "Logout" })).toBeInTheDocument();
-      expect(within(card).getByRole("link", { name: "Settings" })).toBeInTheDocument();
+      expect(within(card).getByRole("link", { name: /^Settings/ })).toBeInTheDocument();
 
       await user.keyboard("{Escape}");
       expect(trigger).toHaveAttribute("aria-expanded", "false");

From bf6c2338e740e89b528c59e14aa2dde4649ddd32 Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 14:42:03 +0000
Subject: [PATCH 7/8] Let Alt+S fold the desktop sidebar too

Alt+S now toggles whichever sidebar is on screen: the drawer below lg, as before, and the fold to icons from lg up (#244), which the chord had been left free for. The drawer's state still never flips on a wide screen. The shortcuts list drops its "small screens" note, and the logo's tooltip shows the chord beside "Collapse/Expand sidebar".
---
 src/components/layout/SideBar.tsx              | 17 +++++++++--------
 src/components/layout/SidebarLogo.tsx          |  8 +++++++-
 src/features/shortcuts/shortcuts.ts            |  6 ++----
 tests/unit/components/layout/SideBar.test.tsx  | 18 +++++++++++-------
 .../shortcuts/KeyboardShortcutsModal.test.tsx  |  1 -
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index a643565c8..7598ff095 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -555,21 +555,22 @@ export function SideBar() {
   }, [pathname]);
 
   /**
-   * Alt+S works whatever the header's button works — one definition of "toggle the sidebar"
-   * for both ways in. Today that is the drawer below `lg`; the desktop collapse (#244) will
-   * give the same chord something to do on a wide screen without this line changing.
+   * Alt+S toggles whichever sidebar is on screen: below `lg` the drawer, as the header's
+   * button does; from `lg` up the desktop sidebar's fold to icons, as its logo does (#244).
    *
-   * Which is exactly why it only listens below `lg`: on a wide screen the drawer is not on
-   * screen, so the chord would flip state nobody can see — and leave it flipped, opening the
-   * drawer uninvited the next time the window narrows. Worse, `Alt+S` is Firefox's History
-   * menu on Windows, and swallowing it for a no-op takes the browser's own chord too.
+   * Never the drawer on a wide screen: it is not on screen there, so the chord would flip
+   * state nobody can see -- and leave it flipped, opening the drawer uninvited the next time
+   * the window narrows.
    */
   const toggleMobileSidebar = useCallback(() => {
     setIsMobileSidebarOpen((isOpen) => !isOpen);
   }, []);
   const isDesktopLayout = useMediaQuery("(min-width: 1024px)");
 
-  useShortcutListener(SIDEBAR_TOGGLE_SHORTCUT, toggleMobileSidebar, !isDesktopLayout);
+  useShortcutListener(
+    SIDEBAR_TOGGLE_SHORTCUT,
+    isDesktopLayout ? sidebarLayout.toggleCollapsed : toggleMobileSidebar,
+  );
 
   return (
     <>
diff --git a/src/components/layout/SidebarLogo.tsx b/src/components/layout/SidebarLogo.tsx
index faa63402b..f9af5f4a6 100644
--- a/src/components/layout/SidebarLogo.tsx
+++ b/src/components/layout/SidebarLogo.tsx
@@ -2,6 +2,8 @@ import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { motion, useReducedMotion, type TargetAndTransition, type Variants } from "framer-motion";
 import { useRepeatClicks } from "../../features/easter-eggs/hooks/useRepeatClicks";
+import { SIDEBAR_TOGGLE_SHORTCUT, shortcutChord } from "../../features/shortcuts";
+import { ShortcutHint } from "../ui/ShortcutHint";
 import { hoverSpringToken, logoHopSpringToken } from "../../styles/tokens";
 
 const BADGE_SIZE = 44;
@@ -295,11 +297,15 @@ export function SidebarLogo({ className = "", sidebarToggle }: SidebarLogoProps)
           <span
             aria-hidden="true"
             style={{ left: hintAt.x, top: hintAt.y }}
-            className={`pointer-events-none fixed z-[70] rounded-lg border border-app-border bg-app-surface px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-app-text shadow-lg ${
+            className={`pointer-events-none fixed z-[70] flex items-center gap-2 rounded-lg border border-app-border bg-app-surface px-2.5 py-1.5 text-xs font-medium whitespace-nowrap text-app-text shadow-lg ${
               hintAt.side === "right" ? "-translate-y-1/2" : ""
             }`}
           >
             {sidebarToggle.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            <ShortcutHint
+              keys={shortcutChord(SIDEBAR_TOGGLE_SHORTCUT)}
+              className="border-app-border text-app-text-muted"
+            />
           </span>,
           document.body,
         )}
diff --git a/src/features/shortcuts/shortcuts.ts b/src/features/shortcuts/shortcuts.ts
index a00660217..25e211533 100644
--- a/src/features/shortcuts/shortcuts.ts
+++ b/src/features/shortcuts/shortcuts.ts
@@ -192,9 +192,8 @@ export const NEW_CONVERSATION_SHORTCUT: ShortcutItem = {
 };
 
 /**
- * Alt+S works the drawer the mobile header's button works. There is no desktop collapse to
- * toggle yet (#244); until then the chord is a no-op on a wide screen rather than a second
- * behaviour, because inventing one here would only have to be undone there.
+ * Alt+S toggles the sidebar that is on screen: the drawer on a small screen, the fold to
+ * icons on a wide one (#244). `SideBar` answers it.
  */
 export const SIDEBAR_TOGGLE_SHORTCUT: ShortcutItem = {
   id: "act-sidebar",
@@ -203,7 +202,6 @@ export const SIDEBAR_TOGGLE_SHORTCUT: ShortcutItem = {
   scope: "surface",
   code: "KeyS",
   altKey: true,
-  note: "small screens",
 };
 
 /**
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index 8ba41903e..f5f180f0e 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { MemoryRouter, useNavigate } from "react-router-dom";
@@ -679,8 +679,9 @@ describe("SideBar", () => {
     );
   });
 
-  it("leaves Alt+S to the browser on desktop widths", () => {
+  it("folds and unfolds the desktop sidebar with Alt+S on desktop widths, not the drawer", async () => {
     mockViewport(true);
+    const user = userEvent.setup();
     vi.mocked(useAuthHook.useAuth).mockReturnValue({
       status: "authenticated",
       profile: mockProfile,
@@ -688,19 +689,22 @@ describe("SideBar", () => {
       logout: vi.fn(),
       refetchProfile: vi.fn(),
     });
+    const width = () =>
+      document.documentElement.style.getPropertyValue("--app-sidebar-desktop-width");
 
     try {
       renderWithProviders(<SideBar />);
 
-      // The drawer does not exist above `lg`, so the chord listens only below it: nothing
-      // visible would happen here, the state flip would ambush the next resize — and
-      // `fireEvent` coming back `true` says the keystroke falls through untouched, which on
-      // Firefox is the History menu rather than a swallowed no-op.
-      expect(fireEvent.keyDown(window, { code: "KeyS", altKey: true })).toBe(true);
+      await user.keyboard("{Alt>}s{/Alt}");
+      expect(width()).toBe("76px");
+      // The drawer is not on screen above `lg`, so its state must not flip behind the scenes.
       expect(screen.getByRole("button", { name: "Open sidebar" })).toHaveAttribute(
         "aria-expanded",
         "false",
       );
+
+      await user.keyboard("{Alt>}s{/Alt}");
+      expect(width()).toBe("286px");
     } finally {
       mockViewport(false);
     }
diff --git a/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx b/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx
index f58283f9f..97ef68f11 100644
--- a/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx
+++ b/tests/unit/features/shortcuts/KeyboardShortcutsModal.test.tsx
@@ -118,7 +118,6 @@ describe("KeyboardShortcutsModal", () => {
     renderModal();
 
     expect(within(rowFor("Jump to the message box")).getByText(/in Chat/)).toBeInTheDocument();
-    expect(within(rowFor("Toggle sidebar")).getByText(/small screens/)).toBeInTheDocument();
   });
 
   it("documents the chords the surfaces answer, not only the global ones", () => {

From add20608bf7fe589f55d6dc1a41297be55526969 Mon Sep 17 00:00:00 2001
From: BabuPlk <anitta.pulikkathara@gmail.com>
Date: Tue, 29 Sep 2026 15:35:08 +0000
Subject: [PATCH 8/8] Address review on the folded sidebar: shortcut chips,
 count title and loose ends

- The shortcut chip is no longer rendered on the folded rail, where it took layout width and was revealed (squeezed and clipped) on hover and focus; the chord stays in the link's title.
- The count's words are its title only on the folded rail; open, it no longer shadows the link's own title.
- The resize handle clears its drag mark on unmount, so a drag cut short cannot leave the sidebar's easing off.
- The logo's tooltip clears whenever the sidebar folds or unfolds, Alt+S included, not only on its own click.
- The folded footer card closes when focus mode slides the sidebar away.
- The resize edge's title says Enter folds or opens it.
---
 src/components/layout/SidebarAccountFlyout.tsx | 14 +++++++++-----
 src/components/layout/SidebarLogo.tsx          |  9 +++++++++
 src/components/layout/SidebarNavLink.tsx       |  7 +++++--
 src/components/layout/SidebarResizeHandle.tsx  | 10 +++++++---
 tests/unit/components/layout/SideBar.test.tsx  | 13 +++++++++++++
 5 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/SidebarAccountFlyout.tsx b/src/components/layout/SidebarAccountFlyout.tsx
index 268965759..ab23df408 100644
--- a/src/components/layout/SidebarAccountFlyout.tsx
+++ b/src/components/layout/SidebarAccountFlyout.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { useLocation } from "react-router-dom";
+import { useFocusMode } from "../../context/useFocusMode";
 
 /** Long enough to cross the gap from the icon to the card without it closing in between. */
 const CLOSE_DELAY_MS = 200;
@@ -54,12 +55,15 @@ export function SidebarAccountFlyout({ trigger, label, children }: SidebarAccoun
 
   useEffect(() => cancelClose, []);
 
-  // Going somewhere from it (Settings) is done with it. Adjusted while rendering rather than in
-  // an effect, so the card never shows open on the new page for a frame.
+  // Going somewhere from it (Settings) is done with it, and so is focus mode sliding the sidebar
+  // away: portalled outside the sidebar, the card would stay behind, floating beside nothing.
+  // Adjusted while rendering rather than in an effect, so it never shows for a frame too long.
   const { pathname } = useLocation();
-  const [openedAt, setOpenedAt] = useState(pathname);
-  if (openedAt !== pathname) {
-    setOpenedAt(pathname);
+  const { isFocused } = useFocusMode();
+  const context = `${pathname}|${isFocused}`;
+  const [openedIn, setOpenedIn] = useState(context);
+  if (openedIn !== context) {
+    setOpenedIn(context);
     setMode("closed");
   }
 
diff --git a/src/components/layout/SidebarLogo.tsx b/src/components/layout/SidebarLogo.tsx
index f9af5f4a6..70746f4cb 100644
--- a/src/components/layout/SidebarLogo.tsx
+++ b/src/components/layout/SidebarLogo.tsx
@@ -107,6 +107,15 @@ export function SidebarLogo({ className = "", sidebarToggle }: SidebarLogoProps)
   const [hintAt, setHintAt] = useState<{ x: number; y: number; side: "right" | "below" } | null>(
     null,
   );
+  // The badge moves whenever the sidebar folds or unfolds -- by a click here, Alt+S or the resize
+  // edge -- so a tooltip measured before would point at where it was. Cleared while rendering,
+  // so it never shows at the old spot for a frame; it comes back on the next hover.
+  const collapsed = sidebarToggle?.collapsed ?? false;
+  const [hintFor, setHintFor] = useState(collapsed);
+  if (hintFor !== collapsed) {
+    setHintFor(collapsed);
+    setHintAt(null);
+  }
 
   // The gravity easter egg: five clicks drop the badge off its shelf.
   // Reduced motion skips the animation entirely (pure motion has no honest
diff --git a/src/components/layout/SidebarNavLink.tsx b/src/components/layout/SidebarNavLink.tsx
index 78412ffb3..a0ce93baf 100644
--- a/src/components/layout/SidebarNavLink.tsx
+++ b/src/components/layout/SidebarNavLink.tsx
@@ -571,7 +571,9 @@ export function SidebarNavLink({
                     tooltip's text, for everyone else. */}
                 <span className={collapsed ? "sr-only" : undefined}>{label}</span>
 
-                {shortcut && (
+                {/* Not on the folded rail: there is no room beside the icon, and the chord stays
+                    in the link's `title` and in the shortcuts modal. */}
+                {shortcut && !collapsed && (
                   <ShortcutHint keys={shortcut} className="border-app-border text-app-text-muted" />
                 )}
 
@@ -604,7 +606,8 @@ export function SidebarNavLink({
                         ? "absolute -top-2 -right-2.5 flex items-center"
                         : "ml-auto flex items-center"
                     }
-                    title={countLabel?.(count)}
+                    // Open, the link's own `title` (name and chord) must not be shadowed by it.
+                    title={collapsed ? countLabel?.(count) : undefined}
                   >
                     {/* The same amber as the icon beside it, and the same
                                             amber on the active row as off it. This is the
diff --git a/src/components/layout/SidebarResizeHandle.tsx b/src/components/layout/SidebarResizeHandle.tsx
index a46b872a5..b0accad28 100644
--- a/src/components/layout/SidebarResizeHandle.tsx
+++ b/src/components/layout/SidebarResizeHandle.tsx
@@ -1,4 +1,4 @@
-import { useRef, type KeyboardEvent, type PointerEvent } from "react";
+import { useEffect, useRef, type KeyboardEvent, type PointerEvent } from "react";
 import {
   SIDEBAR_COLLAPSED_WIDTH,
   SIDEBAR_DEFAULT_WIDTH,
@@ -64,6 +64,10 @@ export function SidebarResizeHandle({
     collapsed: boolean;
   } | null>(null);
 
+  // Unmounted mid-drag (focus mode swapping the shell, a route change, HMR), `endDrag` never runs,
+  // and the mark would hold the sidebar's easing off for the rest of the visit.
+  useEffect(() => () => setDragging(false), []);
+
   const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
     if (event.button !== 0) return;
     event.preventDefault();
@@ -159,8 +163,8 @@ export function SidebarResizeHandle({
       tabIndex={0}
       title={
         collapsed
-          ? "Drag to expand, double-click to reset"
-          : "Drag to resize, double-click to reset"
+          ? "Drag to expand, double-click to reset, Enter to expand"
+          : "Drag to resize, double-click to reset, Enter to collapse"
       }
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}
diff --git a/tests/unit/components/layout/SideBar.test.tsx b/tests/unit/components/layout/SideBar.test.tsx
index f5f180f0e..8e696c1b7 100644
--- a/tests/unit/components/layout/SideBar.test.tsx
+++ b/tests/unit/components/layout/SideBar.test.tsx
@@ -456,6 +456,19 @@ describe("SideBar", () => {
       expect(card).toHaveAttribute("inert");
     });
 
+    it("leaves the shortcut chips off the folded rail, where they have no room", async () => {
+      const user = userEvent.setup();
+      signIn();
+      renderWithProviders(<SideBar />);
+      expect(within(desktop()).getAllByText("Alt + H").length).toBeGreaterThan(0);
+
+      await user.click(logo());
+
+      expect(within(desktop()).queryByText("Alt + H")).not.toBeInTheDocument();
+      // Still named with its chord, as the link's own title.
+      expect(within(desktop()).getByTitle("Dashboard (Alt + H)")).toBeInTheDocument();
+    });
+
     it("shows an entry's name as a tooltip when it gets keyboard focus while folded", async () => {
       const user = userEvent.setup();
       signIn();