Fix reaction pickers UX in reactions sheet

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactionoptions/ExtendedReactionsOptions.kt

@@ -42,7 +42,7 @@ internal fun ExtendedReactionsOptions(
     ownReactions: List<Reaction>,
     onReactionOptionSelected: (ReactionOptionItemState) -> Unit,
     modifier: Modifier = Modifier,
-    cells: GridCells = GridCells.Adaptive(minSize = 48.dp),
+    cells: GridCells = GridCells.Adaptive(minSize = 56.dp),
 ) {
     val resolver = ChatTheme.reactionResolver
     val options = resolver.supportedReactions.map { type ->

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionCountRow.kt

@@ -44,22 +44,21 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.StreamTokens
 import io.getstream.chat.android.compose.ui.util.applyIf
 import io.getstream.chat.android.compose.ui.util.clickable
-import io.getstream.chat.android.models.Reaction
 
 /**
  * Horizontally scrollable row of reaction chips with counts.
  *
  * @param reactionGroups The list of reaction types with their emoji and count.
- * @param ownReactions The current user's reactions on this message (used to determine selected state).
- * @param onReactionOptionSelected Called with the reaction type when a chip is tapped.
+ * @param selectedReactionType The currently selected reaction type for filtering, or null if no filter is active.
+ * @param onReactionSelected Called with the reaction type when a chip is tapped (for filtering).
  * @param onAddReactionClick Called when the add-reaction chip is tapped, or null to hide it.
  * @param modifier Modifier for styling.
  */
 @Composable
 internal fun ReactionCountRow(
     reactionGroups: List<MessageReactionItemState>,
-    ownReactions: List<Reaction>,
-    onReactionOptionSelected: (String) -> Unit,
+    selectedReactionType: String?,
+    onReactionSelected: (String) -> Unit,
     onAddReactionClick: (() -> Unit)?,
     modifier: Modifier = Modifier,
 ) {
@@ -88,8 +87,8 @@ internal fun ReactionCountRow(
 
         reactionGroups.forEach { reaction ->
             ReactionChip(
-                checked = ownReactions.any { it.type == reaction.type },
-                onClick = { onReactionOptionSelected(reaction.type) },
+                checked = selectedReactionType == reaction.type,
+                onClick = { onReactionSelected(reaction.type) },
                 count = reaction.count,
                 icon = {
                     ChatTheme.componentFactory.ReactionIcon(
@@ -141,8 +140,8 @@ private fun ReactionCountRowPreview() {
     ChatTheme {
         ReactionCountRow(
             reactionGroups = PreviewReactionData.manyReactions(),
-            ownReactions = listOf(Reaction(type = "love")),
-            onReactionOptionSelected = {},
+            selectedReactionType = "love",
+            onReactionSelected = {},
             onAddReactionClick = {},
         )
     }

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionsMenu.kt

@@ -31,7 +31,10 @@ import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.Text
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalResources
@@ -140,10 +143,15 @@ internal fun ReactionsMenuContent(
         )
     }
 
+    var selectedReactionType by remember { mutableStateOf<String?>(null) }
+    val filteredUserReactions = remember(userReactions, selectedReactionType) {
+        selectedReactionType?.let { type -> userReactions.filter { it.type == type } } ?: userReactions
+    }
+
     val reactionCountText = LocalResources.current.getQuantityString(
         R.plurals.stream_compose_message_reactions,
-        userReactions.size,
-        userReactions.size,
+        filteredUserReactions.size,
+        filteredUserReactions.size,
     )
 
     Column(
@@ -163,22 +171,35 @@ internal fun ReactionsMenuContent(
 
         ReactionCountRow(
             reactionGroups = reactionGroups,
-            ownReactions = message.ownReactions,
-            onReactionOptionSelected = onReactionOptionSelected,
+            selectedReactionType = selectedReactionType,
+            onReactionSelected = { type ->
+                selectedReactionType = if (selectedReactionType == type) null else type
+            },
             onAddReactionClick = onAddReactionClick,
         )
 
-        userReactions.forEach { item ->
-            UserReactionRow(
-                item = item,
-                onClick = if (item.isMine) {
-                    { onReactionOptionSelected(item.type) }
-                } else {
-                    null
-                },
-            )
-            Spacer(modifier = Modifier.height(8.dp))
-        }
+        UserReactionsList(
+            userReactions = filteredUserReactions,
+            onReactionOptionSelected = onReactionOptionSelected,
+        )
+    }
+}
+
+@Composable
+private fun UserReactionsList(
+    userReactions: List<UserReactionItemState>,
+    onReactionOptionSelected: (String) -> Unit,
+) {
+    userReactions.forEach { item ->
+        UserReactionRow(
+            item = item,
+            onClick = if (item.isMine) {
+                { onReactionOptionSelected(item.type) }
+            } else {
+                null
+            },
+        )
+        Spacer(modifier = Modifier.height(8.dp))
     }
 }