feat(ui): group the sidebar nav into icon sections (LC-367) #378

Merged

longjacksonle merged 1 commit from feat/lc-367-sidebar-grouping into main

2026-06-19 15:50:46 +02:00

longjacksonle commented

2026-06-19 15:47:52 +02:00

Owner

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

What

Replaces the flat, icon-less footer link list (which read like a debug menu) with grouped, icon-led sections on a shared .lc-nav-row rhythm (Slack/Discord left-nav convention). File: server/templates/partials/sidebar.html.

Navigation group, near the top. Inbox / Activity / Saved / Scheduled move out of the footer into a labelled "Navigation" group just under the search inputs, each with a leading icon.
Mark-all-read promoted to an icon action. It now sits on the room-list controls header next to the unread-only toggle, as an icon button with a styled tooltip (LC-370) + aria-label, instead of a text link buried in the footer. The /read-all htmx form is unchanged.
Account group, in the footer. Settings / Toggle theme / Keyboard shortcuts / Sign out under an "Account" label, plus the role-gated Admin/Moderate entry rendered danger-toned with a shield icon so it reads as privileged.
Consistent rows. All rows share one hover treatment (.lc-nav-row in raw main.css); the icon inherits the row's text color so it dims at rest and brightens with the label on hover.

Preserved

Every item keeps its route, i18n key, and JS hook (theme toggle, shortcuts cheat-sheet, unread-only filter). Icon-only mark-all-read carries an aria-label. Two new section-label keys (sidebar-section-navigation, sidebar-section-account) added to both en and es. No backend or route changes.

Testing

./dev/cargo check -p lets-chat-server - clean.
just build-css - clean.
just test and just test-saas - both green (incl. the i18n_catalog en/es parity check).

🤖 Generated with Claude Code

Closes LC-367. Part of the LC-364 redesign epic. ## What Replaces the flat, icon-less footer link list (which read like a debug menu) with grouped, icon-led sections on a shared `.lc-nav-row` rhythm (Slack/Discord left-nav convention). File: `server/templates/partials/sidebar.html`. - **Navigation group, near the top.** Inbox / Activity / Saved / Scheduled move out of the footer into a labelled "Navigation" group just under the search inputs, each with a leading icon. - **Mark-all-read promoted to an icon action.** It now sits on the room-list controls header next to the unread-only toggle, as an icon button with a styled tooltip (LC-370) + `aria-label`, instead of a text link buried in the footer. The `/read-all` htmx form is unchanged. - **Account group, in the footer.** Settings / Toggle theme / Keyboard shortcuts / Sign out under an "Account" label, plus the role-gated Admin/Moderate entry rendered danger-toned with a shield icon so it reads as privileged. - **Consistent rows.** All rows share one hover treatment (`.lc-nav-row` in raw `main.css`); the icon inherits the row's text color so it dims at rest and brightens with the label on hover. ## Preserved Every item keeps its route, i18n key, and JS hook (theme toggle, shortcuts cheat-sheet, unread-only filter). Icon-only mark-all-read carries an `aria-label`. Two new section-label keys (`sidebar-section-navigation`, `sidebar-section-account`) added to both `en` and `es`. No backend or route changes. ## Testing - `./dev/cargo check -p lets-chat-server` - clean. - `just build-css` - clean. - `just test` and `just test-saas` - both green (incl. the `i18n_catalog` en/es parity check). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 15:47:52 +02:00

feat(ui): group the sidebar nav into icon sections (LC-367)

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 4s

Details

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

Details

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

Details

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

Details

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

Details

7c55c10e19

Replace the flat, icon-less footer link list (which read like a debug menu) with grouped, icon-led sections on a shared .lc-nav-row rhythm (Slack/Discord left-nav convention).

Primary navigation (Inbox / Activity / Saved / Scheduled) is promoted into a labelled "Navigation" group near the top of the sidebar instead of being buried at the bottom, each with a leading icon. Mark-all-read is promoted to an icon action on the room-list controls header next to the unread-only toggle (with a styled tooltip + aria-label), rather than a text link. The footer becomes a labelled "Account" group: Settings, Toggle theme, Keyboard shortcuts, Sign out, plus the role-gated Admin/Moderate entry rendered danger-toned with a shield icon so it reads as privileged.

Every item keeps its existing route, i18n key, JS hook (theme toggle, shortcuts, unread-only), and the /read-all htmx form. Two new section-label keys (sidebar-section-navigation / -account) are added to both en and es. Rows share one hover treatment and the icon inherits the row's text color so it dims at rest and brightens on hover. No backend or route changes.

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