1 files changed, 117 insertions, 8 deletions

diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx
index 649daea0e..7a2e54dc8 100644
--- a/src/view/screens/LanguageSettings.tsx
+++ b/src/view/screens/LanguageSettings.tsx
@@ -14,16 +14,19 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useFocusEffect} from '@react-navigation/native'
-import {LANGUAGES} from 'lib/../locale/languages'
+import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useModalControls} from '#/state/modals'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
 
-export function LanguageSettingsScreen(_: Props) {
+export function LanguageSettingsScreen(_props: Props) {
   const pal = usePalette('default')
+  const {_} = useLingui()
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
   const {isTabletOrDesktop} = useWebMediaQueries()
@@ -52,6 +55,15 @@ export function LanguageSettingsScreen(_: Props) {
     [langPrefs, setLangPrefs],
   )
 
+  const onChangeAppLanguage = React.useCallback(
+    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
+      if (langPrefs.appLanguage !== value) {
+        setLangPrefs.setAppLanguage(value)
+      }
+    },
+    [langPrefs, setLangPrefs],
+  )
+
   const myLanguages = React.useMemo(() => {
     return (
       langPrefs.contentLanguages
@@ -71,15 +83,109 @@ export function LanguageSettingsScreen(_: Props) {
         styles.container,
         isTabletOrDesktop && styles.desktopContainer,
       ]}>
-      <ViewHeader title="Language Settings" showOnDesktop />
+      <ViewHeader title={_(msg`Language Settings`)} showOnDesktop />
 
       <View style={{paddingTop: 20, paddingHorizontal: 20}}>
+        {/* APP LANGUAGE */}
+        <View style={{paddingBottom: 20}}>
+          <Text type="title-sm" style={[pal.text, s.pb5]}>
+            <Trans>App Language</Trans>
+          </Text>
+          <Text style={[pal.text, s.pb10]}>
+            <Trans>
+              Select your app language for the default text to display in the
+              app
+            </Trans>
+          </Text>
+
+          <View style={{position: 'relative'}}>
+            <RNPickerSelect
+              value={langPrefs.appLanguage}
+              onValueChange={onChangeAppLanguage}
+              items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
+                label: l.name,
+                value: l.code2,
+                key: l.code2,
+              }))}
+              style={{
+                inputAndroid: {
+                  backgroundColor: pal.viewLight.backgroundColor,
+                  color: pal.text.color,
+                  fontSize: 14,
+                  letterSpacing: 0.5,
+                  fontWeight: '500',
+                  paddingHorizontal: 14,
+                  paddingVertical: 8,
+                  borderRadius: 24,
+                },
+                inputIOS: {
+                  backgroundColor: pal.viewLight.backgroundColor,
+                  color: pal.text.color,
+                  fontSize: 14,
+                  letterSpacing: 0.5,
+                  fontWeight: '500',
+                  paddingHorizontal: 14,
+                  paddingVertical: 8,
+                  borderRadius: 24,
+                },
+                inputWeb: {
+                  // @ts-ignore web only
+                  cursor: 'pointer',
+                  '-moz-appearance': 'none',
+                  '-webkit-appearance': 'none',
+                  appearance: 'none',
+                  outline: 0,
+                  borderWidth: 0,
+                  backgroundColor: pal.viewLight.backgroundColor,
+                  color: pal.text.color,
+                  fontSize: 14,
+                  letterSpacing: 0.5,
+                  fontWeight: '500',
+                  paddingHorizontal: 14,
+                  paddingVertical: 8,
+                  borderRadius: 24,
+                },
+              }}
+            />
+
+            <View
+              style={{
+                position: 'absolute',
+                top: 1,
+                right: 1,
+                bottom: 1,
+                width: 40,
+                backgroundColor: pal.viewLight.backgroundColor,
+                borderRadius: 24,
+                pointerEvents: 'none',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <FontAwesomeIcon
+                icon="chevron-down"
+                style={pal.text as FontAwesomeIconStyle}
+              />
+            </View>
+          </View>
+        </View>
+
+        <View
+          style={{
+            height: 1,
+            backgroundColor: pal.border.borderColor,
+            marginBottom: 20,
+          }}
+        />
+
+        {/* PRIMARY LANGUAGE */}
         <View style={{paddingBottom: 20}}>
           <Text type="title-sm" style={[pal.text, s.pb5]}>
-            Primary Language
+            <Trans>Primary Language</Trans>
           </Text>
           <Text style={[pal.text, s.pb10]}>
-            Select your preferred language for translations in your feed.
+            <Trans>
+              Select your preferred language for translations in your feed.
+            </Trans>
           </Text>
 
           <View style={{position: 'relative'}}>
@@ -161,13 +267,16 @@ export function LanguageSettingsScreen(_: Props) {
           }}
         />
 
+        {/* CONTENT LANGUAGES */}
         <View style={{paddingBottom: 20}}>
           <Text type="title-sm" style={[pal.text, s.pb5]}>
-            Content Languages
+            <Trans>Content Languages</Trans>
           </Text>
           <Text style={[pal.text, s.pb10]}>
-            Select which languages you want your subscribed feeds to include. If
-            none are selected, all languages will be shown.
+            <Trans>
+              Select which languages you want your subscribed feeds to include.
+              If none are selected, all languages will be shown.
+            </Trans>
           </Text>
 
           <Button