Sidebar: arrow sits directly below the logo, in both states

As requested: the collapse/expand control is its own row right under the
brand row — labelled "Collapse sidebar" when expanded, icon-only and
centred when collapsed — so it never moves anywhere else. Measured: the
same y (73px) in both states, directly below the logo.

(The previous attempt anchored it to the rail's top-right corner instead —
not what was asked.)

README: decision 22 updated. SW -> freezmo-v42.

README.md

@@ -1054,9 +1054,9 @@ Things I chose while building, with the reasoning:
     rounded glass panel inset from the viewport edges, so the ice scene shows around it; deck cards
     are 24px-radius glass panels with a secondary Study CTA and quiet metadata. Headings are
     semibold with tighter tracking. Nested glass (chips, inputs) is more opaque but never adds a
-    second blur layer. The collapse/expand arrow keeps one home — the rail's top-right corner in
+    second blur layer. The collapse/expand arrow keeps one home: its own row directly below the
-    both states (it used to become a nav row in the middle of the icon column when collapsed,
+    logo in both states (labelled when expanded, icon-only and centred when collapsed), instead of
-    which read as the control jumping around); collapsed, the brand mark leads the icon column.
+    swapping between the brand row and the middle of the icon column.
 23. **One fixed ice scene instead of per-page blobs.** The decorative background used to be
     rendered inside the content column, so on wide screens it was clipped into a visible hard edge.
     It now lives in a single `position: fixed` layer (`.ice-scene`, `z-index: -1`, pointer-events

components/Sidebar.tsx

@@ -103,43 +103,39 @@ function NavContent({ collapsed = false }: { collapsed?: boolean }) {
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       {/* brand ---------------------------------------------------------- */}
-      <div className={cn("mb-1 flex items-center", collapsed ? "justify-end" : "justify-between")}>
+      <div className={cn("mb-1 flex items-center", collapsed ? "justify-center" : "justify-between")}>
-        {!collapsed ? (
         <Link
           href="/"
-            className="nav-row flex-1 gap-2.5"
+          className={cn("nav-row gap-2.5", collapsed ? "w-auto px-2" : "flex-1")}
           aria-label={t("header.home")}
           title="Freezmo"
         >
           {brandMark}
+          {!collapsed ? (
+            <>
               <span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">Freezmo</span>
               {IS_DEV_INSTANCE ? (
                 <span className="rounded-md border border-amber-400/60 bg-amber-400/15 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700 dark:text-amber-300">
                   DEV
                 </span>
               ) : null}
-          </Link>
+            </>
           ) : null}
-        {/* One home for the arrow: the rail's top-right corner in both states.
+        </Link>
-            It used to swap between the brand row and the middle of the icon
+      </div>
-            column, which read as the control jumping around. */}
+
+      {/* collapse / expand: its own row directly below the logo, in both
+          states, so the arrow never jumps around the rail. */}
       <button
         type="button"
         onClick={() => sidebarCollapse.set(!collapsed)}
         aria-label={collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
         title={collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
-          className="grid size-8 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
+        className={cn("nav-row mb-3", collapsed && "justify-center px-2")}
       >
-          {collapsed ? <ChevronRightIcon className="size-4" /> : <ChevronLeftIcon className="size-4" />}
+        {collapsed ? <ChevronRightIcon className="size-4 shrink-0" /> : <ChevronLeftIcon className="size-4 shrink-0" />}
+        {!collapsed ? <span className="flex-1 truncate text-left">{t("sidebar.collapse")}</span> : null}
       </button>
-      </div>
-
-      {/* collapsed: the brand mark leads the icon column ------------------ */}
-      {collapsed ? (
-        <Link href="/" className="nav-row mb-3 justify-center px-2" aria-label={t("header.home")} title="Freezmo">
-          {brandMark}
-        </Link>
-      ) : null}
 
       {/* new deck: a quiet row, not a competing primary button ---------- */}
       <Link

public/sw.js

@@ -9,7 +9,7 @@
  *
  * Bumping CACHE_VERSION is how a new deploy invalidates old assets.
  */
-const CACHE_VERSION = "freezmo-v41";
+const CACHE_VERSION = "freezmo-v42";
 const SHELL_CACHE = `${CACHE_VERSION}-shell`;
 const ASSET_CACHE = `${CACHE_VERSION}-assets`;