diff options
| -rw-r--r-- | src/Navigation.tsx | 10 | ||||
| -rw-r--r-- | src/view/screens/PostThread.tsx | 4 | ||||
| -rw-r--r-- | src/view/shell/Drawer.tsx | 22 | ||||
| -rw-r--r-- | src/view/shell/NavSignupCard.tsx | 8 | ||||
| -rw-r--r-- | src/view/shell/bottom-bar/BottomBar.tsx | 155 | ||||
| -rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 185 | ||||
| -rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 66 |
7 files changed, 296 insertions, 154 deletions
diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 252699e53..c9f927219 100644 --- a/src/Navigation.tsx +++ b/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" diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 8e9e399f5..9f50c8b73 100644 --- a/src/view/screens/PostThread.tsx +++ b/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, 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={ |