2 Commits

Author	SHA1	Message	Date
Nathan Esquenazi	ba66872f70	fix(sidebar): align collapse CSS breakpoint with JS _isDesktopWidth (641px) ... `_isDesktopWidth()` in boot.js gates every collapse path on `matchMedia('(min-width:641px)')` — matching where the rail itself becomes visible. The CSS rules driving the actual visual collapse were nested inside the workspace-panel block at `@media(min-width:901px)` — a threshold copied from the right-panel collapse but with no functional reason to apply here. Behavioural consequence in the 641–900 px band (tablet portrait + small laptop windows): - Rail is visible, user clicks the active icon - JS adds `.layout.sidebar-collapsed` and writes localStorage='1' - JS sets aria-expanded='false' on the active rail button - CSS at min-width:901px does NOT apply → sidebar stays at 300 px width - User sees no visual change; screen reader announces collapsed state for a sidebar that is still visible; localStorage silently persists - Resize to ≥901 px later → sidebar suddenly collapses (surprise state) Fix: hoist the three `.sidebar-collapsed` / flash-prevention rules out of the workspace-panel @media block and into their own `@media(min-width:641px)` block. The rail visibility breakpoint, the JS gate, and the CSS gate now all agree. `:not(.mobile-open)` is preserved on both selectors so the mobile slide-in overlay (handled in the `max-width:640px` block) is never targeted — the new @641 boundary doesn't change that contract. Verified breakpoint matrix end-to-end (Node harness over real boot.js + style.css): Width | JS desktop | CSS applies | Effect ------|------------|-------------|------------ 640 | no | no | no-op (mobile overlay) 641 | yes | yes | collapses ✓ 700 | yes | yes | collapses ✓ 768 | yes | yes | collapses ✓ 900 | yes | yes | collapses ✓ 1024 | yes | yes | collapses ✓ Regression test added: `test_css_breakpoint_matches_js_isdesktopwidth` parses boot.js for the `_isDesktopWidth` matchMedia query, walks CSS to find the @media block enclosing `.layout.sidebar-collapsed`, and asserts the thresholds match. Locks the invariant so a future refactor can't re-introduce the asymmetric-band silent-state-leak. Test counts: - tests/test_sidebar_collapse_toggle.py: 35/35 pass (was 34, +1 regression) - Full suite (Python 3.14, local): 5040 passed, 0 failed Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	2026-05-10 21:57:47 -07:00
nesquena-hermes	2dbee503c2	feat(ux): collapse sidebar by clicking the active rail icon (fuses #1884 + #1924) ... Lets desktop users collapse the session-list sidebar to maximise the chat area, without adding any visible UI affordance. Default appearance is identical to master — only users who actively try to toggle (or know the keyboard shortcut) ever see a difference. ## Behaviour (desktop only, ≥641px) | State | Action | Result | |------------------------------------|-----------------------|-----------------------------------------| | Sidebar open, click active rail | Toggle | Sidebar collapses to width:0 | | Sidebar open, click different rail | Normal switch | **Sidebar stays open** (no surprise) | | Sidebar collapsed, click any rail | Expand + switch | Sidebar expands, then panel switches | | Anywhere, Cmd/Ctrl+B | Toggle | Same as same-active-rail click | | Mobile (<641px), any of the above | No-op | Mobile overlay behaviour unchanged | Two discoverability paths, both opt-in. **No new visible buttons.** Users who never click the active rail icon see zero UI change vs. master. ## Surface-minimal design The behaviour is contained behind one extra arg on the rail/sidebar-nav onclick: `switchPanel('chat',{fromRailClick:true})`. Without that flag the function preserves master's behaviour exactly — every programmatic `switchPanel(name)` callsite (commands, deeplinks, internal state changes) is unaffected. The guard chain inside `switchPanel`: opts.fromRailClick && _isDesktopWidth() && ( _isSidebarCollapsed() ? expandSidebar() : prevPanel === nextPanel ? (toggleSidebar(true); return false)) is the ONLY new code path that can cause a collapse. Cross-panel clicks fall through to the existing switch logic untouched. ## Polish from both source PRs - **Click-active gesture** as the primary toggle (#1884 @jasonjcwu — the genuine UX innovation; no extra button needed) - **Cmd/Ctrl+B keyboard shortcut** (#1924 @spektro33; VS Code convention). Guarded against firing when typing in INPUT / TEXTAREA / contenteditable so the shortcut never steals from in-progress text editing. - **Inline flash-prevention `<script>`** in `<head>` (#1924) sets `data-sidebar-collapsed='1'` on `<html>` BEFORE the stylesheet loads, so cold loads with a persisted-collapsed state paint correctly from frame 0 with no flicker. Cleared by JS once the class system takes over. - **Smooth slide animation** via `.24s cubic-bezier(.22,1,.36,1)` (#1924, mirrors the existing workspace-panel collapse on the right) - **`aria-expanded` mirrored** on the active rail button (#1884) so screen readers announce open/collapsed transitions. - **`body.resizing` transition-suppression** (#1884) keeps the drag-resize cursor instant — no animation during a width-resize gesture. - **bfcache `pageshow` re-sync** (#1884) — if another tab toggled the sidebar while this page was frozen, bring it in line on restore. ## Drops vs. #1924 - No persistent rail "toggle sidebar" button (Nathan: keep the UI stealth) - No close-X button in chat panel head (same reason) - No i18n keys for the dropped buttons ## What did NOT change - 22 rail/sidebar-nav `onclick` handlers gained the `{fromRailClick:true}` arg — function-call shape, invisible to users - 1 inline `<script>` in `<head>` (flash prevention) — invisible - 5 lines of CSS — invisible unless someone collapses That's the entire visible-UI delta. **23 ins / 22 del on `index.html`, all string-replace.** ## Verification - 5,151 pytest passing including a new 34-test structural suite covering every contract (CSS rules, JS functions, fromRailClick guard, legacy proxy forwarding, flash-prevention `<script>` ordering, mobile exclusion via :not(.mobile-open) selector, aria-expanded sync). - Live browser walkthrough at 1280px verified: - Default boot state identical to master (sidebar open, width 300px) - Click active rail → collapse (width 1, opacity 0, translateX -14px, localStorage='1', aria-expanded=false). Panel unchanged. - Click active rail again → expand back to width 300, aria=true - Click DIFFERENT rail → normal switch, sidebar stays open (legacy- preserving case, verified explicitly) - Click rail while collapsed → expand + switch in one gesture - Cmd+B toggles correctly - Cmd+B inside `<textarea>` → suppressed (defaultPrevented=false) - Reload with collapsed state persisted → restores without flash - Mobile simulation (matchMedia returns false for min-width:641px): same-active-rail click is no-op, Cmd+B is no-op, sidebar stays at 300px Co-authored-by: jasonjcwu <jasonjcwu@users.noreply.github.com> Co-authored-by: spektro33 <spektro33@users.noreply.github.com> Closes #1884 Closes #1924	2026-05-11 04:49:18 +00:00