Add persistent collapsible sidebar rail

[zeidalidiez]

Summary

• add a desktop sidebar toggle that switches between the existing 232px navigation and a 56px icon rail
• remember the user's expanded/collapsed preference across reloads
• keep every destination accessible in rail mode with explicit labels and hover titles
• preserve the existing mobile navigation sheet below the 900px breakpoint
• update the README and AI architecture ledger

Root cause

The shell only defined one desktop sidebar width, while the hamburger control was wired exclusively to the mobile sheet. The mobile trigger's low-specificity display rule could also be overridden by shared icon-button styles, leaving an ambiguous menu control visible on desktop.

User impact

Desktop users can reclaim horizontal space without losing navigation access, reopen the full sidebar when needed, and keep their preferred state between sessions. Mobile behavior remains unchanged.

Validation

• npm --workspace packages/ui run typecheck
• npm --workspace packages/ui run test — 151 tests passed
• npm run build:web
• visual browser checks at 1440px and 800px:
  • 232px expanded desktop sidebar
  • 56px collapsed icon rail
  • collapsed preference retained after reload
  • one desktop toggle above 900px
  • 320px mobile drawer below 900px

Greptile Summary

This PR adds a persistent collapsible desktop sidebar rail. The main changes are:

• A desktop sidebar toggle that switches between the full 232px navigation and a 56px icon rail.
• A saved gph.sidebar.state preference that restores the user’s expanded or collapsed sidebar state after reloads.
• Accessible collapsed navigation links with labels, hover titles, and hidden visual text in rail mode.
• Scoped CSS rules that keep the desktop toggle and mobile navigation trigger separate across the 900px breakpoint.
• Tests and docs covering the sidebar preference, toggle behavior, rail styling, and updated product description.

Confidence Score: 5/5

Safe to merge with minimal risk.

No accepted issues were found in the changed shell logic, CSS breakpoint behavior, persistence handling, or tests.

No files require special attention.

T-Rex Logs

What T-Rex did

• Collected the general contract validation proof artifacts, including two videos, four desktop/mobile screenshots, a Playwright script, a measured behavior log, and a preview server log, with poster frames included as part of the visual proof.
• Noted a single browser console 404 resource error that occurred during the run but did not affect the validated sidebar/drawer behavior.
• Reviewed the four screenshots to confirm the desktop expanded (232px) and collapsed (56px) states match the expected visuals.
• Verified that the collapsed sidebar preference persisted after reload, as shown in the after-reload screenshot.
• Inspected the mobile layout by examining the 800px screenshot where the workspace navigation drawer is open.

_{Ran code and verified through T-Rex}

Important Files Changed

Filename	Overview
packages/ui/src/AppShell.tsx	Adds desktop sidebar state restoration, persistence, a separate desktop toggle, and collapsed link labels and titles.
packages/ui/src/theme/global.css	Introduces the active sidebar width variable, collapsed rail styling, scoped desktop and mobile trigger display rules, and mobile breakpoint overrides.
packages/ui/src/AppShell.test.tsx	Adds interaction coverage for restoring the collapsed preference, toggling expansion, accessible state, and persistence.
packages/ui/src/theme/global-css.test.ts	Adds CSS contract checks for the rail token, collapsed shell width, hidden labels, and mobile trigger specificity.
packages/ui/src/theme/tokens.css	Adds the shared 56px sidebar rail width token used by the collapsed desktop shell.
Readme.md	Updates the feature overview to describe the remembered desktop sidebar and mobile navigation split.
AI.md	Updates the architecture ledger with the desktop sidebar rail behavior, persistence key, and test coverage.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
participant User
participant AppShell
participant LocalStorage as localStorage
participant CSS as Shell CSS

AppShell->>LocalStorage: read gph.sidebar.state on mount
LocalStorage-->>AppShell: collapsed or default expanded
AppShell->>CSS: set data-sidebar-state
CSS-->>User: render 232px sidebar or 56px icon rail
User->>AppShell: click desktop sidebar toggle
AppShell->>LocalStorage: persist expanded/collapsed preference
AppShell->>CSS: update data-sidebar-state
CSS-->>User: update desktop sidebar width and labels

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
participant User
participant AppShell
participant LocalStorage as localStorage
participant CSS as Shell CSS

AppShell->>LocalStorage: read gph.sidebar.state on mount
LocalStorage-->>AppShell: collapsed or default expanded
AppShell->>CSS: set data-sidebar-state
CSS-->>User: render 232px sidebar or 56px icon rail
User->>AppShell: click desktop sidebar toggle
AppShell->>LocalStorage: persist expanded/collapsed preference
AppShell->>CSS: update data-sidebar-state
CSS-->>User: update desktop sidebar width and labels

Loading

_{Reviews (1): Last reviewed commit: "Add persistent collapsible sidebar rail" | Re-trigger Greptile}