[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>

src/view/screens/AppPasswords.tsx

@@ -12,6 +12,7 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
+import {IS_INTERNAL} from '#/lib/app-info'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams} from '#/lib/routes/types'
@@ -28,14 +29,17 @@ import {Text} from '#/view/com/util/text/Text'
 import * as Toast from '#/view/com/util/Toast'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {CenteredView} from '#/view/com/util/Views'
+import {AppPasswordsScreen as NewAppPasswordsScreen} from '#/screens/Settings/AppPasswords'
 import {atoms as a} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import * as Layout from '#/components/Layout'
 import * as Prompt from '#/components/Prompt'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
-export function AppPasswords({}: Props) {
-  return (
+export function AppPasswords(props: Props) {
+  return IS_INTERNAL ? (
+    <NewAppPasswordsScreen {...props} />
+  ) : (
     <Layout.Screen testID="AppPasswordsScreen">
       <AppPasswordsInner />
     </Layout.Screen>

src/view/screens/LanguageSettings.tsx

@@ -10,6 +10,7 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
+import {IS_INTERNAL} from '#/lib/app-info'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -22,11 +23,20 @@ import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {CenteredView} from '#/view/com/util/Views'
+import {LanguageSettingsScreen as NewLanguageSettingsScreen} from '#/screens/Settings/LanguageSettings'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
 
-export function LanguageSettingsScreen(_props: Props) {
+export function LanguageSettingsScreen(props: Props) {
+  return IS_INTERNAL ? (
+    <NewLanguageSettingsScreen {...props} />
+  ) : (
+    <LegacyLanguageSettingsScreen {...props} />
+  )
+}
+
+function LegacyLanguageSettingsScreen(_props: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const langPrefs = useLanguagePrefs()

src/view/screens/NotificationsSettings.tsx

@@ -1,89 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {AllNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
-import {useNotificationsSettingsMutation} from '#/state/queries/notifications/settings'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {ScrollView} from '#/view/com/util/Views'
-import {atoms as a, useTheme} from '#/alf'
-import {Admonition} from '#/components/Admonition'
-import {Error} from '#/components/Error'
-import * as Toggle from '#/components/forms/Toggle'
-import * as Layout from '#/components/Layout'
-import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
-
-type Props = NativeStackScreenProps<AllNavigatorParams, 'NotificationsSettings'>
-export function NotificationsSettingsScreen({}: Props) {
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const {data, isError: isQueryError, refetch} = useNotificationFeedQuery()
-  const serverPriority = data?.pages.at(0)?.priority
-
-  const {
-    mutate: onChangePriority,
-    isPending: isMutationPending,
-    variables,
-  } = useNotificationsSettingsMutation()
-
-  const priority = isMutationPending
-    ? variables[0] === 'enabled'
-    : serverPriority
-
-  return (
-    <Layout.Screen>
-      <ScrollView stickyHeaderIndices={[0]}>
-        <ViewHeader
-          title={_(msg`Notification Settings`)}
-          showOnDesktop
-          showBorder
-        />
-        {isQueryError ? (
-          <Error
-            title={_(msg`Oops!`)}
-            message={_(msg`Something went wrong!`)}
-            onRetry={refetch}
-            sideBorders={false}
-          />
-        ) : (
-          <View style={[a.p_lg, a.gap_md]}>
-            <Text style={[a.text_lg, a.font_bold]}>
-              <FontAwesomeIcon icon="flask" style={t.atoms.text} />{' '}
-              <Trans>Notification filters</Trans>
-            </Text>
-            <Toggle.Group
-              label={_(msg`Priority notifications`)}
-              type="checkbox"
-              values={priority ? ['enabled'] : []}
-              onChange={onChangePriority}
-              disabled={typeof priority !== 'boolean' || isMutationPending}>
-              <View>
-                <Toggle.Item
-                  name="enabled"
-                  label={_(msg`Enable priority notifications`)}
-                  style={[a.justify_between, a.py_sm]}>
-                  <Toggle.LabelText>
-                    <Trans>Enable priority notifications</Trans>
-                  </Toggle.LabelText>
-                  {!data ? <Loader size="md" /> : <Toggle.Platform />}
-                </Toggle.Item>
-              </View>
-            </Toggle.Group>
-            <Admonition type="warning" style={[a.mt_sm]}>
-              <Trans>
-                Experimental: When this preference is enabled, you'll only
-                receive reply and quote notifications from users you follow.
-                We'll continue to add more controls here over time.
-              </Trans>
-            </Admonition>
-          </View>
-        )}
-      </ScrollView>
-    </Layout.Screen>
-  )
-}

src/view/screens/PreferencesExternalEmbeds.tsx

@@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
+import {IS_INTERNAL} from '#/lib/app-info'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -19,6 +20,7 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
+import {ExternalMediaPreferencesScreen} from '#/screens/Settings/ExternalMediaPreferences'
 import {atoms as a} from '#/alf'
 import * as Layout from '#/components/Layout'
 
@@ -26,7 +28,15 @@ type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'PreferencesExternalEmbeds'
 >
-export function PreferencesExternalEmbeds({}: Props) {
+export function PreferencesExternalEmbeds(props: Props) {
+  return IS_INTERNAL ? (
+    <ExternalMediaPreferencesScreen {...props} />
+  ) : (
+    <LegacyPreferencesExternalEmbeds {...props} />
+  )
+}
+
+function LegacyPreferencesExternalEmbeds({}: Props) {
   const pal = usePalette('default')
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrMobile} = useWebMediaQueries()

src/view/screens/PreferencesFollowingFeed.tsx

@@ -4,6 +4,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {IS_INTERNAL} from '#/lib/app-info'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -16,6 +17,7 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
+import {FollowingFeedPreferencesScreen} from '#/screens/Settings/FollowingFeedPreferences'
 import {atoms as a} from '#/alf'
 import * as Layout from '#/components/Layout'
 
@@ -23,7 +25,15 @@ type Props = NativeStackScreenProps<
   CommonNavigatorParams,
   'PreferencesFollowingFeed'
 >
-export function PreferencesFollowingFeed({}: Props) {
+export function PreferencesFollowingFeed(props: Props) {
+  return IS_INTERNAL ? (
+    <FollowingFeedPreferencesScreen {...props} />
+  ) : (
+    <LegacyPreferencesFollowingFeed {...props} />
+  )
+}
+
+function LegacyPreferencesFollowingFeed({}: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isTabletOrMobile} = useWebMediaQueries()

src/view/screens/PreferencesThreads.tsx

@@ -4,6 +4,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {IS_INTERNAL} from '#/lib/app-info'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -17,11 +18,20 @@ import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
+import {ThreadPreferencesScreen} from '#/screens/Settings/ThreadPreferences'
 import {atoms as a} from '#/alf'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
-export function PreferencesThreads({}: Props) {
+export function PreferencesThreads(props: Props) {
+  return IS_INTERNAL ? (
+    <ThreadPreferencesScreen {...props} />
+  ) : (
+    <LegacyPreferencesThreads {...props} />
+  )
+}
+
+function LegacyPreferencesThreads({}: Props) {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isTabletOrMobile} = useWebMediaQueries()