feat(ui): quick-reaction hover bar on messages (LC-302) #329

Merged

longjacksonle merged 1 commit from feat/lc-302-quick-reaction-bar into main

2026-06-15 01:48:54 +02:00

longjacksonle commented

2026-06-15 01:46:31 +02:00

Owner

Summary

Hovering a message shows a small row of one-tap reaction buttons (your most-used emojis) so you can react without opening the picker.

Changes

server/templates/room/message.html: data-lc-quick-react="{id}" on the non-system message row + a role="group" [data-lc-quick-bar] span prepended to the hover toolbar (hidden until filled, with a divider).
server/templates/layout.html: extend the LC-288 recent-emoji IIFE with fillQuick(row) + a delegated mouseover on [data-lc-quick-react]. Lazily fills the bar (idempotent) from the device-local MRU (read()) or a default set of five (👍 ❤ 😂 🎉 😮), building the SAME hx-post buttons the picker emits (/messages/{id}/reactions/{glyph} -> #reactions-{id}), so the existing recorder records quick-react clicks too. htmx.process wires them up.
server/locales/{en,es}/room.ftl: room-quick-react-aria.
server/tests/fixtures/lc77_*: regenerated for the additive message-row markup (verified diff is exactly the new attribute + empty quick-bar span).

No server, route, or DB change: reuses the existing toggle endpoint. The MRU lives only in localStorage, so the per-viewer set is built client-side (same reason as the LC-288 recent row).

Testing

just check, just fmt, just test, just test-saas all pass.
No new test binary (client-side over the existing endpoint; mirrors LC-288/LC-294). LC-77 render fixtures updated + passing.

Not operator-visible (no env/config/contract change).

## Summary Hovering a message shows a small row of one-tap reaction buttons (your most-used emojis) so you can react without opening the picker. ## Changes - `server/templates/room/message.html`: `data-lc-quick-react="{id}"` on the non-system message row + a `role="group"` `[data-lc-quick-bar]` span prepended to the hover toolbar (hidden until filled, with a divider). - `server/templates/layout.html`: extend the LC-288 recent-emoji IIFE with `fillQuick(row)` + a delegated `mouseover` on `[data-lc-quick-react]`. Lazily fills the bar (idempotent) from the device-local MRU (`read()`) or a default set of five (👍 ❤ 😂 🎉 😮), building the SAME `hx-post` buttons the picker emits (`/messages/{id}/reactions/{glyph}` -> `#reactions-{id}`), so the existing recorder records quick-react clicks too. `htmx.process` wires them up. - `server/locales/{en,es}/room.ftl`: `room-quick-react-aria`. - `server/tests/fixtures/lc77_*`: regenerated for the additive message-row markup (verified diff is exactly the new attribute + empty quick-bar span). No server, route, or DB change: reuses the existing toggle endpoint. The MRU lives only in `localStorage`, so the per-viewer set is built client-side (same reason as the LC-288 recent row). ## Testing - `just check`, `just fmt`, `just test`, `just test-saas` all pass. - No new test binary (client-side over the existing endpoint; mirrors LC-288/LC-294). LC-77 render fixtures updated + passing. Not operator-visible (no env/config/contract change).

longjacksonle added 1 commit

2026-06-15 01:46:31 +02:00

feat(ui): quick-reaction hover bar on messages (LC-302)

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

Details

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

Details

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

Details

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

Details

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

Details

check-secrets / Kingfisher (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 2m34s

Details

188869cac7

Hovering a message now shows a small row of one-tap reaction buttons in the hover toolbar, so you can react without opening the picker.

The bar is filled client-side from the LC-288 device-local recent-emoji MRU (or a default set of five common emojis when you have no history), extending the existing recent-emoji IIFE in layout.html. Each button is the same hx-post the picker emits (POST /messages/{id}/reactions/{glyph} -> #reactions-{id}), so the existing recorder also records quick-react clicks and the MRU self-tunes. The bar fills lazily on first row hover (idempotent), keeping large rooms from processing every message on load. No server, route, or DB change: it reuses the existing toggle endpoint.

System messages get no bar; follow-up messages do. The group carries a localized accessible name (en/es). The LC-77 render fixtures were regenerated for the additive message-row markup (new data-lc-quick-react attribute + empty quick-bar span).

#LC-302
#LC-303

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