PWI improvements (#3489)

* Enable home and feeds on the PWI

* Add global SigninDialog to drive useRequireAuth()

* Tweak desktop styles

* Make the logo in leftnav PWI a clickable home link

* Add label

* Improve dialog on web

* Fix query key

* Go to home after signout from settings screen

* Filter out feeds from the discover listing for logged out users which are known to break without auth

* Update profile header follow/subscribe to give signin prompt

* Show profile feeds tabs on pwi

* Add language selector to account creation footer and pwi left nav desktop

---------

Co-authored-by: dan <dan.abramov@gmail.com>

src/view/com/auth/SplashScreen.tsx

@@ -1,19 +1,15 @@
 import React from 'react'
 import {View} from 'react-native'
-import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {sanitizeAppLanguageSetting} from '#/locale/helpers'
-import {APP_LANGUAGES} from '#/locale/languages'
-import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {atoms as a, useTheme} from '#/alf'
+import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
-import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {Text} from '#/components/Typography'
 import {CenteredView} from '../util/Views'
 
@@ -27,22 +23,8 @@ export const SplashScreen = ({
   const t = useTheme()
   const {_} = useLingui()
 
-  const langPrefs = useLanguagePrefs()
-  const setLangPrefs = useLanguagePrefsApi()
   const insets = useSafeAreaInsets()
 
-  const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
-
-  const onChangeAppLanguage = React.useCallback(
-    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
-      if (!value) return
-      if (sanitizedLang !== value) {
-        setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
-      }
-    },
-    [sanitizedLang, setLangPrefs],
-  )
-
   return (
     <CenteredView style={[a.h_full, a.flex_1]}>
       <ErrorBoundary>
@@ -99,43 +81,7 @@ export const SplashScreen = ({
             a.justify_center,
             a.align_center,
           ]}>
-          <View style={a.relative}>
-            <RNPickerSelect
-              placeholder={{}}
-              value={sanitizedLang}
-              onValueChange={onChangeAppLanguage}
-              items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
-                label: l.name,
-                value: l.code2,
-                key: l.code2,
-              }))}
-              useNativeAndroidPickerStyle={false}
-              style={{
-                inputAndroid: {
-                  color: t.atoms.text_contrast_medium.color,
-                  fontSize: 16,
-                  paddingRight: 12 + 4,
-                },
-                inputIOS: {
-                  color: t.atoms.text.color,
-                  fontSize: 16,
-                  paddingRight: 12 + 4,
-                },
-              }}
-            />
-
-            <View
-              style={[
-                a.absolute,
-                a.inset_0,
-                {left: 'auto'},
-                {pointerEvents: 'none'},
-                a.align_center,
-                a.justify_center,
-              ]}>
-              <ChevronDown fill={t.atoms.text.color} size="xs" />
-            </View>
-          </View>
+          <AppLanguageDropdown />
         </View>
         <View style={{height: insets.bottom}} />
       </ErrorBoundary>