[Settings] Thread prefs revamp (#5772)

* thread preferences screen

* minor tweaks

* more spacing

* replace gate with IS_INTERNAL

* [Settings] Following feed prefs revamp (#5773)

* gated new settings screen

* Following feed prefs

* Update src/screens/Settings/FollowingFeedPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update src/screens/Settings/FollowingFeedPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* replace pref following feed gate

* Update src/screens/Settings/FollowingFeedPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* use "Experimental" as the header

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] External media prefs revamp (#5774)

* gated new settings screen

* external media prefs revamp

* replace gate ext media embeds

* Update src/screens/Settings/ExternalMediaPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* add imports for translation

* alternate list style on native

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] Languages revamp (partial) (#5775)

* language settings (lazy restyle)

* replace gate

* fix text determining flex space

* [Settings] App passwords revamp (#5777)

* rework app passwords screen

* Apply surfdude's copy changes

Thanks @surfdude29!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* format

* replace gate

* use admonition for input error and animate

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] Change handle dialog (#5781)

* new change handle dialog

* animations native only

* overflow hidden on togglebutton animation

* add a low-contrast border

* extract out copybutton

* finish change handle dialog

* invalidate query on success

* web fixes

* error message for rate limit exceeded

* typo

* em dash!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* another em dash

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* set maxwidth of suffixtext

* Copy tweak

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] Notifs settings revamp (#5884)

* rename, move, and restyle notif settings

* bold "experimental:"

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

1 files changed, 275 insertions, 0 deletions

diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx
new file mode 100644
index 000000000..c6cd8bb5a
--- /dev/null
+++ b/src/screens/Settings/LanguageSettings.tsx
@@ -0,0 +1,275 @@
+import React, {useCallback, useMemo} from 'react'
+import {View} from 'react-native'
+import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {useModalControls} from '#/state/modals'
+import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
+import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+import * as SettingsList from './components/SettingsList'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
+export function LanguageSettingsScreen({}: Props) {
+  const {_} = useLingui()
+  const langPrefs = useLanguagePrefs()
+  const setLangPrefs = useLanguagePrefsApi()
+  const t = useTheme()
+
+  const {openModal} = useModalControls()
+
+  const onPressContentLanguages = useCallback(() => {
+    openModal({name: 'content-languages-settings'})
+  }, [openModal])
+
+  const onChangePrimaryLanguage = useCallback(
+    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
+      if (!value) return
+      if (langPrefs.primaryLanguage !== value) {
+        setLangPrefs.setPrimaryLanguage(value)
+      }
+    },
+    [langPrefs, setLangPrefs],
+  )
+
+  const onChangeAppLanguage = useCallback(
+    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
+      if (!value) return
+      if (langPrefs.appLanguage !== value) {
+        setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
+      }
+    },
+    [langPrefs, setLangPrefs],
+  )
+
+  const myLanguages = useMemo(() => {
+    return (
+      langPrefs.contentLanguages
+        .map(lang => LANGUAGES.find(l => l.code2 === lang))
+        .filter(Boolean)
+        // @ts-ignore
+        .map(l => l.name)
+        .join(', ')
+    )
+  }, [langPrefs.contentLanguages])
+
+  return (
+    <Layout.Screen testID="PreferencesLanguagesScreen">
+      <Layout.Header title={_(msg`Languages`)} />
+      <Layout.Content>
+        <SettingsList.Container>
+          <SettingsList.Group iconInset={false}>
+            <SettingsList.ItemText>
+              <Trans>App Language</Trans>
+            </SettingsList.ItemText>
+            <View style={[a.gap_md, a.w_full]}>
+              <Text style={[a.leading_snug]}>
+                <Trans>
+                  Select your app language for the default text to display in
+                  the app.
+                </Trans>
+              </Text>
+              <View style={[a.relative, web([a.w_full, {maxWidth: 400}])]}>
+                <RNPickerSelect
+                  placeholder={{}}
+                  value={sanitizeAppLanguageSetting(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: t.atoms.bg_contrast_25.backgroundColor,
+                      color: t.atoms.text.color,
+                      fontSize: 14,
+                      letterSpacing: 0.5,
+                      fontWeight: a.font_bold.fontWeight,
+                      paddingHorizontal: 14,
+                      paddingVertical: 8,
+                      borderRadius: a.rounded_xs.borderRadius,
+                    },
+                    inputIOS: {
+                      backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+                      color: t.atoms.text.color,
+                      fontSize: 14,
+                      letterSpacing: 0.5,
+                      fontWeight: a.font_bold.fontWeight,
+                      paddingHorizontal: 14,
+                      paddingVertical: 8,
+                      borderRadius: a.rounded_xs.borderRadius,
+                    },
+                    inputWeb: {
+                      flex: 1,
+                      width: '100%',
+                      cursor: 'pointer',
+                      // @ts-ignore web only
+                      '-moz-appearance': 'none',
+                      '-webkit-appearance': 'none',
+                      appearance: 'none',
+                      outline: 0,
+                      borderWidth: 0,
+                      backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+                      color: t.atoms.text.color,
+                      fontSize: 14,
+                      fontFamily: 'inherit',
+                      letterSpacing: 0.5,
+                      fontWeight: a.font_bold.fontWeight,
+                      paddingHorizontal: 14,
+                      paddingVertical: 8,
+                      borderRadius: a.rounded_xs.borderRadius,
+                    },
+                  }}
+                />
+
+                <View
+                  style={[
+                    a.absolute,
+                    t.atoms.bg_contrast_25,
+                    a.rounded_xs,
+                    a.pointer_events_none,
+                    a.align_center,
+                    a.justify_center,
+                    {
+                      top: 1,
+                      right: 1,
+                      bottom: 1,
+                      width: 40,
+                    },
+                  ]}>
+                  <ChevronDownIcon style={[t.atoms.text]} />
+                </View>
+              </View>
+            </View>
+          </SettingsList.Group>
+          <SettingsList.Divider />
+          <SettingsList.Group iconInset={false}>
+            <SettingsList.ItemText>
+              <Trans>Primary Language</Trans>
+            </SettingsList.ItemText>
+            <View style={[a.gap_md, a.w_full]}>
+              <Text style={[a.leading_snug]}>
+                <Trans>
+                  Select your preferred language for translations in your feed.
+                </Trans>
+              </Text>
+              <View style={[a.relative, web([a.w_full, {maxWidth: 400}])]}>
+                <RNPickerSelect
+                  placeholder={{}}
+                  value={langPrefs.primaryLanguage}
+                  onValueChange={onChangePrimaryLanguage}
+                  items={LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
+                    label: l.name,
+                    value: l.code2,
+                    key: l.code2 + l.code3,
+                  }))}
+                  style={{
+                    inputAndroid: {
+                      backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+                      color: t.atoms.text.color,
+                      fontSize: 14,
+                      letterSpacing: 0.5,
+                      fontWeight: a.font_bold.fontWeight,
+                      paddingHorizontal: 14,
+                      paddingVertical: 8,
+                      borderRadius: a.rounded_xs.borderRadius,
+                    },
+                    inputIOS: {
+                      backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+                      color: t.atoms.text.color,
+                      fontSize: 14,
+                      letterSpacing: 0.5,
+                      fontWeight: a.font_bold.fontWeight,
+                      paddingHorizontal: 14,
+                      paddingVertical: 8,
+                      borderRadius: a.rounded_xs.borderRadius,
+                    },
+                    inputWeb: {
+                      flex: 1,
+                      width: '100%',
+                      cursor: 'pointer',
+                      // @ts-ignore web only
+                      '-moz-appearance': 'none',
+                      '-webkit-appearance': 'none',
+                      appearance: 'none',
+                      outline: 0,
+                      borderWidth: 0,
+                      backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+                      color: t.atoms.text.color,
+                      fontSize: 14,
+                      fontFamily: 'inherit',
+                      letterSpacing: 0.5,
+                      fontWeight: a.font_bold.fontWeight,
+                      paddingHorizontal: 14,
+                      paddingVertical: 8,
+                      borderRadius: a.rounded_xs.borderRadius,
+                    },
+                  }}
+                />
+
+                <View
+                  style={{
+                    position: 'absolute',
+                    top: 1,
+                    right: 1,
+                    bottom: 1,
+                    width: 40,
+                    backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+                    borderRadius: a.rounded_xs.borderRadius,
+                    pointerEvents: 'none',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  <ChevronDownIcon style={t.atoms.text} />
+                </View>
+              </View>
+            </View>
+          </SettingsList.Group>
+          <SettingsList.Divider />
+          <SettingsList.Group iconInset={false}>
+            <SettingsList.ItemText>
+              <Trans>Content Languages</Trans>
+            </SettingsList.ItemText>
+            <View style={[a.gap_md]}>
+              <Text style={[a.leading_snug]}>
+                <Trans>
+                  Select which languages you want your subscribed feeds to
+                  include. If none are selected, all languages will be shown.
+                </Trans>
+              </Text>
+
+              <Button
+                label={_(msg`Select content languages`)}
+                size="small"
+                color="secondary"
+                variant="solid"
+                onPress={onPressContentLanguages}
+                style={[a.justify_start, web({maxWidth: 400})]}>
+                <ButtonIcon
+                  icon={myLanguages.length > 0 ? CheckIcon : PlusIcon}
+                />
+                <ButtonText
+                  style={[t.atoms.text, a.text_md, a.flex_1, a.text_left]}
+                  numberOfLines={1}>
+                  {myLanguages.length > 0
+                    ? myLanguages
+                    : _(msg`Select languages`)}
+                </ButtonText>
+              </Button>
+            </View>
+          </SettingsList.Group>
+        </SettingsList.Container>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}