eeff292
import { SettingsModalShell, type SettingsSection } from '@app/domains/shared'
import { useT } from '@app/i18n'
import {
IconActivity as Activity,
IconBell as Bell,
IconEye as Eye,
IconId as IdCard,
IconDevices as MonitorSmartphone,
IconPalette as Palette,
IconShieldCheck as ShieldCheck,
IconTerminal2 as Terminal,
IconUser as UserRound,
} from '@tabler/icons-react'
import { useState } from 'react'
import type { Me } from '../model/user-settings'
import { AccountSection } from './sections/account-section'
import { AppearanceSection } from './sections/appearance-section'
import { NotificationsSection } from './sections/notifications-section'
import { PrivacySection } from './sections/privacy-section'
import { ProfileSection } from './sections/profile-section'
import { SecuritySection } from './sections/security-section'
import { SessionsSection } from './sections/sessions-section'
import { SshKeysSection } from './sections/ssh-keys-section'
import { StatusSection } from './sections/status-section'
export interface UserSettingsModalProps {
open: boolean
onClose: () => void
me: Me
/** Refetch `me` after edits that change identity/profile fields. */
onMeChanged: () => void
}
/** Discord-style full-screen settings overlay covering every user API. */
export function UserSettingsModal({ open, onClose, me, onMeChanged }: UserSettingsModalProps) {
const { t } = useT()
const [section, setSection] = useState('account')
// Built per render so the section list follows the active language.
const sections: SettingsSection[] = [
{ id: 'account', label: t('settings.section.account'), icon: UserRound, group: t('settings.group.account') },
{ id: 'profile', label: t('settings.section.profile'), icon: IdCard, group: t('settings.group.account') },
{ id: 'security', label: t('settings.section.security'), icon: ShieldCheck, group: t('settings.group.account') },
{
id: 'sessions',
label: t('settings.section.sessions'),
icon: MonitorSmartphone,
group: t('settings.group.account'),
},
{ id: 'privacy', label: t('settings.section.privacy'), icon: Eye, group: t('settings.group.preferences') },
{
id: 'notifications',
label: t('settings.section.notifications'),
icon: Bell,
group: t('settings.group.preferences'),
},
{
id: 'appearance',
label: t('settings.section.appearance'),
icon: Palette,
group: t('settings.group.preferences'),
},
{ id: 'sshKeys', label: t('settings.section.sshKeys'), icon: Terminal, group: t('settings.group.advanced') },
{ id: 'status', label: t('settings.section.status'), icon: Activity, group: t('settings.group.advanced') },
]
if (!open) return null
return (
<SettingsModalShell
title={t('settings.title')}
sections={sections}
active={section}
onSelect={setSection}
onClose={onClose}
>
{section === 'account' ? <AccountSection me={me} onMeChanged={onMeChanged} /> : null}
{section === 'profile' ? <ProfileSection me={me} onMeChanged={onMeChanged} /> : null}
{section === 'security' ? <SecuritySection /> : null}
{section === 'sessions' ? <SessionsSection /> : null}
{section === 'privacy' ? <PrivacySection /> : null}
{section === 'notifications' ? <NotificationsSection /> : null}
{section === 'appearance' ? <AppearanceSection /> : null}
{section === 'sshKeys' ? <SshKeysSection /> : null}
{section === 'status' ? <StatusSection /> : null}
</SettingsModalShell>
)
}