Settings Screen

A comprehensive settings interface organized by category with search functionality.

Features

• Sidebar navigation for categories
• Search settings
• Toggle switches for preferences
• Form inputs for account settings
• Confirmation dialogs for destructive actions
• Save/discard changes handling

Categories

• Account: Profile, email, password
• Privacy: Visibility, data sharing
• Notifications: Email, push, in-app
• Appearance: Theme, language, timezone
• Security: 2FA, sessions, devices
• Billing: Subscription, payment methods
• Advanced: API keys, webhooks

Usage

Web (React)

import { Settings, SettingsSidebar, SettingsContent } from '@cuppa/ui'

function SettingsScreen() {
  const [section, setSection] = useState('account')

  return (
    <Settings>
      <SettingsSidebar
        active={section}
        onSelect={setSection}
        sections={[
          { id: 'account', label: 'Account', icon: <UserIcon /> },
          { id: 'privacy', label: 'Privacy', icon: <LockIcon /> },
          { id: 'notifications', label: 'Notifications', icon: <BellIcon /> },
          { id: 'appearance', label: 'Appearance', icon: <PaletteIcon /> },
        ]}
      />

      <SettingsContent>
        {section === 'account' && <AccountSettings />}
        {section === 'privacy' && <PrivacySettings />}
        {section === 'notifications' && <NotificationSettings />}
        {section === 'appearance' && <AppearanceSettings />}
      </SettingsContent>
    </Settings>
  )
}

iOS (SwiftUI)

import CuppaUI

struct SettingsView: View {
  @State private var selectedSection = SettingsSection.account

  var body: some View {
    NavigationView {
      List {
        SettingsSection("Account", icon: "person", selection: $selectedSection)
        SettingsSection("Privacy", icon: "lock", selection: $selectedSection)
        SettingsSection("Notifications", icon: "bell", selection: $selectedSection)
        SettingsSection("Appearance", icon: "paintbrush", selection: $selectedSection)
      }

      // Detail view
      selectedSection.view
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.screens.CuppaSettings

@Composable
fun SettingsScreen() {
  var selectedSection by remember { mutableStateOf(SettingsSection.ACCOUNT) }

  CuppaSettings(
    selectedSection = selectedSection,
    onSectionChange = { selectedSection = it }
  ) {
    when (selectedSection) {
      SettingsSection.ACCOUNT -> AccountSettings()
      SettingsSection.PRIVACY -> PrivacySettings()
      SettingsSection.NOTIFICATIONS -> NotificationSettings()
      SettingsSection.APPEARANCE -> AppearanceSettings()
    }
  }
}

Example Sections

Account Settings

<SettingsSection title="Account">
  <SettingsGroup>
    <Input label="Display Name" value={name} onChange={setName} />
    <Input label="Email" type="email" value={email} onChange={setEmail} />
    <Button variant="primary">Save Changes</Button>
  </SettingsGroup>

  <SettingsGroup title="Password">
    <Input label="Current Password" type="password" />
    <Input label="New Password" type="password" />
    <Button variant="primary">Update Password</Button>
  </SettingsGroup>

  <SettingsGroup title="Danger Zone">
    <Button variant="danger" onClick={handleDeleteAccount}>
      Delete Account
    </Button>
  </SettingsGroup>
</SettingsSection>

Notification Settings

<SettingsSection title="Notifications">
  <SettingsGroup title="Email Notifications">
    <Switch
      label="Product updates"
      description="News about product and feature updates"
      checked={emailUpdates}
      onChange={setEmailUpdates}
    />
    <Switch
      label="Security alerts"
      description="Important security updates"
      checked={emailSecurity}
      onChange={setEmailSecurity}
    />
  </SettingsGroup>

  <SettingsGroup title="Push Notifications">
    <Switch
      label="Enable push notifications"
      checked={pushEnabled}
      onChange={setPushEnabled}
    />
  </SettingsGroup>
</SettingsSection>

Components Used

• Sidebar
• Tabs
• Input
• Switch
• Button
• Card
• Modal
• Accordion

Best Practices

1. Group related settings logically
2. Use switches for boolean preferences
3. Provide clear descriptions for complex settings
4. Show unsaved changes indicator
5. Confirm destructive actions
6. Search functionality for many settings