@atproto/oauth-provider 0.4.0 → 0.5.1

package/src/assets/app/locales/ko/messages.po

@@ -0,0 +1,492 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2025-02-27 14:42+0100\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: ko\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:76
+msgid "<0/> is asking for permission to access your account (<1/>)."
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:221
+msgid "2FA Confirmation"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:47
+msgid "A second authentication factor is required"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:144
+msgid "Access your account data (except chat messages)"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:146
+msgid "Access your chat messages"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:138
+msgid "Account"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:71
+msgid "Already have a code?"
+msgstr ""
+
+#: src/assets/app/components/utils/client-name.tsx:35
+msgid "An application on your device"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:61
+msgid "An unknown error occurred"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:110
+msgid "Another account"
+msgstr ""
+
+#: src/assets/app/views/authorize/welcome/welcome-view.tsx:28
+msgid "Authenticate"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-view.tsx:55
+#: src/assets/app/views/authorize/accept/accept-form.tsx:56
+msgid "Authorize"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:47
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:130
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:65
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:95
+#: src/assets/app/components/forms/wizard-card.tsx:93
+msgid "Back"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:152
+msgid "Between {minLength} and {maxLength} characters"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:89
+msgid "By clicking <0>Authorize</0>, you allow this application to perform the following actions in accordance with their <1>terms of service</1> and <2>privacy policy</2>:"
+msgstr ""
+
+#. placeholder {0}: tosLink ? ( <LinkAnchor className="text-brand underline" link={tosLink}> <Trans>Terms of Service</Trans> </LinkAnchor> ) : ( <Trans>Terms of Service</Trans> )
+#. placeholder {1}: ppLink ? ( <LinkAnchor className="text-brand underline" link={ppLink}> <Trans>Privacy Policy</Trans> </LinkAnchor> ) : ( <Trans>Privacy Policy</Trans> )
+#: src/assets/app/views/authorize/sign-up/sign-up-disclaimer.tsx:30
+msgid "By creating an account you agree to the {0} and the {1} of this service."
+msgstr ""
+
+#: src/assets/app/views/authorize/welcome/welcome-view.tsx:51
+#: src/assets/app/components/forms/form-card-async.tsx:85
+msgid "Cancel"
+msgstr ""
+
+#. placeholder {0}: secondFactor.hint
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:234
+msgid "Check your {0} email for a login code and enter it here."
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:94
+msgid "Choose a username"
+msgstr ""
+
+#: src/assets/app/components/utils/error-card.tsx:78
+msgid "Code"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:135
+msgid "Confirm"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-view.tsx:65
+msgid "Confirm your password to continue"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:225
+msgid "Confirmation code"
+msgstr ""
+
+#: src/assets/app/views/authorize/welcome/welcome-view.tsx:35
+msgid "Create a new account"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:78
+msgid "Create Account"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:60
+msgid "Deny access"
+msgstr ""
+
+#: src/assets/app/components/utils/error-card.tsx:85
+msgid "Description"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:112
+#: src/assets/app/components/forms/input-email-address.tsx:49
+#: src/assets/app/components/forms/input-email-address.tsx:50
+#: src/assets/app/components/forms/input-email-address.tsx:51
+msgid "Email"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-request-form.tsx:55
+#: src/assets/app/views/authorize/reset-password/reset-password-request-form.tsx:60
+msgid "Email address"
+msgstr ""
+
+#: src/assets/app/components/forms/input-new-password.tsx:44
+msgid "Enter a password"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:85
+msgid "Enter the code you received to reset your password."
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-request-form.tsx:71
+msgid "Enter the email you used to create your account. We'll send you a \"reset code\" so you can set a new password."
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-request-form.tsx:58
+msgid "Enter your email address"
+msgstr ""
+
+#: src/assets/app/components/forms/input-new-password.tsx:45
+msgid "Enter your new password"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-view.tsx:86
+msgid "Enter your password"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-view.tsx:104
+#: src/assets/app/views/authorize/sign-in/sign-in-view.tsx:120
+msgid "Enter your username and password"
+msgstr ""
+
+#: src/assets/app/views/error/error-view.tsx:28
+msgid "Error"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-label.tsx:25
+msgid "Extra"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:53
+msgid "Forgot Password"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:180
+msgid "Forgot?"
+msgstr ""
+
+#. placeholder {0}: account.preferred_username || account.email || account.sub
+#: src/assets/app/views/authorize/accept/accept-view.tsx:40
+msgid "Grant access to your <0>{0}</0> account"
+msgstr ""
+
+#: src/assets/app/components/utils/help-card.tsx:32
+msgid "Having trouble? <0>Contact support</0>"
+msgstr ""
+
+#: src/assets/app/components/forms/button-toggle-visibility.tsx:34
+msgid "Hide"
+msgstr ""
+
+#: src/assets/app/components/utils/link-title.tsx:15
+msgid "Home"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:86
+msgid "Identifier"
+msgstr ""
+
+#: src/assets/app/locales/locale-selector.tsx:48
+msgid "Interface language selector"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:277
+msgid "Invalid"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:95
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:99
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:100
+msgid "Invite code"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:55
+msgid "Let's get your password reset!"
+msgstr ""
+
+#: src/assets/app/views/authorize/authorize-view.tsx:172
+msgid "Login complete"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:104
+msgid "Login to account that is not listed"
+msgstr ""
+
+#: src/assets/app/components/forms/input-token.tsx:59
+msgid "Looks like {example}"
+msgstr ""
+
+#: src/assets/app/components/forms/button-toggle-visibility.tsx:34
+msgid "Make visible"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-label.tsx:33
+msgid "Missing"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-label.tsx:29
+msgid "Moderate"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:80
+msgid "Name"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-confirm-form.tsx:76
+msgid "New password"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:60
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:90
+#: src/assets/app/components/forms/wizard-card.tsx:96
+msgid "Next"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:119
+msgid "Okay"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:157
+msgid "Only letters, numbers, and hyphens"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-account-form.tsx:126
+#: src/assets/app/components/forms/input-password.tsx:51
+#: src/assets/app/components/forms/input-password.tsx:52
+#: src/assets/app/components/forms/input-password.tsx:53
+msgid "Password"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-label.tsx:23
+msgid "Password strength"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-meter.tsx:45
+msgid "Password strength indicator"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:106
+msgid "Password Updated"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:113
+msgid "Password updated!"
+msgstr ""
+
+#: src/assets/app/components/forms/input-new-password.tsx:46
+msgid "Password with at least {MIN_PASSWORD_LENGTH} characters"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:194
+msgid "Please verify the domain name of the website before entering your password. Never enter your password on a domain you do not trust."
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-disclaimer.tsx:42
+#: src/assets/app/views/authorize/sign-up/sign-up-disclaimer.tsx:45
+#: src/assets/app/components/utils/link-title.tsx:17
+msgid "Privacy Policy"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:208
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:213
+msgid "Remember this account on this device"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:123
+msgid "Requested permissions"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-confirm-form.tsx:61
+msgid "Reset code"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:82
+msgid "Reset Password"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:178
+msgid "Reset your password"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:198
+msgid "Select domain"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-view.tsx:135
+msgid "Select from an existing account"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:204
+msgid "Session"
+msgstr ""
+
+#: src/assets/app/views/authorize/welcome/welcome-view.tsx:45
+#: src/assets/app/views/authorize/sign-in/sign-in-view.tsx:48
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:135
+msgid "Sign in"
+msgstr ""
+
+#. placeholder {0}: account.name
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:75
+msgid "Sign in as {0}"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-picker.tsx:53
+msgid "Sign in as..."
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:84
+msgid "Sign up"
+msgstr ""
+
+#: src/assets/app/components/forms/wizard-card.tsx:106
+msgid "Step {currentPosition} of {count}"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-label.tsx:27
+msgid "Strong"
+msgstr ""
+
+#: src/assets/app/components/forms/form-card-async.tsx:96
+msgid "Submit"
+msgstr ""
+
+#: src/assets/app/components/utils/link-title.tsx:21
+msgid "Support"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-disclaimer.tsx:34
+#: src/assets/app/views/authorize/sign-up/sign-up-disclaimer.tsx:37
+#: src/assets/app/components/utils/link-title.tsx:19
+msgid "Terms of Service"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:42
+msgid "That handle cannot be used"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:33
+msgid "The domain name is not allowed"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:35
+msgid "The handle contains inappropriate language"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:40
+msgid "The handle is already in use"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:31
+msgid "The handle is invalid"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:25
+msgid "This email is already used"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:38
+msgid "This handle is reserved"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:54
+msgid "This sign-in session has expired"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:166
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:167
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:168
+msgid "Type your desired username"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:58
+msgid "Unexpected server response"
+msgstr ""
+
+#: src/assets/app/views/authorize/accept/accept-form.tsx:142
+msgid "Uniquely identify you"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:143
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:144
+msgid "Username or email address"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:272
+msgid "Valid"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:154
+msgid "Valid email address or username"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:135
+msgid "Verify you are human"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-in/sign-in-form.tsx:191
+msgid "Warning"
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:80
+msgid "We're so excited to have you join us!"
+msgstr ""
+
+#: src/assets/app/components/utils/password-strength-label.tsx:31
+msgid "Weak"
+msgstr ""
+
+#: src/assets/app/components/utils/error-message.tsx:21
+msgid "Wrong identifier or password"
+msgstr ""
+
+#: src/assets/app/views/authorize/authorize-view.tsx:173
+msgid "You are being redirected..."
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:237
+msgid "You can change this username to any domain name you control after your account is set up."
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:116
+msgid "You can now sign in with your new password."
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-confirm-form.tsx:54
+msgid "You will receive an email with a \"reset code\". Enter that code here then enter your new password."
+msgstr ""
+
+#: src/assets/app/views/authorize/sign-up/sign-up-view.tsx:116
+msgid "Your account"
+msgstr ""
+
+#. placeholder {0}: segment.length ? ( <strong className="text-gray-800 dark:text-gray-200"> {preview} </strong> ) : ( <span aria-hidden className="bg-gray-300 dark:bg-slate-600 rounded-md p-2 w-24" /> )
+#: src/assets/app/views/authorize/sign-up/sign-up-handle-form.tsx:219
+msgid "Your full username will be: {0}"
+msgstr ""
+
+#: src/assets/app/views/authorize/reset-password/reset-password-view.tsx:108
+msgid "Your password has been updated!"
+msgstr ""

