[PWI] Shell (#1967)

* Sidebars

* Bottom bar

* Drawer

* Translate

* Spacing fix

* Fix responsive regression

* Fix nit

src/view/com/util/UserAvatar.tsx

@@ -43,7 +43,13 @@ interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
 
 const BLUR_AMOUNT = isWeb ? 5 : 100
 
-function DefaultAvatar({type, size}: {type: UserAvatarType; size: number}) {
+export function DefaultAvatar({
+  type,
+  size,
+}: {
+  type: UserAvatarType
+  size: number
+}) {
   if (type === 'algo') {
     // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
     return (

src/view/shell/Drawer.tsx

@@ -52,6 +52,7 @@ import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {emitSoftReset} from '#/state/events'
 import {useInviteCodesQuery} from '#/state/queries/invites'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
+import {NavSignupCard} from '#/view/shell/NavSignupCard'
 
 export function DrawerProfileCard({
   account,
@@ -112,7 +113,7 @@ export function DrawerContent() {
   const {track} = useAnalytics()
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
     useNavigationTabState()
-  const {currentAccount} = useSession()
+  const {hasSession, currentAccount} = useSession()
   const numUnreadNotifications = useUnreadNotifications()
 
   // events
@@ -218,18 +219,20 @@ export function DrawerContent() {
       ]}>
       <SafeAreaView style={s.flex1}>
         <ScrollView style={styles.main}>
+          {hasSession && currentAccount ? (
             <View style={{}}>
-            {currentAccount && (
               <DrawerProfileCard
                 account={currentAccount}
                 onPressProfile={onPressProfile}
               />
-            )}
             </View>
+          ) : (
+            <NavSignupCard />
+          )}
 
-          <InviteCodes style={{paddingLeft: 0}} />
+          {hasSession && <InviteCodes style={{paddingLeft: 0}} />}
 
-          <View style={{height: 10}} />
+          {hasSession && <View style={{height: 10}} />}
 
           <MenuItem
             icon={
@@ -275,6 +278,8 @@ export function DrawerContent() {
             bold={isAtHome}
             onPress={onPressHome}
           />
+
+          {hasSession && (
             <MenuItem
               icon={
                 isAtNotifications ? (
@@ -302,6 +307,8 @@ export function DrawerContent() {
               bold={isAtNotifications}
               onPress={onPressNotifications}
             />
+          )}
+
           <MenuItem
             icon={
               isAtFeeds ? (
@@ -324,6 +331,9 @@ export function DrawerContent() {
             bold={isAtFeeds}
             onPress={onPressMyFeeds}
           />
+
+          {hasSession && (
+            <>
               <MenuItem
                 icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
                 label={_(msg`Lists`)}
@@ -372,10 +382,13 @@ export function DrawerContent() {
                 accessibilityHint=""
                 onPress={onPressSettings}
               />
+            </>
+          )}
 
           <View style={styles.smallSpacer} />
           <View style={styles.smallSpacer} />
         </ScrollView>
+
         <View style={styles.footer}>
           <TouchableOpacity
             accessibilityRole="link"

src/view/shell/NavSignupCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
+import {DefaultAvatar} from '#/view/com/util/UserAvatar'
+import {Text} from '#/view/com/util/text/Text'
+import {Button} from '#/view/com/util/forms/Button'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+
+export function NavSignupCard() {
+  const {_} = useLingui()
+  const pal = usePalette('default')
+  const {setShowLoggedOut} = useLoggedOutViewControls()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const showLoggedOut = React.useCallback(() => {
+    closeAllActiveElements()
+    setShowLoggedOut(true)
+  }, [setShowLoggedOut, closeAllActiveElements])
+
+  return (
+    <View
+      style={{
+        alignItems: 'flex-start',
+        paddingTop: 6,
+        marginBottom: 24,
+      }}>
+      <DefaultAvatar type="user" size={48} />
+
+      <View style={{paddingTop: 12}}>
+        <Text type="md" style={[pal.text, s.bold]}>
+          <Trans>Sign up or sign in to join the conversation</Trans>
+        </Text>
+      </View>
+
+      <View style={{flexDirection: 'row', paddingTop: 12, gap: 8}}>
+        <Button
+          onPress={showLoggedOut}
+          accessibilityHint={_(msg`Sign up`)}
+          accessibilityLabel={_(msg`Sign up`)}>
+          <Text type="md" style={[{color: 'white'}, s.bold]}>
+            <Trans>Sign up</Trans>
+          </Text>
+        </Button>
+        <Button
+          type="default"
+          onPress={showLoggedOut}
+          accessibilityHint={_(msg`Sign in`)}
+          accessibilityLabel={_(msg`Sign in`)}>
+          <Text type="md" style={[pal.text, s.bold]}>
+            Sign in
+          </Text>
+        </Button>
+      </View>
+    </View>
+  )
+}

src/view/shell/bottom-bar/BottomBar.tsx

@@ -37,7 +37,7 @@ type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
 export function BottomBar({navigation}: BottomTabBarProps) {
   const {openModal} = useModalControls()
-  const {currentAccount} = useSession()
+  const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
   const queryClient = useQueryClient()
@@ -169,6 +169,9 @@ export function BottomBar({navigation}: BottomTabBarProps) {
         accessibilityLabel={_(msg`Feeds`)}
         accessibilityHint=""
       />
+
+      {hasSession && (
+        <>
           <Btn
             testID="bottomBarNotificationsBtn"
             icon={
@@ -235,6 +238,8 @@ export function BottomBar({navigation}: BottomTabBarProps) {
             accessibilityLabel={_(msg`Profile`)}
             accessibilityHint=""
           />
+        </>
+      )}
     </Animated.View>
   )
 }

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -24,7 +24,7 @@ import {CommonNavigatorParams} from 'lib/routes/types'
 import {useSession} from '#/state/session'
 
 export function BottomBarWeb() {
-  const {currentAccount} = useSession()
+  const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
   const {footerMinimalShellTransform} = useMinimalShellMode()
@@ -75,6 +75,9 @@ export function BottomBarWeb() {
           )
         }}
       </NavItem>
+
+      {hasSession && (
+        <>
           <NavItem routeName="Notifications" href="/notifications">
             {({isActive}) => {
               const Icon = isActive ? BellIconSolid : BellIcon
@@ -108,6 +111,8 @@ export function BottomBarWeb() {
               )
             }}
           </NavItem>
+        </>
+      )}
     </Animated.View>
   )
 }

src/view/shell/desktop/LeftNav.tsx

@@ -47,6 +47,7 @@ import {useFetchHandle} from '#/state/queries/handle'
 import {emitSoftReset} from '#/state/events'
 import {useQueryClient} from '@tanstack/react-query'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
+import {NavSignupCard} from '#/view/shell/NavSignupCard'
 
 function ProfileCard() {
   const {currentAccount} = useSession()
@@ -268,7 +269,7 @@ function ComposeBtn() {
 }
 
 export function DesktopLeftNav() {
-  const {currentAccount} = useSession()
+  const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isDesktop, isTablet} = useWebMediaQueries()
@@ -282,8 +283,16 @@ export function DesktopLeftNav() {
         pal.view,
         pal.border,
       ]}>
+      {hasSession ? (
         <ProfileCard />
+      ) : isDesktop ? (
+        <View style={{paddingHorizontal: 12}}>
+          <NavSignupCard />
+        </View>
+      ) : null}
+
       <BackBtn />
+
       <NavItem
         href="/"
         icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
@@ -332,6 +341,9 @@ export function DesktopLeftNav() {
         }
         label={_(msg`Feeds`)}
       />
+
+      {hasSession && (
+        <>
           <NavItem
             href="/notifications"
             count={numUnread}
@@ -423,7 +435,10 @@ export function DesktopLeftNav() {
             }
             label={_(msg`Settings`)}
           />
+
           <ComposeBtn />
+        </>
+      )}
     </View>
   )
 }

src/view/shell/desktop/RightNav.tsx

@@ -30,9 +30,21 @@ export function DesktopRightNav() {
 
   return (
     <View style={[styles.rightNav, pal.view]}>
-      {hasSession && <DesktopSearch />}
+      <DesktopSearch />
-      {hasSession && <DesktopFeeds />}
+
-      <View style={styles.message}>
+      {hasSession && (
+        <View style={{paddingTop: 18, marginBottom: 18}}>
+          <DesktopFeeds />
+        </View>
+      )}
+
+      <View
+        style={[
+          styles.message,
+          {
+            paddingTop: hasSession ? 0 : 18,
+          },
+        ]}>
         {isSandbox ? (
           <View style={[palError.view, styles.messageLine, s.p10]}>
             <Text type="md" style={[palError.text, s.bold]}>
@@ -41,6 +53,8 @@ export function DesktopRightNav() {
           </View>
         ) : undefined}
         <View style={[s.flexRow]}>
+          {hasSession && (
+            <>
               <TextLink
                 type="md"
                 style={pal.link}
@@ -53,6 +67,8 @@ export function DesktopRightNav() {
               <Text type="md" style={pal.textLight}>
                 &nbsp;&middot;&nbsp;
               </Text>
+            </>
+          )}
           <TextLink
             type="md"
             style={pal.link}
@@ -79,7 +95,8 @@ export function DesktopRightNav() {
           />
         </View>
       </View>
-      <InviteCodes />
+
+      {hasSession && <InviteCodes />}
     </View>
   )
 }

src/view/shell/desktop/Search.tsx

@@ -222,7 +222,6 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
     width: 300,
-    paddingBottom: 18,
   },
   search: {
     paddingHorizontal: 16,

src/view/shell/index.web.tsx

@@ -21,8 +21,8 @@ import {
   useSetDrawerOpen,
   useOnboardingState,
 } from '#/state/shell'
-import {useSession} from '#/state/session'
 import {useCloseAllActiveElements} from '#/state/util'
+import {useLoggedOutView} from '#/state/shell/logged-out'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -30,8 +30,8 @@ function ShellInner() {
   const onboardingState = useOnboardingState()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
-  const {hasSession} = useSession()
   const closeAllActiveElements = useCloseAllActiveElements()
+  const {showLoggedOut} = useLoggedOutView()
 
   useAuxClick()
 
@@ -42,7 +42,7 @@ function ShellInner() {
   }, [navigator, closeAllActiveElements])
 
   const showBottomBar = isMobile && !onboardingState.isActive
-  const showSideNavs = !isMobile && hasSession && !onboardingState.isActive
+  const showSideNavs = !isMobile && !onboardingState.isActive && !showLoggedOut
   return (
     <View style={[s.hContentRegion, {overflow: 'hidden'}]}>
       <View style={s.hContentRegion}>
@@ -50,16 +50,22 @@ function ShellInner() {
           <FlatNavigator />
         </ErrorBoundary>
       </View>
+
       {showSideNavs && (
         <>
           <DesktopLeftNav />
           <DesktopRightNav />
         </>
       )}
+
       <Composer winHeight={0} />
+
       {showBottomBar && <BottomBarWeb />}
+
       <ModalsContainer />
+
       <Lightbox />
+
       {!isDesktop && isDrawerOpen && (
         <TouchableOpacity
           onPress={() => setDrawerOpen(false)}