feat(ui): redesign the enclave rail with semantic tokens (LC-366) #377

Merged

longjacksonle merged 1 commit from feat/lc-366-enclave-rail into main

2026-06-19 15:39:26 +02:00

longjacksonle commented

2026-06-19 15:23:03 +02:00

Owner

Closes LC-366. Part of the LC-364 redesign epic.

What

Reworks the leftmost enclave rail (server/templates/partials/enclave_switcher.html) into a modern Discord/Slack-style app rail.

Semantic tokens, no slate-*. New --rail-* family (--rail-surface, --rail-tile, --rail-tile-hover, --rail-content, --rail-content-muted) defined in all four theme blocks (:root, dark, hc-light, hc-dark). The rail now recolors with the theme instead of being a fixed dark block; in dark mode it sits one step darker than the page surface (slate-950 vs slate-900) so it still reads as distinct chrome.
Active-state indicator + hover morph. Each tile is a rounded square at rest that morphs toward a circle on hover/active, with a white indicator pill in the left gutter: 0 at rest, a short stub on hover, tallest on the active tile (the Discord pattern). Active tile fills with --accent and gets aria-current="page".
Explicit Home button. The Home pseudo-enclave (id = None) renders a house glyph instead of a single letter.
Divider before the foot controls. A hairline separates the discover (+) and sidebar-collapse controls from the enclave list above.
Badge + icon polish. The unread/mention badge gets a rail-surface ring so it separates from a neighboring tile; the settings gear and collapse chevron become muted rail icons that brighten on hover.

Preserved

Styled tooltips (LC-370, data-lc-tip / pos="right"), the collapse behavior (LC-270, the chevron rotate keys on data-lc-sidebar-chevron, untouched), settings-gear visibility gating, and badge counts. No new i18n keys.

Testing

./dev/cargo check -p lets-chat-server - clean.
just build-css - clean.
just test and just test-saas - both green.

🤖 Generated with Claude Code

Closes LC-366. Part of the LC-364 redesign epic. ## What Reworks the leftmost enclave rail (`server/templates/partials/enclave_switcher.html`) into a modern Discord/Slack-style app rail. - **Semantic tokens, no `slate-*`.** New `--rail-*` family (`--rail-surface`, `--rail-tile`, `--rail-tile-hover`, `--rail-content`, `--rail-content-muted`) defined in all four theme blocks (`:root`, `dark`, `hc-light`, `hc-dark`). The rail now recolors with the theme instead of being a fixed dark block; in dark mode it sits one step darker than the page surface (slate-950 vs slate-900) so it still reads as distinct chrome. - **Active-state indicator + hover morph.** Each tile is a rounded square at rest that morphs toward a circle on hover/active, with a white indicator pill in the left gutter: 0 at rest, a short stub on hover, tallest on the active tile (the Discord pattern). Active tile fills with `--accent` and gets `aria-current="page"`. - **Explicit Home button.** The Home pseudo-enclave (`id = None`) renders a house glyph instead of a single letter. - **Divider before the foot controls.** A hairline separates the discover (`+`) and sidebar-collapse controls from the enclave list above. - **Badge + icon polish.** The unread/mention badge gets a rail-surface ring so it separates from a neighboring tile; the settings gear and collapse chevron become muted rail icons that brighten on hover. ## Preserved Styled tooltips (LC-370, `data-lc-tip` / `pos="right"`), the collapse behavior (LC-270, the chevron rotate keys on `data-lc-sidebar-chevron`, untouched), settings-gear visibility gating, and badge counts. No new i18n keys. ## Testing - `./dev/cargo check -p lets-chat-server` - clean. - `just build-css` - clean. - `just test` and `just test-saas` - both green. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 15:23:03 +02:00

feat(ui): redesign the enclave rail with semantic tokens (LC-366)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

020bd2d292

Rework the leftmost enclave rail into a modern Discord/Slack-style app rail. The hardcoded slate-900/700/600 palette is replaced by a new --rail-* token family (surface, idle tile, hover tile, icon, muted-icon) defined in all four themes, so the rail recolors with light / dark / hc-light / hc-dark instead of being a fixed dark block. Active state reuses --accent.

Each tile is now a rounded square at rest that morphs toward a circle on hover and active, with a white indicator pill in the left gutter that grows on hover and is tallest on the active tile (the Discord active-server pattern), plus aria-current="page" on the active tile. The Home pseudo-enclave (id = None) renders an explicit house glyph instead of a single letter, and a hairline divider separates the discover (+) and collapse controls at the rail foot from the enclave list above. The unread/mention badge gains a rail-surface ring so it reads cleanly against a neighboring tile.

The settings gear and collapse chevron become muted rail icons that brighten on hover. Tooltips (LC-370) and the collapse behavior (LC-270, keyed on data-lc-sidebar-chevron) are preserved. No new i18n keys.

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