feat(ui): message grouping rhythm + add-reaction affordance (LC-377) #386

Merged
longjacksonle merged 1 commit from feat/lc-377-message-grouping into main 2026-06-19 18:16:18 +02:00

Closes LC-377. Part of the LC-375 room-view deep-polish epic.

What

Tightens the message timeline's vertical rhythm and fixes the stray +, building on LC-376.

  • Body aligns under the name. The body, quote chip, attachments, poll, reactions, and meta now sit in a pl-8 content column (avatar width + gap), so they align under the author name rather than under the avatar.
  • Grouping rhythm. The existing same-author 5-minute grouping (is_follow_up) is unchanged; a grouped follow-up keeps hiding its author/timestamp header, and on row hover a compact HH:MM reveals in the empty avatar gutter to its left. That uses a new data-lc-ts-mode="time" branch in the relative-timestamp formatter (the gutter is too narrow for "2 minutes ago"); it is absolutely placed, so it reserves no height at rest.
  • Add-reaction affordance. The always-on bare + under every message (which read as a stray artifact) becomes a smiley pill: visible as an "add more" control when the message already has reactions, but hover-only (group-hover + group-focus-within for keyboard) when it has none, so it no longer reserves a blank row of height under every message.

Preserved

The reaction picker mechanism, the #reactions-{id} OOB target, all hx-* wiring, and the LC-376 action toolbar are untouched. cancel_picker now returns the same smiley pill (replacing the legacy off-token text-slate-500 +). One existing i18n key reused (partials-reaction-add).

Tests

  • The four LC-77 golden render fixtures regenerated; diff verified to contain only the content-column wrapper, the follow-up gutter timestamp, and the add-reaction restyle.
  • ./dev/cargo check, just build-css, just test, just test-saas - all green.

🤖 Generated with Claude Code

Closes LC-377. Part of the LC-375 room-view deep-polish epic. ## What Tightens the message timeline's vertical rhythm and fixes the stray `+`, building on LC-376. - **Body aligns under the name.** The body, quote chip, attachments, poll, reactions, and meta now sit in a `pl-8` content column (avatar width + gap), so they align under the author name rather than under the avatar. - **Grouping rhythm.** The existing same-author 5-minute grouping (`is_follow_up`) is unchanged; a grouped follow-up keeps hiding its author/timestamp header, and on row hover a compact **HH:MM** reveals in the empty avatar gutter to its left. That uses a new `data-lc-ts-mode="time"` branch in the relative-timestamp formatter (the gutter is too narrow for "2 minutes ago"); it is absolutely placed, so it reserves no height at rest. - **Add-reaction affordance.** The always-on bare `+` under every message (which read as a stray artifact) becomes a smiley pill: visible as an "add more" control when the message already has reactions, but hover-only (`group-hover` + `group-focus-within` for keyboard) when it has none, so it no longer reserves a blank row of height under every message. ## Preserved The reaction picker mechanism, the `#reactions-{id}` OOB target, all `hx-*` wiring, and the LC-376 action toolbar are untouched. `cancel_picker` now returns the same smiley pill (replacing the legacy off-token `text-slate-500 +`). One existing i18n key reused (`partials-reaction-add`). ## Tests - The four LC-77 golden render fixtures regenerated; diff verified to contain only the content-column wrapper, the follow-up gutter timestamp, and the add-reaction restyle. - `./dev/cargo check`, `just build-css`, `just test`, `just test-saas` - all green. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
feat(ui): message grouping rhythm + add-reaction affordance (LC-377)
All checks were successful
check-secrets / Kingfisher (push) Successful in 4s
check-secrets / Nosey parker (push) Successful in 7s
check-secrets / TruffleHog (push) Successful in 4s
check-secrets / Kingfisher (pull_request) Successful in 7s
Create release / Create release from merged PR (pull_request) Has been skipped
check-secrets / TruffleHog (pull_request) Successful in 5s
check-secrets / Nosey parker (pull_request) Successful in 5s
Check / clippy + fmt + tests (pull_request) Successful in 4m5s
6b550fe44d
Tighten the message timeline's vertical rhythm and fix the stray `+`.

The message body, quote chip, attachments, poll, reactions, and meta now sit in a `pl-8` content column so they align under the author name instead of under the avatar (Slack/Discord left-nav rhythm). The existing same-author 5-minute grouping is unchanged; a grouped (follow-up) message keeps hiding its author/timestamp header, and on row hover a compact HH:MM now reveals in the empty avatar gutter to its left, via a new `data-lc-ts-mode="time"` branch in the relative-timestamp formatter (the gutter is too narrow for "2 minutes ago"). The gutter time is absolutely placed, so it reserves no layout height at rest.

The always-on bare `+` under every message (which read as a stray artifact) becomes a smiley pill add-reaction control: it stays visible as an "add more" affordance when the message already has reactions, but with no reactions it is hover-only (`group-hover` on the row) plus `group-focus-within` so keyboard users tabbing into the row can still reach it - and so it no longer reserves a blank row of height under every message. The reaction picker mechanism is unchanged; `cancel_picker` is updated to return the same smiley pill (replacing the legacy off-token `text-slate-500 +`).

Reactions OOB target (`#reactions-{id}`), all hx-* wiring, and the LC-376 action toolbar are untouched. One existing i18n key reused (partials-reaction-add). The four LC-77 golden render fixtures are regenerated; diff verified to contain only the content-column wrapper, the follow-up gutter timestamp, and the add-reaction restyle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
longjacksonle deleted branch feat/lc-377-message-grouping 2026-06-19 18:16:18 +02:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/lets-chat!386
No description provided.