package/src/assets/app/locales/load.ts

@@ -0,0 +1,8 @@
+import { Messages } from '@lingui/core'
+
+// @NOTE run "pnpm run po:compile" to compile the messages from the PO files
+
+export async function loadMessages(locale: string): Promise<Messages> {
+  const { messages } = await import(`./${locale}/messages.ts`)
+  return messages
+}

package/src/assets/app/locales/locale-context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react'
+// @NOTE run "pnpm run po:compile" to compile the messages from the PO files
+import { KnownLocale } from './locales.ts'
+
+export type LocaleContextValue = {
+  locale: string
+  locales: Partial<Record<KnownLocale, { name: string; flag?: string }>>
+  setLocale: (locale: KnownLocale) => void
+}
+
+export const LocaleContext = createContext<LocaleContextValue | null>(null)
+
+export function useLocaleContext(): LocaleContextValue {
+  const context = useContext(LocaleContext)
+  if (!context) {
+    throw new Error('useLocaleContext must be used within a LocaleProvider')
+  }
+  return context
+}

package/src/assets/app/locales/locale-provider.tsx

@@ -0,0 +1,112 @@
+import { I18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
+// @NOTE run "pnpm run po:compile" to compile the messages from the PO files
+import { messages as en } from './en/messages.ts'
+import { loadMessages } from './load.ts'
+import { LocaleContext, LocaleContextValue } from './locale-context.ts'
+import { KnownLocale, knownLocales, locales, resolveLocale } from './locales.ts'
+
+export type LocaleProviderProps = {
+  availableLocales?: readonly string[]
+  children?: ReactNode
+}
+
+export function LocaleProvider({
+  availableLocales,
+  children,
+}: LocaleProviderProps) {
+  // Bundle "en" messages with the app
+  const [i18n] = useState(() => new I18n({ locale: 'en', messages: { en } }))
+
+  const [desiredLocale, setDesiredLocale] = useState<KnownLocale>(() =>
+    detectLocale(
+      knownLocales.filter(
+        (l) => !availableLocales || availableLocales.includes(l),
+      ),
+    ),
+  )
+  const [currentLocale, setCurrentLocale] = useState<string>(() => i18n.locale)
+
+  const [loaded, setLoaded] = useState(desiredLocale === currentLocale)
+
+  // Keep currentLocale in sync with i18n
+  useEffect(() => {
+    const onChange = () => {
+      setCurrentLocale(i18n.locale)
+      document.documentElement.setAttribute('lang', i18n.locale)
+    }
+    i18n.on('change', onChange)
+    return () => i18n.removeListener('change', onChange)
+  }, [i18n])
+
+  useEffect(() => {
+    if (currentLocale === desiredLocale) {
+      setLoaded(true)
+      return
+    }
+
+    let canceled = false
+    loadMessages(desiredLocale)
+      .then((messages) => {
+        i18n.load(desiredLocale, messages)
+        if (!canceled) i18n.activate(desiredLocale)
+      })
+      .catch((err) => {
+        console.error(`Failed to load locale "${desiredLocale}":`, err)
+      })
+      .finally(() => {
+        if (!canceled) setLoaded(true)
+      })
+    return () => {
+      canceled = true
+    }
+  }, [currentLocale, desiredLocale])
+
+  const value = useMemo<LocaleContextValue>(
+    () => ({
+      locale: currentLocale,
+      locales: Object.fromEntries(
+        knownLocales
+          .filter((l) => !availableLocales || availableLocales.includes(l))
+          .map((l) => [l, locales[l]]),
+      ),
+      setLocale: setDesiredLocale,
+    }),
+    [currentLocale, availableLocales, locales, setDesiredLocale],
+  )
+
+  return (
+    <LocaleContext value={value}>
+      <I18nProvider i18n={i18n}>{loaded && children}</I18nProvider>
+    </LocaleContext>
+  )
+}
+
+function detectLocale<L extends string>(
+  availableLocales: readonly L[],
+  fallbackLocale: L | 'en' = 'en',
+): L {
+  // Use, in priority, the locale that was set by the backend
+  if (typeof document === 'object') {
+    const htmlLang = document.documentElement.getAttribute('lang')
+    const resolved = htmlLang && resolveLocale(htmlLang, availableLocales)
+    if (resolved) return resolved
+  }
+
+  // Should that fail (though it should probably never), negotiate with the browser
+  if (typeof navigator === 'object' && navigator.languages) {
+    for (const locale of navigator.languages) {
+      const resolved = resolveLocale(locale, availableLocales)
+      if (resolved) return resolved
+    }
+  }
+
+  const fallback = resolveLocale(fallbackLocale, availableLocales)
+  if (fallback) return fallback
+
+  // Type-safety
+  throw new TypeError(
+    `Available locales should always contain "${fallbackLocale}"`,
+  )
+}

package/src/assets/app/locales/locale-selector.tsx

@@ -0,0 +1,58 @@
+import { useLingui } from '@lingui/react/macro'
+import { JSX } from 'react'
+import { clsx } from '../lib/clsx.ts'
+import { useLocaleContext } from './locale-context.ts'
+
+export type LocaleSelectorProps = Omit<
+  JSX.IntrinsicElements['select'],
+  'value' | 'defaultValue'
+>
+
+export function LocaleSelector({
+  className,
+  onChange,
+  ...props
+}: LocaleSelectorProps) {
+  const { locale, locales, setLocale } = useLocaleContext()
+  const { t } = useLingui()
+
+  return (
+    <select
+      {...props}
+      className={clsx(
+        'accent-brand',
+        // Background
+        'bg-gray-100 focus:bg-slate-200 has-[:focus]:bg-slate-200',
+        'dark:bg-slate-800 dark:focus:bg-slate-700 dark:has-[:focus]:bg-slate-700',
+        // Border
+        'outline-none',
+        'border-solid border-2 border-transparent',
+        'focus:border-brand has-[:focus]:border-brand',
+        'hover:border-gray-400 hover:focus:border-gray-400',
+        'dark:hover:border-gray-500 dark:hover:focus:border-gray-500',
+        // Border
+        'rounded-lg',
+        // Font
+        'text-slate-600 dark:text-slate-300',
+        // Layout
+        'py-1 px-2',
+        className,
+      )}
+      value={locale}
+      onChange={(e) => {
+        onChange?.(e)
+        if (!e.defaultPrevented) {
+          setLocale(e.target.value as keyof typeof locales)
+        }
+      }}
+      aria-label={t`Interface language selector`}
+    >
+      {Object.entries(locales).map(([key, { name, flag }]) => (
+        <option key={key} value={key}>
+          {name}
+          {flag ? ` ${flag}` : ''}
+        </option>
+      ))}
+    </select>
+  )
+}