LC-559: lift the composer onto an elevated card (redesign P2) #529

Merged

longjacksonle merged 1 commit from feat/LC-559-composer-polish into main

2026-07-09 21:18:00 +02:00

longjacksonle commented

2026-07-09 21:14:05 +02:00

Owner

What

Promote the message composer from a flush top-border strip on the base surface to an elevated, lifted card: rounded-xl, a full border, a faint shadow-sm, and a small gap off the timeline (mx-2 mb-2). surface-elevated sits one step lighter than the timeline in all four themes, so the composer now reads as a distinct input zone instead of blending into the message list. This lands the last open piece of the LC-UI-06 composer polish (elevated surface); the quiet muted formatting toolbar and the sole accent-filled Send square already shipped under LC-380.

Scope / safety

Pure template class change on the #composer form container. No id, handler, hx-swap-oob target, or markup-structure change, so every composer behavior is untouched: optimistic echo, draft autosave (lc-draft-{room}), lc-command-result, typing, and the @mention / :emoji: / #channel autocompletes. The shared include means both the room and DM composers get the treatment consistently. Built CSS is unchanged (the utilities already ship via .card).

Verify

just build-css -> no diff in tailwind-built.css (utilities already present).
dev/cargo test --test routes_drafts -> 39/39 pass (includes the composer-render tests room_page_ships_formatting_toolbar, room_page_renders_jump_to_latest_pill_hidden, and the draft round-trip). Askama compiles templates into Rust, so a green build confirms the template parses and renders.

Deferred

The mock also collapses the composer's two control rows into one (formatting on the left, emoji / @ / Send on the right) and floats a borderless full-width input on top. That is a markup + layout restructure touching button ordering, not a token/surface change, so it is out of scope for this polish pass and left for a focused follow-up.

🤖 Generated with Claude Code

https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

## What Promote the message composer from a flush top-border strip on the base surface to an **elevated, lifted card**: `rounded-xl`, a full border, a faint `shadow-sm`, and a small gap off the timeline (`mx-2 mb-2`). `surface-elevated` sits one step lighter than the timeline in all four themes, so the composer now reads as a distinct input zone instead of blending into the message list. This lands the last open piece of the LC-UI-06 composer polish (elevated surface); the quiet muted formatting toolbar and the sole accent-filled Send square already shipped under LC-380. ## Scope / safety Pure template class change on the `#composer` form container. No id, handler, `hx-swap-oob` target, or markup-structure change, so every composer behavior is untouched: optimistic echo, draft autosave (`lc-draft-{room}`), `lc-command-result`, `typing`, and the @mention / `:emoji:` / `#channel` autocompletes. The shared include means both the room and DM composers get the treatment consistently. Built CSS is unchanged (the utilities already ship via `.card`). ## Verify - `just build-css` -> no diff in `tailwind-built.css` (utilities already present). - `dev/cargo test --test routes_drafts` -> **39/39 pass** (includes the composer-render tests `room_page_ships_formatting_toolbar`, `room_page_renders_jump_to_latest_pill_hidden`, and the draft round-trip). Askama compiles templates into Rust, so a green build confirms the template parses and renders. ## Deferred The mock also collapses the composer's two control rows into one (formatting on the left, emoji / @ / Send on the right) and floats a borderless full-width input on top. That is a markup + layout restructure touching button ordering, not a token/surface change, so it is out of scope for this polish pass and left for a focused follow-up. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle added 1 commit

2026-07-09 21:14:05 +02:00

feat(composer): lift the composer onto an elevated card (LC-559 / LC-UI-06)

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

Details

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

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

Check / clippy + fmt + tests (pull_request) Successful in 3m52s

Details

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

Details

0e99d2b0c6

Promote the message composer from a flush top-border strip on the base surface to an elevated, rounded, lifted card: rounded-xl, a full border, a faint shadow, and a small gap off the timeline (mx-2 mb-2). Surface-elevated sits one step lighter than the timeline in all four themes, so the composer now reads as a distinct input zone rather than blending into the message list. This matches the redesign mock, whose quiet muted formatting toolbar and sole accent-filled Send square the composer already shipped under LC-380.

Pure template class change on the form container: no id, handler, OOB target, or markup-structure change, so every composer behavior (optimistic echo, draft autosave lc-draft-{room}, lc-command-result, typing, the autocompletes) is untouched. Applies to both room and DM composers (shared include). Built CSS unchanged (the utilities already ship via .card). Deferred: the mock also collapses the two control rows into one (formatting left, emoji/@/Send right) and floats a borderless full-width input on top; that is a markup restructure, out of scope for this token/surface polish pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011jXpZXXwpB36MvTr6JrGXN

longjacksonle scheduled this pull request to auto merge when all checks succeed

2026-07-09 21:16:08 +02:00