feat(ui): unify the room / DM / home headers (LC-373) #383

Merged

longjacksonle merged 1 commit from feat/lc-373-room-header into main

2026-06-19 16:56:46 +02:00

longjacksonle commented

2026-06-19 16:56:15 +02:00

Owner

Closes LC-373. Part of the LC-364 redesign epic.

What

Gives the room, DM, and home/welcome panes one shared top-bar skeleton instead of three slightly different headers. Files: partials/room_header.html, partials/dm_header.html, home/welcome.html, main.css.

Shared skeleton. New .lc-header (consistent height, padding, bottom border, left title cluster + right action cluster) and .lc-header-action (one icon / icon+label treatment with a muted-to-content sunken hover) in main.css, replacing the prior mix of bordered pills (room) and bare accent-hover icon buttons (DM).
Room header. Keeps data-lc-density-tight="header" (the compact rule still wins on padding by specificity), the in-room search (LC-268), jump-to-date, info, moderators, and notify controls. Title uses the lc-h1 scale; topic uses lc-small.
DM header. Same skeleton: avatar + name in the left title cluster; audio / video / devices / mute / block in a right .lc-header-actions cluster on the shared treatment (block tinted danger on hover).
Home pane. Gains a minimal header (just the page title) so the main pane always opens with a consistent top bar, wrapped in a flex-col so the LC-372 centered empty state still fills the remaining height.

Preserved

All existing actions, routes, htmx wiring, call data-* attributes, mute/block forms, and the LC-370 tooltips. The DM call buttons' native title= is migrated to the styled tooltip. No backend or i18n changes.

Testing

./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-373. Part of the LC-364 redesign epic. ## What Gives the room, DM, and home/welcome panes one shared top-bar skeleton instead of three slightly different headers. Files: `partials/room_header.html`, `partials/dm_header.html`, `home/welcome.html`, `main.css`. - **Shared skeleton.** New `.lc-header` (consistent height, padding, bottom border, left title cluster + right action cluster) and `.lc-header-action` (one icon / icon+label treatment with a muted-to-content sunken hover) in `main.css`, replacing the prior mix of bordered pills (room) and bare accent-hover icon buttons (DM). - **Room header.** Keeps `data-lc-density-tight="header"` (the compact rule still wins on padding by specificity), the in-room search (LC-268), jump-to-date, info, moderators, and notify controls. Title uses the `lc-h1` scale; topic uses `lc-small`. - **DM header.** Same skeleton: avatar + name in the left title cluster; audio / video / devices / mute / block in a right `.lc-header-actions` cluster on the shared treatment (block tinted danger on hover). - **Home pane.** Gains a minimal header (just the page title) so the main pane always opens with a consistent top bar, wrapped in a flex-col so the LC-372 centered empty state still fills the remaining height. ## Preserved All existing actions, routes, htmx wiring, call `data-*` attributes, mute/block forms, and the LC-370 tooltips. The DM call buttons' native `title=` is migrated to the styled tooltip. No backend or i18n changes. ## Testing - `./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 16:56:15 +02:00

feat(ui): unify the room / DM / home headers (LC-373)

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

Check / clippy + fmt + tests (pull_request) Successful in 5m46s

Details

4c4eee240b

Give the room, DM, and home/welcome panes one shared top-bar skeleton instead of three slightly different headers. New .lc-header (consistent height, padding, bottom border, left title cluster + right action cluster) and .lc-header-action (one icon / icon+label treatment with a muted-to-content sunken hover, replacing the prior mix of bordered pills and bare accent-hover icon buttons) live in main.css.

The room header keeps its data-lc-density-tight="header" hook (the compact rule still wins on padding by specificity) and its in-room search, jump-to-date, info, moderators, and notify controls; the title uses the lc-h1 scale and the topic uses lc-small. The DM header adopts the same skeleton: the avatar + name move into the left title cluster, and the audio/video/devices/mute/block controls move into a right .lc-header-actions cluster on the shared action treatment (block tinted danger on hover). The home/welcome pane gains a minimal header (just the page title) so the main pane always opens with a consistent top bar, wrapped in a flex-col so the centered empty state still fills the remaining height.

Existing actions, routes, htmx wiring, call data-attributes, mute/block forms, and the LC-370 tooltips are all preserved; native title= on the DM call buttons is migrated to the styled tooltip. No backend or i18n changes.

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