feat(ChooseLanguage): update language options to use translated names for improved user experience

src/features/welcome/components/Sections/ChooseLanguage.jsx

@@ -1,6 +1,7 @@
+import { useMemo } from 'react';
 import { MdOutlineOpenInNew } from 'react-icons/md';
 import languages from '@/i18n/languages.json';
-import { useT } from 'contexts/TranslationContext';
+import { useT, useTranslation } from 'contexts/TranslationContext';
 import variables from 'config/variables';
 
 import { Radio } from 'components/Form/Settings';
@@ -8,9 +9,45 @@ import { Header, Content } from '../Layout';
 
 function ChooseLanguage() {
   const t = useT();
+  const { language: currentLanguage } = useTranslation();
   const title = t('modals.welcome.sections.language.title');
   const description = t('modals.welcome.sections.language.description');
 
+  const languageOptions = useMemo(() => {
+    const currentLanguageISO = currentLanguage.replace('_', '-');
+    const displayNames = new Intl.DisplayNames([currentLanguageISO], { type: 'language' });
+
+    return languages.map((lang) => {
+      const nativeName = lang.name;
+      const isoCode = lang.value.replace('_', '-');
+
+      let translatedName;
+      try {
+        translatedName = displayNames.of(isoCode);
+        if (translatedName) {
+          translatedName = translatedName.split(' (')[0];
+        }
+      } catch (e) {
+        translatedName = nativeName;
+      }
+
+      const displayName =
+        !translatedName || translatedName === nativeName ? (
+          nativeName
+        ) : (
+          <>
+            {nativeName}{' '}
+            <span style={{ color: '#999', fontSize: '0.85em' }}>({translatedName})</span>
+          </>
+        );
+
+      return {
+        name: displayName,
+        value: lang.value,
+      };
+    });
+  }, [currentLanguage]);
+
   return (
     <Content>
       <Header
@@ -31,7 +68,7 @@ function ChooseLanguage() {
         }
       />
       <div className="languageSettings">
-        <Radio name="language" options={languages} category="welcomeLanguage" />
+        <Radio name="language" options={languageOptions} category="welcomeLanguage" />
       </div>
     </Content>
   );