Add search event analytics (#9949)

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

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 {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} 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"