zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[PWI] Shell (#1967) 

* Sidebars

* Bottom bar

* Drawer

* Translate

* Spacing fix

* Fix responsive regression

* Fix nit
zio/stable
Eric Bailey 2023-11-21 16:58:13 -06:00 committed by GitHub
parent 4c4ba553bd
commit 47d2d3cbf2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 416 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/view/com/util/UserAvatar.tsx
View File

@ -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 (

23
src/view/shell/Drawer.tsx
View File

@ -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"

61
src/view/shell/NavSignupCard.tsx 100644
View File

@ -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>
)
}

7
src/view/shell/bottom-bar/BottomBar.tsx
View File

@ -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>
)
}

7
src/view/shell/bottom-bar/BottomBarWeb.tsx
View File

@ -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>
)
}

17
src/view/shell/desktop/LeftNav.tsx
View File

@ -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>
)
}

25
src/view/shell/desktop/RightNav.tsx
View File

@ -30,9 +30,21 @@ export function DesktopRightNav() {
return (
<View style={[styles.rightNav, pal.view]}>
{hasSession && <DesktopSearch />}
{hasSession && <DesktopFeeds />}
<View style={styles.message}>
<DesktopSearch />
{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>
)
}

1
src/view/shell/desktop/Search.tsx
View File

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

12
src/view/shell/index.web.tsx
View File

@ -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)}