Display badges next to chat inviter's display name (#10451)

src/screens/Messages/components/ChatStatusInfo.tsx

@@ -13,6 +13,7 @@ import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, web} from '#/alf'
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
 import {KnownFollowers} from '#/components/KnownFollowers'
+import {ProfileBadges} from '#/components/ProfileBadges'
 import {usePromptControl} from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -135,9 +136,32 @@ function InviterHeader({
         size={42}
         moderation={moderation.ui('avatar')}
       />
-      <View>
+      <View style={[a.flex_1]}>
-        <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+        <Text style={[a.flex_row, a.align_center]}>
-          <Trans>{displayName} added you</Trans>
+          <Trans comment="Text identifying the person who added you to a group chat">
+            <Text
+              style={[
+                a.text_md,
+                a.leading_snug,
+                a.font_semi_bold,
+                t.atoms.text,
+              ]}
+              numberOfLines={1}>
+              {displayName}
+            </Text>
+            <ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
+            <Text
+              style={[
+                a.text_md,
+                a.leading_snug,
+                a.font_semi_bold,
+                t.atoms.text,
+              ]}
+              numberOfLines={1}>
+              {' '}
+              added you
+            </Text>
+          </Trans>
         </Text>
         <Text style={[web(a.pt_xs), a.text_sm, t.atoms.text_contrast_high]}>
           {sanitizeHandle(profile.handle, '@')}