style tweaks

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 (
     <Button
@@ -772,42 +791,33 @@ function ReplyQuote({
           : l`Replied-to message, tap to scroll to it`
       }
       onPress={onPress}
-      style={[a.mb_xs]}>
-      <View
-        style={[
-          a.w_full,
-          a.gap_2xs,
-          a.rounded_sm,
-          a.px_sm,
-          a.py_xs,
-          a.border_l,
-          {
-            borderLeftWidth: 3,
-            borderLeftColor: tintColor,
-            backgroundColor: utils.alpha(tintColor, isFromSelf ? 0.15 : 0.06),
-          },
-        ]}>
-        {senderName ? (
-          <Text
-            style={[a.text_xs, a.font_bold, {color: subtleColor}]}
-            emoji
-            numberOfLines={1}>
-            {senderName}
-          </Text>
-        ) : null}
-        <Text
-          style={[a.text_sm, {color: isDeleted ? subtleColor : tintColor}]}
-          emoji
-          numberOfLines={2}>
-          {ChatBskyConvoDefs.isMessageView(replyTo) ? (
-            replyTo.text
-          ) : (
-            <Text style={[a.text_sm, a.italic, {color: subtleColor}]}>
-              <Trans>Message deleted</Trans>
-            </Text>
-          )}
+      style={[
+        a.mb_xs,
+        a.w_full,
+        a.gap_2xs,
+        a.rounded_md,
+        a.px_sm,
+        a.py_xs,
+        a.flex_col,
+        a.align_start,
+        a.border,
+        {borderColor, marginHorizontal: -4},
+      ]}>
+      {senderName ? (
+        <Text style={[a.text_xs, {color: subtleColor}]} emoji numberOfLines={1}>
+          {senderName}
         </Text>
-      </View>
+      ) : null}
+      <Text
+        style={[
+          a.text_sm,
+          {color: subtle ? subtleColor : tintColor},
+          subtle && a.italic,
+        ]}
+        emoji
+        numberOfLines={2}>
+        {text}
+      </Text>
     </Button>
   )
 }

src/screens/Messages/Conversation.tsx

@@ -262,7 +262,6 @@ function InnerReady({
       {IS_LIQUID_GLASS ? (
         <ScrollEdgeEffect
           edge="top"
-          effect="soft"
           style={[a.absolute, a.w_full, a.z_10, {paddingTop: topInset}]}
           onLayout={onHeaderLayout}>
           {header}

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,
       ]}>
       <View style={[a.flex_1]}>
-        <Text
-          style={[a.text_xs, a.font_bold, t.atoms.text_contrast_medium]}
-          emoji
-          numberOfLines={1}>
-          {isFromSelf ? (
-            <Trans>Replying to yourself</Trans>
-          ) : displayName ? (
-            <Trans>Replying to {displayName}</Trans>
-          ) : (
-            <Trans>Replying to message</Trans>
-          )}
-        </Text>
-        <Text
-          style={[a.text_sm, t.atoms.text_contrast_high, a.mt_2xs]}
-          emoji
-          numberOfLines={1}>
+        {displayName && (
+          <Text
+            style={[a.text_xs, t.atoms.text_contrast_high]}
+            emoji
+            numberOfLines={1}>
+            {displayName}
+          </Text>
+        )}
+        <Text style={[a.text_sm]} emoji numberOfLines={2}>
           {replyTo.text}
         </Text>
       </View>

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<ChatBskyConvoDefs.MessageView>) => {
       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<AppBskyEmbedRecord.View>
         | $Typed<ChatBskyEmbedJoinLink.View>
         | 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<ChatBskyConvoDefs.MessageView>,
   ) => Promise<void>
   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()
   })