From c21138ba6391a5821e5344a45b1a8f5f0f8943a0 Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Tue, 5 May 2026 17:29:52 +0100
Subject: [PATCH] Differentiate reactions that include the viewer (#10416)

---
 src/components/dms/MessageItem.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index 96ccb1665f..d01743b18a 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -269,6 +269,10 @@ let MessageItem = ({
 
   const reactions = useMemo(() => message.reactions ?? [], [message.reactions])
 
+  const hasSelfReacted = reactions.some(
+    r => r.sender.did === currentAccount?.did,
+  )
+
   const reactionsLabel = useMemo(() => {
     if (reactions.length === 0) return ''
     if (reactions.length === 1) {
@@ -322,7 +326,11 @@ let MessageItem = ({
               a.rounded_lg,
               a.border,
               t.atoms.border_contrast_low,
-              t.atoms.bg_contrast_25,
+              hasSelfReacted
+                ? {
+                    backgroundColor: t.palette.primary_100,
+                  }
+                : t.atoms.bg_contrast_25,
               t.atoms.shadow_sm,
               {
                 paddingTop: platform({android: 2, default: 3}),
@@ -368,7 +376,11 @@ let MessageItem = ({
                 <Text
                   style={[
                     a.text_xs,
-                    t.atoms.text_contrast_medium,
+                    hasSelfReacted
+                      ? {
+                          color: t.palette.primary_900,
+                        }
+                      : t.atoms.text_contrast_high,
                     {textAlignVertical: 'center', includeFontPadding: false},
                   ]}>
                   {reactions.length}