feat(ui): tidy the two-tier composer (LC-380) #389

Merged

longjacksonle merged 1 commit from feat/lc-380-composer-cleanup into main

2026-06-19 18:57:26 +02:00

longjacksonle commented

2026-06-19 18:43:10 +02:00

Owner

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

What

Gives the composer one consistent icon-button language across both tiers.

Format toolbar (B / I / </> / link / strike / list / quote / emoji / Preview) moves onto a shared .lc-fmt-btn treatment: uniform height, padding, 1rem icons, muted-to-content sunken hover.
Bottom action row (attach / mic / poll / schedule) moves onto a larger .lc-composer-btn (2.25rem square, 1.25rem icons, same hover), so the two rows read as one toolbar rather than a mix of ad-hoc paddings and icon sizes.
Attach becomes a paperclip icon instead of a bare +.
Send becomes a clearly primary square button (.lc-composer-send: filled accent, accent-hover, legible disabled) anchoring the right of the row.
Textarea + preview pane gain a token border, elevated surface, rounded-lg, and an accent focus ring so the input reads as a deliberate field.

Preserved

Markup + CSS only. All composer JS wiring (send-state machine, length counter, mention/slash/emoji/channel autocomplete, upload/voice, optimistic echo, preview toggle) and every data-* / id hook are untouched.

Tests

./dev/cargo check, just build-css, just test, just test-saas - all green.
The composer is not part of the LC-77 message fixtures, so none needed regenerating.

🤖 Generated with Claude Code

Closes LC-380. Part of the LC-375 room-view deep-polish epic. ## What Gives the composer one consistent icon-button language across both tiers. - **Format toolbar** (B / I / `</>` / link / strike / list / quote / emoji / Preview) moves onto a shared `.lc-fmt-btn` treatment: uniform height, padding, 1rem icons, muted-to-content sunken hover. - **Bottom action row** (attach / mic / poll / schedule) moves onto a larger `.lc-composer-btn` (2.25rem square, 1.25rem icons, same hover), so the two rows read as one toolbar rather than a mix of ad-hoc paddings and icon sizes. - **Attach** becomes a paperclip icon instead of a bare `+`. - **Send** becomes a clearly primary square button (`.lc-composer-send`: filled accent, accent-hover, legible disabled) anchoring the right of the row. - **Textarea + preview pane** gain a token border, elevated surface, `rounded-lg`, and an accent focus ring so the input reads as a deliberate field. ## Preserved Markup + CSS only. All composer JS wiring (send-state machine, length counter, mention/slash/emoji/channel autocomplete, upload/voice, optimistic echo, preview toggle) and every `data-*` / `id` hook are untouched. ## Tests - `./dev/cargo check`, `just build-css`, `just test`, `just test-saas` - all green. - The composer is not part of the LC-77 message fixtures, so none needed regenerating. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

longjacksonle added 1 commit

2026-06-19 18:43:10 +02:00

feat(ui): tidy the two-tier composer (LC-380)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

4b04860ce9

Give the composer one consistent icon-button language across both tiers. The markdown format toolbar (B / I / </> / link / strike / list / quote / emoji / Preview) moves onto a shared .lc-fmt-btn treatment (uniform height, padding, 1rem icons, muted-to-content sunken hover), and the bottom action row (attach / mic / poll / schedule) moves onto a larger .lc-composer-btn (2.25rem square, 1.25rem icons, same hover) so the two rows read as one toolbar instead of a mix of ad-hoc paddings and icon sizes.

The attach control becomes a paperclip icon instead of a bare `+`, matching the other icon buttons. Send becomes a clearly primary square button (.lc-composer-send: filled accent, accent-hover, legible disabled state) that anchors the right of the row. The textarea and preview pane gain a token border, elevated surface, rounded-lg, and an accent focus ring so the input reads as a deliberate field.

Markup + CSS only; all composer JS wiring (send-state machine, length counter, mention/slash/emoji/channel autocomplete, upload/voice, optimistic echo, preview toggle) and every data-* / id hook are untouched. The composer is not part of the LC-77 message fixtures, so none needed regenerating.

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