Localize lang selectors according to the app language (#6207)

* Localize lang selectors according to the app language

* Explicitly ignore RangeError when translating locale names

src/view/com/composer/select-language/SelectLangBtn.tsx

@@ -48,7 +48,7 @@ export function SelectLangBtn() {
     function add(commaSeparatedLangCodes: string) {
       const langCodes = commaSeparatedLangCodes.split(',')
       const langName = langCodes
-        .map(code => codeToLanguageName(code))
+        .map(code => codeToLanguageName(code, langPrefs.appLanguage))
         .join(' + ')
 
       /*
@@ -108,7 +108,9 @@ export function SelectLangBtn() {
       accessibilityHint="">
       {postLanguagesPref.length > 0 ? (
         <Text type="lg-bold" style={[pal.link, styles.label]} numberOfLines={1}>
-          {postLanguagesPref.map(lang => codeToLanguageName(lang)).join(', ')}
+          {postLanguagesPref
+            .map(lang => codeToLanguageName(lang, langPrefs.appLanguage))
+            .join(', ')}
         </Text>
       ) : (
         <FontAwesomeIcon

src/view/com/composer/select-language/SuggestedLanguage.tsx

@@ -49,37 +49,48 @@ export function SuggestedLanguage({text}: {text: string}) {
     return () => cancelIdle(idle)
   }, [text])
 
-  return suggestedLanguage &&
-    !toPostLanguages(langPrefs.postLanguage).includes(suggestedLanguage) ? (
-    <View style={[pal.border, styles.infoBar]}>
-      <FontAwesomeIcon
-        icon="language"
-        style={pal.text as FontAwesomeIconStyle}
-        size={24}
-      />
-      <Text style={[pal.text, s.flex1]}>
-        <Trans>
-          Are you writing in{' '}
-          <Text type="sm-bold" style={pal.text}>
-            {codeToLanguageName(suggestedLanguage)}
-          </Text>
-          ?
-        </Trans>
-      </Text>
+  if (
+    suggestedLanguage &&
+    !toPostLanguages(langPrefs.postLanguage).includes(suggestedLanguage)
+  ) {
+    const suggestedLanguageName = codeToLanguageName(
+      suggestedLanguage,
+      langPrefs.appLanguage,
+    )
 
-      <Button
-        type="default"
-        onPress={() => setLangPrefs.setPostLanguage(suggestedLanguage)}
-        accessibilityLabel={_(
-          msg`Change post language to ${codeToLanguageName(suggestedLanguage)}`,
-        )}
-        accessibilityHint="">
-        <Text type="button" style={[pal.link, s.fw600]}>
-          <Trans>Yes</Trans>
+    return (
+      <View style={[pal.border, styles.infoBar]}>
+        <FontAwesomeIcon
+          icon="language"
+          style={pal.text as FontAwesomeIconStyle}
+          size={24}
+        />
+        <Text style={[pal.text, s.flex1]}>
+          <Trans>
+            Are you writing in{' '}
+            <Text type="sm-bold" style={pal.text}>
+              {suggestedLanguageName}
+            </Text>
+            ?
+          </Trans>
         </Text>
-      </Button>
-    </View>
-  ) : null
+
+        <Button
+          type="default"
+          onPress={() => setLangPrefs.setPostLanguage(suggestedLanguage)}
+          accessibilityLabel={_(
+            msg`Change post language to ${suggestedLanguageName}`,
+          )}
+          accessibilityHint="">
+          <Text type="button" style={[pal.link, s.fw600]}>
+            <Trans>Yes</Trans>
+          </Text>
+        </Button>
+      </View>
+    )
+  } else {
+    return null
+  }
 }
 
 const styles = StyleSheet.create({

src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx

@@ -5,6 +5,7 @@ import {Trans} from '@lingui/macro'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {deviceLanguageCodes} from '#/locale/deviceLocales'
+import {languageName} from '#/locale/helpers'
 import {useModalControls} from '#/state/modals'
 import {
   useLanguagePrefs,
@@ -88,7 +89,7 @@ export function Component({}: {}) {
             key={lang.code2}
             code2={lang.code2}
             langType="contentLanguages"
-            name={lang.name}
+            name={languageName(lang, langPrefs.appLanguage)}
             onPress={() => {
               onPress(lang.code2)
             }}

src/view/com/modals/lang-settings/PostLanguagesSettings.tsx

@@ -5,6 +5,7 @@ import {Trans} from '@lingui/macro'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {deviceLanguageCodes} from '#/locale/deviceLocales'
+import {languageName} from '#/locale/helpers'
 import {useModalControls} from '#/state/modals'
 import {
   hasPostLanguage,
@@ -91,7 +92,7 @@ export function Component() {
           return (
             <ToggleButton
               key={lang.code2}
-              label={lang.name}
+              label={languageName(lang, langPrefs.appLanguage)}
               isSelected={isSelected}
               onPress={() => (isDisabled ? undefined : onPress(lang.code2))}
               style={[

src/view/screens/Search/Search.tsx

@@ -37,6 +37,7 @@ import {
 } from '#/lib/routes/types'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {augmentSearchQuery} from '#/lib/strings/helpers'
+import {languageName} from '#/locale/helpers'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
@@ -328,7 +329,7 @@ function SearchLanguageDropdown({
 }) {
   const t = useThemeNew()
   const {_} = useLingui()
-  const {contentLanguages} = useLanguagePrefs()
+  const {appLanguage, contentLanguages} = useLanguagePrefs()
 
   const items = React.useMemo(() => {
     return [
@@ -345,8 +346,8 @@ function SearchLanguageDropdown({
           index === self.findIndex(t => t.code2 === lang.code2), // remove dupes (which will happen)
       )
         .map(l => ({
-          label: l.name,
-          inputLabel: l.name,
+          label: languageName(l, appLanguage),
+          inputLabel: languageName(l, appLanguage),
           value: l.code2,
           key: l.code2 + l.code3,
         }))
@@ -365,7 +366,7 @@ function SearchLanguageDropdown({
           return a.label.localeCompare(b.label)
         }),
     )
-  }, [_, contentLanguages])
+  }, [_, appLanguage, contentLanguages])
 
   const style = {
     backgroundColor: t.atoms.bg_contrast_25.backgroundColor,