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
+18 -38
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,21 +263,21 @@ 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,
pal.text,
styles.profileIcon, styles.profileIcon,
isAtMyProfile && [
styles.onProfile, styles.onProfile,
{ {
borderColor: pal.text.color, borderColor: t.atoms.text.color,
borderWidth: live ? 0 : 1, borderWidth: live ? 0 : 1,
}, },
],
]}> ]}>
<UserAvatar <UserAvatar
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar} avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
size={iconWidth - 2} size={iconWidth - (isAtMyProfile ? 3 : 2)}
// See https://github.com/bluesky-social/social-app/pull/1801: // See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true} usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'} type={profile?.associated?.labeler ? 'labeler' : 'user'}
@@ -284,27 +285,6 @@ export function BottomBar({navigation}: BottomTabBarProps) {
hideLiveBadge 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
+47 -25
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,7 +71,14 @@ export function BottomBarWeb() {
// setShowLoggedOut(true) // setShowLoggedOut(true)
}, [requestSwitchToAccount, closeAllActiveElements]) }, [requestSwitchToAccount, closeAllActiveElements])
const onLongPressProfile = React.useCallback(() => {
accountSwitchControl.open()
}, [accountSwitchControl])
return ( return (
<>
<SwitchAccountDialog control={accountSwitchControl} />
<Animated.View <Animated.View
role="navigation" role="navigation"
style={[ style={[
@@ -155,21 +164,29 @@ export function BottomBarWeb() {
handle: currentAccount.handle, handle: currentAccount.handle,
}) })
: '/' : '/'
}> }
{({isActive}) => { onLongPress={onLongPressProfile}>
const Icon = isActive ? UserCircleFilled : UserCircle {({isActive}) => (
return ( <View style={styles.ctrlIconSizingWrapper}>
<Icon <View
aria-hidden={true}
width={iconWidth}
style={[ style={[
styles.ctrlIcon, styles.ctrlIcon,
t.atoms.text,
styles.profileIcon, 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> </NavItem>
</> </>
)} )}
@@ -177,18 +194,20 @@ export function BottomBarWeb() {
) : ( ) : (
<> <>
<View <View
style={{ style={[
width: '100%', a.w_full,
flexDirection: 'row', a.flex_row,
alignItems: 'center', a.align_center,
justifyContent: 'space-between', a.justify_between,
a.gap_sm,
{
paddingTop: 14, paddingTop: 14,
paddingBottom: 14, paddingBottom: 14,
paddingLeft: 14, paddingLeft: 14,
paddingRight: 6, paddingRight: 6,
gap: 8, },
}}> ]}>
<View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}> <View style={[a.flex_row, a.align_center, a.gap_md]}>
<Logo width={32} /> <Logo width={32} />
<View style={{paddingTop: 4}}> <View style={{paddingTop: 4}}>
<Logotype width={80} fill={t.atoms.text.color} /> <Logotype width={80} fill={t.atoms.text.color} />
@@ -221,6 +240,7 @@ export function BottomBarWeb() {
</> </>
)} )}
</Animated.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