feat(ui): polish message rows, reactions, and the composer (LC-374) #384

Merged

longjacksonle merged 1 commit from feat/lc-374-message-composer-polish into main

2026-06-19 17:32:14 +02:00

longjacksonle commented

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

Owner

Closes LC-374. Final issue of the LC-364 redesign epic.

What

Brings the message surface and composer up to the redesigned chrome. Files: room/message.html, partials/reaction_bar.html, room/composer.html.

Message rows. The hover action cluster becomes an elevated, bordered chip (surface-elevated + border + shadow) and is now revealed on keyboard focus-within as well as row hover, so the actions are reachable without a mouse. The timestamp adopts the lc-caption scale.
Reactions. Reaction counts and the add-reaction button render as consistent bordered pills (rounded-full) with a real hover (sunken to elevated); the reacted state reads with an accent border + medium weight.
Composer. The attach / voice / poll / schedule buttons gain the same rounded sunken-hover treatment as the markdown format toolbar, so the whole control strip reads as one toolbar. Every toolbar button's native title= is migrated to the LC-370 styled tooltip (opening upward, since the composer sits at the screen bottom), keeping its aria-label.

Preserved

All hx-* wiring and the id-keyed #reactions-{id} OOB target; the textarea, send-button state machine, length counter, optimistic echo, mention/slash/emoji/channel autocomplete popovers, and the upload/voice flows with all their JS - untouched.

Testing

The four LC-77 golden render fixtures are regenerated for the message-row markup change (timestamp class, action-chip container, add-reaction button); diff verified to contain only those changes.
./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-374. Final issue of the LC-364 redesign epic. ## What Brings the message surface and composer up to the redesigned chrome. Files: `room/message.html`, `partials/reaction_bar.html`, `room/composer.html`. - **Message rows.** The hover action cluster becomes an elevated, bordered chip (surface-elevated + border + shadow) and is now revealed on keyboard `focus-within` as well as row hover, so the actions are reachable without a mouse. The timestamp adopts the `lc-caption` scale. - **Reactions.** Reaction counts and the add-reaction button render as consistent bordered pills (`rounded-full`) with a real hover (sunken to elevated); the reacted state reads with an accent border + medium weight. - **Composer.** The attach / voice / poll / schedule buttons gain the same rounded sunken-hover treatment as the markdown format toolbar, so the whole control strip reads as one toolbar. Every toolbar button's native `title=` is migrated to the LC-370 styled tooltip (opening upward, since the composer sits at the screen bottom), keeping its `aria-label`. ## Preserved All `hx-*` wiring and the id-keyed `#reactions-{id}` OOB target; the textarea, send-button state machine, length counter, optimistic echo, mention/slash/emoji/channel autocomplete popovers, and the upload/voice flows with all their JS - untouched. ## Testing - The four LC-77 golden render fixtures are regenerated for the message-row markup change (timestamp class, action-chip container, add-reaction button); diff verified to contain only those changes. - `./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 17:12:32 +02:00

feat(ui): polish message rows, reactions, and the composer (LC-374)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

47ecc5928e

Bring the message surface and composer up to the redesigned chrome.

Message rows: the hover action cluster becomes an elevated, bordered chip (surface-elevated + border + shadow) and is now revealed on keyboard focus-within as well as row hover, so the actions are reachable without a mouse; the timestamp adopts the lc-caption scale.

Reactions: existing reaction counts and the add-reaction button render as consistent bordered pills (rounded-full) with a real hover (sunken to elevated), and the reacted state reads with an accent border + medium weight. All hx-* wiring and the id-keyed #reactions-{id} OOB target are unchanged.

Composer: the attach / voice / poll / schedule buttons gain the same rounded sunken-hover treatment as the markdown format toolbar so the whole control strip reads as one toolbar, and every toolbar button's native title= is migrated to the LC-370 styled tooltip (opening upward, since the composer sits at the screen bottom) while keeping its aria-label. The textarea, send-button state machine, length counter, optimistic echo, autocomplete popovers, upload/voice flows, and all their JS wiring are untouched.

The four LC-77 golden render fixtures are regenerated for the message-row markup change (timestamp class, action-chip container, add-reaction button).

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