feat: add translation select

src/views/components/routes/library/platform/home-screen/top-bar/top-bar-dropdown/config-language-button.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BaseDialogTrigger } from '../../../../../../primitives/base-dialog-trigger'
+import { TopBarButton } from '../top-bar-button'
+import { ConfigLanguageDialogContent } from './config-language-dialog-content'
+
+export function ConfigLanguageButton() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  function onOpenChange(open) {
+    setOpen(open)
+  }
+
+  return (
+    <BaseDialogTrigger content={<ConfigLanguageDialogContent />} onOpenChange={onOpenChange} open={open}>
+      <TopBarButton>
+        <div className='flex items-center gap-2 px-4'>
+          <span className='icon-[mdi--translate-variant] relative z-[1] h-8 w-8' />
+          {t('Language')}
+        </div>
+      </TopBarButton>
+    </BaseDialogTrigger>
+  )
+}

src/views/components/routes/library/platform/home-screen/top-bar/top-bar-dropdown/config-language-dialog-content.tsx

@@ -0,0 +1,53 @@
+import { DialogClose } from '@radix-ui/react-dialog'
+import { useLocalStorageValue } from '@react-hookz/web'
+import { useTranslation } from 'react-i18next'
+import { BaseButton } from '../../../../../../primitives/base-button'
+
+export function ConfigLanguageDialogContent() {
+  const { t, i18n } = useTranslation()
+
+  const { value, set, remove } = useLocalStorageValue<string>('i18nextLng', {
+    parse(str) {
+      return str
+    },
+    stringify(data) {
+      return `${data}`
+    },
+  })
+
+  function updateLanguage(language: string) {
+    if (language) {
+      set(language)
+    } else {
+      remove()
+    }
+    i18n.changeLanguage()
+  }
+
+  return (
+    <div>
+      <select className='w-52' onChange={(e) => updateLanguage(e.target.value)} value={value || ''}>
+        <option value=''>{t('Auto detect')}</option>
+        <option value='ar'>عربي</option>
+        <option value='de'>Deutsch</option>
+        <option value='en'>English</option>
+        <option value='es'>Española</option>
+        <option value='fr'>Français</option>
+        <option value='it'>Italiana</option>
+        <option value='ja'>日本語</option>
+        <option value='pl'>Polski</option>
+        <option value='pt'>Português</option>
+        <option value='ru'>Русский</option>
+        <option value='zh'>中文</option>
+      </select>
+      <div className='flex-center mt-8 gap-5'>
+        <DialogClose asChild>
+          <BaseButton className='autofocus' styleType='primary'>
+            <span className='icon-[mdi--close] h-5 w-5' />
+            {t('Close')}
+          </BaseButton>
+        </DialogClose>
+      </div>
+    </div>
+  )
+}

src/views/components/routes/library/platform/home-screen/top-bar/top-bar-dropdown/index.tsx

@@ -7,6 +7,7 @@ import { AboutButton } from './about-button'
 import { ClearSiteDataButton } from './clear-site-data-button'
 import { ConfigGamepadButton } from './config-gamepad-button'
 import { ConfigKeyboardButton } from './config-keyboard-button'
