diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 184a16afaa..2210e0d83f 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -26,18 +26,25 @@ import {plural} from '@lingui/core/macro' import {Trans, useLingui} from '@lingui/react/macro' import {useQueryClient} from '@tanstack/react-query' +import {isBlockedOrBlocking} from '#/lib/moderation/blocked-and-muted' import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' import {makeProfileLink} from '#/lib/routes/links' +import {sanitizeHandle} from '#/lib/strings/handles' +import {useMaybeProfileShadow} from '#/state/cache/profile-shadow' +import {type Shadow} from '#/state/cache/types' import {type ConvoItem} from '#/state/messages/convo/types' import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {useProfileBlockMutationQueue} from '#/state/queries/profile' import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache' import {useSession} from '#/state/session' import {atoms as a, native, platform, useTheme} from '#/alf' import {isOnlyEmoji} from '#/alf/typography' +import {Button} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' import {ActionsWrapper} from '#/components/dms/ActionsWrapper' import {InlineLinkText, Link} from '#/components/Link' import * as ProfileCard from '#/components/ProfileCard' +import * as Prompt from '#/components/Prompt' import {RichText} from '#/components/RichText' import {Text} from '#/components/Typography' import {DateDivider} from './DateDivider' @@ -109,7 +116,7 @@ let MessageItem = ({ const queryClient = useQueryClient() const {message} = item - const profile = relatedProfiles.get(message.sender.did) + const profile = useMaybeProfileShadow(relatedProfiles.get(message.sender.did)) const reactionsControl = useDialogControl() @@ -433,70 +440,76 @@ let MessageItem = ({ {displayName} ) : null} - - {AppBskyEmbedRecord.isView(message.embed) && ( - - )} - {rt.text.length > 0 && ( - - + ) : ( + + {AppBskyEmbedRecord.isView(message.embed) && ( + - - )} - {appliedReactions} - + )} + {rt.text.length > 0 && ( + + + + )} + {appliedReactions} + + )} {isLastInCluster && ( @@ -560,3 +573,99 @@ let MessageItemMetadata = ({ } MessageItemMetadata = memo(MessageItemMetadata) export {MessageItemMetadata} + +function BlockedPlaceholder({ + profile, + style, +}: { + profile: Shadow + style?: StyleProp +}) { + const {t: l} = useLingui() + const t = useTheme() + const control = Prompt.usePromptControl() + const [_queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile) + + return ( + <> + + + + + {profile.viewer?.blocking ? ( + + You are blocking {sanitizeHandle(profile.handle, '@')} + + ) : ( + + {sanitizeHandle(profile.handle, '@')} is blocking you + + )} + + + {profile.viewer?.blocking ? ( + + Messages from this person are hidden while you are blocking + them. + + ) : ( + + Messages from this person are hidden while they are blocking + you. + + )} + + + {}} cta={l`Okay`} color="primary" /> + {profile.viewer?.blocking && !profile.viewer.blockingByList && ( + queueUnblock()} + cta={l`Unblock`} + color="secondary" + /> + )} + + + + + ) +}