Show reactions in the pinned messages list

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListEvent.kt

@@ -11,8 +11,10 @@ package io.element.android.features.messages.impl.pinned.list
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.libraries.matrix.api.core.ThreadId
+import io.element.android.libraries.matrix.api.timeline.item.event.EventOrTransactionId
 
 sealed interface PinnedMessagesListEvent {
     data class HandleAction(val action: TimelineItemAction, val event: TimelineItem.Event) : PinnedMessagesListEvent
     data class OpenThread(val threadRootId: ThreadId) : PinnedMessagesListEvent
+    data class ToggleReaction(val emoji: String, val eventOrTransactionId: EventOrTransactionId) : PinnedMessagesListEvent
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListPresenter.kt

@@ -29,6 +29,8 @@ import io.element.android.features.messages.impl.actionlist.model.TimelineItemAc
 import io.element.android.features.messages.impl.link.LinkState
 import io.element.android.features.messages.impl.pinned.DefaultPinnedEventsTimelineProvider
 import io.element.android.features.messages.impl.timeline.TimelineRoomInfo
+import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
+import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactory
 import io.element.android.features.messages.impl.timeline.factories.TimelineItemsFactoryConfig
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
@@ -47,6 +49,7 @@ import io.element.android.libraries.matrix.api.room.JoinedRoom
 import io.element.android.libraries.matrix.api.room.isDm
 import io.element.android.libraries.matrix.api.room.powerlevels.permissionsAsState
 import io.element.android.libraries.matrix.api.room.roomMembers
+import io.element.android.libraries.matrix.api.timeline.item.event.EventOrTransactionId
 import io.element.android.libraries.ui.strings.CommonStrings
 import io.element.android.services.analytics.api.AnalyticsService
 import io.element.android.services.analyticsproviders.api.trackers.captureInteraction
@@ -71,6 +74,8 @@ class PinnedMessagesListPresenter(
     private val linkPresenter: Presenter<LinkState>,
     private val snackbarDispatcher: SnackbarDispatcher,
     @Assisted private val actionListPresenter: Presenter<ActionListState>,
+    private val customReactionPresenter: Presenter<CustomReactionState>,
+    private val reactionSummaryPresenter: Presenter<ReactionSummaryState>,
     @SessionCoroutineScope
     private val sessionCoroutineScope: CoroutineScope,
     private val analyticsService: AnalyticsService,
@@ -88,22 +93,25 @@ class PinnedMessagesListPresenter(
     private val timelineItemsFactory: TimelineItemsFactory = timelineItemsFactoryCreator.create(
         config = TimelineItemsFactoryConfig(
             computeReadReceipts = false,
-            computeReactions = false,
+            computeReactions = true,
         )
     )
 
     @Composable
     override fun present(): PinnedMessagesListState {
         htmlConverterProvider.Update()
         val roomInfo by room.roomInfoFlow.collectAsState()
+        val userEventPermissions by room.permissionsAsState(UserEventPermissions.DEFAULT) { perms ->
+            perms.userEventPermissions()
+        }
         val timelineRoomInfo by remember {
             derivedStateOf {
                 TimelineRoomInfo(
                     isDm = roomInfo.isDm,
                     name = roomInfo.name,
                     // We don't need to compute those values
                     userHasPermissionToSendMessage = false,
-                    userHasPermissionToSendReaction = false,
+                    userHasPermissionToSendReaction = userEventPermissions.canSendReaction,
                     // We do not care about the call state here.
                     roomCallState = aStandByCallState(),
                     // don't compute this value or the pin icon will be shown
@@ -119,9 +127,8 @@ class PinnedMessagesListPresenter(
         }
         val timelineProtectionState = timelineProtectionPresenter.present()
         val linkState = linkPresenter.present()
-        val userEventPermissions by room.permissionsAsState(UserEventPermissions.DEFAULT) { perms ->
-            perms.userEventPermissions()
-        }
+        val customReactionState = customReactionPresenter.present()
+        val reactionSummaryState = reactionSummaryPresenter.present()
 
         val displayThreadSummaries by featureFlagService.isFeatureEnabledFlow(FeatureFlags.Threads).collectAsState(false)
 
@@ -138,6 +145,7 @@ class PinnedMessagesListPresenter(
             when (event) {
                 is PinnedMessagesListEvent.HandleAction -> sessionCoroutineScope.handleTimelineAction(event.action, event.event)
                 is PinnedMessagesListEvent.OpenThread -> navigator.navigateToThread(event.threadRootId)
+                is PinnedMessagesListEvent.ToggleReaction -> sessionCoroutineScope.toggleReaction(event.emoji, event.eventOrTransactionId)
             }
         }
 
@@ -148,10 +156,20 @@ class PinnedMessagesListPresenter(
             displayThreadSummaries = displayThreadSummaries,
             userEventPermissions = userEventPermissions,
             timelineItems = pinnedMessageItems,
+            customReactionState = customReactionState,
+            reactionSummaryState = reactionSummaryState,
             eventSink = ::handleEvent,
         )
     }
 
+    private fun CoroutineScope.toggleReaction(emoji: String, eventOrTransactionId: EventOrTransactionId) {
+        launch {
+            timelineProvider.invokeOnTimeline {
+                toggleReaction(emoji, eventOrTransactionId)
+            }
+        }
+    }
+
     private fun CoroutineScope.handleTimelineAction(
         action: TimelineItemAction,
         targetEvent: TimelineItem.Event,
@@ -233,6 +251,8 @@ class PinnedMessagesListPresenter(
         linkState: LinkState,
         userEventPermissions: UserEventPermissions,
         timelineItems: AsyncData<ImmutableList<TimelineItem>>,
+        customReactionState: CustomReactionState,
+        reactionSummaryState: ReactionSummaryState,
         eventSink: (PinnedMessagesListEvent) -> Unit
     ): PinnedMessagesListState {
         return when (timelineItems) {
@@ -251,6 +271,8 @@ class PinnedMessagesListPresenter(
                         userEventPermissions = userEventPermissions,
                         timelineItems = timelineItems.data,
                         actionListState = actionListState,
+                        customReactionState = customReactionState,
+                        reactionSummaryState = reactionSummaryState,
                         eventSink = eventSink
                     )
                 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListState.kt

@@ -16,6 +16,8 @@ import io.element.android.features.messages.impl.UserEventPermissions
 import io.element.android.features.messages.impl.actionlist.ActionListState
 import io.element.android.features.messages.impl.link.LinkState
 import io.element.android.features.messages.impl.timeline.TimelineRoomInfo
+import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
+import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionState
 import io.element.android.libraries.ui.strings.CommonPlurals
@@ -34,6 +36,8 @@ sealed interface PinnedMessagesListState {
         val timelineItems: ImmutableList<TimelineItem>,
         val actionListState: ActionListState,
         val linkState: LinkState,
+        val customReactionState: CustomReactionState,
+        val reactionSummaryState: ReactionSummaryState,
         val displayThreadSummaries: Boolean,
         val eventSink: (PinnedMessagesListEvent) -> Unit,
     ) : PinnedMessagesListState {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListStateProvider.kt

@@ -19,7 +19,11 @@ import io.element.android.features.messages.impl.timeline.aTimelineItemDaySepara
 import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
 import io.element.android.features.messages.impl.timeline.aTimelineItemReactions
 import io.element.android.features.messages.impl.timeline.aTimelineRoomInfo
+import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionState
+import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryState
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
+import io.element.android.features.messages.impl.aCustomReactionState
+import io.element.android.features.messages.impl.aReactionSummaryState
 import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemAudioContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemFileContent
@@ -92,6 +96,8 @@ fun aLoadedPinnedMessagesListState(
     linkState: LinkState = aLinkState(),
     timelineItems: List<TimelineItem> = emptyList(),
     actionListState: ActionListState = anActionListState(),
+    customReactionState: CustomReactionState = aCustomReactionState(),
+    reactionSummaryState: ReactionSummaryState = aReactionSummaryState(),
     aUserEventPermissions: UserEventPermissions = UserEventPermissions.DEFAULT,
     displayThreadSummaries: Boolean = false,
     eventSink: (PinnedMessagesListEvent) -> Unit = {}
@@ -101,6 +107,8 @@ fun aLoadedPinnedMessagesListState(
     linkState = linkState,
     timelineItems = timelineItems.toImmutableList(),
     actionListState = actionListState,
+    customReactionState = customReactionState,
+    reactionSummaryState = reactionSummaryState,
     userEventPermissions = aUserEventPermissions,
     displayThreadSummaries = displayThreadSummaries,
     eventSink = eventSink,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListView.kt

@@ -32,8 +32,12 @@ import io.element.android.features.messages.impl.link.LinkEvent
 import io.element.android.features.messages.impl.link.LinkView
 import io.element.android.features.messages.impl.timeline.TimelineEvent
 import io.element.android.features.messages.impl.timeline.components.TimelineItemRow
+import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionBottomSheet
+import io.element.android.features.messages.impl.timeline.components.customreaction.CustomReactionEvent
 import io.element.android.features.messages.impl.timeline.components.event.TimelineItemEventContentView
 import io.element.android.features.messages.impl.timeline.components.layout.ContentAvoidingLayoutData
+import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryEvent
+import io.element.android.features.messages.impl.timeline.components.reactionsummary.ReactionSummaryView
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.event.TimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionEvent
@@ -195,11 +199,27 @@ private fun PinnedMessagesListLoaded(
         )
     }
 
+    fun onReactionClick(emoji: String, event: TimelineItem.Event) {
+        event.eventOrTransactionId.let { eventOrTransactionId ->
+            state.eventSink(PinnedMessagesListEvent.ToggleReaction(emoji, eventOrTransactionId))
+        }
+    }
+
+    fun onReactionLongClick(emoji: String, event: TimelineItem.Event) {
+        event.eventId?.let { eventId ->
+            state.reactionSummaryState.eventSink(ReactionSummaryEvent.ShowReactionSummary(eventId, event.reactionsState.reactions, emoji))
+        }
+    }
+
+    fun onMoreReactionsClick(event: TimelineItem.Event) {
+        state.customReactionState.eventSink(CustomReactionEvent.ShowCustomReactionSheet(event))
+    }
+
     ActionListView(
         state = state.actionListState,
         onSelectAction = ::onActionSelected,
-        onCustomReactionClick = {},
-        onEmojiReactionClick = { _, _ -> },
+        onCustomReactionClick = ::onMoreReactionsClick,
+        onEmojiReactionClick = ::onReactionClick,
         onVerifiedUserSendFailureClick = {}
     )
     LazyColumn(
@@ -230,9 +250,9 @@ private fun PinnedMessagesListLoaded(
                 onLongClick = ::onMessageLongClick,
                 displayThreadSummaries = displayThreadSummaries,
                 inReplyToClick = {},
-                onReactionClick = { _, _ -> },
-                onReactionLongClick = { _, _ -> },
-                onMoreReactionsClick = {},
+                onReactionClick = ::onReactionClick,
+                onReactionLongClick = ::onReactionLongClick,
+                onMoreReactionsClick = ::onMoreReactionsClick,
                 onReadReceiptClick = {},
                 onSwipeToReply = {},
                 eventSink = { timelineItemEvent ->
@@ -262,6 +282,13 @@ private fun PinnedMessagesListLoaded(
         state.linkState,
         onLinkValid = onLinkClick,
     )
+    CustomReactionBottomSheet(
+        state = state.customReactionState,
+        onSelectEmoji = { eventOrTransactionId, emoji ->
+            state.eventSink(PinnedMessagesListEvent.ToggleReaction(emoji.unicode, eventOrTransactionId))
+        }
+    )
+    ReactionSummaryView(state = state.reactionSummaryState)
 }
 
 @Composable