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/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -18,7 +18,7 @@ import {useModalControls} from '#/state/modals'
 import {useLabelerSubscriptionMutation} from '#/state/queries/labeler'
 import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
 import {usePreferencesQuery} from '#/state/queries/preferences'
-import {useSession} from '#/state/session'
+import {useRequireAuth, useSession} from '#/state/session'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useHaptics} from 'lib/haptics'
 import {useProfileShadow} from 'state/cache/profile-shadow'
@@ -64,6 +64,7 @@ let ProfileHeaderLabeler = ({
   const {currentAccount, hasSession} = useSession()
   const {openModal} = useModalControls()
   const {track} = useAnalytics()
+  const requireAuth = useRequireAuth()
   const playHaptic = useHaptics()
   const cantSubscribePrompt = Prompt.usePromptControl()
   const isSelf = currentAccount?.did === profile.did
@@ -125,27 +126,32 @@ let ProfileHeaderLabeler = ({
     })
   }, [track, openModal, profile])
 
-  const onPressSubscribe = React.useCallback(async () => {
-    if (!canSubscribe) {
-      cantSubscribePrompt.open()
-      return
-    }
-    try {
-      await toggleSubscription({
-        did: profile.did,
-        subscribe: !isSubscribed,
-      })
-    } catch (e: any) {
-      // setSubscriptionError(e.message)
-      logger.error(`Failed to subscribe to labeler`, {message: e.message})
-    }
-  }, [
-    toggleSubscription,
-    isSubscribed,
-    profile,
-    canSubscribe,
-    cantSubscribePrompt,
-  ])
+  const onPressSubscribe = React.useCallback(
+    () =>
+      requireAuth(async () => {
+        if (!canSubscribe) {
+          cantSubscribePrompt.open()
+          return
+        }
+        try {
+          await toggleSubscription({
+            did: profile.did,
+            subscribe: !isSubscribed,
+          })
+        } catch (e: any) {
+          // setSubscriptionError(e.message)
+          logger.error(`Failed to subscribe to labeler`, {message: e.message})
+        }
+      }),
+    [
+      requireAuth,
+      toggleSubscription,
+      isSubscribed,
+      profile,
+      canSubscribe,
+      cantSubscribePrompt,
+    ],
+  )
 
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,
@@ -184,7 +190,6 @@ let ProfileHeaderLabeler = ({
                     ? _(msg`Unsubscribe from this labeler`)
                     : _(msg`Subscribe to this labeler`)
                 }
-                disabled={!hasSession}
                 onPress={onPressSubscribe}>
                 {state => (
                   <View

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -220,7 +220,6 @@ let ProfileHeaderStandard = ({
                     ? _(msg`Unfollow ${profile.handle}`)
                     : _(msg`Follow ${profile.handle}`)
                 }
-                disabled={!hasSession}
                 onPress={
                   profile.viewer?.following ? onPressUnfollow : onPressFollow
                 }

src/screens/Signup/index.tsx

@@ -22,6 +22,7 @@ import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {InlineLinkText} from '#/components/Link'
@@ -212,10 +213,14 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
 
             <Divider />
 
-            <View style={[a.w_full, a.py_lg]}>
-              <Text style={[t.atoms.text_contrast_medium]}>
+            <View
+              style={[a.w_full, a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
+              <AppLanguageDropdown />
+              <Text style={[t.atoms.text, !gtMobile && a.text_md]}>
                 <Trans>Having trouble?</Trans>{' '}
-                <InlineLinkText to={FEEDBACK_FORM_URL({email: state.email})}>
+                <InlineLinkText
+                  to={FEEDBACK_FORM_URL({email: state.email})}
+                  style={[!gtMobile && a.text_md]}>
                   <Trans>Contact support</Trans>
                 </InlineLinkText>
               </Text>