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, 67 insertions, 0 deletions

diff --git a/src/components/AppLanguageDropdown.tsx b/src/components/AppLanguageDropdown.tsx
new file mode 100644
index 000000000..dea9e66fb
--- /dev/null
+++ b/src/components/AppLanguageDropdown.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import {View} from 'react-native'
+import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
+
+import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {APP_LANGUAGES} from '#/locale/languages'
+import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {atoms as a, useTheme} from '#/alf'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
+
+export function AppLanguageDropdown() {
+  const t = useTheme()
+
+  const langPrefs = useLanguagePrefs()
+  const setLangPrefs = useLanguagePrefsApi()
+  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 (
+    <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>
+  )
+}