feat(ui): turn the sidebar profile header into an account menu (LC-368) #379

Merged

longjacksonle merged 1 commit from feat/lc-368-account-menu into main

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

longjacksonle commented

2026-06-19 15:59:35 +02:00

Owner

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

What

Turns the static sidebar profile block into the trigger for a discoverable account menu, and collapses the scattered account actions into it. Files: partials/sidebar_self.html, partials/sidebar.html.

Profile header is now a menu button. Clicking the avatar + name (or ArrowDown / Enter / Space) opens a dropdown: Set status, Edit profile, Settings, Toggle theme, Keyboard shortcuts, the role-gated Admin/Moderate entry (danger-toned), Sign out. The menu repeats name / @handle / custom status as a non-interactive header; presence stays on the avatar dot.
Reuses the status picker. "Set status" fires the existing hx-get /status/picker into the #status-picker slot, so the status mechanism is unchanged.
Footer clutter removed. The "Account" group LC-367 had parked in the footer is gone; those actions now live in the menu. The top Navigation group (Inbox / Activity / Saved / Scheduled) and the room-list controls row are untouched.

Accessibility

Follows the room/notify_dropdown.html disclosure pattern and the WAI-ARIA menu-button spec: role=menu with roving-tabindex menuitems, ArrowUp/Down + Home/End navigation, a Tab/Shift-Tab focus trap within the open menu, Escape and click-outside to close (focus restored to the trigger). aria-haspopup / aria-expanded / aria-controls wired on the button.

partials/sidebar_self.html OOB-swaps on profile edit (ws/own_profile_live.html), so the inline script uses the same wired-flag + cleanup-root teardown as notify_dropdown so the document-level click listener does not leak across swaps.

Two new i18n keys (sidebar-account-menu, sidebar-edit-profile) added to en and es. Edit profile deep-links to the existing #settings-sec-profile anchor (LC-345).

Testing

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

🤖 Generated with Claude Code

Closes LC-368. Part of the LC-364 redesign epic. ## What Turns the static sidebar profile block into the trigger for a discoverable account menu, and collapses the scattered account actions into it. Files: `partials/sidebar_self.html`, `partials/sidebar.html`. - **Profile header is now a menu button.** Clicking the avatar + name (or ArrowDown / Enter / Space) opens a dropdown: Set status, Edit profile, Settings, Toggle theme, Keyboard shortcuts, the role-gated Admin/Moderate entry (danger-toned), Sign out. The menu repeats name / @handle / custom status as a non-interactive header; presence stays on the avatar dot. - **Reuses the status picker.** "Set status" fires the existing `hx-get /status/picker` into the `#status-picker` slot, so the status mechanism is unchanged. - **Footer clutter removed.** The "Account" group LC-367 had parked in the footer is gone; those actions now live in the menu. The top Navigation group (Inbox / Activity / Saved / Scheduled) and the room-list controls row are untouched. ## Accessibility Follows the `room/notify_dropdown.html` disclosure pattern and the WAI-ARIA menu-button spec: `role=menu` with roving-tabindex `menuitem`s, ArrowUp/Down + Home/End navigation, a Tab/Shift-Tab focus trap within the open menu, Escape and click-outside to close (focus restored to the trigger). `aria-haspopup` / `aria-expanded` / `aria-controls` wired on the button. `partials/sidebar_self.html` OOB-swaps on profile edit (`ws/own_profile_live.html`), so the inline script uses the same wired-flag + cleanup-root teardown as notify_dropdown so the document-level click listener does not leak across swaps. Two new i18n keys (`sidebar-account-menu`, `sidebar-edit-profile`) added to `en` and `es`. Edit profile deep-links to the existing `#settings-sec-profile` anchor (LC-345). ## Testing - `./dev/cargo check -p lets-chat-server` - clean. - `just build-css` - clean. - `just test` and `just test-saas` - both green (incl. `i18n_catalog`). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 15:59:35 +02:00

feat(ui): turn the sidebar profile header into an account menu (LC-368)

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

Details

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

Details

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

Details

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

Details

check-secrets / Nosey parker (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 / clippy + fmt + tests (pull_request) Successful in 3m5s

Details

dc27ebf748

Convert the static profile block (avatar + name + @handle + presence) into the trigger for a discoverable account menu, and collapse the scattered account actions into it. Clicking the profile header (or ArrowDown / Enter / Space on it) opens a dropdown with: set status, edit profile, Settings, theme toggle, keyboard shortcuts, the role-gated admin/moderate entry (danger-toned), and sign out. The menu repeats the name / @handle / custom status as a non-interactive header.

The set-status item reuses the existing inline status picker (hx-get /status/picker into the #status-picker slot), so the status mechanism is unchanged. Every action keeps its existing route, i18n key, and JS hook; the footer link clutter that LC-367 had parked in an "Account" group is removed, since those items now live in the menu.

The menu follows the room/notify_dropdown.html disclosure pattern and the WAI-ARIA menu-button spec: role=menu with roving-tabindex menuitems, ArrowUp/Down + Home/End navigation, a Tab/Shift-Tab focus trap within the open menu, Escape and click-outside to close (restoring focus to the trigger). Because partials/sidebar_self.html OOB-swaps on profile edit (ws/own_profile_live.html), the inline script uses the same wired-flag + cleanup-root teardown so the document-level click listener does not leak across swaps. Two new i18n keys (sidebar-account-menu, sidebar-edit-profile) added to en and es.

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