From 6cf6ad1fe3751c86d098b36dc410e3bb6d1f4105 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Sat, 24 Jan 2026 20:24:54 +0000
Subject: [PATCH] feat(ChooseLanguage): update language options to use
 translated names for improved user experience

---
 .../components/Sections/ChooseLanguage.jsx    | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/features/welcome/components/Sections/ChooseLanguage.jsx b/src/features/welcome/components/Sections/ChooseLanguage.jsx
index a3f3779a..971d4adc 100644
--- a/src/features/welcome/components/Sections/ChooseLanguage.jsx
+++ b/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>
   );