Merge remote-tracking branch 'origin/nav-client-events' into claude/fix-leftnav-type-placement-SyWtu

src/analytics/metrics/types.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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