diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx index 7e154adc6a..f23e7cdfae 100644 --- a/src/components/dms/MessagesListHeader.tsx +++ b/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 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} /> - - - {displayName} - - - + + + + {displayName} + + + + + {handle ? ( + + {handle} + + ) : null} } @@ -185,7 +197,7 @@ function GroupHeaderReady({ /> {convo.details.name}