From 0106fd39909f50e35f30db1e28c86039133ac135 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 15 Jun 2026 18:11:45 +0300 Subject: [PATCH] style tweaks --- src/components/dms/MessageItem.tsx | 90 ++++++++++--------- src/screens/Messages/Conversation.tsx | 1 - .../Messages/components/MessageInputReply.tsx | 35 +++----- .../Messages/components/MessagesList.tsx | 22 +++-- 4 files changed, 78 insertions(+), 70 deletions(-) diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index d2bcb3ac05..215fb2fffd 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -751,18 +751,37 @@ function ReplyQuote({ const t = useTheme() const {t: l} = useLingui() - const isDeleted = ChatBskyConvoDefs.isDeletedMessageView(replyTo) const senderProfile = relatedProfiles.get(replyTo.sender.did) const senderName = senderProfile ? createSanitizedDisplayName(senderProfile) : null - // On the blue self-bubble, derive the quote chrome from white; on the grey - // bubble, from the foreground text color. Keeps it legible against either. const tintColor = isFromSelf ? t.palette.white : t.atoms.text.color const subtleColor = isFromSelf - ? utils.alpha(t.palette.white, 0.7) - : t.atoms.text_contrast_medium.color + ? t.palette.white + : t.atoms.text_contrast_high.color + const borderColor = isFromSelf + ? utils.alpha(t.palette.white, 0.5) + : t.atoms.border_contrast_high.borderColor + + let text: string + let subtle = false + if (ChatBskyConvoDefs.isMessageView(replyTo)) { + text = replyTo.text + if (!text.trim()) { + subtle = true + if (ChatBskyEmbedJoinLink.isView(replyTo.embed)) { + text = l`(chat invite link)` + } else if (AppBskyEmbedRecord.isView(replyTo.embed)) { + text = l`(contains embedded content)` + } else { + text = l`No text` + } + } + } else { + text = l`Deleted message` + subtle = true + } return ( ) } diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index 36c0a1ec2f..1e2f4037a8 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -262,7 +262,6 @@ function InnerReady({ {IS_LIQUID_GLASS ? ( {header} diff --git a/src/screens/Messages/components/MessageInputReply.tsx b/src/screens/Messages/components/MessageInputReply.tsx index 0567695ffe..90c404e55c 100644 --- a/src/screens/Messages/components/MessageInputReply.tsx +++ b/src/screens/Messages/components/MessageInputReply.tsx @@ -1,10 +1,9 @@ import {LayoutAnimation, View} from 'react-native' -import {Trans, useLingui} from '@lingui/react/macro' +import {useLingui} from '@lingui/react/macro' import {HITSLOP_20} from '#/lib/constants' import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' import {useConvoActive} from '#/state/messages/convo' -import {useSession} from '#/state/session' import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import {useMessageDialogs} from '#/components/dms/MessageOverlays' @@ -18,7 +17,6 @@ import {Text} from '#/components/Typography' export function MessageInputReply() { const t = useTheme() const {t: l} = useLingui() - const {currentAccount} = useSession() const convo = useConvoActive() const {replyTo, clearReply} = useMessageDialogs() @@ -31,10 +29,9 @@ export function MessageInputReply() { clearReply() } - const isFromSelf = replyTo.sender.did === currentAccount?.did const senderProfile = convo.relatedProfiles.get(replyTo.sender.did) const displayName = senderProfile - ? createSanitizedDisplayName(senderProfile) + ? createSanitizedDisplayName(senderProfile, false) : null return ( @@ -43,31 +40,25 @@ export function MessageInputReply() { a.flex_1, a.flex_row, a.gap_sm, - a.align_center, + a.align_start, t.atoms.border_contrast_high, a.rounded_md, a.border, a.p_sm, a.mt_sm, a.mx_sm, + a.gap_2xs, ]}> - - {isFromSelf ? ( - Replying to yourself - ) : displayName ? ( - Replying to {displayName} - ) : ( - Replying to message - )} - - + {displayName && ( + + {displayName} + + )} + {replyTo.text} diff --git a/src/screens/Messages/components/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx index f274f5521d..428762ee98 100644 --- a/src/screens/Messages/components/MessagesList.tsx +++ b/src/screens/Messages/components/MessagesList.tsx @@ -380,7 +380,7 @@ export function MessagesList({ // -- Message sending const onSendMessage = useCallback( - async (text: string, replyTo?: ChatBskyConvoDefs.MessageView) => { + async (text: string, reply?: $Typed) => { let rt = new RichText({text: text.trimEnd()}, {cleanNewlines: true}) // detect facets without resolution first - this is used to see if there's @@ -396,6 +396,7 @@ export function MessagesList({ | $Typed | $Typed | undefined + let replyTo: ChatBskyConvoDefs.ReplyRef | undefined // Find the embedded link facet and, if it's at the start or end of the // message, remove it from the text (the embed card replaces it). @@ -464,6 +465,10 @@ export function MessagesList({ stripLinkFacet(uri => getChatInviteCodeFromUrl(uri) === code) } + if (reply) { + replyTo = {messageId: reply.id} + } + await rt.detectFacets(agent) rt = shortenLinks(rt) @@ -478,12 +483,10 @@ export function MessagesList({ text: rt.text, facets: rt.facets, embed, - replyTo: replyTo ? {messageId: replyTo.id} : undefined, + replyTo, }, embedView, - replyTo - ? {...replyTo, $type: 'chat.bsky.convo.defs#messageView'} - : undefined, + reply, ) if (replyTo) { @@ -731,7 +734,7 @@ function Composer({ textInputId: string onSendMessage: ( message: string, - replyTo?: ChatBskyConvoDefs.MessageView, + replyTo?: $Typed, ) => Promise messageEmbed: MessageEmbedState | undefined setEmbed: (embedUrl: string | undefined) => void @@ -741,7 +744,12 @@ function Composer({ const {replyTo, clearReply} = useMessageDialogs() const handleSendMessage = useNonReactiveCallback((message: string) => { - void onSendMessage(message, replyTo ?? undefined) + void onSendMessage( + message, + replyTo + ? {...replyTo, $type: 'chat.bsky.convo.defs#messageView'} + : undefined, + ) clearReply() })