Add search event analytics (#9949)

Co-authored-by: Eric Bailey <git@esb.lol>

src/analytics/metrics/types.ts

@@ -649,6 +649,32 @@ export type Events = {
     tab: string
   }
 
+  'search:query': {
+    source: 'typed' | 'history' | 'autocomplete'
+  }
+
+  'search:results:loaded': {
+    tab: 'top' | 'latest' | 'people' | 'feeds'
+    initialCount: number
+  }
+
+  'search:result:press': {
+    tab?: 'top' | 'latest' | 'people' | 'feeds'
+    resultType: 'post' | 'profile' | 'feed'
+    position: number
+    uri: string
+  }
+
+  'search:recent:press': {
+    profileDid: string
+    position: number
+  }
+
+  'search:autocomplete:press': {
+    profileDid: string
+    position: number
+  }
+
   'progressGuide:hide': {}
   'progressGuide:followDialog:open': {}
 

src/components/FeedCard.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {useCallback, useEffect, useMemo} from 'react'
 import {type GestureResponderEvent, View} from 'react-native'
 import {
   type AppBskyFeedDefs,
@@ -6,9 +6,7 @@ import {
   AtUri,
   RichText as RichTextApi,
 } from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {Plural, Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Plural, Trans} from '@lingui/react/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -73,11 +71,11 @@ export function Link({
 }: Props & Omit<LinkProps, 'to' | 'label'>) {
   const queryClient = useQueryClient()
 
-  const href = React.useMemo(() => {
+  const href = useMemo(() => {
     return createProfileFeedHref({feed: view})
   }, [view])
 
-  React.useEffect(() => {
+  useEffect(() => {
     precacheFeedFromGeneratorView(queryClient, view)
   }, [view, queryClient])
 
@@ -212,7 +210,7 @@ export function Description({
   description,
   ...rest
 }: {description?: string} & Partial<RichTextProps>) {
-  const rt = React.useMemo(() => {
+  const rt = useMemo(() => {
     if (!description) return
     const rt = new RichTextApi({text: description || ''})
     rt.detectFacetsWithoutResolution()
@@ -279,7 +277,7 @@ function SaveButtonInner({
   pin?: boolean
   text?: boolean
 } & Partial<ButtonProps>) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {data: preferences} = usePreferencesQuery()
   const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} =
     useAddSavedFeedsMutation()
@@ -289,13 +287,13 @@ function SaveButtonInner({
   const uri = view.uri
   const type = view.uri.includes('app.bsky.feed.generator') ? 'feed' : 'list'
 
-  const savedFeedConfig = React.useMemo(() => {
+  const savedFeedConfig = useMemo(() => {
     return preferences?.savedFeeds?.find(feed => feed.value === uri)
   }, [preferences?.savedFeeds, uri])
   const removePromptControl = Prompt.usePromptControl()
   const isPending = isAddSavedFeedPending || isRemovePending
 
-  const toggleSave = React.useCallback(
+  const toggleSave = useCallback(
     async (e: GestureResponderEvent) => {
       e.preventDefault()
       e.stopPropagation()
@@ -312,17 +310,17 @@ function SaveButtonInner({
             },
           ])
         }
-        Toast.show(_(msg({message: 'Feeds updated!', context: 'toast'})))
+        Toast.show(l({message: 'Feeds updated!', context: 'toast'}))
       } catch (err: any) {
         logger.error(err, {message: `FeedCard: failed to update feeds`, pin})
-        Toast.show(_(msg`Failed to update feeds`), 'xmark')
+        Toast.show(l`Failed to update feeds`, 'xmark')
       }
     },
-    [_, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type],
+    [l, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type],
   )
 
-  const onPrompRemoveFeed = React.useCallback(
+  const onPromptRemoveFeed = useCallback(
-    async (e: GestureResponderEvent) => {
+    (e: GestureResponderEvent) => {
       e.preventDefault()
       e.stopPropagation()
 
@@ -335,11 +333,13 @@ function SaveButtonInner({
     <>
       <Button
         disabled={isPending}
-        label={_(msg`Add this feed to your feeds`)}
+        label={l`Add this feed to your feeds`}
         size="small"
         variant="solid"
         color={savedFeedConfig ? 'secondary' : 'primary'}
-        onPress={savedFeedConfig ? onPrompRemoveFeed : toggleSave}
+        onPress={(e: GestureResponderEvent) =>
+          savedFeedConfig ? onPromptRemoveFeed(e) : void toggleSave(e)
+        }
         {...buttonProps}>
         {savedFeedConfig ? (
           <>
@@ -350,7 +350,7 @@ function SaveButtonInner({
             )}
             {text && (
               <ButtonText>
-                <Trans>Unpin Feed</Trans>
+                <Trans>Unpin feed</Trans>
               </ButtonText>
             )}
           </>
@@ -359,7 +359,7 @@ function SaveButtonInner({
             <ButtonIcon size="md" icon={isPending ? Loader : PinIcon} />
             {text && (
               <ButtonText>
-                <Trans>Pin Feed</Trans>
+                <Trans>Pin feed</Trans>
               </ButtonText>
             )}
           </>
@@ -368,12 +368,10 @@ function SaveButtonInner({
 
       <Prompt.Basic
         control={removePromptControl}
-        title={_(msg`Remove from your feeds?`)}
+        title={l`Remove from your feeds?`}
-        description={_(
+        description={l`Are you sure you want to remove this from your feeds?`}
-          msg`Are you sure you want to remove this from your feeds?`,
+        onConfirm={(e: GestureResponderEvent) => void toggleSave(e)}
-        )}
+        confirmButtonCta={l`Remove`}
-        onConfirm={toggleSave}
-        confirmButtonCta={_(msg`Remove`)}
         confirmButtonColor="negative"
       />
     </>

src/components/ProfileCard.tsx

@@ -11,8 +11,7 @@ import {
   type ModerationOpts,
   RichText as RichTextApi,
 } from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
 
 import {getModerationCauseKey} from '#/lib/moderation'
 import {forceLTR} from '#/lib/strings/bidi'
@@ -56,6 +55,7 @@ export function Default({
   testID,
   position,
   contextProfileDid,
+  onPress,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
@@ -63,9 +63,10 @@ export function Default({
   testID?: string
   position?: number
   contextProfileDid?: string
+  onPress?: (e: GestureResponderEvent) => void
 }) {
   return (
-    <Link testID={testID} profile={profile}>
+    <Link testID={testID} profile={profile} onPress={onPress}>
       <Card
         profile={profile}
         moderationOpts={moderationOpts}
@@ -135,14 +136,13 @@ export function Link({
 }: {
   profile: bsky.profile.AnyProfileView
 } & Omit<LinkProps, 'to' | 'label'>) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
+
   return (
     <InternalLink
-      label={_(
+      label={l`View ${
-        msg`View ${
+        profile.displayName || sanitizeHandle(profile.handle)
-          profile.displayName || sanitizeHandle(profile.handle)
+      }’s profile`}
-        }'s profile`,
-      )}
       to={{
         screen: 'Profile',
         params: {name: profile.did},
@@ -488,7 +488,7 @@ export function FollowButtonInner({
   contextProfileDid,
   ...rest
 }: FollowButtonProps) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const profile = useProfileShadow(profileUnshadowed)
   const moderation = moderateProfile(profile, moderationOpts)
   const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
@@ -505,18 +505,17 @@ export function FollowButtonInner({
     try {
       await queueFollow()
       Toast.show(
-        _(
+        l`Following ${sanitizeDisplayName(
-          msg`Following ${sanitizeDisplayName(
+          profile.displayName || profile.handle,
-            profile.displayName || profile.handle,
+          moderation.ui('displayName'),
-            moderation.ui('displayName'),
+        )}`,
-          )}`,
-        ),
       )
       onPressProp?.(e)
       onFollow?.()
-    } catch (err: any) {
+    } catch (e) {
+      const err = e as Error
       if (err?.name !== 'AbortError') {
-        Toast.show(_(msg`An issue occurred, please try again.`), 'xmark')
+        Toast.show(l`An issue occurred, please try again.`, 'xmark')
       }
     }
   }
@@ -527,40 +526,33 @@ export function FollowButtonInner({
     try {
       await queueUnfollow()
       Toast.show(
-        _(
+        l`No longer following ${sanitizeDisplayName(
-          msg`No longer following ${sanitizeDisplayName(
+          profile.displayName || profile.handle,
-            profile.displayName || profile.handle,
+          moderation.ui('displayName'),
-            moderation.ui('displayName'),
+        )}`,
-          )}`,
-        ),
       )
       onPressProp?.(e)
-    } catch (err: any) {
+    } catch (e) {
+      const err = e as Error
       if (err?.name !== 'AbortError') {
-        Toast.show(_(msg`An issue occurred, please try again.`), 'xmark')
+        Toast.show(l`An issue occurred, please try again.`, 'xmark')
       }
     }
   }
 
-  const unfollowLabel = _(
+  const unfollowLabel = l({
-    msg({
+    message: 'Following',
-      message: 'Following',
+    comment: 'User is following this account, click to unfollow',
-      comment: 'User is following this account, click to unfollow',
+  })
-    }),
-  )
   const followLabel = profile.viewer?.followedBy
-    ? _(
+    ? l({
-        msg({
+        message: 'Follow back',
-          message: 'Follow back',
+        comment: 'User is not following this account, click to follow back',
-          comment: 'User is not following this account, click to follow back',
+      })
-        }),
+    : l({
-      )
+        message: 'Follow',
-    : _(
+        comment: 'User is not following this account, click to follow',
-        msg({
+      })
-          message: 'Follow',
-          comment: 'User is not following this account, click to follow',
-        }),
-      )
 
   if (!profile.viewer) return null
   if (
@@ -579,7 +571,9 @@ export function FollowButtonInner({
           variant="solid"
           color="secondary"
           {...rest}
-          onPress={onPressUnfollow}>
+          onPress={(e: GestureResponderEvent) => {
+            void onPressUnfollow(e)
+          }}>
           {withIcon && (
             <ButtonIcon icon={Check} position={isRound ? undefined : 'left'} />
           )}
@@ -592,7 +586,9 @@ export function FollowButtonInner({
           variant="solid"
           color={colorInverted ? 'secondary_inverted' : 'primary'}
           {...rest}
-          onPress={onPressFollow}>
+          onPress={(e: GestureResponderEvent) => {
+            void onPressFollow(e)
+          }}>
           {withIcon && (
             <ButtonIcon icon={Plus} position={isRound ? undefined : 'left'} />
           )}

src/components/forms/SearchInput.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
+import {forwardRef} from 'react'
 import {type TextInput, View} from 'react-native'
-import {msg} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
 import {atoms as a, useTheme} from '#/alf'
@@ -19,10 +18,10 @@ type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
   onClearText?: () => void
 }
 
-export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
+export const SearchInput = forwardRef<TextInput, SearchInputProps>(
   function SearchInput({value, label, onClearText, ...rest}, ref) {
     const t = useTheme()
-    const {_} = useLingui()
+    const {t: l} = useLingui()
     const showClear = value && value.length > 0
 
     return (
@@ -31,9 +30,9 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
           <TextField.Icon icon={MagnifyingGlassIcon} />
           <TextField.Input
             inputRef={ref}
-            label={label || _(msg`Search`)}
+            label={label || l`Search`}
             value={value}
-            placeholder={_(msg`Search`)}
+            placeholder={l`Search`}
             returnKeyType="search"
             keyboardAppearance={t.scheme}
             selectTextOnFocus={IS_NATIVE}
@@ -67,7 +66,7 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
             <Button
               testID="searchTextInputClearBtn"
               onPress={onClearText}
-              label={_(msg`Clear search query`)}
+              label={l`Clear search query`}
               hitSlop={HITSLOP_10}
               size="tiny"
               shape="round"

src/screens/Search/SearchResults.tsx

@@ -5,6 +5,7 @@ import {Trans, useLingui} from '@lingui/react/macro'
 
 import {urls} from '#/lib/constants'
 import {usePostViewTracking} from '#/lib/hooks/usePostViewTracking'
+import {useCallOnce} from '#/lib/once'
 import {cleanError} from '#/lib/strings/errors'
 import {augmentSearchQuery} from '#/lib/strings/helpers'
 import {useActorSearch} from '#/state/queries/actor-search'
@@ -25,6 +26,7 @@ import {InlineLinkText} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
 import {SearchError} from '#/components/SearchError'
 import {Text} from '#/components/Typography'
+import {type Metrics, useAnalytics} from '#/analytics'
 import type * as bsky from '#/types/bsky'
 
 let SearchResults = ({
@@ -161,7 +163,12 @@ function EmptyState({
   )
 }
 
-function NoResultsText({query}: {query: string}) {
+function NoResultsText({
+  query,
+}: {
+  sort?: 'top' | 'latest' | 'people' | 'feeds'
+  query: string
+}) {
   const t = useTheme()
   const {t: l} = useLingui()
 
@@ -185,7 +192,7 @@ function NoResultsText({query}: {query: string}) {
             })}
             to={urls.website.blog.searchTipsAndTricks}
             style={[a.text_md, a.leading_snug]}>
-            read about how to use search filters
+            read about how to use search filters.
           </InlineLinkText>
           .
         </Trans>
@@ -214,6 +221,7 @@ let SearchScreenPostResults = ({
   sort?: 'top' | 'latest'
   active: boolean
 }): React.ReactNode => {
+  const ax = useAnalytics()
   const {t: l} = useLingui()
   const {currentAccount, hasSession} = useSession()
   const [isPTR, setIsPTR] = useState(false)
@@ -277,6 +285,19 @@ let SearchScreenPostResults = ({
   const closeAllActiveElements = useCloseAllActiveElements()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
 
+  const fireTracking = useCallOnce(() => {
+    if (sort) {
+      // ts only
+      ax.metric('search:results:loaded', {
+        tab: sort,
+        initialCount: items.length,
+      })
+    }
+  })
+  if (isFetched && sort) {
+    fireTracking()
+  }
+
   const showSignIn = () => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'none'})
@@ -292,7 +313,7 @@ let SearchScreenPostResults = ({
       <SearchError title={l`Search is currently unavailable when logged out`}>
         <Text style={[a.text_md, a.text_center, a.leading_snug]}>
           <Trans>
-            <InlineLinkText label={l`Sign in`} to={'#'} onPress={showSignIn}>
+            <InlineLinkText label={l`Sign in`} to="#" onPress={showSignIn}>
               Sign in
             </InlineLinkText>
             <Text style={t.atoms.text_contrast_medium}> or </Text>
@@ -315,7 +336,7 @@ let SearchScreenPostResults = ({
 
   return error ? (
     <EmptyState
-      messageText={l`We're sorry, but your search could not be completed. Please try again in a few minutes.`}
+      messageText={l`We’re sorry, but your search could not be completed. Please try again in a few minutes.`}
       error={cleanError(error)}
     />
   ) : (
@@ -325,9 +346,17 @@ let SearchScreenPostResults = ({
           {posts.length ? (
             <List
               data={items}
-              renderItem={({item}: {item: SearchResultSlice}) => {
+              renderItem={({
+                item,
+                index,
+              }: {
+                item: SearchResultSlice
+                index: number
+              }) => {
                 if (item.type === 'post') {
-                  return <Post post={item.post} />
+                  return (
+                    <SearchPost from={sort} position={index} post={item.post} />
+                  )
                 } else {
                   return null
                 }
@@ -363,6 +392,29 @@ let SearchScreenPostResults = ({
 }
 SearchScreenPostResults = memo(SearchScreenPostResults)
 
+function SearchPost({
+  from,
+  position,
+  post,
+}: {
+  from: Metrics['search:result:press']['tab']
+  position: Metrics['search:result:press']['position']
+  post: AppBskyFeedDefs.PostView
+}) {
+  const ax = useAnalytics()
+
+  const onBeforePress = useCallback(() => {
+    ax.metric('search:result:press', {
+      tab: from,
+      resultType: 'post',
+      position,
+      uri: post.uri,
+    })
+  }, [ax, from, position, post])
+
+  return <Post post={post} onBeforePress={onBeforePress} />
+}
+
 let SearchScreenUserResults = ({
   query,
   active,
@@ -370,6 +422,7 @@ let SearchScreenUserResults = ({
   query: string
   active: boolean
 }): React.ReactNode => {
+  const ax = useAnalytics()
   const {t: l} = useLingui()
   const {hasSession} = useSession()
   const [isPTR, setIsPTR] = useState(false)
@@ -403,6 +456,16 @@ let SearchScreenUserResults = ({
     return results?.pages.flatMap(page => page.actors) || []
   }, [results])
 
+  const fireTracking = useCallOnce(() => {
+    ax.metric('search:results:loaded', {
+      tab: 'people',
+      initialCount: profiles.length,
+    })
+  })
+  if (isFetched) {
+    fireTracking()
+  }
+
   if (error) {
     return (
       <EmptyState
@@ -417,9 +480,13 @@ let SearchScreenUserResults = ({
       {profiles.length ? (
         <List
           data={profiles}
-          renderItem={({item}: {item: bsky.profile.AnyProfileView}) => (
+          renderItem={({
-            <ProfileCardWithFollowBtn profile={item} />
+            item,
-          )}
+            index,
+          }: {
+            item: bsky.profile.AnyProfileView
+            index: number
+          }) => <SearchScreenProfileButton position={index} profile={item} />}
           keyExtractor={(item: bsky.profile.AnyProfileView) => item.did}
           refreshing={isPTR}
           onRefresh={() => void onPullToRefresh()}
@@ -442,6 +509,26 @@ let SearchScreenUserResults = ({
 }
 SearchScreenUserResults = memo(SearchScreenUserResults)
 
+function SearchScreenProfileButton({
+  position,
+  profile,
+}: {
+  position: number
+  profile: bsky.profile.AnyProfileView
+}) {
+  const ax = useAnalytics()
+
+  const handlePress = () => {
+    ax.metric('search:result:press', {
+      tab: 'people',
+      resultType: 'profile',
+      position,
+      uri: profile.did,
+    })
+  }
+  return <ProfileCardWithFollowBtn profile={profile} onPress={handlePress} />
+}
+
 let SearchScreenFeedsResults = ({
   query,
   active,
@@ -449,6 +536,7 @@ let SearchScreenFeedsResults = ({
   query: string
   active: boolean
 }): React.ReactNode => {
+  const ax = useAnalytics()
   const t = useTheme()
 
   const {data: results, isFetched} = usePopularFeedsSearch({
@@ -456,12 +544,28 @@ let SearchScreenFeedsResults = ({
     enabled: active,
   })
 
+  const fireTracking = useCallOnce(() => {
+    ax.metric('search:results:loaded', {
+      tab: 'feeds',
+      initialCount: results?.length ?? 0,
+    })
+  })
+  if (isFetched) {
+    fireTracking()
+  }
+
   return isFetched && results ? (
     <>
       {results.length ? (
         <List
           data={results}
-          renderItem={({item}: {item: AppBskyFeedDefs.GeneratorView}) => (
+          renderItem={({
+            item,
+            index,
+          }: {
+            item: AppBskyFeedDefs.GeneratorView
+            index: number
+          }) => (
             <View
               style={[
                 a.border_t,
@@ -469,7 +573,7 @@ let SearchScreenFeedsResults = ({
                 a.px_lg,
                 a.py_lg,
               ]}>
-              <FeedCard.Default view={item} />
+              <SearchFeedCard position={index} view={item} />
             </View>
           )}
           keyExtractor={(item: AppBskyFeedDefs.GeneratorView) => item.uri}
@@ -485,3 +589,24 @@ let SearchScreenFeedsResults = ({
   )
 }
 SearchScreenFeedsResults = memo(SearchScreenFeedsResults)
+
+function SearchFeedCard({
+  position,
+  view,
+}: {
+  position: number
+  view: AppBskyFeedDefs.GeneratorView
+}) {
+  const ax = useAnalytics()
+
+  const handleOnPress = () => {
+    ax.metric('search:result:press', {
+      tab: 'feeds',
+      resultType: 'feed',
+      position,
+      uri: view.uri,
+    })
+  }
+
+  return <FeedCard.Default view={view} onPress={handleOnPress} />
+}

src/screens/Search/Shell.tsx

@@ -38,6 +38,7 @@ import {Button, ButtonText} from '#/components/Button'
 import {SearchInput} from '#/components/forms/SearchInput'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
+import {useAnalytics} from '#/analytics'
 import {IS_WEB} from '#/env'
 import {account, useStorage} from '#/storage'
 import type * as bsky from '#/types/bsky'
@@ -79,6 +80,7 @@ export function SearchScreenShell({
   inputPlaceholder?: string
   isExplore?: boolean
 }) {
+  const ax = useAnalytics()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const navigation = useNavigation<NavigationProp>()
@@ -225,9 +227,15 @@ export function SearchScreenShell({
     }
   }, [setShowAutocomplete, setSearchText, navigation, route.params, route.name])
 
-  const onSubmit = useCallback(() => {
+  const onSubmit = useCallback(
-    navigateToItem(searchText)
+    (source: 'typed' | 'autocomplete') => () => {
-  }, [navigateToItem, searchText])
+      ax.metric('search:query', {
+        source,
+      })
+      navigateToItem(searchText)
+    },
+    [ax, navigateToItem, searchText],
+  )
 
   const onAutocompleteResultPress = useCallback(() => {
     if (IS_WEB) {
@@ -367,7 +375,7 @@ export function SearchScreenShell({
                     onFocus={onSearchInputFocus}
                     onChangeText={onChangeText}
                     onClearText={onPressClearQuery}
-                    onSubmitEditing={onSubmit}
+                    onSubmitEditing={onSubmit('typed')}
                     placeholder={
                       inputPlaceholder ?? l`Search for posts, users, or feeds`
                     }
@@ -420,7 +428,7 @@ export function SearchScreenShell({
             isAutocompleteFetching={isAutocompleteFetching}
             autocompleteData={autocompleteData}
             searchText={searchText}
-            onSubmit={onSubmit}
+            onSubmit={onSubmit('autocomplete')}
             onResultPress={onAutocompleteResultPress}
             onProfileClick={handleProfileClick}
           />

src/screens/Search/components/AutocompleteResults.tsx

@@ -9,6 +9,7 @@ import {SearchLinkCard} from '#/view/shell/desktop/Search'
 import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
 import {atoms as a, native} from '#/alf'
 import * as Layout from '#/components/Layout'
+import {useAnalytics} from '#/analytics'
 import {IS_NATIVE} from '#/env'
 
 let AutocompleteResults = ({
@@ -26,6 +27,7 @@ let AutocompleteResults = ({
   onResultPress: () => void
   onProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void
 }): React.ReactNode => {
+  const ax = useAnalytics()
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   return (
@@ -51,12 +53,16 @@ let AutocompleteResults = ({
             }
             style={a.border_b}
           />
-          {autocompleteData?.map(item => (
+          {autocompleteData?.map((item, index) => (
             <SearchProfileCard
               key={item.did}
               profile={item}
               moderationOpts={moderationOpts}
               onPress={() => {
+                ax.metric('search:autocomplete:press', {
+                  profileDid: item.did,
+                  position: index,
+                })
                 onProfileClick(item)
                 onResultPress()
               }}

src/screens/Search/components/SearchHistory.tsx

@@ -1,8 +1,6 @@
 import {Pressable, ScrollView, View} from 'react-native'
 import {moderateProfile, type ModerationOpts} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
 
 import {createHitslop, HITSLOP_10} from '#/lib/constants'
 import {makeProfileLink} from '#/lib/routes/links'
@@ -19,6 +17,7 @@ import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
+import {useAnalytics} from '#/analytics'
 import type * as bsky from '#/types/bsky'
 
 export function SearchHistory({
@@ -36,7 +35,8 @@ export function SearchHistory({
   onRemoveItemClick: (item: string) => void
   onRemoveProfileClick: (profile: bsky.profile.AnyProfileView) => void
 }) {
-  const {_} = useLingui()
+  const ax = useAnalytics()
+  const {t: l} = useLingui()
   const moderationOpts = useModerationOpts()
 
   return (
@@ -47,7 +47,7 @@ export function SearchHistory({
         {(searchHistory.length > 0 || selectedProfiles.length > 0) && (
           <View style={[a.px_lg, a.pt_sm]}>
             <Text style={[a.text_md, a.font_semi_bold]}>
-              <Trans>Recent Searches</Trans>
+              <Trans>Recent searches</Trans>
             </Text>
           </View>
         )}
@@ -66,12 +66,18 @@ export function SearchHistory({
                   a.gap_xl,
                 ]}>
                 {moderationOpts &&
-                  selectedProfiles.map(profile => (
+                  selectedProfiles.map((profile, index) => (
                     <RecentProfileItem
                       key={profile.did}
                       profile={profile}
                       moderationOpts={moderationOpts}
-                      onPress={() => onProfileClick(profile)}
+                      onPress={() => {
+                        ax.metric('search:recent:press', {
+                          profileDid: profile.did,
+                          position: index,
+                        })
+                        onProfileClick(profile)
+                      }}
                       onRemove={() => onRemoveProfileClick(profile)}
                     />
                   ))}
@@ -86,13 +92,18 @@ export function SearchHistory({
               <View key={index} style={[a.flex_row, a.align_center]}>
                 <Pressable
                   accessibilityRole="button"
-                  onPress={() => onItemClick(historyItem)}
+                  onPress={() => {
+                    ax.metric('search:query', {
+                      source: 'history',
+                    })
+                    onItemClick(historyItem)
+                  }}
                   hitSlop={HITSLOP_10}
                   style={[a.flex_1, a.py_sm]}>
                   <Text style={[a.text_md]}>{historyItem}</Text>
                 </Pressable>
                 <Button
-                  label={_(msg`Remove ${historyItem}`)}
+                  label={l`Remove ${historyItem}`}
                   onPress={() => onRemoveItemClick(historyItem)}
                   size="small"
                   variant="ghost"
@@ -120,7 +131,7 @@ function RecentProfileItem({
   onPress: () => void
   onRemove: () => void
 }) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const width = 80
 
   const moderation = moderateProfile(profile, moderationOpts)
@@ -165,7 +176,7 @@ function RecentProfileItem({
         </View>
       </Link>
       <Button
-        label={_(msg`Remove profile`)}
+        label={l`Remove profile`}
         hitSlop={createHitslop(6)}
         size="tiny"
         variant="outline"

src/view/com/profile/ProfileCard.tsx

@@ -1,4 +1,4 @@
-import {View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {atoms as a, useTheme} from '#/alf'
@@ -11,12 +11,14 @@ export function ProfileCardWithFollowBtn({
   logContext = 'ProfileCard',
   position,
   contextProfileDid,
+  onPress,
 }: {
   profile: bsky.profile.AnyProfileView
   noBorder?: boolean
   logContext?: 'ProfileCard' | 'StarterPackProfilesList'
   position?: number
   contextProfileDid?: string
+  onPress?: (e: GestureResponderEvent) => void
 }) {
   const t = useTheme()
   const moderationOpts = useModerationOpts()
@@ -36,6 +38,7 @@ export function ProfileCardWithFollowBtn({
         logContext={logContext}
         position={position}
         contextProfileDid={contextProfileDid}
+        onPress={onPress}
       />
     </View>
   )

src/view/shell/desktop/Search.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {memo, useCallback, useState} from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
@@ -6,8 +6,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native'
-import {msg} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -68,15 +67,15 @@ let SearchLinkCard = ({
     </Link>
   )
 }
-SearchLinkCard = React.memo(SearchLinkCard)
+SearchLinkCard = memo(SearchLinkCard)
 export {SearchLinkCard}
 
 export function DesktopSearch() {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
-  const [isActive, setIsActive] = React.useState<boolean>(false)
+  const [isActive, setIsActive] = useState<boolean>(false)
-  const [query, setQuery] = React.useState<string>('')
+  const [query, setQuery] = useState<string>('')
   const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
     query,
     true,
@@ -84,23 +83,23 @@ export function DesktopSearch() {
 
   const moderationOpts = useModerationOpts()
 
-  const onChangeText = React.useCallback((text: string) => {
+  const onChangeText = useCallback((text: string) => {
     setQuery(text)
     setIsActive(text.length > 0)
   }, [])
 
-  const onPressCancelSearch = React.useCallback(() => {
+  const onPressCancelSearch = useCallback(() => {
     setQuery('')
     setIsActive(false)
   }, [setQuery])
 
-  const onSubmit = React.useCallback(() => {
+  const onSubmit = useCallback(() => {
     setIsActive(false)
     if (!query.length) return
     navigation.dispatch(StackActions.push('Search', {q: query}))
   }, [query, navigation])
 
-  const onSearchProfileCardPress = React.useCallback(() => {
+  const onSearchProfileCardPress = useCallback(() => {
     setQuery('')
     setIsActive(false)
   }, [])
@@ -128,7 +127,7 @@ export function DesktopSearch() {
           ) : (
             <>
               <SearchLinkCard
-                label={_(msg`Search for "${query}"`)}
+                label={l`Search for "${query}"`}
                 to={`/search?q=${encodeURIComponent(query)}`}
                 style={
                   (autocompleteData?.length ?? 0) > 0