feat(web): apple-style UX pass — design system, operator console, event dashboard

[jeroenniesen]

Summary

A pre-ship design pass aimed at moving the product from "competent admin tool" to "stagecraft instrument." Three areas changed:

1. Design system & first-impression surfaces

• New primitives: Card (translucent surface with backdrop-blur), HoldToConfirm (1s ring-fill destructive confirm), Tabs, DurationInput (MM:SS mask), LiveIndicator (with snapshot freshness), Wordmark.
• Typography: dropped uppercase tracking-widest on operator/admin pages (kept on stage displays where it reads as intentional). Standardized h1s with tracking-tight. SF Pro Text leads the font stack.
• Colour cascade: one accent token --cta = #0a84ff drives all CTAs, links, focus rings. --primary refined to #34c759 (SF green) for the countdown above thresholds.
• Focus ring: soft box-shadow + color-mix instead of a hard outline.
• Identity surfaces: Sign-in / Setup / ConnectingScreen redone with Wordmark + greeting + Card.
• Motion: Apple-style easing tokens (--ease-out / --ease-in-out) applied uniformly. Sheets now scale+fade in instead of hard-appearing.

2. Operator console (RoomControlPage)

• New OperatorHero: cue header + countdown + next-item footer combined in one signature card, with a radial halo that picks up the active threshold colour.
• Transport row pinned (no wrap). Stop pinned to the right edge to maximise separation from the dominant action. Destructive actions all hold-to-confirm.
• Keyboard shortcuts: r/s upgraded to ⇧R/⇧S and routed through ConfirmDialog.
• Tools panel: TimeAdjustments + MessageInput in one tabbed Card, phase-aware default tab. m shortcut switches to Message + focuses the input.
• lg+ layout becomes 2-column: control surface left, sticky compact ScheduleRail right. Narrow viewports fold Schedule into Tools as a third tab.

3. Event dashboard (EventDashboardPage)

• EventIdentity strip: display title, date/time/timezone, live-derived status pill (Starts in X / Live · N rooms running / Ended X ago).
• LobbyCard: inline 88px QR, copy-to-clipboard, prominent monospace code, proper Open lobby button, overflow menu for reset.
• RoomTile: subscribes to each room's snapshot (via new shared useEventRoomSnapshots hook). Shows phase chip + current title + speaker + tabular countdown when running/paused/pre-roll; "Up next at HH:MM · in 12 min" when idle. One Control → CTA and a single ⋯ menu replacing 3 icon buttons + 4 blue links.
• UpcomingToday strip: next-90-min horizontal timeline across all rooms with a CTA-blue "now" line and proportional schedule blocks.

Other improvements

• ScheduleItemForm migrated from rolled modal to Sheet (gets Esc / ⌘↩ for free).
• Branding page simplified to logo + accent colour; per-token editor behind an "Advanced" disclosure.
• Setup hub gains a left-rail sub-nav (Templates / Branding / Members / Audit).
• Persistent context bar on /rooms/:id via new useRoomEvent cache scan.
• ThresholdsEditor rebuilt with semantic tone chips ("Heads-up / Wrap up / Final stretch") + inline duration preview bar.
• DurationInput (MM:SS) applied to every duration / pre-roll / threshold field.
• All border-zinc-800 softened to border-white/5 or border-white/10 for tonal calm.

New dependencies

• qrcode.react (~5 KB) — for the lobby's inline QR and the access-code popover.

Test plan

• npx tsc -b clean
• npm test — 14 test files / 69 tests pass (10 new tests added for HoldToConfirm + DurationInput helpers)
• npm run build succeeds
• Manual: sign in → Stagecue wordmark + Card + greeting renders, focus glow visible
• Manual: event dashboard shows EventIdentity, LobbyCard with QR, live RoomTiles, Upcoming-today timeline
• Manual: room control page is single-viewport on lg+ with hero + transport + tools + schedule rail
• Manual: hold Stop for 0.8s in the transport row to confirm; same for Skip/Reset in the More menu
• Manual: ⇧S and ⇧R open ConfirmDialog (not immediate destructive); Space still pause/resumes; m switches to Message tab + focuses input
• Manual: Branding page shows logo + accent only by default; Advanced reveals per-token editor
• Manual: Schedule editor's New/Edit item now opens as a Sheet (Esc closes, ⌘↩ submits)
• Manual: QR popover on a room access code; copy button on the lobby code shows "Copied" tick

🤖 Generated with Claude Code