From 61be2b92ba25a22e88e69a111ea9d398f2b9b2a4 Mon Sep 17 00:00:00 2001
From: Alex Hart <alex@signal.org>
Date: Wed, 26 Nov 2025 16:13:51 -0400
Subject: [PATCH] Fix emoji sizing on call reaction bar.

---
 .../securesms/components/emoji/Emojifier.kt   | 26 +++++++++
 .../webrtc/v2/AdditionalActionsPopup.kt       | 56 ++++++++++++-------
 2 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/app/src/main/java/org/thoughtcrime/securesms/components/emoji/Emojifier.kt b/app/src/main/java/org/thoughtcrime/securesms/components/emoji/Emojifier.kt
index 0d4b6003d1..deec4a99d6 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/components/emoji/Emojifier.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/emoji/Emojifier.kt
@@ -6,10 +6,15 @@
 package org.thoughtcrime.securesms.components.emoji
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.text.AnnotatedString
@@ -70,6 +75,27 @@ fun Emojifier(
   content(annotatedString, candidateMap)
 }
 
+@Composable
+fun EmojiImage(
+  emoji: String,
+  modifier: Modifier
+) {
+  if (LocalInspectionMode.current) {
+    Box(modifier.background(color = Color.Red, shape = CircleShape))
+    return
+  }
+
+  val context = LocalContext.current
+  val drawable = remember(emoji) { EmojiProvider.getEmojiDrawable(context, emoji) }
+  val painter = rememberDrawablePainter(drawable)
+
+  Image(
+    painter = painter,
+    contentDescription = emoji,
+    modifier = modifier
+  )
+}
+
 @Composable
 @DayNightPreviews
 private fun EmojifierPreview() {
diff --git a/app/src/main/java/org/thoughtcrime/securesms/components/webrtc/v2/AdditionalActionsPopup.kt b/app/src/main/java/org/thoughtcrime/securesms/components/webrtc/v2/AdditionalActionsPopup.kt
index 1a2c758313..902949b8bb 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/components/webrtc/v2/AdditionalActionsPopup.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/webrtc/v2/AdditionalActionsPopup.kt
@@ -9,9 +9,10 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement.spacedBy
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -29,7 +30,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.PersistentList
 import kotlinx.collections.immutable.persistentListOf
@@ -39,7 +39,7 @@ import org.signal.core.ui.compose.TriggerAlignedPopup
 import org.signal.core.ui.compose.TriggerAlignedPopupState
 import org.signal.core.ui.compose.theme.SignalTheme
 import org.thoughtcrime.securesms.R
-import org.thoughtcrime.securesms.components.emoji.Emojifier
+import org.thoughtcrime.securesms.components.emoji.EmojiImage
 
 data class AdditionalActionsState(
   val triggerAlignedPopupState: TriggerAlignedPopupState,
@@ -96,29 +96,23 @@ private fun CallReactionScrubber(
 ) {
   Row(
     verticalAlignment = Alignment.CenterVertically,
+    horizontalArrangement = spacedBy(12.dp),
     modifier = Modifier
       .fillMaxWidth()
       .background(SignalTheme.colors.colorSurface2, RoundedCornerShape(percent = 50))
-      .padding(start = 6.dp, top = 12.dp, bottom = 12.dp, end = 12.dp)
+      .padding(12.dp)
   ) {
     reactions.forEach {
-      Emojifier(it) { annotatedText, inlineContent ->
-        Text(
-          text = annotatedText,
-          inlineContent = inlineContent,
-          style = MaterialTheme.typography.headlineLarge,
-          textAlign = TextAlign.Center,
-          modifier = Modifier
-            .width(44.dp)
-            .clickable(onClick = {
-              listener.onReactClick(it)
-            })
-        )
-      }
+      EmojiImage(
+        emoji = it,
+        modifier = Modifier
+          .size(32.dp)
+          .clickable(onClick = {
+            listener.onReactClick(it)
+          })
+      )
     }
 
-    Spacer(modifier = Modifier.width(6.dp))
-
     IconButton(
       onClick = listener::onReactWithAnyClick,
       modifier = Modifier.size(32.dp)
@@ -177,6 +171,30 @@ private fun CallScreenMenuOption(
   }
 }
 
+@NightPreview
+@Composable
+private fun ReactionsScrubberPreview() {
+  Previews.Preview {
+    Box(
+      modifier = Modifier
+        .width(IntrinsicSize.Min)
+        .padding(12.dp)
+    ) {
+      CallReactionScrubber(
+        reactions = persistentListOf(
+          "\u2764\ufe0f",
+          "\ud83d\udc4d",
+          "\ud83d\udc4e",
+          "\ud83d\ude02",
+          "\ud83d\ude2e",
+          "\ud83d\ude22"
+        ),
+        listener = AdditionalActionsListener.Empty
+      )
+    }
+  }
+}
+
 @NightPreview
 @Composable
 private fun CallScreenAdditionalActionsPopupPreview() {