Flash message bubble when tapping a reply (#10929)

src/components/dms/MessageItem.tsx

@@ -10,6 +10,7 @@ import {
 import Animated, {
   FadeIn,
   FadeOut,
+  interpolateColor,
   LayoutAnimationConfig,
   LinearTransition,
   useAnimatedStyle,
@@ -233,6 +234,15 @@ let MessageItem = ({
 
   const pendingColor = t.palette.primary_300
 
+  const bubbleColor = isFromSelf
+    ? isPending
+      ? pendingColor
+      : t.palette.primary_500
+    : t.palette.contrast_50
+  const highlightColor = isFromSelf
+    ? t.palette.primary_300
+    : t.palette.primary_100
+
   const rt = new RichTextAPI({text: message.text, facets: message.facets})
 
   const hasEmbed =
@@ -278,7 +288,11 @@ let MessageItem = ({
   }, [highlightKey, highlightSV])
 
   const highlightStyle = useAnimatedStyle(() => ({
-    opacity: highlightSV.get(),
+    backgroundColor: interpolateColor(
+      highlightSV.get(),
+      [0, 1],
+      [bubbleColor, highlightColor],
+    ),
   }))
 
   const borderRadiusStyle = useAnimatedStyle(() =>
@@ -427,14 +441,6 @@ let MessageItem = ({
     web: a.mx_lg,
   })
 
-  // Negative of `messageInset` so the flash bleeds past the row's horizontal
-  // margin to the screen edges.
-  const flashBleed = platform<number>({
-    android: -a.mx_sm.marginLeft,
-    ios: -a.mx_md.marginLeft,
-    web: -a.mx_lg.marginLeft,
-  })
-
   return (
     <>
       {hasLargeGapFromPrev && <DateDivider date={message.sentAt} />}
@@ -444,20 +450,6 @@ let MessageItem = ({
           isFirstInCluster ? a.mt_md : {marginTop: CLUSTERED_MESSAGE_GAP},
           hasReactions && {paddingBottom: 26},
         ]}>
-        <Animated.View
-          pointerEvents="none"
-          style={[
-            a.absolute,
-            {
-              top: -CLUSTERED_MESSAGE_GAP,
-              bottom: -CLUSTERED_MESSAGE_GAP,
-              left: flashBleed,
-              right: flashBleed,
-              backgroundColor: t.palette.primary_100,
-            },
-            highlightStyle,
-          ]}
-        />
         <View style={[a.relative]}>
           {showAvatar ? (
             <View style={[a.absolute, a.bottom_0, a.z_50]}>{avatar}</View>
@@ -508,6 +500,7 @@ let MessageItem = ({
                         squaredBottomCorner || hasEmbedAndText
                       }
                       squaredTopCorner={squaredTopCorner}
+                      highlightSV={highlightSV}
                     />
                   )}
                   {ChatBskyEmbedJoinLink.isView(message.embed) && (
@@ -519,6 +512,7 @@ let MessageItem = ({
                         squaredBottomCorner || hasEmbedAndText
                       }
                       squaredTopCorner={squaredTopCorner}
+                      highlightSV={highlightSV}
                     />
                   )}
                   {rt.text.length > 0 && (
@@ -535,14 +529,10 @@ let MessageItem = ({
                             marginTop: hasEmbedAndText
                               ? CLUSTERED_MESSAGE_GAP
                               : 0,
-                            backgroundColor: isFromSelf
-                              ? isPending
-                                ? pendingColor
-                                : t.palette.primary_500
-                              : t.palette.contrast_50,
                           },
                           isFromSelf ? a.self_end : a.self_start,
                           borderRadiusStyle,
+                          highlightStyle,
                         ],
                       ]}>
                       {replyTo && !isOnlyEmoji(message.text) ? (

src/components/dms/MessageItemEmbed.tsx

@@ -1,5 +1,10 @@
 import {memo} from 'react'
 import {useWindowDimensions, View} from 'react-native'
+import Animated, {
+  interpolateColor,
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
 import {type $Typed, type AppBskyEmbedRecord} from '@atproto/api'
 
 import {atoms as a, native, useTheme, web} from '#/alf'
@@ -15,16 +20,48 @@ let MessageItemEmbed = ({
   isGroupChat,
   squaredTopCorner,
   squaredBottomCorner,
+  highlightSV,
 }: {
   embed: $Typed<AppBskyEmbedRecord.View>
   isFromSelf: boolean
   isGroupChat: boolean
   squaredTopCorner: boolean
   squaredBottomCorner: boolean
+  highlightSV: SharedValue<number>
 }): React.ReactNode => {
   const t = useTheme()
   const screen = useWindowDimensions()
 
+  const restingColor = isFromSelf ? t.palette.primary_50 : t.palette.contrast_50
+  const highlightColor = isFromSelf
+    ? t.palette.primary_300
+    : t.palette.primary_100
+  const highlightStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      highlightSV.get(),
+      [0, 1],
+      [restingColor, highlightColor],
+    ),
+  }))
+
+  const radiiStyle = isFromSelf
+    ? {
+        borderBottomRightRadius: squaredBottomCorner
+          ? SQUARED_BORDER_RADIUS
+          : BORDER_RADIUS,
+        borderTopRightRadius: squaredTopCorner
+          ? SQUARED_BORDER_RADIUS
+          : BORDER_RADIUS,
+      }
+    : {
+        borderBottomLeftRadius: squaredBottomCorner
+          ? SQUARED_BORDER_RADIUS
+          : BORDER_RADIUS,
+        borderTopLeftRadius: squaredTopCorner
+          ? SQUARED_BORDER_RADIUS
+          : BORDER_RADIUS,
+      }
+
   return (
     <MessageContextProvider>
       <View
@@ -44,37 +81,15 @@ let MessageItemEmbed = ({
           // CLUSTERED_MESSAGE_GAP (2px) is the only spacing applied
           {marginTop: -a.mt_sm.marginTop},
         ]}>
-        <View>
+        <Animated.View
+          style={[a.rounded_xl, a.overflow_hidden, radiiStyle, highlightStyle]}>
           <Embed
             embed={embed}
             allowNestedQuotes
             viewContext={PostEmbedViewContext.ChatMessage}
-            style={[
+            style={[a.rounded_xl, a.overflow_hidden, a.border_0, radiiStyle]}
-              a.rounded_xl,
-              a.overflow_hidden,
-              a.border_0,
-              isFromSelf
-                ? {
-                    backgroundColor: t.palette.primary_50,
-                    borderBottomRightRadius: squaredBottomCorner
-                      ? SQUARED_BORDER_RADIUS
-                      : BORDER_RADIUS,
-                    borderTopRightRadius: squaredTopCorner
-                      ? SQUARED_BORDER_RADIUS
-                      : BORDER_RADIUS,
-                  }
-                : {
-                    backgroundColor: t.palette.contrast_50,
-                    borderBottomLeftRadius: squaredBottomCorner
-                      ? SQUARED_BORDER_RADIUS
-                      : BORDER_RADIUS,
-                    borderTopLeftRadius: squaredTopCorner
-                      ? SQUARED_BORDER_RADIUS
-                      : BORDER_RADIUS,
-                  },
-            ]}
           />
-        </View>
+        </Animated.View>
       </View>
     </MessageContextProvider>
   )

src/components/dms/MessageItemInviteEmbed.tsx

@@ -1,5 +1,10 @@
 import {memo} from 'react'
 import {useWindowDimensions, View} from 'react-native'
+import Animated, {
+  interpolateColor,
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
 import {type $Typed, type ChatBskyEmbedJoinLink} from '@atproto/api'
 
 import {useConvoActive} from '#/state/messages/convo'
@@ -17,17 +22,31 @@ let MessageItemInviteEmbed = ({
   isGroupChat,
   squaredTopCorner,
   squaredBottomCorner,
+  highlightSV,
 }: {
   embed: $Typed<ChatBskyEmbedJoinLink.View>
   isFromSelf: boolean
   isGroupChat: boolean
   squaredTopCorner: boolean
   squaredBottomCorner: boolean
+  highlightSV: SharedValue<number>
 }): React.ReactNode => {
   const t = useTheme()
   const screen = useWindowDimensions()
   const convo = useConvoActive()
 
+  const restingColor = isFromSelf ? t.palette.primary_50 : t.palette.contrast_50
+  const highlightColor = isFromSelf
+    ? t.palette.primary_300
+    : t.palette.primary_100
+  const highlightStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      highlightSV.get(),
+      [0, 1],
+      [restingColor, highlightColor],
+    ),
+  }))
+
   const code = isKnownJoinLinkPreview(embed.joinLinkPreview)
     ? embed.joinLinkPreview.code
     : undefined
@@ -49,14 +68,13 @@ let MessageItemInviteEmbed = ({
             maxWidth: 360,
           }),
         ]}>
-        <View
+        <Animated.View
           style={[
             a.p_md,
             a.gap_md,
             a.overflow_hidden,
             isFromSelf
               ? {
-                  backgroundColor: t.palette.primary_50,
                   borderBottomRightRadius: squaredBottomCorner
                     ? SQUARED_BORDER_RADIUS
                     : BORDER_RADIUS,
@@ -67,7 +85,6 @@ let MessageItemInviteEmbed = ({
                   borderTopLeftRadius: BORDER_RADIUS,
                 }
               : {
-                  backgroundColor: t.palette.contrast_50,
                   borderBottomLeftRadius: squaredBottomCorner
                     ? SQUARED_BORDER_RADIUS
                     : BORDER_RADIUS,
@@ -77,6 +94,7 @@ let MessageItemInviteEmbed = ({
                   borderBottomRightRadius: BORDER_RADIUS,
                   borderTopRightRadius: BORDER_RADIUS,
                 },
+            highlightStyle,
           ]}>
           <ChatInvite.Root
             code={code}
@@ -85,7 +103,7 @@ let MessageItemInviteEmbed = ({
             hasFixedHeight={false}>
             <MessageItemInviteEmbedBody />
           </ChatInvite.Root>
-        </View>
+        </Animated.View>
       </View>
     </MessageContextProvider>
   )