feat(ui): message action bar -> icon toolbar + overflow menu (LC-376) #385

Merged

longjacksonle merged 1 commit from feat/lc-376-message-action-menu into main

2026-06-19 18:01:25 +02:00

longjacksonle commented

2026-06-19 17:59:12 +02:00

Owner

Closes LC-376. Part of the LC-375 room-view deep-polish epic. The headline item from the data/room0619.png review.

What

Replaces the long horizontal run of mixed-color text links that floated over each message (Reply, Thread, Copy link, Copy text, Pin, Save, Remind, Mark unread, Forward, Report, Flag, Edit, Delete) with a compact icon toolbar anchored top-right.

Inline icons for the high-frequency actions (reply, thread) on a shared .lc-msg-action treatment with LC-370 tooltips.
... overflow menu for the long tail (copy link, copy text, pin/unpin, save/unsave, remind, mark-unread, forward, report, edit). Native <details> + .lc-menu-item rows (the LC-368 menu styling) - no per-row JS.
Destructive Delete at the bottom of the menu behind a divider, danger-tinted.
A single delegated handler wired once in room/messages.html closes the menu on Escape / outside-click and closes others when one opens. Copy actions keep their menu open so the in-place "Copied" feedback stays visible. The chip stays visible while a menu is open via .lc-msg-actions:has(details[open]), on top of the existing hover / focus-within reveal.

Preserved

Every action keeps its exact route, hx-* wiring, target id (#msg-{id}, modals, sidebar), and confirm. The quick-react MRU bar is unchanged. The shame-tag Flag stays an inline icon rather than a menu row, because its popover lazy-loads through toggle ... from:closest details, which a nested <details> inside the menu would break (noted in the template).

i18n / tests

One new key room-msg-more in en + es.
The four LC-77 golden render fixtures regenerated; diff verified to contain only the action-chip change.
./dev/cargo check, just build-css, just test, just test-saas - all green.

Note

LC-377 (the sibling ticket) will refine the quick-react + into a proper add-reaction affordance and handle row grouping; this PR deliberately leaves the quick-react bar as-is.

🤖 Generated with Claude Code

Closes LC-376. Part of the LC-375 room-view deep-polish epic. The headline item from the `data/room0619.png` review. ## What Replaces the long horizontal run of mixed-color text links that floated over each message (Reply, Thread, Copy link, Copy text, Pin, Save, Remind, Mark unread, Forward, Report, Flag, Edit, Delete) with a compact icon toolbar anchored top-right. - **Inline icons** for the high-frequency actions (reply, thread) on a shared `.lc-msg-action` treatment with LC-370 tooltips. - **`...` overflow menu** for the long tail (copy link, copy text, pin/unpin, save/unsave, remind, mark-unread, forward, report, edit). Native `<details>` + `.lc-menu-item` rows (the LC-368 menu styling) - no per-row JS. - **Destructive Delete** at the bottom of the menu behind a divider, danger-tinted. - A single delegated handler wired once in `room/messages.html` closes the menu on Escape / outside-click and closes others when one opens. Copy actions keep their menu open so the in-place "Copied" feedback stays visible. The chip stays visible while a menu is open via `.lc-msg-actions:has(details[open])`, on top of the existing hover / focus-within reveal. ## Preserved Every action keeps its exact route, `hx-*` wiring, target id (`#msg-{id}`, modals, sidebar), and confirm. The quick-react MRU bar is unchanged. The shame-tag **Flag** stays an inline icon rather than a menu row, because its popover lazy-loads through `toggle ... from:closest details`, which a nested `<details>` inside the menu would break (noted in the template). ## i18n / tests - One new key `room-msg-more` in `en` + `es`. - The four LC-77 golden render fixtures regenerated; diff verified to contain only the action-chip change. - `./dev/cargo check`, `just build-css`, `just test`, `just test-saas` - all green. ## Note LC-377 (the sibling ticket) will refine the quick-react `+` into a proper add-reaction affordance and handle row grouping; this PR deliberately leaves the quick-react bar as-is. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 17:59:12 +02:00

feat(ui): message action bar -> icon toolbar + overflow menu (LC-376)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

Check / clippy + fmt + tests (pull_request) Successful in 6m8s

Details

3120075c00

Replace the long horizontal run of mixed-color text links (Reply, Thread, Copy link, Copy text, Pin, Save, Remind, Mark unread, Forward, Report, Flag, Edit, Delete) that floated over each message with a compact icon toolbar anchored top-right.

High-frequency actions are now inline icon buttons (reply, thread) on a shared .lc-msg-action treatment with LC-370 tooltips; the long tail (copy link, copy text, pin/unpin, save/unsave, remind, mark-unread, forward, report, edit) collapses into a `...` overflow menu, and the destructive Delete sits at the bottom behind a divider, danger-tinted. The menu is a native <details> + .lc-menu-item rows (the LC-368 menu styling), so it needs no per-row JS; a single delegated handler wired once in room/messages.html closes it on Escape / outside-click and closes the others when one opens (copy keeps its menu open so the in-place "Copied" feedback stays visible). The chip stays visible while a menu is open via a .lc-msg-actions:has(details[open]) rule, on top of the existing hover / focus-within reveal.

The shame-tag Flag stays an inline icon (not folded into the menu) because its popover lazy-loads through `toggle ... from:closest details`, which a nested <details> would break. Every action keeps its exact route, hx-* wiring, target id, and confirm; the quick-react MRU bar is unchanged. One new i18n key (room-msg-more) in en + es. The four LC-77 golden render fixtures are regenerated; diff verified to contain only the action-chip change.

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