+import { ConfigLanguageButton } from './config-language-button'
 import { InputHelpButton } from './input-help-button'
 
 export function TopBarDropdown() {
@@ -94,6 +95,7 @@ export function TopBarDropdown() {
         <InputHelpButton />
         <ConfigKeyboardButton />
         <ConfigGamepadButton />
+        <ConfigLanguageButton />
         <ClearSiteDataButton />
         <AboutButton />
       </div>

src/views/lib/i18n/resources/ar.ts

@@ -7,6 +7,7 @@ const translation: Translation = {
   About: 'عن',
   'an empty directory': 'دليل فارغ',
   'Are you sure to logout?': 'هل أنت متأكد من تسجيل الخروج؟',
+  'Auto detect': 'اكتشاف تلقائي',
   'built with your own ROM files': 'بنيت مع ملفات ROM الخاصة بك',
   Cancle: 'كانكل',
   'Choose one like this!': 'اختيار واحد مثل هذا!',
@@ -29,6 +30,7 @@ const translation: Translation = {
   'In game shortcuts': 'في اختصارات اللعبة',
   'Input help': 'مساعدة الإدخال',
   Keyboard: 'لوحة المفاتيح',
+  Language: 'لغة',
   'Last Updated': 'آخر تحديث',
   'Load state': 'الدولة الحمل',
   'Loading selected state': 'جارٍ تحميل الحالة المحددة',

src/views/lib/i18n/resources/de.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'Um',
   'an empty directory': 'ein leeres Verzeichnis',
   'Are you sure to logout?': 'Möchten Sie sich wirklich abmelden?',
+  'Auto detect': 'Automatische Erkennung',
   'built with your own ROM files': 'mit Ihren eigenen ROM-Dateien erstellt',
   Cancle: 'Abbrechen',
   'Choose one like this!': 'Wählen Sie eines wie dieses!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'Verknüpfungen im Spiel',
   'Input help': 'Eingabehilfe',
   Keyboard: 'Tastatur',
+  Language: 'Sprache',
   'Last Updated': 'Letzte Aktualisierung',
   'Load state': 'Ladezustand',
   'Loading selected state': 'Ausgewählter Zustand wird geladen',

src/views/lib/i18n/resources/en.ts

@@ -6,6 +6,7 @@ const translation = {
   About: 'About',
   'an empty directory': 'an empty directory',
   'Are you sure to logout?': 'Are you sure to logout?',
+  'Auto detect': 'Auto detect',
   'built with your own ROM files': 'built with your own ROM files',
   Cancle: 'Cancle',
   'Choose one like this!': 'Choose one like this!',
@@ -28,6 +29,7 @@ const translation = {
   'In game shortcuts': 'In game shortcuts',
   'Input help': 'Input help',
   Keyboard: 'Keyboard',
+  Language: 'Language',
   'Last Updated': 'Last Updated',
   'Load state': 'Load state',
   'Loading selected state': 'Loading selected state',

src/views/lib/i18n/resources/es.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'Acerca de',
   'an empty directory': 'un directorio vacío',
   'Are you sure to logout?': '¿Estás seguro de cerrar sesión?',
+  'Auto detect': 'Detección automática',
   'built with your own ROM files': 'construido con tus propios archivos ROM',
   Cancle: 'Cancelar',
   'Choose one like this!': '¡Elige uno como este!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'En los atajos del juego',
   'Input help': 'Ayuda para entradas',
   Keyboard: 'Teclado',
+  Language: 'Idioma',
   'Last Updated': 'Última actualización',
   'Load state': 'Estado de carga',
   'Loading selected state': 'Cargando estado seleccionado',

src/views/lib/i18n/resources/fr.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'À propos',
   'an empty directory': 'un répertoire vide',
   'Are you sure to logout?': 'Êtes-vous sûr de vous déconnecter ?',
+  'Auto detect': 'Détection automatique',
   'built with your own ROM files': 'construit avec vos propres fichiers ROM',
   Cancle: 'Annuler',
   'Choose one like this!': 'Choisissez-en un comme celui-ci !',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'Dans les raccourcis du jeu',
   'Input help': 'Aide à la saisie',
   Keyboard: 'Clavier',
+  Language: 'Langue',
   'Last Updated': 'Dernière mise à jour',
   'Load state': 'État de chargement',
   'Loading selected state': "Chargement de l'état sélectionné",

src/views/lib/i18n/resources/it.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'Di',
   'an empty directory': 'una directory vuota',
   'Are you sure to logout?': 'Sei sicuro di uscire?',
+  'Auto detect': 'Trovato automaticamente',
   'built with your own ROM files': 'costruito con i tuoi file ROM',
   Cancle: 'Cancle',
   'Choose one like this!': 'Scegline uno come questo!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'Nelle scorciatoie del gioco',
   'Input help': 'Inserisci aiuto',
   Keyboard: 'Tastiera',
+  Language: 'Lingua',
   'Last Updated': 'Ultimo aggiornamento',
   'Load state': 'Stato di caricamento',
   'Loading selected state': 'Caricamento dello stato selezionato',

src/views/lib/i18n/resources/ja.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'について',
   'an empty directory': '空のディレクトリ',
   'Are you sure to logout?': 'ログアウトしてもよろしいですか?',
+  'Auto detect': '自動検出',
   'built with your own ROM files': '独自の ROM ファイルでビルド',
   Cancle: 'キャンクル',
   'Choose one like this!': 'このようなものを選択してください!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'ゲーム内のショートカット',
   'Input help': '入力ヘルプ',
   Keyboard: 'キーボード',
+  Language: '言語',
   'Last Updated': '最終更新',
   'Load state': '負荷状態',
   'Loading selected state': '選択した状態をロードしています',

src/views/lib/i18n/resources/pl.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'O',
   'an empty directory': 'pusty katalog',
   'Are you sure to logout?': 'Czy na pewno się wylogujesz?',
+  'Auto detect': 'Automatyczne wykrywanie',
   'built with your own ROM files': 'zbudowany z własnych plików ROM',
   Cancle: 'Anuluj',
   'Choose one like this!': 'Wybierz taki!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'W skrótach gry',
   'Input help': 'Wprowadź pomoc',
   Keyboard: 'Klawiatura',
+  Language: 'Język',
   'Last Updated': 'Ostatnio zaktualizowany',
   'Load state': 'Stan obciążenia',
   'Loading selected state': 'Ładowanie wybranego stanu',

src/views/lib/i18n/resources/pt.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'Sobre',
   'an empty directory': 'um diretório vazio',
   'Are you sure to logout?': 'Tem certeza de que deseja sair?',
+  'Auto detect': 'Detecção automática',
   'built with your own ROM files': 'construído com seus próprios arquivos ROM',
   Cancle: 'Cancelar',
   'Choose one like this!': 'Escolha um assim!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'Atalhos no jogo',
   'Input help': 'Ajuda de entrada',
   Keyboard: 'Teclado',
+  Language: 'Linguagem',
   'Last Updated': 'Ultima atualização',
   'Load state': 'Estado de carga',
   'Loading selected state': 'Carregando estado selecionado',

src/views/lib/i18n/resources/ru.ts

@@ -8,6 +8,7 @@ const translation: Translation = {
   About: 'О',
   'an empty directory': 'пустой каталог',
   'Are you sure to logout?': 'Вы уверены, что выйдете из системы?',
+  'Auto detect': 'Автоматически определять',
   'built with your own ROM files': 'построен с вашими собственными файлами ROM',
   Cancle: 'Отмена',
   'Choose one like this!': 'Выбирайте такой!',
@@ -31,6 +32,7 @@ const translation: Translation = {
   'In game shortcuts': 'Ярлыки в игре',
   'Input help': 'Справка по вводу',
   Keyboard: 'Клавиатура',
+  Language: 'Язык',
   'Last Updated': 'Последнее обновление',
   'Load state': 'Состояние загрузки',
   'Loading selected state': 'Загрузка выбранного состояния',

src/views/lib/i18n/resources/zh.ts

@@ -7,6 +7,7 @@ const translation: Translation = {
   About: '关于',
   'an empty directory': '一个空目录',
   'Are you sure to logout?': '你确定要退出吗？',
+  'Auto detect': '自动检测',
   'built with your own ROM files': '由你自己的 ROM 文件构建',
   Cancle: '取消',
   'Choose one like this!': '选一个这样的目录！',
@@ -29,6 +30,7 @@ const translation: Translation = {
   'In game shortcuts': '游戏中的快捷键',
   'Input help': '输入帮助',
   Keyboard: '键盘',
+  Language: '语言',
   'Last Updated': '最近更新时间',
   'Load state': '读档',
   'Loading selected state': '正在加载选择的存档',