about summary refs log tree commit diff
path: root/src/view/shell
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/shell')
-rw-r--r--src/view/shell/Drawer.tsx22
-rw-r--r--src/view/shell/NavSignupCard.tsx8
-rw-r--r--src/view/shell/bottom-bar/BottomBar.tsx155
-rw-r--r--src/view/shell/bottom-bar/BottomBarWeb.tsx185
-rw-r--r--src/view/shell/desktop/LeftNav.tsx66
5 files changed, 286 insertions, 150 deletions
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 4fb8565e8..e5d2a3863 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -221,18 +221,16 @@ let DrawerContent = ({}: {}): React.ReactNode => {
             <NavSignupCard />
           )}
 
-          {hasSession && <InviteCodes />}
-          {hasSession && <View style={{height: 10}} />}
-          <SearchMenuItem isActive={isAtSearch} onPress={onPressSearch} />
-          <HomeMenuItem isActive={isAtHome} onPress={onPressHome} />
-          {hasSession && (
-            <NotificationsMenuItem
-              isActive={isAtNotifications}
-              onPress={onPressNotifications}
-            />
-          )}
-          {hasSession && (
+          {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} />
diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx
index 8c0e2075d..bae37e838 100644
--- a/src/view/shell/NavSignupCard.tsx
+++ b/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}}>
-        <Text type="md" style={[pal.text, s.bold]}>
+      <View style={{paddingTop: 18}}>
+        <Text type="md-bold" style={[pal.text]}>
           <Trans>Sign up or sign in to join the conversation</Trans>
         </Text>
       </View>
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index ef147f27e..926e08ce6 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/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,54 +113,53 @@ export function BottomBar({navigation}: BottomTabBarProps) {
       onLayout={e => {
         footerHeight.value = e.nativeEvent.layout.height
       }}>
-      <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=""
-      />
-
-      {hasSession && (
+      {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={
               isAtFeeds ? (
@@ -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>
   )
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx
index 6ed0a99f5..5ae657508 100644
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/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="/">
-        {({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 && (
+      {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">
+          <NavItem routeName="Home" href="/">
             {({isActive}) => {
-              const Icon = isActive ? BellIconSolid : BellIcon
+              const Icon = isActive ? HomeIconSolid : HomeIcon
               return (
                 <Icon
+                  strokeWidth={4}
                   size={24}
-                  strokeWidth={1.9}
-                  style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                  style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                 />
               )
             }}
           </NavItem>
-          <NavItem
-            routeName="Profile"
-            href={
-              currentAccount
-                ? makeProfileLink({
-                    did: currentAccount.did,
-                    handle: currentAccount.handle,
-                  })
-                : '/'
-            }>
+          <NavItem routeName="Search" href="/search">
             {({isActive}) => {
-              const Icon = isActive ? UserIconSolid : UserIcon
+              const Icon = isActive
+                ? MagnifyingGlassIcon2Solid
+                : MagnifyingGlassIcon2
               return (
                 <Icon
-                  size={28}
-                  strokeWidth={1.5}
-                  style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
+                  size={25}
+                  style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                  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>
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 8078df802..5d1c2a20f 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/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 />
+      {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}
+          <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`)}
           />
-        }
-        iconFilled={
-          <MagnifyingGlassIcon2Solid
-            strokeWidth={2}
-            size={isDesktop ? 24 : 26}
-            style={pal.text}
+          <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`)}
           />
-        }
-        label={_(msg`Search`)}
-      />
-      {hasSession && (
-        <>
           <NavItem
             href="/feeds"
             icon={
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 18:10:02 +0000