acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

lint (#9802)

Browse Source
This commit is contained in:
Spence Pope
2026-01-30 15:48:31 -05:00
committed by GitHub
parent e2a56b0191
commit 45d6e50eb4
2 changed files with 209 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/bottom-bar/BottomBar.tsx
+32 -52
View File
@@ -15,7 +15,6 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder' import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder'
import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform' import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState' import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {clamp} from '#/lib/numbers' import {clamp} from '#/lib/numbers'
import {getTabState, TabState} from '#/lib/routes/helpers' import {getTabState, TabState} from '#/lib/routes/helpers'
import {emitSoftReset} from '#/state/events' import {emitSoftReset} from '#/state/events'
@@ -57,7 +56,7 @@ type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
export function BottomBar({navigation}: BottomTabBarProps) { export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession() const {hasSession, currentAccount} = useSession()
const pal = usePalette('default') const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const safeAreaInsets = useSafeAreaInsets() const safeAreaInsets = useSafeAreaInsets()
const {footerHeight} = useShellLayout() const {footerHeight} = useShellLayout()
@@ -145,8 +144,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
<Animated.View <Animated.View
style={[ style={[
styles.bottomBar, styles.bottomBar,
pal.view, t.atoms.bg,
hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border, hideBorder
? {borderColor: t.atoms.bg.backgroundColor}
: t.atoms.border_contrast_low,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)}, {paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
footerMinimalShellTransform, footerMinimalShellTransform,
]} ]}
@@ -161,12 +162,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtHome ? ( isAtHome ? (
<HomeFilled <HomeFilled
width={iconWidth + 1} width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/> />
) : ( ) : (
<Home <Home
width={iconWidth + 1} width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/> />
) )
} }
@@ -180,13 +181,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtSearch ? ( isAtSearch ? (
<MagnifyingGlassFilled <MagnifyingGlassFilled
width={iconWidth + 2} width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/> />
) : ( ) : (
<MagnifyingGlass <MagnifyingGlass
testID="bottomBarSearchBtn" testID="bottomBarSearchBtn"
width={iconWidth + 2} width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/> />
) )
} }
@@ -201,12 +202,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtMessages ? ( isAtMessages ? (
<MessageFilled <MessageFilled
width={iconWidth - 1} width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
/> />
) : ( ) : (
<Message <Message
width={iconWidth - 1} width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
/> />
) )
} }
@@ -233,12 +234,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtNotifications ? ( isAtNotifications ? (
<BellFilled <BellFilled
width={iconWidth} width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/> />
) : ( ) : (
<Bell <Bell
width={iconWidth} width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]} style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/> />
) )
} }
@@ -262,49 +263,28 @@ export function BottomBar({navigation}: BottomTabBarProps) {
testID="bottomBarProfileBtn" testID="bottomBarProfileBtn"
icon={ icon={
<View style={styles.ctrlIconSizingWrapper}> <View style={styles.ctrlIconSizingWrapper}>
{isAtMyProfile ? ( <View
<View style={[
style={[ styles.ctrlIcon,
styles.ctrlIcon, styles.profileIcon,
pal.text, isAtMyProfile && [
styles.profileIcon,
styles.onProfile, styles.onProfile,
{ {
borderColor: pal.text.color, borderColor: t.atoms.text.color,
borderWidth: live ? 0 : 1, borderWidth: live ? 0 : 1,
}, },
]}> ],
<UserAvatar ]}>
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar} <UserAvatar
size={iconWidth - 2} avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
// See https://github.com/bluesky-social/social-app/pull/1801: size={iconWidth - (isAtMyProfile ? 3 : 2)}
usePlainRNImage={true} // See https://github.com/bluesky-social/social-app/pull/1801:
type={profile?.associated?.labeler ? 'labeler' : 'user'} usePlainRNImage={true}
live={live} type={profile?.associated?.labeler ? 'labeler' : 'user'}
hideLiveBadge live={live}
/> hideLiveBadge
</View> />
) : ( </View>
<View
style={[
styles.ctrlIcon,
pal.text,
styles.profileIcon,
{
borderWidth: live ? 0 : 1,
},
]}>
<UserAvatar
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
size={iconWidth - 2}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
live={live}
hideLiveBadge
/>
</View>
)}
</View> </View>
} }
onPress={onPressProfile} onPress={onPressProfile}
@@ -332,7 +312,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={{flexDirection: 'row', alignItems: 'center', gap: 8}}> style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
<Logo width={28} /> <Logo width={28} />
<View style={{paddingTop: 4}}> <View style={{paddingTop: 4}}>
<Logotype width={80} fill={pal.text.color} /> <Logotype width={80} fill={t.atoms.text.color} />
</View> </View>
</View> </View>
src/view/shell/bottom-bar/BottomBarWeb.tsx
+177 -155
View File
@@ -12,15 +12,19 @@ import {makeProfileLink} from '#/lib/routes/links'
import {type CommonNavigatorParams} from '#/lib/routes/types' import {type CommonNavigatorParams} from '#/lib/routes/types'
import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations' import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {useShellLayout} from '#/state/shell/shell-layout' import {useShellLayout} from '#/state/shell/shell-layout'
import {useCloseAllActiveElements} from '#/state/util' import {useCloseAllActiveElements} from '#/state/util'
import {Link} from '#/view/com/util/Link' import {Link} from '#/view/com/util/Link'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {Logo} from '#/view/icons/Logo' import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype' import {Logotype} from '#/view/icons/Logotype'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button' import {Button, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
import { import {
Bell_Filled_Corner0_Rounded as BellFilled, Bell_Filled_Corner0_Rounded as BellFilled,
Bell_Stroke2_Corner0_Rounded as Bell, Bell_Stroke2_Corner0_Rounded as Bell,
@@ -37,10 +41,6 @@ import {
Message_Stroke2_Corner0_Rounded as Message, Message_Stroke2_Corner0_Rounded as Message,
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
} from '#/components/icons/Message' } from '#/components/icons/Message'
import {
UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
UserCircle_Stroke2_Corner0_Rounded as UserCircle,
} from '#/components/icons/UserCircle'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {styles} from './BottomBarStyles' import {styles} from './BottomBarStyles'
@@ -53,6 +53,8 @@ export function BottomBarWeb() {
const closeAllActiveElements = useCloseAllActiveElements() const closeAllActiveElements = useCloseAllActiveElements()
const {footerHeight} = useShellLayout() const {footerHeight} = useShellLayout()
const hideBorder = useHideBottomBarBorder() const hideBorder = useHideBottomBarBorder()
const accountSwitchControl = useDialogControl()
const {data: profile} = useProfileQuery({did: currentAccount?.did})
const iconWidth = 26 const iconWidth = 26
const unreadMessageCount = useUnreadMessageCount() const unreadMessageCount = useUnreadMessageCount()
@@ -69,158 +71,176 @@ export function BottomBarWeb() {
// setShowLoggedOut(true) // setShowLoggedOut(true)
}, [requestSwitchToAccount, closeAllActiveElements]) }, [requestSwitchToAccount, closeAllActiveElements])
return ( const onLongPressProfile = React.useCallback(() => {
<Animated.View accountSwitchControl.open()
role="navigation" }, [accountSwitchControl])
style={[
styles.bottomBar,
styles.bottomBarWeb,
t.atoms.bg,
hideBorder
? {borderColor: t.atoms.bg.backgroundColor}
: t.atoms.border_contrast_low,
footerMinimalShellTransform,
]}
onLayout={event => footerHeight.set(event.nativeEvent.layout.height)}>
{hasSession ? (
<>
<NavItem routeName="Home" href="/">
{({isActive}) => {
const Icon = isActive ? HomeFilled : Home
return (
<Icon
aria-hidden={true}
width={iconWidth + 1}
style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/>
)
}}
</NavItem>
<NavItem routeName="Search" href="/search">
{({isActive}) => {
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
return (
<Icon
aria-hidden={true}
width={iconWidth + 2}
style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/>
)
}}
</NavItem>
{hasSession && ( return (
<> <>
<NavItem <SwitchAccountDialog control={accountSwitchControl} />
routeName="Messages"
href="/messages" <Animated.View
notificationCount={unreadMessageCount.numUnread} role="navigation"
hasNew={unreadMessageCount.hasNew}> style={[
{({isActive}) => { styles.bottomBar,
const Icon = isActive ? MessageFilled : Message styles.bottomBarWeb,
return ( t.atoms.bg,
<Icon hideBorder
aria-hidden={true} ? {borderColor: t.atoms.bg.backgroundColor}
width={iconWidth - 1} : t.atoms.border_contrast_low,
style={[ footerMinimalShellTransform,
styles.ctrlIcon, ]}
t.atoms.text, onLayout={event => footerHeight.set(event.nativeEvent.layout.height)}>
styles.messagesIcon, {hasSession ? (
]} <>
/> <NavItem routeName="Home" href="/">
) {({isActive}) => {
}} const Icon = isActive ? HomeFilled : Home
</NavItem> return (
<NavItem <Icon
routeName="Notifications" aria-hidden={true}
href="/notifications" width={iconWidth + 1}
notificationCount={notificationCountStr}> style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
{({isActive}) => { />
const Icon = isActive ? BellFilled : Bell )
return ( }}
<Icon </NavItem>
aria-hidden={true} <NavItem routeName="Search" href="/search">
width={iconWidth} {({isActive}) => {
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]} const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
/> return (
) <Icon
}} aria-hidden={true}
</NavItem> width={iconWidth + 2}
<NavItem style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
routeName="Profile" />
href={ )
currentAccount }}
? makeProfileLink({ </NavItem>
did: currentAccount.did,
handle: currentAccount.handle, {hasSession && (
}) <>
: '/' <NavItem
}> routeName="Messages"
{({isActive}) => { href="/messages"
const Icon = isActive ? UserCircleFilled : UserCircle notificationCount={unreadMessageCount.numUnread}
return ( hasNew={unreadMessageCount.hasNew}>
<Icon {({isActive}) => {
aria-hidden={true} const Icon = isActive ? MessageFilled : Message
width={iconWidth} return (
style={[ <Icon
styles.ctrlIcon, aria-hidden={true}
t.atoms.text, width={iconWidth - 1}
styles.profileIcon, style={[
]} styles.ctrlIcon,
/> t.atoms.text,
) styles.messagesIcon,
}} ]}
</NavItem> />
</> )
)} }}
</> </NavItem>
) : ( <NavItem
<> routeName="Notifications"
<View href="/notifications"
style={{ notificationCount={notificationCountStr}>
width: '100%', {({isActive}) => {
flexDirection: 'row', const Icon = isActive ? BellFilled : Bell
alignItems: 'center', return (
justifyContent: 'space-between', <Icon
paddingTop: 14, aria-hidden={true}
paddingBottom: 14, width={iconWidth}
paddingLeft: 14, style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
paddingRight: 6, />
gap: 8, )
}}> }}
<View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}> </NavItem>
<Logo width={32} /> <NavItem
<View style={{paddingTop: 4}}> routeName="Profile"
<Logotype width={80} fill={t.atoms.text.color} /> href={
currentAccount
? makeProfileLink({
did: currentAccount.did,
handle: currentAccount.handle,
})
: '/'
}
onLongPress={onLongPressProfile}>
{({isActive}) => (
<View style={styles.ctrlIconSizingWrapper}>
<View
style={[
styles.ctrlIcon,
styles.profileIcon,
isActive && [
styles.onProfile,
{borderColor: t.atoms.text.color},
],
]}>
<UserAvatar
avatar={profile?.avatar}
size={iconWidth - 3}
type={
profile?.associated?.labeler ? 'labeler' : 'user'
}
/>
</View>
</View>
)}
</NavItem>
</>
)}
</>
) : (
<>
<View
style={[
a.w_full,
a.flex_row,
a.align_center,
a.justify_between,
a.gap_sm,
{
paddingTop: 14,
paddingBottom: 14,
paddingLeft: 14,
paddingRight: 6,
},
]}>
<View style={[a.flex_row, a.align_center, a.gap_md]}>
<Logo width={32} />
<View style={{paddingTop: 4}}>
<Logotype width={80} fill={t.atoms.text.color} />
</View>
</View>
<View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
<Button
onPress={showCreateAccount}
label={_(msg`Create account`)}
size="small"
variant="solid"
color="primary">
<ButtonText>
<Trans>Create account</Trans>
</ButtonText>
</Button>
<Button
onPress={showSignIn}
label={_(msg`Sign in`)}
size="small"
variant="solid"
color="secondary">
<ButtonText>
<Trans>Sign in</Trans>
</ButtonText>
</Button>
</View> </View>
</View> </View>
</>
<View style={[a.flex_row, a.flex_wrap, a.gap_sm]}> )}
<Button </Animated.View>
onPress={showCreateAccount} </>
label={_(msg`Create account`)}
size="small"
variant="solid"
color="primary">
<ButtonText>
<Trans>Create account</Trans>
</ButtonText>
</Button>
<Button
onPress={showSignIn}
label={_(msg`Sign in`)}
size="small"
variant="solid"
color="secondary">
<ButtonText>
<Trans>Sign in</Trans>
</ButtonText>
</Button>
</View>
</View>
</>
)}
</Animated.View>
) )
} }
@@ -230,7 +250,8 @@ const NavItem: React.FC<{
routeName: string routeName: string
hasNew?: boolean hasNew?: boolean
notificationCount?: string notificationCount?: string
}> = ({children, href, routeName, hasNew, notificationCount}) => { onLongPress?: () => void
}> = ({children, href, routeName, hasNew, notificationCount, onLongPress}) => {
const t = useTheme() const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const {currentAccount} = useSession() const {currentAccount} = useSession()
@@ -264,7 +285,8 @@ const NavItem: React.FC<{
navigationAction={isOnDifferentProfile ? 'push' : 'navigate'} navigationAction={isOnDifferentProfile ? 'push' : 'navigate'}
aria-role="link" aria-role="link"
aria-label={routeName} aria-label={routeName}
accessible={true}> accessible={true}
onLongPress={onLongPress}>
{children({isActive})} {children({isActive})}
{notificationCount ? ( {notificationCount ? (
<View <View