Add read receipt on StateEvents

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -200,8 +200,11 @@ fun TimelineItemRow(
             if (timelineItem.content is TimelineItemStateContent) {
                 TimelineItemStateEventRow(
                     event = timelineItem,
+                    showReadReceipts = showReadReceipts,
+                    isLastOutgoingMessage = isLastOutgoingMessage,
                     isHighlighted = highlightedItem == timelineItem.identifier(),
                     onClick = { onClick(timelineItem) },
+                    onReadReceiptsClick = onReadReceiptClick,
                     onLongClick = { onLongClick(timelineItem) },
                     eventSink = eventSink,
                     modifier = modifier,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemStateEventRow.kt

@@ -18,6 +18,7 @@ package io.element.android.features.messages.impl.timeline.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
@@ -32,51 +33,73 @@ import io.element.android.features.messages.impl.timeline.TimelineEvents
 import io.element.android.features.messages.impl.timeline.aTimelineItemEvent
 import io.element.android.features.messages.impl.timeline.components.event.TimelineItemEventContentView
 import io.element.android.features.messages.impl.timeline.components.event.noExtraPadding
+import io.element.android.features.messages.impl.timeline.components.receipt.ReadReceiptViewState
+import io.element.android.features.messages.impl.timeline.components.receipt.TimelineItemReadReceiptView
+import io.element.android.features.messages.impl.timeline.components.receipt.aReadReceiptData
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.features.messages.impl.timeline.model.TimelineItemGroupPosition
+import io.element.android.features.messages.impl.timeline.model.TimelineItemReadReceipts
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemStateEventContent
 import io.element.android.features.messages.impl.timeline.util.defaultTimelineContentPadding
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import kotlinx.collections.immutable.toPersistentList
 
 @Composable
 fun TimelineItemStateEventRow(
     event: TimelineItem.Event,
+    showReadReceipts: Boolean,
+    isLastOutgoingMessage: Boolean,
     isHighlighted: Boolean,
     onClick: () -> Unit,
     onLongClick: () -> Unit,
+    onReadReceiptsClick: (event: TimelineItem.Event) -> Unit,
     eventSink: (TimelineEvents) -> Unit,
     modifier: Modifier = Modifier
 ) {
     val interactionSource = remember { MutableInteractionSource() }
-    Box(
+    Column(
         modifier = modifier
             .fillMaxWidth()
-            .padding(vertical = 8.dp)
-            .wrapContentHeight(),
-        contentAlignment = Alignment.Center
     ) {
-        MessageStateEventContainer(
+        Box(
-            isHighlighted = isHighlighted,
-            interactionSource = interactionSource,
-            onClick = onClick,
-            onLongClick = onLongClick,
             modifier = Modifier
-                .zIndex(-1f)
+                .fillMaxWidth()
-                .widthIn(max = 320.dp)
+                .padding(vertical = 8.dp)
+                .wrapContentHeight(),
+            contentAlignment = Alignment.Center
         ) {
-            TimelineItemEventContentView(
+            MessageStateEventContainer(
-                content = event.content,
+                isHighlighted = isHighlighted,
-                isMine = event.isMine,
-                isEditable = event.isEditable,
                 interactionSource = interactionSource,
                 onClick = onClick,
                 onLongClick = onLongClick,
-                extraPadding = noExtraPadding,
+                modifier = Modifier
-                eventSink = eventSink,
+                    .zIndex(-1f)
-                modifier = Modifier.defaultTimelineContentPadding()
+                    .widthIn(max = 320.dp)
-            )
+            ) {
+                TimelineItemEventContentView(
+                    content = event.content,
+                    isMine = event.isMine,
+                    isEditable = event.isEditable,
+                    interactionSource = interactionSource,
+                    onClick = onClick,
+                    onLongClick = onLongClick,
+                    extraPadding = noExtraPadding,
+                    eventSink = eventSink,
+                    modifier = Modifier.defaultTimelineContentPadding()
+                )
+            }
         }
+        TimelineItemReadReceiptView(
+            state = ReadReceiptViewState(
+                sendState = event.localSendState,
+                isLastOutgoingMessage = isLastOutgoingMessage,
+                receipts = event.readReceiptState.receipts,
+            ),
+            showReadReceipts = showReadReceipts,
+            onReadReceiptsClicked = { onReadReceiptsClick(event) },
+        )
     }
 }
 
@@ -87,11 +110,17 @@ internal fun TimelineItemStateEventRowPreview() = ElementPreview {
         event = aTimelineItemEvent(
             isMine = false,
             content = aTimelineItemStateEventContent(),
-            groupPosition = TimelineItemGroupPosition.None
+            groupPosition = TimelineItemGroupPosition.None,
+            readReceiptState = TimelineItemReadReceipts(
+                receipts = listOf(aReadReceiptData(0)).toPersistentList(),
+            )
         ),
+        showReadReceipts = true,
+        isLastOutgoingMessage = false,
         isHighlighted = false,
         onClick = {},
         onLongClick = {},
+        onReadReceiptsClick = {},
         eventSink = {}
     )
 }