Skip to content

feat: add reusable Tabs component and tab the settings modal - #735

Merged
birme merged 1 commit into
mainfrom
frontend/516-settings-tabs
Oct 15, 2026
Merged

birme merged 1 commit into
mainfrom
frontend/516-settings-tabs

Conversation

@birme

@birme birme commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add a reusable, accessible Tabs component (src/components/tabs/) with role="tablist"/"tab"/"tabpanel", aria-selected, roving tabIndex, and arrow/Home/End keyboard navigation. Supports controlled and uncontrolled use plus disabled tabs; all panels stay mounted so form state is preserved across tab switches.
  • Use it in the calls-page User Settings modal, splitting the existing content into Devices and Profile tabs (modal title is now "Settings").
  • Thread existing hideUsername/hideDevices props through the UserSettings wrapper additively, so existing UserSettingsForm behaviour and tests are unchanged.
  • Add Vitest coverage for the new component (rendering, default/controlled selection, click + keyboard navigation, disabled tabs).

Test plan

  • Tests pass (npm test — 44 files / 362 tests green, incl. 7 new Tabs tests)
  • TypeScript compiles (npm run typecheck)
  • Lint clean (npm run lint)
  • Manually verify the Settings modal on the calls page switches between Devices/Profile tabs via mouse and keyboard

Closes #516

🤖 Generated with Claude Code

…ngs modal

Add a generic, accessible Tabs component (tablist/tab/tabpanel roles,
keyboard navigation, controlled + uncontrolled usage) under
src/components/tabs. Use it in the calls-page user settings modal to
split the existing settings into "Devices" and "Profile" tabs, threading
hideUsername/hideDevices through the UserSettings wrapper.

Refs #516

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@birme

birme commented Oct 15, 2026

Copy link
Copy Markdown
Contributor Author

code-reviewer verdict: LGTM (self-authored PR; recorded as a marker since GitHub blocks state-bearing self-review). Independent review re-ran typecheck/lint/test — all green (362 tests). No blocking/major findings. Confirmed the hideUsername/hideDevices props are genuinely consumed by UserSettingsForm (feature wired end-to-end, not a no-op) and existing join-production usage is untouched. Minor/nits only: off-palette accent color (#1db954 vs app #59cbe8), micro-perf memoization of focusableTabs/settingsTabs — non-blocking. Merging via --admin (CI green; BLOCKED state is only the unsatisfiable self-approval requirement).

@birme
birme merged commit 3025967 into main Oct 15, 2026
6 checks passed
@birme
birme deleted the frontend/516-settings-tabs branch October 15, 2026 09:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend: Settings section for calls

2 participants