Composer: Edit and reply: highlight selected item.

features/messages/src/main/java/io/element/android/x/features/messages/MessageTimelineItemStateMapper.kt

@@ -25,6 +25,7 @@ class MessageTimelineItemStateMapper(
     private val room: MatrixRoom,
     private val dispatcher: CoroutineDispatcher,
 ) {
+    var highlightedEventId: String? = null
 
     suspend fun map(timelineItems: List<MatrixTimelineItem>): List<MessagesTimelineItemState> =
         withContext(dispatcher) {
@@ -33,7 +34,12 @@ class MessageTimelineItemStateMapper(
                 val currentTimelineItem = timelineItems[index]
                 val timelineItemState = when (currentTimelineItem) {
                     is MatrixTimelineItem.Event -> {
-                        buildMessageEvent(currentTimelineItem, index, timelineItems)
+                        buildMessageEvent(
+                            currentTimelineItem,
+                            index,
+                            timelineItems,
+                            highlightedEventId
+                        )
                     }
                     is MatrixTimelineItem.Virtual -> MessagesTimelineItemState.Virtual(
                         "virtual_item_$index"
@@ -48,7 +54,8 @@ class MessageTimelineItemStateMapper(
     private suspend fun buildMessageEvent(
         currentTimelineItem: MatrixTimelineItem.Event,
         index: Int,
-        timelineItems: List<MatrixTimelineItem>
+        timelineItems: List<MatrixTimelineItem>,
+        highlightedEventId: String?,
     ): MessagesTimelineItemState.MessageEvent {
         val currentSender = currentTimelineItem.event.sender()
         val groupPosition =
@@ -68,6 +75,7 @@ class MessageTimelineItemStateMapper(
             senderAvatar = senderAvatarData,
             content = currentTimelineItem.computeContent(),
             isMine = currentTimelineItem.event.isOwn(),
+            isHighlighted = currentTimelineItem.event.eventId().orEmpty() == highlightedEventId,
             groupPosition = groupPosition,
             reactionsState = currentTimelineItem.computeReactionsState()
         )

features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt

@@ -382,6 +382,7 @@ fun MessageEventRow(
                 MessageEventBubble(
                     groupPosition = messageEvent.groupPosition,
                     isMine = messageEvent.isMine,
+                    isHighlighted = messageEvent.isHighlighted,
                     onClick = onClick,
                     onLongClick = onLongClick,
                     modifier = Modifier

features/messages/src/main/java/io/element/android/x/features/messages/MessagesViewModel.kt

@@ -18,9 +18,7 @@ import io.element.android.x.matrix.room.MatrixRoom
 import io.element.android.x.matrix.timeline.MatrixTimeline
 import io.element.android.x.textcomposer.MessageComposerMode
 import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.*
-import kotlinx.coroutines.flow.map
-import kotlinx.coroutines.flow.onEach
 import kotlinx.coroutines.launch
 import timber.log.Timber
 
@@ -191,7 +189,21 @@ class MessagesViewModel(
                 }
             }.launchIn(viewModelScope)
 
-        timeline.timelineItems()
+        combine(
+            timeline.timelineItems(),
+            stateFlow
+                .map { it.composerMode }
+                .distinctUntilChanged()
+        ) { timelineItems, messageComposerMode ->
+            // Set the highlightedEventId to messageTimelineItemStateMapper, before the mapping occurs
+            messageTimelineItemStateMapper.highlightedEventId = when (messageComposerMode) {
+                is MessageComposerMode.Normal -> null
+                is MessageComposerMode.Edit -> messageComposerMode.eventId
+                is MessageComposerMode.Quote -> null
+                is MessageComposerMode.Reply -> messageComposerMode.eventId
+            }
+            timelineItems
+        }
             .map(messageTimelineItemStateMapper::map)
             .execute {
                 copy(timelineItems = it)

features/messages/src/main/java/io/element/android/x/features/messages/components/MessageEventBubble.kt

@@ -24,6 +24,7 @@ private val BUBBLE_RADIUS = 16.dp
 fun MessageEventBubble(
     groupPosition: MessagesItemGroupPosition,
     isMine: Boolean,
+    isHighlighted: Boolean,
     modifier: Modifier = Modifier,
     onClick: () -> Unit,
     onLongClick: () -> Unit,
@@ -64,17 +65,25 @@ fun MessageEventBubble(
         }
     }
 
-    val backgroundBubbleColor = if (isMine) {
+    val backgroundBubbleColor = if (isHighlighted) {
         if (LocalIsDarkTheme.current) {
-            SystemGrey5Dark
+            MessageHighlightDark
         } else {
-            SystemGrey5Light
+            MessageHighlightLight
         }
     } else {
-        if (LocalIsDarkTheme.current) {
+        if (isMine) {
-            SystemGrey6Dark
+            if (LocalIsDarkTheme.current) {
+                SystemGrey5Dark
+            } else {
+                SystemGrey5Light
+            }
         } else {
-            SystemGrey6Light
+            if (LocalIsDarkTheme.current) {
+                SystemGrey6Dark
+            } else {
+                SystemGrey6Light
+            }
         }
     }
     val bubbleShape = bubbleShape()

features/messages/src/main/java/io/element/android/x/features/messages/model/MessagesTimelineItemState.kt

@@ -16,6 +16,7 @@ sealed interface MessagesTimelineItemState {
         val content: MessagesTimelineItemContent,
         val sentTime: String = "",
         val isMine: Boolean = false,
+        val isHighlighted: Boolean = false,
         val groupPosition: MessagesItemGroupPosition = MessagesItemGroupPosition.None,
         val reactionsState: MessagesItemReactionState
     ) : MessagesTimelineItemState {

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt

@@ -34,3 +34,8 @@ val Melon = Color(0xFFFF812D)
 val ElementGreen = Color(0xFF0DBD8B)
 val ElementOrange = Color(0xFFD9B072)
 val Vermilion = Color(0xFFFF5B55)
+
+// TODO Update color
+val MessageHighlightLight = Azure
+// TODO Update color
+val MessageHighlightDark = Azure