Settings

Account settings page with sections for Account (email/password), Notifications (toggle switches), Privacy (profile visibility), and Billing (subscription). Uses max-w-3xl narrow layout for settings/configuration.

Route Information

Route: /settings

File: src/routes/_authed/_onboarded/settings.tsx

Layout: _authed/_onboarded (with sidebar + header)

Max Width: max-w-3xl

Breadcrumb: Settings

Settings Page

Settings — Full Page

Settings

Manage your account preferences and configuration.

Account

Manage your email and password.

Email

alex@example.com

Change Password

Notifications

Choose what notifications you receive.

Email Notifications

Receive updates about your programs and sessions.

Push Notifications

Get notified about messages and reminders.

Marketing Emails

Receive tips, updates, and promotional content.

Session Reminders

Get reminded 30 minutes before sessions.

Privacy

Control your profile visibility.

Public Profile

Allow other users to find and view your profile.

Show Activity Status

Let others see when you are online.

Show Progress

Allow trainers to view your workout progress.

Billing

Manage your subscription and payments.

Current Plan

Free

Payment Method

No payment method on file.

Email Change OTP Verification

When editing email, a 6-digit OTP verification flow is shown inline. Uses InputOTP component with separator.

OTP Verification Step

Enter the 6-digit code sent to new@email.com

4
7
2
—
9

Component Inventory

Component Source Usage
Card / CardHeader / CardContent@/components/ui/cardSection containers
Switch@/components/ui/switchToggle switches for notifications/privacy
Separator@/components/ui/separatorDividers between toggle rows
InputOTP / InputOTPGroup / InputOTPSlot@/components/ui/input-otp6-digit email verification code
Form / FormField / FormItem@/components/ui/formEmail change and password change forms
Button@/components/ui/buttonUpdate, Cancel, Upgrade, icon buttons

Data Requirements

Queries

  • userQueryOptions — current email display

Mutations

  • useUpdateEmail() — triggers OTP send
  • useVerifyEmailChangeOtp() — verifies 6-digit code
  • useUpdatePassword() — change password

Responsive Behavior

Desktop

Cards at max-w-3xl. Toggle rows horizontal with label left, switch right.

Tablet

Same layout. Cards fill available width within sidebar context.

Mobile

Full-width cards. Toggle descriptions may wrap. OTP input remains centered. Sidebar collapses to hamburger.