feat(calls): bring the 1:1 DM call control bar to parity (LC-412) #426

Merged

longjacksonle merged 1 commit from feat/lc-412-dm-modal-parity into main

2026-06-21 01:54:41 +02:00

longjacksonle commented

2026-06-21 01:54:18 +02:00

Owner

Implements LC-412 (subtask of the LC-402 call redesign): bring the 1:1 DM call modal's control bar to parity with the enclave voice page.

What

The DM call modal still used the old flat slate/indigo/red pill control bar. Migrate it to the same themed .lc-cbtn system:

Grouped + themed: media controls (devices / Mute / video / screen) and session actions (Transcribe / Transcript panel / request-control / Hang up) split by a divider, in a new .lc-callbar--bottom tray (token surface, top border, centred) that follows light/dark/high-contrast.
Clear states: Mute / video / screen keep aria-pressed on/off (now rendered by the shared token styles); Hang up is danger (.lc-cbtn--leave); Transcribe is the danger "recording" toggle with the pulsing dot (.lc-cbtn--rec), tying it to the live pill + drawer just like the voice page.
Transcript panel toggle: adds data-lc-transcript-panel-toggle so the drawer can be reopened after closing - the modal previously had no way to bring it back once dismissed (it only auto-opened on transcribe start).

Why no JS change

call.js drives every button by its data-lc-* hook (verified: it only toggles hidden/aria-pressed), so the restyle is transparent. transcribe.js already handles the panel toggle/close globally; {% block main %} precedes the modal in the DOM and the voice page and the modal are never both visible, so its first-match querySelector still targets the right surface. The LC-409 mobile rule is overridden so the modal bar stays a centred wrapping row (no title to stack).

Scope

Frontend only: templates/layout.html (the active-call control bar) and assets/main.css (the .lc-callbar--bottom tray + its mobile override). No Rust, route, or schema change.

Tests

just check (standalone + saas compile, clippy, fmt), just test, just test-saas all pass. just build-css regenerated.

Implements LC-412 (subtask of the LC-402 call redesign): bring the 1:1 DM call modal's control bar to parity with the enclave voice page. ## What The DM call modal still used the old flat `slate`/`indigo`/`red` pill control bar. Migrate it to the same themed `.lc-cbtn` system: - **Grouped + themed:** media controls (devices / Mute / video / screen) and session actions (Transcribe / Transcript panel / request-control / Hang up) split by a divider, in a new `.lc-callbar--bottom` tray (token surface, top border, centred) that follows light/dark/high-contrast. - **Clear states:** Mute / video / screen keep `aria-pressed` on/off (now rendered by the shared token styles); **Hang up** is danger (`.lc-cbtn--leave`); **Transcribe** is the danger "recording" toggle with the pulsing dot (`.lc-cbtn--rec`), tying it to the live pill + drawer just like the voice page. - **Transcript panel toggle:** adds `data-lc-transcript-panel-toggle` so the drawer can be **reopened after closing** - the modal previously had no way to bring it back once dismissed (it only auto-opened on transcribe start). ## Why no JS change `call.js` drives every button by its `data-lc-*` hook (verified: it only toggles `hidden`/`aria-pressed`), so the restyle is transparent. `transcribe.js` already handles the panel toggle/close globally; `{% block main %}` precedes the modal in the DOM and the voice page and the modal are never both visible, so its first-match `querySelector` still targets the right surface. The LC-409 mobile rule is overridden so the modal bar stays a centred wrapping row (no title to stack). ## Scope Frontend only: `templates/layout.html` (the active-call control bar) and `assets/main.css` (the `.lc-callbar--bottom` tray + its mobile override). No Rust, route, or schema change. ## Tests `just check` (standalone + saas compile, clippy, fmt), `just test`, `just test-saas` all pass. `just build-css` regenerated.

longjacksonle added 1 commit

2026-06-21 01:54:19 +02:00

feat(calls): bring the 1:1 DM call control bar to parity (LC-412)

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 / TruffleHog (pull_request) Successful in 4s

Details

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

Details

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

Details

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

Details

1ca5aef1c4

The DM call modal kept the old flat slate/indigo/red control bar while the enclave voice page moved to the themed .lc-cbtn system. Migrate it to match:

- Same .lc-cbtn token buttons, grouped into media controls (devices / Mute / video / screen) and session actions (Transcribe / Transcript panel / request-control / Hang up) split by a divider, in a new .lc-callbar--bottom tray (token surface, top border, centred) that follows light/dark/high-contrast.
- Mute / video / screen keep their aria-pressed on/off state (now rendered by the shared token styles); Hang up is danger (.lc-cbtn--leave); Transcribe is the danger "recording" toggle with the pulsing dot (.lc-cbtn--rec), tying it to the live pill + drawer exactly like the voice page.
- Adds a Transcript panel toggle (data-lc-transcript-panel-toggle) so the drawer can be reopened after closing - previously the modal had no way to reopen it once dismissed. transcribe.js already handles the toggle/close, and block main precedes the modal in the DOM so its first-match querySelector still targets the right surface (the voice page and the modal are never both visible).

call.js drives every button by its data-lc-* hook, so the restyle is transparent to it; the LC-409 mobile rule keeps the modal bar a centred wrapping row. Frontend only (layout.html + main.css); no JS/Rust/schema change. just check, just test, just test-saas all pass.

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