feat(calls): balanced participant grid + pre-join lobby (LC-416) #434

Merged
longjacksonle merged 1 commit from feat/lc-416-voice-grid-lobby into main 2026-06-21 22:50:00 +02:00

Two voice-call refinements (refs data/ref1.png in-call grid, data/ref2.png pre-join). Subtasks of LC-416.

1. Balanced participant grid (LC-424)

The 2-up grid ballooned to two huge edge-to-edge tiles - each cell took a 1fr max, so the second tile sat hard against the viewport edge and the layout read as unbalanced (the avatar looked off-centre because the tile itself overflowed). Cells are now capped to a bounded max width (480px) with the row centered (justify-content: center), so 1 / 2 / 3+ all lay out as equal-width cells with even gutters and nothing overflowing. Tracks still shrink toward the min when many participants are present, so cells stay equal. Avatars were already centered (inset:0 + margin:auto).

2. Pre-join lobby (LC-425)

The pre-join state was a bare "Currently here: X" text line. It now previews who is already in the channel as avatar chips (the same participants data + avatars used by the in-call grid), with a heading ("Someone is in this call" / "N people in this call"), a prominent Join voice CTA, and a real empty state ("No one's here yet - be the first to start the call"). The localized heading templates ride on data-* attrs so voice.js renderPreview rebuilds the identical structure live on join/leave with no separate JS i18n catalog; seedParticipantsFromDom reads the label from data-lc-label. The lobby Join button reuses the data-lc-voice-join hook (delegated click) and is hidden with the whole region once joined.

Cleanup

Dropped four now-unused fluent keys (voice-empty-prefix/join/suffix, voice-currently-here). New i18n: voice-lobby-heading-one/-other, voice-lobby-empty-title/-sub (en + es).

Frontend only - no Rust/route/schema change; all data-lc-* hooks preserved. just check, just test, just test-saas all pass; voice.js syntax-checked; Tailwind rebuilt. (Live preview is Bunyip-SSO-gated, so an in-browser eyeball on the PR build is worthwhile.)

🤖 Generated with Claude Code

Two voice-call refinements (refs data/ref1.png in-call grid, data/ref2.png pre-join). Subtasks of LC-416. ## 1. Balanced participant grid (LC-424) The 2-up grid ballooned to two huge edge-to-edge tiles - each cell took a `1fr` max, so the second tile sat hard against the viewport edge and the layout read as unbalanced (the avatar looked off-centre because the tile itself overflowed). Cells are now capped to a bounded max width (480px) with the row centered (`justify-content: center`), so 1 / 2 / 3+ all lay out as equal-width cells with even gutters and nothing overflowing. Tracks still shrink toward the min when many participants are present, so cells stay equal. Avatars were already centered (inset:0 + margin:auto). ## 2. Pre-join lobby (LC-425) The pre-join state was a bare "Currently here: X" text line. It now previews who is already in the channel as avatar chips (the same `participants` data + avatars used by the in-call grid), with a heading ("Someone is in this call" / "N people in this call"), a prominent Join voice CTA, and a real empty state ("No one's here yet - be the first to start the call"). The localized heading templates ride on `data-*` attrs so voice.js `renderPreview` rebuilds the identical structure live on join/leave with no separate JS i18n catalog; `seedParticipantsFromDom` reads the label from `data-lc-label`. The lobby Join button reuses the `data-lc-voice-join` hook (delegated click) and is hidden with the whole region once joined. ## Cleanup Dropped four now-unused fluent keys (voice-empty-prefix/join/suffix, voice-currently-here). New i18n: voice-lobby-heading-one/-other, voice-lobby-empty-title/-sub (en + es). Frontend only - no Rust/route/schema change; all `data-lc-*` hooks preserved. `just check`, `just test`, `just test-saas` all pass; voice.js syntax-checked; Tailwind rebuilt. (Live preview is Bunyip-SSO-gated, so an in-browser eyeball on the PR build is worthwhile.) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
feat(calls): balance the participant grid + redesign the pre-join lobby (LC-416)
All checks were successful
check-secrets / Nosey parker (push) Successful in 4s
check-secrets / TruffleHog (push) Successful in 4s
check-secrets / Kingfisher (push) Successful in 5s
check-secrets / Nosey parker (pull_request) Successful in 7s
check-secrets / TruffleHog (pull_request) Successful in 9s
check-secrets / Kingfisher (pull_request) Successful in 10s
Create release / Create release from merged PR (pull_request) Has been skipped
Check / clippy + fmt + tests (pull_request) Successful in 6m17s
7c2d5f5ce4
Two voice-call refinements.

Participant grid (LC-424): the 2-up case ballooned to two huge edge-to-edge tiles because each cell took a 1fr max, so the second tile sat hard against the viewport and the layout read as unbalanced. Cells are now capped to a bounded max width (480px) with the row centered, so 1 / 2 / 3+ all lay out as equal-width cells with even gutters and nothing overflowing; tracks still shrink toward the min when many participants are present. Avatars were already centered (inset:0 + margin:auto) - the oversized tile was what pushed them off.

Pre-join lobby (LC-425): the pre-join state was a bare "Currently here: X" text line. It now previews who is already in the channel as avatar chips (the same `participants` data + avatars as the in-call grid), with a heading ("Someone is in this call" / "N people in this call"), a prominent Join voice CTA, and a real empty state ("No one's here yet - be the first to start the call"). The localized heading templates ride on data-* attrs so voice.js's renderPreview rebuilds the identical structure live on join/leave with no separate JS i18n catalog; seedParticipantsFromDom reads the label from data-lc-label. The lobby Join button reuses the data-lc-voice-join hook (delegated click) and is hidden with the whole region once joined.

Cleanup: dropped four now-unused fluent keys (voice-empty-prefix/join/suffix, voice-currently-here). New i18n: voice-lobby-heading-one/-other, voice-lobby-empty-title/-sub (en + es). Frontend only - no Rust/route/schema change; all data-lc-* hooks preserved. just check, just test, just test-saas all pass; voice.js syntax-checked; Tailwind rebuilt.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
longjacksonle deleted branch feat/lc-416-voice-grid-lobby 2026-06-21 22:50:01 +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!434
No description provided.