Update presentation of DM header (#10619)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/dms/MessagesListHeader.tsx

@@ -9,12 +9,13 @@ import {useLingui} from '@lingui/react/macro'
 
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
 import {makeProfileLink} from '#/lib/routes/links'
+import {sanitizeHandle} from '#/lib/strings/handles'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {useIsWithinSplitView} from '#/screens/Messages/components/splitView/context'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {AvatarBubbles} from '#/components/AvatarBubbles'
 import {ButtonIcon} from '#/components/Button'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
@@ -85,6 +86,7 @@ function ProfileHeaderReady({
   convo: Extract<ConvoWithDetails, {kind: 'direct'}>
   moderationOpts: ModerationOpts
 }) {
+  const t = useTheme()
   const {t: l} = useLingui()
   const {currentAccount} = useSession()
   const profile = useProfileShadow(convo.primaryMember)
@@ -106,6 +108,7 @@ function ProfileHeaderReady({
   const displayName = isDeletedAccount
     ? l`Deleted Account`
     : createSanitizedDisplayName(profile, true, moderation.ui('displayName'))
+  const handle = isDeletedAccount ? null : sanitizeHandle(profile.handle, '@')
 
   const latestReportableMessage =
     ChatBskyConvoDefs.isMessageView(convo.view.lastMessage) &&
@@ -126,14 +129,23 @@ function ProfileHeaderReady({
             moderation={moderation.ui('avatar')}
             disableHoverCard={moderation.blocked}
           />
-          <View style={[a.flex_row, a.align_center, a.flex_1]}>
-            <Text
-              style={[a.text_md, a.font_semi_bold, a.flex_shrink]}
-              numberOfLines={1}>
-              {displayName}
-            </Text>
-            <ProfileBadges profile={profile} size="md" style={[a.pl_xs]} />
-            <MuteStatus muted={convo.view.muted} />
+          <View style={[a.flex_1]}>
+            <View style={[a.flex_row, a.align_center, a.flex_1, web(a.mb_2xs)]}>
+              <Text
+                style={[a.text_lg, a.font_semi_bold, a.flex_shrink]}
+                numberOfLines={1}>
+                {displayName}
+              </Text>
+              <ProfileBadges profile={profile} size="md" style={[a.pl_xs]} />
+              <MuteStatus muted={convo.view.muted} />
+            </View>
+            {handle ? (
+              <Text
+                style={[a.text_xs, t.atoms.text_contrast_high]}
+                numberOfLines={1}>
+                {handle}
+              </Text>
+            ) : null}
           </View>
         </Link>
       }
@@ -185,7 +197,7 @@ function GroupHeaderReady({
           />
           <View style={[a.flex_row, a.flex_1, a.align_center]}>
             <Text
-              style={[a.text_md, a.font_semi_bold, a.flex_shrink]}
+              style={[a.text_lg, a.font_semi_bold, a.flex_shrink]}
               numberOfLines={1}>
               {convo.details.name}
             </Text>