use Intl.DisplayNames for language name localisation

src/components/dialogs/LanguageSelectDialog.tsx

@@ -5,6 +5,7 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 
+import {languageName} from '#/locale/helpers'
 import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
 import {useLanguagePrefs} from '#/state/preferences/languages'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
@@ -139,8 +140,11 @@ export function DialogInner({
     const recentLanguages = mapCode2List(recentLanguagesCode2)
 
     // NOTE(@elijaharita): helper functions
+    const searchLower = search.toLowerCase()
     const matchesSearch = (lang: Language) =>
-      lang.name.toLowerCase().includes(search.toLowerCase())
+      languageName(lang, langPrefs.appLanguage)
+        .toLowerCase()
+        .includes(searchLower) || lang.name.toLowerCase().includes(searchLower)
     const isChecked = (lang: Language) =>
       checkedLanguagesCode2.includes(lang.code2)
     const isInRecents = (lang: Language) =>
@@ -182,6 +186,7 @@ export function DialogInner({
     search,
     langPrefs.postLanguageHistory,
     checkedLanguagesCode2,
+    langPrefs.appLanguage,
   ])
 
   const listHeader = (
@@ -304,7 +309,7 @@ export function DialogInner({
             <Toggle.Item
               key={lang.code2}
               name={lang.code2}
-              label={lang.name}
+              label={languageName(lang, langPrefs.appLanguage)}
               style={[
                 t.atoms.border_contrast_low,
                 !isLastItem && a.border_b,
@@ -313,7 +318,7 @@ export function DialogInner({
                 a.py_md,
               ]}>
               <Toggle.LabelText style={[a.flex_1]}>
-                {lang.name}
+                {languageName(lang, langPrefs.appLanguage)}
               </Toggle.LabelText>
               <Toggle.Checkbox />
             </Toggle.Item>

src/screens/Settings/LanguageSettings.tsx

@@ -8,7 +8,7 @@ import {
   type CommonNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
-import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {languageName, sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {APP_LANGUAGES, LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
 import {atoms as a, web} from '#/alf'
@@ -144,13 +144,12 @@ export function LanguageSettingsScreen({}: Props) {
                       <Select.ItemText>{label}</Select.ItemText>
                     </Select.Item>
                   )}
-                  items={DEDUPED_LANGUAGES.sort(
-                    (a, b) =>
-                      a.name.localeCompare(b.name, langPrefs.appLanguage), // Localized sort
-                  ).map(l => ({
-                    label: l.name, // Pre-generated name using Intl.DisplayNames
+                  items={DEDUPED_LANGUAGES.map(l => ({
+                    label: languageName(l, langPrefs.appLanguage),
                     value: l.code2,
-                  }))}
+                  })).sort((a, b) =>
+                    a.label.localeCompare(b.label, langPrefs.appLanguage),
+                  )}
                 />
               </Select.Root>
             </View>
@@ -180,29 +179,24 @@ export function LanguageSettingsScreen({}: Props) {
                   values={langPrefs.contentLanguages}
                   onChange={setLangPrefs.setContentLanguages}>
                   <Toggle.PanelGroup>
-                    {possibleLanguages
-                      .sort(
-                        (a, b) =>
-                          a.name.localeCompare(b.name, langPrefs.appLanguage), // Localized sort
+                    {possibleLanguages.map((language, index) => {
+                      const name = languageName(language, langPrefs.appLanguage)
+                      return (
+                        <Toggle.Item
+                          key={language.code2}
+                          name={language.code2}
+                          label={name}>
+                          {({selected}) => (
+                            <Toggle.Panel
+                              active={selected}
+                              adjacent={index === 0 ? 'trailing' : 'both'}>
+                              <Toggle.Checkbox />
+                              <Toggle.PanelText>{name}</Toggle.PanelText>
+                            </Toggle.Panel>
+                          )}
+                        </Toggle.Item>
                       )
-                      .map((language, index) => {
-                        const name = language.name // Pre-generated name using Intl.DisplayNames
-                        return (
-                          <Toggle.Item
-                            key={language.code2}
-                            name={language.code2}
-                            label={name}>
-                            {({selected}) => (
-                              <Toggle.Panel
-                                active={selected}
-                                adjacent={index === 0 ? 'trailing' : 'both'}>
-                                <Toggle.Checkbox />
-                                <Toggle.PanelText>{name}</Toggle.PanelText>
-                              </Toggle.Panel>
-                            )}
-                          </Toggle.Item>
-                        )
-                      })}
+                    })}
                     <Button
                       label={_(msg`Add more languages…`)}
                       onPress={contentLanguagePrefsControl.open}>