main
import { LOCALES, type Locale, localeLabel, setLocale, useT } from '@app/i18n'
/**
* Language selector used by the settings modal.
*
* `value` is the persisted `users.language`; an unrecognized tag (e.g. someone
* who set `ja` for output) is kept as a locked extra option so that saving
* the form cannot silently erase it. Choosing a shipped locale writes the
* device choice immediately and returns it for the caller to persist.
*
* An empty value clears the account override and hands control back to the
* device/browser chain, mirroring a fresh account.
*/
export function LanguagePicker({
value,
onChange,
className,
}: {
value: string
onChange: (next: Locale | null) => void
className: string
}) {
const { t } = useT()
const known = LOCALES.includes(value as Locale)
const unknown = value && !known ? value : null
return (
<select
className={className}
value={value}
onChange={(event) => {
const raw = event.target.value
if (raw === '') {
onChange(null)
return
}
const next = raw as Locale
setLocale(next)
onChange(next)
}}
>
<option value="">{t('common.language.system')}</option>
{LOCALES.map((locale) => (
<option key={locale} value={locale}>
{localeLabel(locale)}
</option>
))}
{unknown && (
<option value={unknown}>
{t('common.state.unknown')} · {unknown}
</option>
)}
</select>
)
}