Some brand, some pwi (#2212)

* Add logo to left nav in logged out

* Protect last routes

* Hide links in left nav, hide nav

* Replace bottom bar for pwi

* Remove same links from drawer

* Hide reply prompt

* Allow search

src/Navigation.tsx

@@ -292,7 +292,11 @@ function HomeTabNavigator() {
         animationDuration: 250,
         contentStyle,
       }}>
-      <HomeTab.Screen name="Home" getComponent={() => HomeScreen} />
+      <HomeTab.Screen
+        name="Home"
+        getComponent={() => HomeScreen}
+        options={{requireAuth: true}}
+      />
       {commonScreens(HomeTab)}
     </HomeTab.Navigator>
   )
@@ -402,7 +406,7 @@ const FlatNavigator = () => {
       <Flat.Screen
         name="Home"
         getComponent={() => HomeScreen}
-        options={{title: title('Home')}}
+        options={{title: title('Home'), requireAuth: true}}
       />
       <Flat.Screen
         name="Search"
@@ -412,7 +416,7 @@ const FlatNavigator = () => {
       <Flat.Screen
         name="Feeds"
         getComponent={() => FeedsScreen}
-        options={{title: title('Feeds')}}
+        options={{title: title('Feeds'), requireAuth: true}}
       />
       <Flat.Screen
         name="Notifications"

src/view/screens/PostThread.tsx

@@ -24,11 +24,13 @@ import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {ErrorMessage} from '../com/util/error/ErrorMessage'
 import {CenteredView} from '../com/util/Views'
 import {useComposerControls} from '#/state/shell/composer'
+import {useSession} from '#/state/session'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
 export function PostThreadScreen({route}: Props) {
   const queryClient = useQueryClient()
   const {_} = useLingui()
+  const {hasSession} = useSession()
   const {fabMinimalShellTransform} = useMinimalShellMode()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {openComposer} = useComposerControls()
@@ -89,7 +91,7 @@ export function PostThreadScreen({route}: Props) {
           />
         )}
       </View>
-      {isMobile && canReply && (
+      {isMobile && canReply && hasSession && (
         <Animated.View
           style={[
             styles.prompt,

src/view/shell/Drawer.tsx

@@ -221,18 +221,16 @@ let DrawerContent = ({}: {}): React.ReactNode => {
             <NavSignupCard />
           )}
 
-          {hasSession && <InviteCodes />}
+          {hasSession ? (
-          {hasSession && <View style={{height: 10}} />}
-          <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
-          <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
-          {hasSession && (
-            <NotificationsMenuItem
-              isActive={isAtNotifications}
-              onPress={onPressNotifications}
-            />
-          )}
-          {hasSession && (
             <>
+              <InviteCodes />
+              <View style={{height: 10}} />
+              <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
+              <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
+              <NotificationsMenuItem
+                isActive={isAtNotifications}
+                onPress={onPressNotifications}
+              />
               <FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
               <ListsMenuItem onPress={onPressLists} />
               <ModerationMenuItem onPress={onPressModeration} />
@@ -242,6 +240,8 @@ let DrawerContent = ({}: {}): React.ReactNode => {
               />
               <SettingsMenuItem onPress={onPressSettings} />
             </>
+          ) : (
+            <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
           )}
 
           <View style={styles.smallSpacer} />

src/view/shell/NavSignupCard.tsx

@@ -5,11 +5,11 @@ 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'
+import {Logo} from '#/view/icons/Logo'
 
 let NavSignupCard = ({}: {}): React.ReactNode => {
   const {_} = useLingui()
@@ -35,10 +35,10 @@ let NavSignupCard = ({}: {}): React.ReactNode => {
         paddingTop: 6,
         marginBottom: 24,
       }}>
-      <DefaultAvatar type="user" size={48} />
+      <Logo width={48} />
 
-      <View style={{paddingTop: 12}}>
+      <View style={{paddingTop: 18}}>
-        <Text type="md" style={[pal.text, s.bold]}>
+        <Text type="md-bold" style={[pal.text]}>
           <Trans>Sign up or sign in to join the conversation</Trans>
         </Text>
       </View>

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

@@ -23,13 +23,19 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useModalControls} from '#/state/modals'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {emitSoftReset} from '#/state/events'
 import {useSession} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+import {Button} from '#/view/com/util/forms/Button'
+import {s} from 'lib/styles'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
@@ -46,6 +52,19 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const numUnreadNotifications = useUnreadNotifications()
   const {footerMinimalShellTransform} = useMinimalShellMode()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
+  const {requestSwitchToAccount} = useLoggedOutViewControls()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const showSignIn = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'none'})
+  }, [requestSwitchToAccount, closeAllActiveElements])
+
+  const showCreateAccount = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'new'})
+    // setShowLoggedOut(true)
+  }, [requestSwitchToAccount, closeAllActiveElements])
 
   const onPressTab = React.useCallback(
     (tab: TabOptions) => {
@@ -94,53 +113,52 @@ export function BottomBar({navigation}: BottomTabBarProps) {
       onLayout={e => {
         footerHeight.value = e.nativeEvent.layout.height
       }}>
-      <Btn
+      {hasSession ? (
-        testID="bottomBarHomeBtn"
-        icon={
-          isAtHome ? (
-            <HomeIconSolid
-              strokeWidth={4}
-              size={24}
-              style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
-            />
-          ) : (
-            <HomeIcon
-              strokeWidth={4}
-              size={24}
-              style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
-            />
-          )
-        }
-        onPress={onPressHome}
-        accessibilityRole="tab"
-        accessibilityLabel={_(msg`Home`)}
-        accessibilityHint=""
-      />
-      <Btn
-        testID="bottomBarSearchBtn"
-        icon={
-          isAtSearch ? (
-            <MagnifyingGlassIcon2Solid
-              size={25}
-              style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-              strokeWidth={1.8}
-            />
-          ) : (
-            <MagnifyingGlassIcon2
-              size={25}
-              style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-              strokeWidth={1.8}
-            />
-          )
-        }
-        onPress={onPressSearch}
-        accessibilityRole="search"
-        accessibilityLabel={_(msg`Search`)}
-        accessibilityHint=""
-      />
-
-      {hasSession && (
         <>
+          <Btn
+            testID="bottomBarHomeBtn"
+            icon={
+              isAtHome ? (
+                <HomeIconSolid
+                  strokeWidth={4}
+                  size={24}
+                  style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
+                />
+              ) : (
+                <HomeIcon
+                  strokeWidth={4}
+                  size={24}
+                  style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
+                />
+              )
+            }
+            onPress={onPressHome}
+            accessibilityRole="tab"
+            accessibilityLabel={_(msg`Home`)}
+            accessibilityHint=""
+          />
+          <Btn
+            testID="bottomBarSearchBtn"
+            icon={
+              isAtSearch ? (
+                <MagnifyingGlassIcon2Solid
+                  size={25}
+                  style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                  strokeWidth={1.8}
+                />
+              ) : (
+                <MagnifyingGlassIcon2
+                  size={25}
+                  style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                  strokeWidth={1.8}
+                />
+              )
+            }
+            onPress={onPressSearch}
+            accessibilityRole="search"
+            accessibilityLabel={_(msg`Search`)}
+            accessibilityHint=""
+          />
           <Btn
             testID="bottomBarFeedsBtn"
             icon={
@@ -230,6 +248,49 @@ export function BottomBar({navigation}: BottomTabBarProps) {
             accessibilityHint=""
           />
         </>
+      ) : (
+        <>
+          <View
+            style={{
+              width: '100%',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingTop: 14,
+              paddingBottom: 2,
+              paddingLeft: 14,
+              paddingRight: 6,
+              gap: 8,
+            }}>
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
+              <Logo width={28} />
+              <View style={{paddingTop: 4}}>
+                <Logotype width={80} />
+              </View>
+            </View>
+
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 4}}>
+              <Button
+                onPress={showCreateAccount}
+                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={showSignIn}
+                accessibilityHint={_(msg`Sign in`)}
+                accessibilityLabel={_(msg`Sign in`)}>
+                <Text type="md" style={[pal.text, s.bold]}>
+                  <Trans>Sign in</Trans>
+                </Text>
+              </Button>
+            </View>
+          </View>
+        </>
       )}
     </Animated.View>
   )

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

@@ -3,6 +3,9 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useNavigationState} from '@react-navigation/native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {getCurrentRoute, isTab} from 'lib/routes/helpers'
 import {styles} from './BottomBarStyles'
 import {clamp} from 'lib/numbers'
@@ -22,12 +25,33 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {useSession} from '#/state/session'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+import {Button} from '#/view/com/util/forms/Button'
+import {Text} from '#/view/com/util/text/Text'
+import {s} from 'lib/styles'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 
 export function BottomBarWeb() {
+  const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
   const {footerMinimalShellTransform} = useMinimalShellMode()
+  const {requestSwitchToAccount} = useLoggedOutViewControls()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const showSignIn = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'none'})
+  }, [requestSwitchToAccount, closeAllActiveElements])
+
+  const showCreateAccount = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'new'})
+    // setShowLoggedOut(true)
+  }, [requestSwitchToAccount, closeAllActiveElements])
 
   return (
     <Animated.View
@@ -38,79 +62,126 @@ export function BottomBarWeb() {
         {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
         footerMinimalShellTransform,
       ]}>
-      <NavItem routeName="Home" href="/">
+      {hasSession ? (
-        {({isActive}) => {
-          const Icon = isActive ? HomeIconSolid : HomeIcon
-          return (
-            <Icon
-              strokeWidth={4}
-              size={24}
-              style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
-            />
-          )
-        }}
-      </NavItem>
-      <NavItem routeName="Search" href="/search">
-        {({isActive}) => {
-          const Icon = isActive
-            ? MagnifyingGlassIcon2Solid
-            : MagnifyingGlassIcon2
-          return (
-            <Icon
-              size={25}
-              style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-              strokeWidth={1.8}
-            />
-          )
-        }}
-      </NavItem>
-
-      {hasSession && (
         <>
-          <NavItem routeName="Feeds" href="/feeds">
+          <NavItem routeName="Home" href="/">
             {({isActive}) => {
-              return (
+              const Icon = isActive ? HomeIconSolid : HomeIcon
-                <HashtagIcon
-                  size={22}
-                  style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
-                  strokeWidth={isActive ? 4 : 2.5}
-                />
-              )
-            }}
-          </NavItem>
-          <NavItem routeName="Notifications" href="/notifications">
-            {({isActive}) => {
-              const Icon = isActive ? BellIconSolid : BellIcon
               return (
                 <Icon
+                  strokeWidth={4}
                   size={24}
-                  strokeWidth={1.9}
+                  style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
-                  style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
                 />
               )
             }}
           </NavItem>
-          <NavItem
+          <NavItem routeName="Search" href="/search">
-            routeName="Profile"
-            href={
-              currentAccount
-                ? makeProfileLink({
-                    did: currentAccount.did,
-                    handle: currentAccount.handle,
-                  })
-                : '/'
-            }>
             {({isActive}) => {
-              const Icon = isActive ? UserIconSolid : UserIcon
+              const Icon = isActive
+                ? MagnifyingGlassIcon2Solid
+                : MagnifyingGlassIcon2
               return (
                 <Icon
-                  size={28}
+                  size={25}
-                  strokeWidth={1.5}
+                  style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                  style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
+                  strokeWidth={1.8}
                 />
               )
             }}
           </NavItem>
+
+          {hasSession && (
+            <>
+              <NavItem routeName="Feeds" href="/feeds">
+                {({isActive}) => {
+                  return (
+                    <HashtagIcon
+                      size={22}
+                      style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                      strokeWidth={isActive ? 4 : 2.5}
+                    />
+                  )
+                }}
+              </NavItem>
+              <NavItem routeName="Notifications" href="/notifications">
+                {({isActive}) => {
+                  const Icon = isActive ? BellIconSolid : BellIcon
+                  return (
+                    <Icon
+                      size={24}
+                      strokeWidth={1.9}
+                      style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                    />
+                  )
+                }}
+              </NavItem>
+              <NavItem
+                routeName="Profile"
+                href={
+                  currentAccount
+                    ? makeProfileLink({
+                        did: currentAccount.did,
+                        handle: currentAccount.handle,
+                      })
+                    : '/'
+                }>
+                {({isActive}) => {
+                  const Icon = isActive ? UserIconSolid : UserIcon
+                  return (
+                    <Icon
+                      size={28}
+                      strokeWidth={1.5}
+                      style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
+                    />
+                  )
+                }}
+              </NavItem>
+            </>
+          )}
+        </>
+      ) : (
+        <>
+          <View
+            style={{
+              width: '100%',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingTop: 14,
+              paddingBottom: 2,
+              paddingLeft: 14,
+              paddingRight: 6,
+              gap: 8,
+            }}>
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
+              <Logo width={32} />
+              <View style={{paddingTop: 4}}>
+                <Logotype width={80} />
+              </View>
+            </View>
+
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
+              <Button
+                onPress={showCreateAccount}
+                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={showSignIn}
+                accessibilityHint={_(msg`Sign in`)}
+                accessibilityLabel={_(msg`Sign in`)}>
+                <Text type="md" style={[pal.text, s.bold]}>
+                  <Trans>Sign in</Trans>
+                </Text>
+              </Button>
+            </View>
+          </View>
         </>
       )}
     </Animated.View>

src/view/shell/desktop/LeftNav.tsx

@@ -266,6 +266,10 @@ export function DesktopLeftNav() {
   const {isDesktop, isTablet} = useWebMediaQueries()
   const numUnread = useUnreadNotifications()
 
+  if (!hasSession && !isDesktop) {
+    return null
+  }
+
   return (
     <View
       style={[
@@ -282,40 +286,40 @@ export function DesktopLeftNav() {
         </View>
       ) : null}
 
-      <BackBtn />
-
-      <NavItem
-        href="/"
-        icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
-        iconFilled={
-          <HomeIconSolid
-            strokeWidth={4}
-            size={isDesktop ? 24 : 28}
-            style={pal.text}
-          />
-        }
-        label={_(msg`Home`)}
-      />
-      <NavItem
-        href="/search"
-        icon={
-          <MagnifyingGlassIcon2
-            strokeWidth={2}
-            size={isDesktop ? 24 : 26}
-            style={pal.text}
-          />
-        }
-        iconFilled={
-          <MagnifyingGlassIcon2Solid
-            strokeWidth={2}
-            size={isDesktop ? 24 : 26}
-            style={pal.text}
-          />
-        }
-        label={_(msg`Search`)}
-      />
       {hasSession && (
         <>
+          <BackBtn />
+
+          <NavItem
+            href="/"
+            icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
+            iconFilled={
+              <HomeIconSolid
+                strokeWidth={4}
+                size={isDesktop ? 24 : 28}
+                style={pal.text}
+              />
+            }
+            label={_(msg`Home`)}
+          />
+          <NavItem
+            href="/search"
+            icon={
+              <MagnifyingGlassIcon2
+                strokeWidth={2}
+                size={isDesktop ? 24 : 26}
+                style={pal.text}
+              />
+            }
+            iconFilled={
+              <MagnifyingGlassIcon2Solid
+                strokeWidth={2}
+                size={isDesktop ? 24 : 26}
+                style={pal.text}
+              />
+            }
+            label={_(msg`Search`)}
+          />
           <NavItem
             href="/feeds"
             icon={