[PWI] Shell (#1967)

* Sidebars

* Bottom bar

* Drawer

* Translate

* Spacing fix

* Fix responsive regression

* Fix nit
This commit is contained in:
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

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}>
<View style={{}}>
{currentAccount && (
{hasSession && currentAccount ? (
<View style={{}}>
<DrawerProfileCard
account={currentAccount}
onPressProfile={onPressProfile}
/>
)}
</View>
</View>
) : (
<NavSignupCard />
)}
<InviteCodes style={{paddingLeft: 0}} />
{hasSession && <InviteCodes style={{paddingLeft: 0}} />}
<View style={{height: 10}} />
{hasSession && <View style={{height: 10}} />}
<MenuItem
icon={
@ -275,33 +278,37 @@ export function DrawerContent() {
bold={isAtHome}
onPress={onPressHome}
/>
<MenuItem
icon={
isAtNotifications ? (
<BellIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
/>
) : (
<BellIcon
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
/>
)
}
label={_(msg`Notifications`)}
accessibilityLabel={_(msg`Notifications`)}
accessibilityHint={
numUnreadNotifications === ''
? ''
: `${numUnreadNotifications} unread`
}
count={numUnreadNotifications}
bold={isAtNotifications}
onPress={onPressNotifications}
/>
{hasSession && (
<MenuItem
icon={
isAtNotifications ? (
<BellIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
/>
) : (
<BellIcon
style={pal.text as StyleProp<ViewStyle>}
size="24"
strokeWidth={1.7}
/>
)
}
label={_(msg`Notifications`)}
accessibilityLabel={_(msg`Notifications`)}
accessibilityHint={
numUnreadNotifications === ''
? ''
: `${numUnreadNotifications} unread`
}
count={numUnreadNotifications}
bold={isAtNotifications}
onPress={onPressNotifications}
/>
)}
<MenuItem
icon={
isAtFeeds ? (
@ -324,58 +331,64 @@ export function DrawerContent() {
bold={isAtFeeds}
onPress={onPressMyFeeds}
/>
<MenuItem
icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
label={_(msg`Lists`)}
accessibilityLabel={_(msg`Lists`)}
accessibilityHint=""
onPress={onPressLists}
/>
<MenuItem
icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
label={_(msg`Moderation`)}
accessibilityLabel={_(msg`Moderation`)}
accessibilityHint=""
onPress={onPressModeration}
/>
<MenuItem
icon={
isAtMyProfile ? (
<UserIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.5}
/>
) : (
<UserIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.5}
/>
)
}
label={_(msg`Profile`)}
accessibilityLabel={_(msg`Profile`)}
accessibilityHint=""
onPress={onPressProfile}
/>
<MenuItem
icon={
<CogIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.75}
{hasSession && (
<>
<MenuItem
icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
label={_(msg`Lists`)}
accessibilityLabel={_(msg`Lists`)}
accessibilityHint=""
onPress={onPressLists}
/>
}
label={_(msg`Settings`)}
accessibilityLabel={_(msg`Settings`)}
accessibilityHint=""
onPress={onPressSettings}
/>
<MenuItem
icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
label={_(msg`Moderation`)}
accessibilityLabel={_(msg`Moderation`)}
accessibilityHint=""
onPress={onPressModeration}
/>
<MenuItem
icon={
isAtMyProfile ? (
<UserIconSolid
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.5}
/>
) : (
<UserIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.5}
/>
)
}
label={_(msg`Profile`)}
accessibilityLabel={_(msg`Profile`)}
accessibilityHint=""
onPress={onPressProfile}
/>
<MenuItem
icon={
<CogIcon
style={pal.text as StyleProp<ViewStyle>}
size="26"
strokeWidth={1.75}
/>
}
label={_(msg`Settings`)}
accessibilityLabel={_(msg`Settings`)}
accessibilityHint=""
onPress={onPressSettings}
/>
</>
)}
<View style={styles.smallSpacer} />
<View style={styles.smallSpacer} />
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity
accessibilityRole="link"