refactor(FR-557): improve language option UX and refactor bug-prone code (#3536)

resolves #3086 ([FR-557](https://lablup.atlassian.net/browse/FR-557))
<!-- replace NNN, MMM with the GitHub issue number and the corresponding Jira issue number. -->

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**changes**
* improve language option UX
* refactor bug-prone code
* update i18n

|before|after|
|-------|------|
| ![CleanShot 2025-04-18 at 16.51.56@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/xbCemO1RqqcSjEXCRK3p/acae3468-5f29-4668-b6ae-0edba12404f4.png) | ![CleanShot 2025-04-18 at 16.51.41@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/xbCemO1RqqcSjEXCRK3p/788727c3-570c-4112-9ce9-4492fc00b350.png) |

**Checklist:** (if applicable)

- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-557]: https://lablup.atlassian.net/browse/FR-557?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: nowgnuesLee

react/src/pages/UserSettingsPage.tsx

@@ -9,8 +9,9 @@ import {
 } from '../hooks/useBAISetting';
 import { SettingOutlined } from '@ant-design/icons';
 import { useToggle } from 'ahooks';
-import { Button } from 'antd';
+import { Button, Typography } from 'antd';
 import Card from 'antd/es/card/Card';
+import _ from 'lodash';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
@@ -55,6 +56,39 @@ const UserPreferencesPage = () => {
   const [isOpenShellScriptEditModal, { toggle: toggleShellScriptEditModal }] =
     useToggle(false);
 
+  const languageOptions = [
+    { label: t('language.English'), value: 'en' },
+    { label: t('language.Korean'), value: 'ko' },
+    { label: t('language.Brazilian'), value: 'pt-BR' },
+    { label: t('language.Chinese'), value: 'zh-CN' },
+    {
+      label: t('language.Chinese (Simplified)'),
+      value: 'zh-TW',
+    },
+    { label: t('language.French'), value: 'fr' },
+    { label: t('language.Finnish'), value: 'fi' },
+    { label: t('language.German'), value: 'de' },
+    { label: t('language.Greek'), value: 'el' },
+    { label: t('language.Indonesian'), value: 'id' },
+    { label: t('language.Italian'), value: 'it' },
+    { label: t('language.Japanese'), value: 'ja' },
+    { label: t('language.Mongolian'), value: 'mn' },
+    { label: t('language.Polish'), value: 'pl' },
+    { label: t('language.Portuguese'), value: 'pt' },
+    { label: t('language.Russian'), value: 'ru' },
+    { label: t('language.Spanish'), value: 'es' },
+    { label: t('language.Thai'), value: 'th' },
+    { label: t('language.Turkish'), value: 'tr' },
+    { label: t('language.Vietnamese'), value: 'vi' },
+  ];
+  let defaultLanguage = globalThis.navigator.language;
+  defaultLanguage = _.includes(['zh-CN', 'zh-TW', 'pt-BR'], defaultLanguage)
+    ? defaultLanguage
+    : defaultLanguage.split('-')[0];
+  defaultLanguage =
+    languageOptions.find((item) => item.value === defaultLanguage)?.value ??
+    'en';
+
   const settingGroups: Array<SettingGroup> = [
     {
       title: t('userSettings.Preferences'),
@@ -86,46 +120,34 @@ const UserPreferencesPage = () => {
           title: t('userSettings.Language'),
           description: t('userSettings.DescLanguage'),
           selectProps: {
-            options: [
-              { label: t('language.OSDefault'), value: 'default' },
-              { label: t('language.English'), value: 'en' },
-              { label: t('language.Korean'), value: 'ko' },
-              { label: t('language.Brazilian'), value: 'pt-BR' },
-              { label: t('language.Chinese'), value: 'zh-CN' },
-              {
-                label: t('language.Chinese (Simplified)'),
-                value: 'zh-TW',
-              },
-              { label: t('language.French'), value: 'fr' },
-              { label: t('language.Finnish'), value: 'fi' },
-              { label: t('language.German'), value: 'de' },
-              { label: t('language.Greek'), value: 'el' },
-              { label: t('language.Indonesian'), value: 'id' },
-              { label: t('language.Italian'), value: 'it' },
-              { label: t('language.Japanese'), value: 'ja' },
-              { label: t('language.Mongolian'), value: 'mn' },
-              { label: t('language.Polish'), value: 'pl' },
-              { label: t('language.Portuguese'), value: 'pt' },
-              { label: t('language.Russian'), value: 'ru' },
-              { label: t('language.Spanish'), value: 'es' },
-              { label: t('language.Thai'), value: 'th' },
-              { label: t('language.Turkish'), value: 'tr' },
-              { label: t('language.Vietnamese'), value: 'vi' },
-            ],
+            options: languageOptions.map((item) =>
+              item.value === defaultLanguage
+                ? {
+                    ...item,
+                    label: (
+                      <>
+                        {item.label}&nbsp;
+                        <Typography.Text type="secondary">
+                          ({t('userSettings.Default')})
+                        </Typography.Text>
+                      </>
+                    ),
+                  }
+                : item,
+            ),
             showSearch: true,
           },
-          defaultValue: 'default',
-          value: selectedLanguage || 'default',
+          defaultValue: defaultLanguage,
+          value: selectedLanguage || defaultLanguage,
           setValue: setSelectedLanguage,
           onChange: (value) => {
             setSelectedLanguage(value);
-            const defaultLanguage = globalThis.navigator.language.split('-')[0];
             const event = new CustomEvent('language-changed', {
               detail: {
-                language: value === 'default' ? defaultLanguage : value,
+                language: value,
               },
             });
-            setLanguage(value === 'default' ? defaultLanguage : value);
+            setLanguage(value);
             document.dispatchEvent(event);
             //@ts-ignore
             console.log(globalThis.backendaioptions.get('selected_language'));

resources/i18n/de.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Name der Konfigurationsdatei",
     "CurrentSSHPublicKey": "Aktueller öffentlicher Schlüssel:",
     "DarkMode": "Dunkler Modus",
+    "Default": "Standard",
     "DescAutoLogout": "Melden Sie sich automatisch ab, wenn alle angemeldeten Seiten geschlossen sind, mit Ausnahme von sitzungsbasierten Seiten für Apps (z. B. Jupyter Notebook, Webterminal usw.)",
     "DescAutomaticUpdateCheck": "Benachrichtigen, wenn eine neue Webui-Version veröffentlicht wird. <br /> Wenn das Internet instabil oder offline ist, wird diese Option automatisch deaktiviert. Sie können diesen Schalter umschalten, um die automatische Updateprüfung erneut zu starten.",
     "DescBetaFeatures": "Verwenden Sie Betafunktionen für die Web-Benutzeroberfläche. <br /> Beta-Funktionen können instabil sein. Einige Betafunktionen werden möglicherweise nicht als offizielle Funktionen übernommen.",

resources/i18n/el.json

@@ -1751,6 +1751,7 @@
     "ConfigFilename": "Διαμόρφωση ονόματος αρχείου",
     "CurrentSSHPublicKey": "Τρέχον δημόσιο κλειδί:",
     "DarkMode": "Σκοτεινή λειτουργία",
+    "Default": "Αθέτηση",
     "DescAutoLogout": "Αποσυνδεθείτε αυτόματα εάν όλες οι συνδεδεμένες σελίδες είναι κλειστές εκτός από τις σελίδες που προέρχονται από περίοδο σύνδεσης για εφαρμογές (π.χ. jupyter notebook, web terminal κ.λπ.)",
     "DescAutomaticUpdateCheck": "Ειδοποίηση όταν κυκλοφορήσει μια νέα έκδοση webui. <br /> Όταν το Διαδίκτυο είναι ασταθές ή εκτός σύνδεσης, αυτή η επιλογή θα απενεργοποιηθεί αυτόματα. Μπορείτε να αλλάξετε αυτόν τον διακόπτη για να ξεκινήσετε ξανά τον έλεγχο αυτόματης ενημέρωσης.",
     "DescBetaFeatures": "Χρησιμοποιήστε λειτουργίες beta για διεπαφή χρήστη Ιστού. <br /> Οι λειτουργίες beta ενδέχεται να είναι ασταθείς. Ορισμένες λειτουργίες beta ενδέχεται να μην υιοθετηθούν ως επίσημη λειτουργία.",

resources/i18n/en.json

@@ -1763,6 +1763,7 @@
     "ConfigFilename": "Config file name",
     "CurrentSSHPublicKey": "Current public key: ",
     "DarkMode": "Dark mode",
+    "Default": "Default",
     "DescAutoLogout": "Log out automatically if all logined pages are closed except session originated pages for apps(e.g. jupyter notebook, web terminal, etc.)",
     "DescAutomaticUpdateCheck": "Notify when a new webui version is released.<br />In where the Internet is unstable or offline, this option will be automatically turned off. You can toggle this switch to start the automatic update check again.",
     "DescBetaFeatures": "Use beta features for Web UI.<br />Beta features may be unstable. Some beta features may not be adopted as official feature.",

resources/i18n/es.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nombre del archivo de configuración",
     "CurrentSSHPublicKey": "Clave pública actual:",
     "DarkMode": "Modo oscuro",
+    "Default": "Por defecto",
     "DescAutoLogout": "Cierre de sesión automático si se cierran todas las páginas de inicio de sesión, excepto las páginas de inicio de sesión para aplicaciones (p. ej., cuaderno jupyter, terminal web, etc.).",
     "DescAutomaticUpdateCheck": "Notificar cuando se publique una nueva versión de webui.<br />En los casos en que Internet sea inestable o esté desconectado, esta opción se desactivará automáticamente. Puede activar este interruptor para iniciar la comprobación de actualización automática de nuevo.",
     "DescBetaFeatures": "Utilice las funciones beta para la interfaz de usuario web.<br />Las funciones beta pueden ser inestables. Es posible que algunas funciones beta no se adopten como funciones oficiales.",

resources/i18n/fi.json

@@ -1753,6 +1753,7 @@
     "ConfigFilename": "Konfigurointitiedoston nimi",
     "CurrentSSHPublicKey": "Nykyinen julkinen avain:",
     "DarkMode": "Tumma tila",
+    "Default": "Laiminlyönti",
     "DescAutoLogout": "Kirjaudu ulos automaattisesti, jos kaikki kirjautuneet sivut suljetaan, lukuun ottamatta sovellusten (esim. jupyter notebook, verkkopääte jne.) istunnon luomia sivuja.",
     "DescAutomaticUpdateCheck": "Ilmoita, kun uusi webui-versio julkaistaan.<br />Jos Internet on epävakaa tai offline, tämä vaihtoehto kytkeytyy automaattisesti pois päältä. Voit vaihtaa tätä kytkintä käynnistääksesi automaattisen päivityksen tarkistuksen uudelleen.",
     "DescBetaFeatures": "Käytä web-käyttöliittymän beta-ominaisuuksia.<br />Beta-ominaisuudet voivat olla epävakaita. Joitakin beta-ominaisuuksia ei ehkä hyväksytä viralliseksi ominaisuudeksi.",

resources/i18n/fr.json

@@ -1755,6 +1755,7 @@
     "ConfigFilename": "Nom du fichier de configuration",
     "CurrentSSHPublicKey": "Clé publique actuelle :",
     "DarkMode": "Mode sombre",
+    "Default": "Défaut",
     "DescAutoLogout": "Déconnectez-vous automatiquement si toutes les pages connectées sont fermées, à l'exception des pages d'origine de session pour les applications (par exemple, bloc-notes jupyter, terminal Web, etc.)",
     "DescAutomaticUpdateCheck": "Avertir lorsqu'une nouvelle version de webui est publiée. <br /> Dans les cas où Internet est instable ou hors ligne, cette option sera automatiquement désactivée. Vous pouvez basculer ce commutateur pour relancer la vérification automatique des mises à jour.",
     "DescBetaFeatures": "Utilisez les fonctionnalités bêta pour l'interface utilisateur Web. <br /> Les fonctionnalités bêta peuvent être instables. Certaines fonctionnalités bêta peuvent ne pas être adoptées comme fonctionnalité officielle.",

resources/i18n/id.json

@@ -1754,6 +1754,7 @@
     "ConfigFilename": "Nama file konfigurasi",
     "CurrentSSHPublicKey": "Kunci publik saat ini: ",
     "DarkMode": "Mode Gelap",
+    "Default": "Bawaan",
     "DescAutoLogout": "Keluar secara otomatis jika semua halaman yang masuk ditutup kecuali halaman yang berasal dari sesi untuk aplikasi (mis. Jupyter notebook, terminal web, dll.)",
     "DescAutomaticUpdateCheck": "Beri tahu saat versi UI web baru dirilis. <br /> Di mana Internet tidak stabil atau offline, opsi ini akan dimatikan secara otomatis. Anda dapat mengaktifkan opsi ini untuk memulai lagi pemeriksaan pembaruan otomatis.",
     "DescBetaFeatures": "Gunakan fitur beta untuk UI Web. <br />Fitur beta mungkin tidak stabil. Beberapa fitur beta mungkin tidak diadopsi sebagai fitur resmi.",

resources/i18n/it.json

@@ -1752,6 +1752,7 @@
     "ConfigFilename": "Nome del file di configurazione",
     "CurrentSSHPublicKey": "Chiave pubblica attuale:",
     "DarkMode": "Modalità scura",
+    "Default": "Predefinito",
     "DescAutoLogout": "Disconnettersi automaticamente se tutte le pagine di accesso vengono chiuse eccetto le pagine originate dalla sessione per le app (ad es.",
     "DescAutomaticUpdateCheck": "Avvisa quando viene rilasciata una nuova versione di webui. <br /> Nei casi in cui Internet è instabile o offline, questa opzione verrà automaticamente disattivata. Puoi attivare questo interruttore per avviare nuovamente il controllo automatico degli aggiornamenti.",
     "DescBetaFeatures": "Utilizza le funzionalità beta per l'interfaccia utente Web. <br /> Le funzionalità beta potrebbero essere instabili. Alcune funzionalità beta potrebbero non essere adottate come funzionalità ufficiali.",

resources/i18n/ja.json

@@ -1754,6 +1754,7 @@
     "ConfigFilename": "構成ファイル名",
     "CurrentSSHPublicKey": "現在の公開鍵：",
     "DarkMode": "ダークモード",
+    "Default": "デフォルト",
     "DescAutoLogout": "アプリのセッション開始ページ（jupyterノートブック、Webターミナルなど）を除き、ログインしたすべてのページが閉じている場合は、自動的にログアウトします。",
     "DescAutomaticUpdateCheck": "新しいwebuiバージョンがリリースされたときに通知します。 <br />インターネットが不安定またはオフラインの場合、このオプションは自動的にオフになります。このスイッチを切り替えると、自動更新チェックを再開できます。",
     "DescBetaFeatures": "WebUIのベータ機能を使用します。 <br />ベータ機能が不安定な場合があります。一部のベータ機能は、公式機能として採用されない場合があります。",