feat(ui): collapse the room sidebar to the enclave rail (LC-270) #313

Merged

longjacksonle merged 1 commit from feat/lc-270-sidebar-collapse-rail into main

2026-06-14 05:59:00 +02:00

longjacksonle commented

2026-06-14 05:55:53 +02:00

Owner

What

Adds a desktop toggle (in the enclave rail) that collapses the wide room sidebar to just the rail - reclaiming ~16rem for the conversation - and expands it back (LC-270). The choice is per-device and persisted, so it sticks across reloads.

How

base.html no-flash bootstrap: reads lc-sidebar from localStorage and sets data-lc-sidebar="collapsed" on <html> BEFORE the stylesheets, so a collapsed sidebar never flashes wide on load (same pattern as theme/density). Exposes window.__lcToggleSidebar() to flip + persist + update the toggle's aria.
main.css: on desktop (@media (min-width: 768px)) html[data-lc-sidebar="collapsed"] #sidebar { display: none; }. Mobile is untouched - the sidebar is an overlay there with its own lcOpenNav toggle, so the desktop preference must not hide it. The toggle chevron rotates via CSS.
enclave_switcher.html: a data-lc-sidebar-toggle button at the bottom of the rail (desktop-only hidden md:flex, aria-controls="sidebar").
layout.html: on load, syncs the toggle's aria-expanded to the persisted state (the collapse state is client-only, so the server can't render it).
Strings localized in en + es.

Device-local (like theme/density); no new route, DB, or env var. Not operator-visible.

Tests

routes_drafts::page_ships_sidebar_collapse_toggle asserts the rail ships the toggle and the bootstrap exposes the flipper. just test and just test-saas pass.

QA note

The toggle + persistence + no-flash are JS/CSS, so worth a quick manual pass before merge: on desktop, collapse the sidebar (only the enclave rail remains, the message area widens, chevron flips) and reload (stays collapsed, no wide-sidebar flash); expand and reload (stays expanded); shrink to mobile width and confirm the hamburger overlay sidebar still opens/closes regardless of the collapse preference.

## What Adds a desktop toggle (in the enclave rail) that collapses the wide room sidebar to just the rail - reclaiming ~16rem for the conversation - and expands it back (LC-270). The choice is per-device and persisted, so it sticks across reloads. ## How - `base.html` no-flash bootstrap: reads `lc-sidebar` from localStorage and sets `data-lc-sidebar="collapsed"` on `<html>` BEFORE the stylesheets, so a collapsed sidebar never flashes wide on load (same pattern as theme/density). Exposes `window.__lcToggleSidebar()` to flip + persist + update the toggle's aria. - `main.css`: on desktop (`@media (min-width: 768px)`) `html[data-lc-sidebar="collapsed"] #sidebar { display: none; }`. Mobile is untouched - the sidebar is an overlay there with its own `lcOpenNav` toggle, so the desktop preference must not hide it. The toggle chevron rotates via CSS. - `enclave_switcher.html`: a `data-lc-sidebar-toggle` button at the bottom of the rail (desktop-only `hidden md:flex`, `aria-controls="sidebar"`). - `layout.html`: on load, syncs the toggle's `aria-expanded` to the persisted state (the collapse state is client-only, so the server can't render it). - Strings localized in en + es. Device-local (like theme/density); no new route, DB, or env var. Not operator-visible. ## Tests `routes_drafts::page_ships_sidebar_collapse_toggle` asserts the rail ships the toggle and the bootstrap exposes the flipper. `just test` and `just test-saas` pass. ## QA note The toggle + persistence + no-flash are JS/CSS, so worth a quick manual pass before merge: on desktop, collapse the sidebar (only the enclave rail remains, the message area widens, chevron flips) and reload (stays collapsed, no wide-sidebar flash); expand and reload (stays expanded); shrink to mobile width and confirm the hamburger overlay sidebar still opens/closes regardless of the collapse preference.

longjacksonle added 1 commit

2026-06-14 05:55:53 +02:00

feat(ui): collapse the room sidebar to the enclave rail (LC-270)

check-secrets / Kingfisher (push) Successful in 4s

Details

check-secrets / TruffleHog (push) Successful in 5s

Details

check-secrets / Nosey parker (push) Successful in 4s

Details

check-secrets / Kingfisher (pull_request) Successful in 5s

Details

check-secrets / Nosey parker (pull_request) Successful in 6s

Details

check-secrets / TruffleHog (pull_request) Successful in 6s

Details

Check / clippy + fmt + tests (pull_request) Successful in 2m31s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

d6c8c8789f

Adds a desktop toggle (in the enclave rail) that collapses the wide room sidebar so the conversation gets ~16rem more width, and expands it back. The choice is per-device, persisted in localStorage, and applied no-flash by the base.html bootstrap (alongside theme/density) so a collapsed sidebar never flashes wide on load.

Collapse hides #sidebar via a desktop-only media query keyed off data-lc-sidebar on <html>; mobile is untouched (the sidebar is an overlay there with its own lcOpenNav toggle, so the desktop preference must not hide it). The rail button calls window.__lcToggleSidebar to flip + persist; its aria-expanded is synced from the persisted state on load (the state is client-only), and the chevron rotates via CSS. Strings localized in en + es. Test asserts the toggle markup + flipper ship.

#LC-270
#LC-271

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>