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 {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
import {usePalette} from '#/lib/hooks/usePalette'
import {clamp} from '#/lib/numbers'
import {getTabState, TabState} from '#/lib/routes/helpers'
import {emitSoftReset} from '#/state/events'
@@ -57,7 +56,7 @@ type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession()
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
const safeAreaInsets = useSafeAreaInsets()
const {footerHeight} = useShellLayout()
@@ -145,8 +144,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
<Animated.View
style={[
styles.bottomBar,
pal.view,
hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border,
t.atoms.bg,
hideBorder
? {borderColor: t.atoms.bg.backgroundColor}
: t.atoms.border_contrast_low,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
footerMinimalShellTransform,
]}
@@ -161,12 +162,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
isAtHome ? (
<HomeFilled
width={iconWidth + 1}
style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
/>
) : (
<Home
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 ? (
<MagnifyingGlassFilled
width={iconWidth + 2}
style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
/>
) : (
<MagnifyingGlass
testID="bottomBarSearchBtn"
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 ? (
<MessageFilled
width={iconWidth - 1}
style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
/>
) : (
<Message
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 ? (
<BellFilled
width={iconWidth}
style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/>
) : (
<Bell
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"
icon={
<View style={styles.ctrlIconSizingWrapper}>
{isAtMyProfile ? (
<View
style={[
styles.ctrlIcon,
pal.text,
styles.profileIcon,
<View
style={[
styles.ctrlIcon,
styles.profileIcon,
isAtMyProfile && [
styles.onProfile,
{
borderColor: pal.text.color,
borderColor: t.atoms.text.color,
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
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>
)}
],
]}>
<UserAvatar
avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
size={iconWidth - (isAtMyProfile ? 3 : 2)}
// See https://github.com/bluesky-social/social-app/pull/1801:
usePlainRNImage={true}
type={profile?.associated?.labeler ? 'labeler' : 'user'}
live={live}
hideLiveBadge
/>
</View>
</View>
}
onPress={onPressProfile}
@@ -332,7 +312,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
<Logo width={28} />
<View style={{paddingTop: 4}}>
<Logotype width={80} fill={pal.text.color} />
<Logotype width={80} fill={t.atoms.text.color} />
</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 {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
import {useUnreadNotifications} from '#/state/queries/notifications/unread'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import {useShellLayout} from '#/state/shell/shell-layout'
import {useCloseAllActiveElements} from '#/state/util'
import {Link} from '#/view/com/util/Link'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {Logo} from '#/view/icons/Logo'
import {Logotype} from '#/view/icons/Logotype'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
import {
Bell_Filled_Corner0_Rounded as BellFilled,
Bell_Stroke2_Corner0_Rounded as Bell,
@@ -37,10 +41,6 @@ import {
Message_Stroke2_Corner0_Rounded as Message,
Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
} 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 {styles} from './BottomBarStyles'
@@ -53,6 +53,8 @@ export function BottomBarWeb() {
const closeAllActiveElements = useCloseAllActiveElements()
const {footerHeight} = useShellLayout()
const hideBorder = useHideBottomBarBorder()
const accountSwitchControl = useDialogControl()
const {data: profile} = useProfileQuery({did: currentAccount?.did})
const iconWidth = 26
const unreadMessageCount = useUnreadMessageCount()
@@ -69,158 +71,176 @@ export function BottomBarWeb() {
// setShowLoggedOut(true)
}, [requestSwitchToAccount, closeAllActiveElements])
return (
<Animated.View
role="navigation"
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>
const onLongPressProfile = React.useCallback(() => {
accountSwitchControl.open()
}, [accountSwitchControl])
{hasSession && (
<>
<NavItem
routeName="Messages"
href="/messages"
notificationCount={unreadMessageCount.numUnread}
hasNew={unreadMessageCount.hasNew}>
{({isActive}) => {
const Icon = isActive ? MessageFilled : Message
return (
<Icon
aria-hidden={true}
width={iconWidth - 1}
style={[
styles.ctrlIcon,
t.atoms.text,
styles.messagesIcon,
]}
/>
)
}}
</NavItem>
<NavItem
routeName="Notifications"
href="/notifications"
notificationCount={notificationCountStr}>
{({isActive}) => {
const Icon = isActive ? BellFilled : Bell
return (
<Icon
aria-hidden={true}
width={iconWidth}
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/>
)
}}
</NavItem>
<NavItem
routeName="Profile"
href={
currentAccount
? makeProfileLink({
did: currentAccount.did,
handle: currentAccount.handle,
})
: '/'
}>
{({isActive}) => {
const Icon = isActive ? UserCircleFilled : UserCircle
return (
<Icon
aria-hidden={true}
width={iconWidth}
style={[
styles.ctrlIcon,
t.atoms.text,
styles.profileIcon,
]}
/>
)
}}
</NavItem>
</>
)}
</>
) : (
<>
<View
style={{
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 14,
paddingBottom: 14,
paddingLeft: 14,
paddingRight: 6,
gap: 8,
}}>
<View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
<Logo width={32} />
<View style={{paddingTop: 4}}>
<Logotype width={80} fill={t.atoms.text.color} />
return (
<>
<SwitchAccountDialog control={accountSwitchControl} />
<Animated.View
role="navigation"
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 && (
<>
<NavItem
routeName="Messages"
href="/messages"
notificationCount={unreadMessageCount.numUnread}
hasNew={unreadMessageCount.hasNew}>
{({isActive}) => {
const Icon = isActive ? MessageFilled : Message
return (
<Icon
aria-hidden={true}
width={iconWidth - 1}
style={[
styles.ctrlIcon,
t.atoms.text,
styles.messagesIcon,
]}
/>
)
}}
</NavItem>
<NavItem
routeName="Notifications"
href="/notifications"
notificationCount={notificationCountStr}>
{({isActive}) => {
const Icon = isActive ? BellFilled : Bell
return (
<Icon
aria-hidden={true}
width={iconWidth}
style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
/>
)
}}
</NavItem>
<NavItem
routeName="Profile"
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 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>
</>
)}
</Animated.View>
</>
)}
</Animated.View>
</>
)
}
@@ -230,7 +250,8 @@ const NavItem: React.FC<{
routeName: string
hasNew?: boolean
notificationCount?: string
}> = ({children, href, routeName, hasNew, notificationCount}) => {
onLongPress?: () => void
}> = ({children, href, routeName, hasNew, notificationCount, onLongPress}) => {
const t = useTheme()
const {_} = useLingui()
const {currentAccount} = useSession()
@@ -264,7 +285,8 @@ const NavItem: React.FC<{
navigationAction={isOnDifferentProfile ? 'push' : 'navigate'}
aria-role="link"
aria-label={routeName}
accessible={true}>
accessible={true}
onLongPress={onLongPress}>
{children({isActive})}
{notificationCount ? (
<View