feat(ui): group and polish the sidebar room/DM list (LC-371) #381

Merged

longjacksonle merged 1 commit from feat/lc-371-room-list-sections into main

2026-06-19 16:25:02 +02:00

longjacksonle commented

2026-06-19 16:24:32 +02:00

Owner

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

What

Makes the populated room/DM list read as scannable, grouped sections. Files: partials/sidebar_nav.html, partials/sidebar_room_row.html, partials/sidebar_peer_row.html, base.html, main.css.

Collapsible top-level groups. Starred / Channels / Direct messages each get a chevron toggle header (lc-section-label typography). The collapsed set is device-local: it persists in localStorage and on <html data-lc-collapsed-groups>, set no-flash by the base.html bootstrap, exactly like the unread-only filter. Body hiding + chevron rotation are pure CSS keyed on that attribute, so a collapsed group never flashes open and survives the sidebar's OOB swaps with no JS scan. aria-expanded is synced from the attribute on load and every htmx settle.
Stronger active + unread styling. Active room/DM uses a new .lc-room-row-active (soft accent fill + a left accent bar via inset shadow, no layout shift) plus aria-current="page". An unread, unmuted row bolds its name; a muted room stays subtle.
Consistent rows. Room rows gain a fixed-width leading # / voice glyph so their text aligns with the DM avatars at one row rhythm.
Category headers (server-persisted collapse) migrated to the same lc-section-label typography for consistency.

Preserved

data-lc-sb-section / data-lc-sb-row, drag-and-drop (data-room-list / data-positions-url / draggable / data-room-id), the id-keyed unread/mention/draft badge spans for live OOB swaps, per-room mark-read + star, the category rename/delete/move menus, and the add-room / add-category forms. The unread-only CSS filter still matches because the badges stay inside each data-lc-sb-section. No backend or route changes; 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 (incl. routes_enclave_nav).

🤖 Generated with Claude Code

Closes LC-371. Part of the LC-364 redesign epic. ## What Makes the populated room/DM list read as scannable, grouped sections. Files: `partials/sidebar_nav.html`, `partials/sidebar_room_row.html`, `partials/sidebar_peer_row.html`, `base.html`, `main.css`. - **Collapsible top-level groups.** Starred / Channels / Direct messages each get a chevron toggle header (`lc-section-label` typography). The collapsed set is device-local: it persists in `localStorage` and on `<html data-lc-collapsed-groups>`, set no-flash by the base.html bootstrap, exactly like the unread-only filter. Body hiding + chevron rotation are pure CSS keyed on that attribute, so a collapsed group never flashes open and survives the sidebar's OOB swaps with no JS scan. `aria-expanded` is synced from the attribute on load and every htmx settle. - **Stronger active + unread styling.** Active room/DM uses a new `.lc-room-row-active` (soft accent fill + a left accent bar via inset shadow, no layout shift) plus `aria-current="page"`. An unread, unmuted row bolds its name; a muted room stays subtle. - **Consistent rows.** Room rows gain a fixed-width leading `#` / voice glyph so their text aligns with the DM avatars at one row rhythm. - **Category headers** (server-persisted collapse) migrated to the same `lc-section-label` typography for consistency. ## Preserved `data-lc-sb-section` / `data-lc-sb-row`, drag-and-drop (`data-room-list` / `data-positions-url` / `draggable` / `data-room-id`), the id-keyed unread/mention/draft badge spans for live OOB swaps, per-room mark-read + star, the category rename/delete/move menus, and the add-room / add-category forms. The unread-only CSS filter still matches because the badges stay inside each `data-lc-sb-section`. No backend or route changes; 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 (incl. `routes_enclave_nav`). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 16:24:32 +02:00

feat(ui): group and polish the sidebar room/DM list (LC-371)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

f55585699a

Make the populated room/DM list read as scannable, grouped sections.

The three top-level sections (Starred / Channels / Direct messages) become device-local collapsible groups. The header is a chevron toggle button (lc-section-label typography) driving a new window.__lcToggleGroup; the collapsed set persists in localStorage and on <html data-lc-collapsed-groups>, set no-flash by the base.html bootstrap exactly like the unread-only filter. Body hiding and chevron rotation are pure CSS keyed on that attribute, so a collapsed group never flashes open and the state survives the sidebar's OOB swaps with no JS scan. aria-expanded on the toggles is synced from the attribute on load and on every htmx settle. The enclave category headers (which keep their server-persisted collapse) are migrated to the same lc-section-label typography for consistency.

Active and unread styling is strengthened: the active room/DM uses a new .lc-room-row-active (soft accent fill plus a left accent bar via inset shadow, no layout shift) and aria-current="page"; an unread, unmuted row bolds its name (font-semibold text-content); a muted room stays subtle. Room rows gain a fixed-width leading #/voice glyph so their text aligns with the DM avatars at one row rhythm.

All existing hooks are preserved: data-lc-sb-section / data-lc-sb-row, drag-and-drop (data-room-list / data-positions-url / draggable / data-room-id), the id-keyed unread/mention/draft badge spans for live OOB swaps, the per-room mark-read and star affordances, the category rename/delete/move menus, and the add-room / add-category forms. The unread-only CSS filter still matches because the badges remain inside each data-lc-sb-section. No backend or route changes; no new i18n keys.

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