Added Automation label to labeller display names (#11027)

src/screens/Profile/Header/DisplayName.tsx

@@ -4,7 +4,8 @@ import {type AppBskyActorDefs, type ModerationDecision} from '@atproto/api'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {type Shadow} from '#/state/cache/types'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, platform, useBreakpoints, useTheme} from '#/alf'
+import {ProfileBadges} from '#/components/ProfileBadges'
 import {Text} from '#/components/Typography'
 
 export function ProfileHeaderDisplayName({
@@ -18,7 +19,7 @@ export function ProfileHeaderDisplayName({
   const {gtMobile} = useBreakpoints()
 
   return (
-    <View pointerEvents="none">
+    <View>
       <Text
         emoji
         testID="profileHeaderDisplayName"
@@ -27,11 +28,15 @@ export function ProfileHeaderDisplayName({
           gtMobile ? a.text_4xl : a.text_3xl,
           a.self_start,
           a.font_bold,
+          a.leading_tight,
         ]}>
         {sanitizeDisplayName(
           profile.displayName || sanitizeHandle(profile.handle),
           moderation.ui('displayName'),
         )}
+        <View style={[a.pl_xs, {marginTop: platform({ios: 2})}]}>
+          <ProfileBadges profile={profile} size="lg" interactive />
+        </View>
       </Text>
     </View>
   )