Make whole verifier clickable, no nested interactives (#8249)

src/components/ProfileCard.tsx

@@ -16,7 +16,7 @@ import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
-import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
+import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {
   Button,
@@ -130,17 +130,29 @@ export function Link({
 export function Avatar({
   profile,
   moderationOpts,
+  onPress,
+  disabledPreview,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
+  onPress?: () => void
+  disabledPreview?: boolean
 }) {
   const moderation = moderateProfile(profile, moderationOpts)
 
-  return (
+  return disabledPreview ? (
+    <UserAvatar
+      size={40}
+      avatar={profile.avatar}
+      type={profile.associated?.labeler ? 'labeler' : 'user'}
+      moderation={moderation.ui('avatar')}
+    />
+  ) : (
     <PreviewableUserAvatar
       size={40}
       profile={profile}
       moderation={moderation.ui('avatar')}
+      onBeforePress={onPress}
     />
   )
 }

src/components/verification/VerificationsDialog.tsx

@@ -211,14 +211,22 @@ function VerifierCard({
             </>
           ) : profile && moderationOpts ? (
             <>
+              <ProfileCard.Link
+                profile={profile}
+                style={[a.flex_row, a.align_center, a.gap_sm, a.flex_1]}
+                onPress={() => {
+                  outerDialogControl.close()
+                }}>
                 <ProfileCard.Avatar
                   profile={profile}
                   moderationOpts={moderationOpts}
+                  disabledPreview
                 />
                 <ProfileCard.NameAndHandle
                   profile={profile}
                   moderationOpts={moderationOpts}
                 />
+              </ProfileCard.Link>
               {canAdminister && (
                 <View>
                   <Button