Style follow buttons in expanded bundles, add client event on expand

src/analytics/metrics/types.ts

@@ -5,6 +5,7 @@
 import {type Platform} from 'react-native'
 
 import {type NotificationReason} from '#/lib/hooks/useNotificationHandler'
+import {type NotificationType} from '#/state/queries/notifications/types'
 import {type FeedDescriptor} from '#/state/queries/post-feed'
 import {type LiveEventFeedMetricContext} from '#/features/liveEvents/types'
 
@@ -53,6 +54,10 @@ export type Events = {
     context: 'StartOnboarding' | 'AfterOnboarding' | 'Login' | 'Home'
     status: 'granted' | 'denied' | 'undetermined'
   }
+  'notifications:bundleExpand': {
+    notificationType: NotificationType
+    authorCount: number
+  }
   'state:background': {
     secondsActive: number
   }
@@ -464,6 +469,7 @@ export type Events = {
       | 'OnboardingSuggestedAccounts'
       | 'FindContacts'
       | 'GroupChat'
+      | 'NotificationExpandedProfileCard'
   }
   'profile:followers:view': {
     contextProfileDid: string
@@ -570,6 +576,7 @@ export type Events = {
       | 'OnboardingSuggestedAccounts'
       | 'FindContacts'
       | 'GroupChat'
+      | 'NotificationExpandedProfileCard'
   }
   'chat:create': {
     logContext:

src/view/com/notifications/NotificationFeedItem.tsx

@@ -147,14 +147,6 @@ let NotificationFeedItem = ({
     return ''
   }, [item])
 
-  const onToggleAuthorsExpanded = (e?: GestureResponderEvent) => {
-    if (e) {
-      e.preventDefault()
-      e.stopPropagation()
-    }
-    setIsAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
-  }
-
   const onBeforePress = useCallback(() => {
     unstableCacheProfileView(queryClient, item.notification.author)
   }, [queryClient, item.notification.author])
@@ -177,6 +169,20 @@ let NotificationFeedItem = ({
     )
   }, [item, moderationOpts])
 
+  const onToggleAuthorsExpanded = (e?: GestureResponderEvent) => {
+    if (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+    if (!isAuthorsExpanded) {
+      ax.metric('notifications:bundleExpand', {
+        notificationType: item.type,
+        authorCount: authors.length,
+      })
+    }
+    setIsAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
+  }
+
   const niceTimestamp = niceDate(i18n, item.notification.indexedAt)
   const firstAuthor = authors[0]
   const firstAuthorName = sanitizeDisplayName(
@@ -1097,6 +1103,8 @@ function ExpandedAuthorProfileCard({
   moderationOpts: ModerationOpts
   isLast: boolean
 }) {
+  const profile = useProfileShadow(author.profile)
+  const isFollowing = !!profile.viewer?.following
   return (
     <ProfileCard.Link
       profile={author.profile}
@@ -1114,7 +1122,11 @@ function ExpandedAuthorProfileCard({
           <ProfileCard.FollowButton
             profile={author.profile}
             moderationOpts={moderationOpts}
-            logContext="ProfileCard"
+            logContext="NotificationExpandedProfileCard"
+            size="tiny"
+            variant={isFollowing ? 'ghost' : 'solid'}
+            color={isFollowing ? 'secondary' : 'primary_subtle'}
+            withIcon={isFollowing}
           />
         </ProfileCard.Header>
       </ProfileCard.Outer>