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>

1 files changed, 2 insertions, 54 deletions

diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx
index 7a2ee16cf..f905e1e8d 100644
--- a/src/view/com/auth/SplashScreen.web.tsx
+++ b/src/view/com/auth/SplashScreen.web.tsx
@@ -4,16 +4,13 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 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 {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 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 {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {CenteredView} from '../util/Views'
@@ -131,23 +128,6 @@ export const SplashScreen = ({
 function Footer() {
   const t = useTheme()
 
-  const langPrefs = useLanguagePrefs()
-  const setLangPrefs = useLanguagePrefsApi()
-
-  const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
-
-  const onChangeAppLanguage = React.useCallback(
-    (ev: React.ChangeEvent<HTMLSelectElement>) => {
-      const value = ev.target.value
-
-      if (!value) return
-      if (sanitizedLang !== value) {
-        setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
-      }
-    },
-    [sanitizedLang, setLangPrefs],
-  )
-
   return (
     <View
       style={[
@@ -174,39 +154,7 @@ function Footer() {
 
       <View style={a.flex_1} />
 
-      <View style={[a.flex_row, a.gap_sm, a.align_center, a.flex_shrink]}>
-        <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
-          {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
-        </Text>
-        <ChevronDown
-          fill={t.atoms.text.color}
-          size="xs"
-          style={a.flex_shrink}
-        />
-
-        <select
-          value={sanitizedLang}
-          onChange={onChangeAppLanguage}
-          style={{
-            cursor: 'pointer',
-            MozAppearance: 'none',
-            WebkitAppearance: 'none',
-            appearance: 'none',
-            position: 'absolute',
-            inset: 0,
-            width: '100%',
-            color: 'transparent',
-            background: 'transparent',
-            border: 0,
-            padding: 0,
-          }}>
-          {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
-            <option key={l.code2} value={l.code2}>
-              {l.name}
-            </option>
-          ))}
-        </select>
-      </View>
+      <AppLanguageDropdown />
     </View>
   )
 }