diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx index 4d7c2d7e33..a2f32ab3de 100644 --- a/src/components/dms/MessagesListHeader.tsx +++ b/src/components/dms/MessagesListHeader.tsx @@ -13,7 +13,11 @@ import {makeProfileLink} from '#/lib/routes/links' import {type NavigationProp} from '#/lib/routes/types' import {logger} from '#/logger' import {type Shadow} from '#/state/cache/profile-shadow' -import {isConvoActive, useConvo} from '#/state/messages/convo' +import { + type ActiveConvoStates, + isConvoActive, + useConvo, +} from '#/state/messages/convo' import {type ConvoItem} from '#/state/messages/convo/types' import {useSession} from '#/state/session' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' @@ -36,10 +40,13 @@ export function MessagesListHeader({ moderation, }: { profile?: Shadow - moderation?: ModerationDecision + moderation?: ModerationDecision | null }) { const t = useTheme() + const convoState = useConvo() + const isGroupChat = convoState?.isGroup?.() + const blockInfo = useMemo(() => { if (!moderation) return const modui = moderation.ui('profileView') @@ -58,12 +65,21 @@ export function MessagesListHeader({ - {profile && moderation && blockInfo ? ( - + {isConvoActive(convoState) ? ( + moderation && blockInfo && profile && !isGroupChat ? ( + + ) : ( + + ) ) : ( <> @@ -94,11 +110,13 @@ export function MessagesListHeader({ ) } -function HeaderReady({ +function ProfileHeaderReady({ + convoState, profile, moderation, blockInfo, }: { + convoState: ActiveConvoStates profile: Shadow moderation: ModerationDecision blockInfo: { @@ -107,21 +125,12 @@ function HeaderReady({ } }) { const {t: l} = useLingui() - const t = useTheme() - const convoState = useConvo() const {currentAccount} = useSession() - const navigation = useNavigation() - - const groupInfo = convoState.getGroupInfo?.() - const isGroupChat = groupInfo != null - const isDeletedAccount = profile?.handle === 'missing.invalid' - const displayName = isGroupChat - ? (groupInfo.name ?? l`${profile.handle}'s group chat`) - : isDeletedAccount - ? l`Deleted Account` - : createSanitizedDisplayName(profile, true, moderation.ui('displayName')) + const displayName = isDeletedAccount + ? l`Deleted Account` + : createSanitizedDisplayName(profile, true, moderation.ui('displayName')) const latestMessageFromOther = convoState.items.findLast( (item: ConvoItem) => @@ -134,6 +143,63 @@ function HeaderReady({ ? latestMessageFromOther.message : undefined + return ( + + + + + } + muted={convoState.convo?.muted} + settings={ + isConvoActive(convoState) ? ( + + ) : null + } + /> + ) +} + +function GroupHeaderReady({ + convoState, + profile, + moderation, +}: { + convoState: ActiveConvoStates + profile?: Shadow + moderation?: ModerationDecision | null +}) { + const {t: l} = useLingui() + + const navigation = useNavigation() + + const groupInfo = convoState.getGroupInfo?.() + + const isDeletedAccount = profile?.handle === 'missing.invalid' + const displayName = isDeletedAccount + ? l`Deleted Account` + : profile + ? createSanitizedDisplayName(profile, true, moderation?.ui('displayName')) + : undefined + const groupName = + groupInfo?.name ?? + (displayName ? l`${displayName}’s group chat` : l`Group chat`) + const handleNavigateToSettings = () => { const convoId = convoState.convo?.id if (convoId) { @@ -145,84 +211,67 @@ function HeaderReady({ } } + return ( + + + + {groupName} + + + } + muted={convoState.convo?.muted} + settings={ + isConvoActive(convoState) ? ( + + ) : null + } + /> + ) +} + +function Wrapper({ + heading, + muted, + settings, +}: { + heading: React.ReactNode + muted: boolean + settings: React.ReactNode +}) { return ( - {isGroupChat ? ( - - - - {displayName} - - - ) : ( - - - - - - {displayName} - - - {convoState.convo?.muted && ( - <> - - {' '} - ·{' '} - - - - )} - - - - )} + + {heading} + + - - {isConvoActive(convoState) ? ( - isGroupChat ? ( - - ) : ( - - ) - ) : null} - + {settings} ) } + +function MuteStatus({muted}: {muted: boolean}) { + const t = useTheme() + + return muted ? ( + <> + · + + + ) : undefined +} diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index ec082bb8b8..f56f612e28 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -173,16 +173,12 @@ function Inner() { )} - {moderation && recipient ? ( - - ) : ( - - )} + {!readyToShow && ( + moderation: ModerationDecision | null + recipient: Shadow | undefined hasScrolled: boolean setHasScrolled: React.Dispatch> }) { @@ -289,12 +285,14 @@ function InnerReady({ hasAcceptOverride={!!params.accept} transparentHeaderHeight={IS_LIQUID_GLASS ? headerHeight : 0} footer={ - 0} - moderation={moderation} - /> + moderation && recipient ? ( + 0} + moderation={moderation} + /> + ) : null } /> )}