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

Add nav:click event to all main nav items

Browse Source
This commit is contained in:
Alex Benzer
2026-05-18 21:22:29 -07:00
parent b795757a86
commit f3d2470766
8 changed files with 135 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/analytics/metrics/types.ts
+14
View File
@@ -60,6 +60,20 @@ export type Events = {
'router:navigate': {
from?: string
}
'nav:click': {
item:
| 'home'
| 'search'
| 'chat'
| 'notifications'
| 'profile'
| 'feeds'
| 'lists'
| 'saved'
| 'settings'
| 'menu'
surface: 'bottomBar' | 'drawer' | 'drawerHeader' | 'topBar' | 'leftNav'
}
'deepLink:referrerReceived': {
to: string
referrer: string
src/components/Layout/Header/index.tsx
+4 -1
View File
@@ -29,6 +29,7 @@ import {
} from '#/components/Layout/const'
import {ScrollbarOffsetContext} from '#/components/Layout/context'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import {IS_IOS} from '#/env'
export function Outer({
@@ -154,13 +155,15 @@ export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
export function MenuButton() {
const {_} = useLingui()
const ax = useAnalytics()
const setDrawerOpen = useSetDrawerOpen()
const {gtMobile} = useBreakpoints()
const onPress = useCallback(() => {
ax.metric('nav:click', {item: 'menu', surface: 'topBar'})
Keyboard.dismiss()
setDrawerOpen(true)
}, [setDrawerOpen])
}, [setDrawerOpen, ax])
return gtMobile ? null : (
<Slot>
src/view/com/home/HomeHeaderLayout.web.tsx
+5
View File
@@ -14,6 +14,7 @@ import {ButtonIcon} from '#/components/Button'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
import * as Layout from '#/components/Layout'
import {Link} from '#/components/Link'
import {useAnalytics} from '#/analytics'
export function HomeHeaderLayout(props: {
children: React.ReactNode
@@ -38,6 +39,7 @@ function HomeHeaderLayoutDesktopAndTablet({
const {headerHeight} = useShellLayout()
const {hasSession} = useSession()
const {_} = useLingui()
const ax = useAnalytics()
const kawaii = useKawaiiMode()
const gutters = useGutters([0, 'base'])
@@ -59,6 +61,9 @@ function HomeHeaderLayoutDesktopAndTablet({
variant="ghost"
color="secondary"
shape="square"
onPress={() => {
ax.metric('nav:click', {item: 'feeds', surface: 'topBar'})
}}
style={[a.justify_center]}>
<ButtonIcon icon={FeedsIcon} size="lg" />
</Link>
src/view/com/home/HomeHeaderLayoutMobile.tsx
+5
View File
@@ -19,6 +19,7 @@ import {ButtonIcon} from '#/components/Button'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
import * as Layout from '#/components/Layout'
import {Link} from '#/components/Link'
import {useAnalytics} from '#/analytics'
import {IS_DEV, IS_LIQUID_GLASS} from '#/env'
export function HomeHeaderLayoutMobile({
@@ -29,6 +30,7 @@ export function HomeHeaderLayoutMobile({
}) {
const t = useTheme()
const {_} = useLingui()
const ax = useAnalytics()
const {headerHeight} = useShellLayout()
const insets = useSafeAreaInsets()
const headerMinimalShellTransform = useHomeHeaderTransform()
@@ -84,6 +86,9 @@ export function HomeHeaderLayoutMobile({
variant="ghost"
color="secondary"
shape="square"
onPress={() => {
ax.metric('nav:click', {item: 'feeds', surface: 'topBar'})
}}
style={[
a.justify_center,
{marginRight: -Layout.BUTTON_VISUAL_ALIGNMENT_OFFSET},
src/view/shell/Drawer.tsx
+39 -7
View File
@@ -55,6 +55,7 @@ import {
import {InlineLinkText} from '#/components/Link'
import {ProfileBadges} from '#/components/ProfileBadges'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import {IS_WEB} from '#/env'
import {useActorStatus} from '#/features/liveNow'
@@ -133,11 +134,30 @@ let DrawerProfileCard = ({
DrawerProfileCard = memo(DrawerProfileCard)
export {DrawerProfileCard}
type DrawerTabOption =
| 'Home'
| 'Search'
| 'Messages'
| 'Notifications'
| 'MyProfile'
const DRAWER_TAB_TO_NAV_ITEM: Record<
DrawerTabOption,
'home' | 'search' | 'chat' | 'notifications' | 'profile'
> = {
Home: 'home',
Search: 'search',
Messages: 'chat',
Notifications: 'notifications',
MyProfile: 'profile',
}
let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
const t = useTheme()
const insets = useSafeAreaInsets()
const setDrawerOpen = useSetDrawerOpen()
const navigation = useNavigation<NavigationProp>()
const ax = useAnalytics()
const {
isAtHome,
isAtSearch,
@@ -153,7 +173,11 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
// =
const onPressTab = useCallback(
(tab: 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile') => {
(tab: DrawerTabOption, surface: 'drawer' | 'drawerHeader' = 'drawer') => {
ax.metric('nav:click', {
item: DRAWER_TAB_TO_NAV_ITEM[tab],
surface,
})
const state = navigation.getState()
setDrawerOpen(false)
if (IS_WEB) {
@@ -190,7 +214,7 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
}
}
},
[navigation, setDrawerOpen, currentAccount],
[navigation, setDrawerOpen, currentAccount, ax],
)
const onPressHome = useCallback(() => onPressTab('Home'), [onPressTab])
@@ -211,25 +235,33 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
onPressTab('MyProfile')
}, [onPressTab])
const onPressDrawerHeaderProfile = useCallback(() => {
onPressTab('MyProfile', 'drawerHeader')
}, [onPressTab])
const onPressMyFeeds = useCallback(() => {
ax.metric('nav:click', {item: 'feeds', surface: 'drawer'})
navigation.navigate('Feeds')
setDrawerOpen(false)
}, [navigation, setDrawerOpen])
}, [navigation, setDrawerOpen, ax])
const onPressLists = useCallback(() => {
ax.metric('nav:click', {item: 'lists', surface: 'drawer'})
navigation.navigate('Lists')
setDrawerOpen(false)
}, [navigation, setDrawerOpen])
}, [navigation, setDrawerOpen, ax])
const onPressBookmarks = useCallback(() => {
ax.metric('nav:click', {item: 'saved', surface: 'drawer'})
navigation.navigate('Bookmarks')
setDrawerOpen(false)
}, [navigation, setDrawerOpen])
}, [navigation, setDrawerOpen, ax])
const onPressSettings = useCallback(() => {
ax.metric('nav:click', {item: 'settings', surface: 'drawer'})
navigation.navigate('Settings')
setDrawerOpen(false)
}, [navigation, setDrawerOpen])
}, [navigation, setDrawerOpen, ax])
const onPressFeedback = useCallback(() => {
Linking.openURL(
@@ -265,7 +297,7 @@ let DrawerContent = ({}: React.PropsWithoutRef<{}>): React.ReactNode => {
{hasSession && currentAccount ? (
<DrawerProfileCard
account={currentAccount}
onPressProfile={onPressProfile}
onPressProfile={onPressDrawerHeaderProfile}
/>
) : (
<View style={[a.pr_xl]}>
src/view/shell/bottom-bar/BottomBar.tsx
+18 -1
View File
@@ -50,16 +50,29 @@ import {
} from '#/components/icons/Message'
import {Text} from '#/components/Typography'
import {useAgeAssurance} from '#/ageAssurance'
import {useAnalytics} from '#/analytics'
import {useActorStatus} from '#/features/liveNow'
import {useDemoMode} from '#/storage/hooks/demo-mode'
import {styles} from './BottomBarStyles'
type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
const TAB_TO_NAV_ITEM: Record<
TabOptions,
'home' | 'search' | 'chat' | 'notifications' | 'profile'
> = {
Home: 'home',
Search: 'search',
Messages: 'chat',
Notifications: 'notifications',
MyProfile: 'profile',
}
export function BottomBar({navigation}: BottomTabBarProps) {
const {hasSession, currentAccount} = useSession()
const t = useTheme()
const {_} = useLingui()
const ax = useAnalytics()
const safeAreaInsets = useSafeAreaInsets()
const {footerHeight} = useShellLayout()
const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} =
@@ -90,6 +103,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
const onPressTab = useCallback(
(tab: TabOptions) => {
ax.metric('nav:click', {
item: TAB_TO_NAV_ITEM[tab],
surface: 'bottomBar',
})
const state = navigation.getState()
const tabState = getTabState(state, tab)
if (tabState === TabState.InsideAtRoot) {
@@ -117,7 +134,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
dedupe(() => navigation.navigate(`${tab}Tab`))
}
},
[navigation, dedupe],
[navigation, dedupe, ax],
)
const onPressHome = useCallback(() => onPressTab('Home'), [onPressTab])
const onPressSearch = useCallback(() => onPressTab('Search'), [onPressTab])
src/view/shell/bottom-bar/BottomBarWeb.tsx
+24 -3
View File
@@ -44,8 +44,11 @@ import {
} from '#/components/icons/Message'
import {Text} from '#/components/Typography'
import {useAgeAssurance} from '#/ageAssurance'
import {useAnalytics} from '#/analytics'
import {styles} from './BottomBarStyles'
type NavItemValue = 'home' | 'search' | 'chat' | 'notifications' | 'profile'
export function BottomBarWeb() {
const {_} = useLingui()
const {hasSession, currentAccount} = useSession()
@@ -96,7 +99,7 @@ export function BottomBarWeb() {
onLayout={event => footerHeight.set(event.nativeEvent.layout.height)}>
{hasSession ? (
<>
<NavItem routeName="Home" href="/">
<NavItem routeName="Home" href="/" navItem="home">
{({isActive}) => {
const Icon = isActive ? HomeFilled : Home
return (
@@ -108,7 +111,7 @@ export function BottomBarWeb() {
)
}}
</NavItem>
<NavItem routeName="Search" href="/search">
<NavItem routeName="Search" href="/search" navItem="search">
{({isActive}) => {
const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
return (
@@ -126,6 +129,7 @@ export function BottomBarWeb() {
<NavItem
routeName="Messages"
href="/messages"
navItem="chat"
notificationCount={
aa.flags.chatDisabled
? undefined
@@ -152,6 +156,7 @@ export function BottomBarWeb() {
<NavItem
routeName="Notifications"
href="/notifications"
navItem="notifications"
notificationCount={notificationCountStr}>
{({isActive}) => {
const Icon = isActive ? BellFilled : Bell
@@ -174,6 +179,7 @@ export function BottomBarWeb() {
})
: '/'
}
navItem="profile"
onLongPress={onLongPressProfile}>
{({isActive}) => (
<View style={styles.ctrlIconSizingWrapper}>
@@ -257,12 +263,22 @@ const NavItem: React.FC<{
children: (props: {isActive: boolean}) => React.ReactNode
href: string
routeName: string
navItem: NavItemValue
hasNew?: boolean
notificationCount?: string
onLongPress?: () => void
}> = ({children, href, routeName, hasNew, notificationCount, onLongPress}) => {
}> = ({
children,
href,
routeName,
navItem,
hasNew,
notificationCount,
onLongPress,
}) => {
const t = useTheme()
const {_} = useLingui()
const ax = useAnalytics()
const {currentAccount} = useSession()
const currentRoute = useNavigationState(state => {
if (!state) {
@@ -271,6 +287,10 @@ const NavItem: React.FC<{
return getCurrentRoute(state)
})
const onBeforePress = useCallback(() => {
ax.metric('nav:click', {item: navItem, surface: 'bottomBar'})
}, [ax, navItem])
// Checks whether we're on someone else's profile
const isOnDifferentProfile =
currentRoute.name === 'Profile' &&
@@ -295,6 +315,7 @@ const NavItem: React.FC<{
aria-role="link"
aria-label={routeName}
accessible={true}
onBeforePress={onBeforePress}
onLongPress={onLongPress}>
{children({isActive})}
{notificationCount ? (
src/view/shell/desktop/LeftNav.tsx
+26 -1
View File
@@ -80,8 +80,20 @@ import * as Menu from '#/components/Menu'
import * as Prompt from '#/components/Prompt'
import {Text} from '#/components/Typography'
import {useAgeAssurance} from '#/ageAssurance'
import {useAnalytics} from '#/analytics'
import {useActorStatus} from '#/features/liveNow'
import {router} from '#/routes'
type LeftNavItem =
| 'home'
| 'search'
| 'chat'
| 'notifications'
| 'feeds'
| 'lists'
| 'saved'
| 'profile'
| 'settings'
import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
const NAV_ICON_WIDTH = 28
@@ -385,6 +397,7 @@ interface NavItemProps {
iconFilled: JSX.Element
label: string
minimal: boolean
navItem: LeftNavItem
}
function NavItem({
count,
@@ -394,9 +407,11 @@ function NavItem({
iconFilled,
label,
minimal,
navItem,
}: NavItemProps) {
const t = useTheme()
const {_} = useLingui()
const ax = useAnalytics()
const {currentAccount} = useSession()
const [pathName] = useMemo(() => router.matchPath(href), [href])
@@ -416,6 +431,7 @@ function NavItem({
const navigation = useNavigation<NavigationProp>()
const onPressWrapped = useCallback(
(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
ax.metric('nav:click', {item: navItem, surface: 'leftNav'})
if (e.ctrlKey || e.metaKey || e.altKey) {
return
}
@@ -428,7 +444,7 @@ function NavItem({
navigation.navigate(screen, params, {pop: true})
}
},
[navigation, href, isCurrent],
[navigation, href, isCurrent, ax, navItem],
)
return (
@@ -598,6 +614,7 @@ function ChatNavItem({minimal}: {minimal: boolean}) {
return (
<NavItem
href="/messages"
navItem="chat"
minimal={minimal}
count={aa.flags.chatDisabled ? undefined : numUnreadMessages.numUnread}
hasNew={aa.flags.chatDisabled ? false : numUnreadMessages.hasNew}
@@ -676,6 +693,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
<>
<NavItem
href="/"
navItem="home"
minimal={leftNavMinimal}
icon={
<Home
@@ -695,6 +713,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
/>
<NavItem
href="/search"
navItem="search"
minimal={leftNavMinimal}
icon={
<MagnifyingGlass
@@ -714,6 +733,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
/>
<NavItem
href="/notifications"
navItem="notifications"
minimal={leftNavMinimal}
count={numUnreadNotifications}
icon={
@@ -735,6 +755,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
<ChatNavItem minimal={leftNavMinimal} />
<NavItem
href="/feeds"
navItem="feeds"
minimal={leftNavMinimal}
icon={
<Hashtag
@@ -754,6 +775,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
/>
<NavItem
href="/lists"
navItem="lists"
minimal={leftNavMinimal}
icon={
<List
@@ -773,6 +795,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
/>
<NavItem
href="/saved"
navItem="saved"
minimal={leftNavMinimal}
icon={
<Bookmark
@@ -797,6 +820,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
/>
<NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
navItem="profile"
minimal={leftNavMinimal}
icon={
<UserCircle
@@ -816,6 +840,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
/>
<NavItem
href="/settings"
navItem="settings"
minimal={leftNavMinimal}
icon={
<Settings