diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactionoptions/ExtendedReactionsOptions.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactionoptions/ExtendedReactionsOptions.kt index a9e850cb1c4..0cff8b1cc5e 100644 --- a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/reactionoptions/ExtendedReactionsOptions.kt +++ b/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, 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 -> diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionCountRow.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionCountRow.kt index 87d953d3016..72b8cf78321 100644 --- a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionCountRow.kt +++ b/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, - ownReactions: List, - 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 = {}, ) } diff --git a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionsMenu.kt b/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionsMenu.kt index f908e621cc5..8028c5a6d78 100644 --- a/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/ReactionsMenu.kt +++ b/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(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, + onReactionOptionSelected: (String) -> Unit, +) { + userReactions.forEach { item -> + UserReactionRow( + item = item, + onClick = if (item.isMine) { + { onReactionOptionSelected(item.type) } + } else { + null + }, + ) + Spacer(modifier = Modifier.height(8.dp)) } } diff --git a/stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.components.reactionpicker_ReactionsPickerTest_Default_reaction_picker_content.png b/stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.components.reactionpicker_ReactionsPickerTest_Default_reaction_picker_content.png index a6af4041f9a..190c78b3dcd 100644 Binary files a/stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.components.reactionpicker_ReactionsPickerTest_Default_reaction_picker_content.png and b/stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.components.reactionpicker_ReactionsPickerTest_Default_reaction_picker_content.png differ