Merge pull request #1298 from vector-im/feature/fga/timeline_thread_decoration

Feature/fga/timeline thread decoration

Author: ganfra

changelog.d/1236.feature

@@ -0,0 +1 @@
+Display a thread decorator in timeline so we know when a message is coming from a thread.

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

@@ -209,7 +209,8 @@ class MessagesPresenter @AssistedInject constructor(
             TimelineItemAction.Copy -> handleCopyContents(targetEvent)
             TimelineItemAction.Redact -> handleActionRedact(targetEvent)
             TimelineItemAction.Edit -> handleActionEdit(targetEvent, composerState)
-            TimelineItemAction.Reply -> handleActionReply(targetEvent, composerState)
+            TimelineItemAction.Reply,
+            TimelineItemAction.ReplyInThread -> handleActionReply(targetEvent, composerState)
             TimelineItemAction.Developer -> handleShowDebugInfoAction(targetEvent)
             TimelineItemAction.Forward -> handleForwardAction(targetEvent)
             TimelineItemAction.ReportContent -> handleReportAction(targetEvent)
@@ -312,6 +313,7 @@ class MessagesPresenter @AssistedInject constructor(
             is TimelineItemUnknownContent -> null
         }
         val composerMode = MessageComposerMode.Reply(
+            isThreaded = targetEvent.isThreaded,
             senderName = targetEvent.safeSenderName,
             eventId = targetEvent.eventId,
             attachmentThumbnailInfo = attachmentThumbnailInfo,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListPresenter.kt

@@ -130,7 +130,11 @@ class ActionListPresenter @Inject constructor(
                     if (timelineItem.isRemote) {
                         // Can only reply or forward messages already uploaded to the server
                         if (userCanSendMessage) {
-                            add(TimelineItemAction.Reply)
+                            if (timelineItem.isThreaded) {
+                                add(TimelineItemAction.ReplyInThread)
+                            } else {
+                                add(TimelineItemAction.Reply)
+                            }
                         }
                         add(TimelineItemAction.Forward)
                     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt

@@ -32,6 +32,7 @@ sealed class TimelineItemAction(
     data object Copy : TimelineItemAction(CommonStrings.action_copy, VectorIcons.Copy)
     data object Redact : TimelineItemAction(CommonStrings.action_remove, VectorIcons.Delete, destructive = true)
     data object Reply : TimelineItemAction(CommonStrings.action_reply, VectorIcons.Reply)
+    data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, VectorIcons.Reply)
     data object Edit : TimelineItemAction(CommonStrings.action_edit, VectorIcons.Edit)
     data object Developer : TimelineItemAction(CommonStrings.action_view_source, VectorIcons.DeveloperMode)
     data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, VectorIcons.ReportContent, destructive = true)

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

@@ -111,6 +111,7 @@ internal fun aTimelineItemEvent(
     groupPosition: TimelineItemGroupPosition = TimelineItemGroupPosition.None,
     sendState: LocalEventSendState = LocalEventSendState.Sent(eventId),
     inReplyTo: InReplyTo? = null,
+    isThreaded: Boolean = false,
     debugInfo: TimelineItemDebugInfo = aTimelineItemDebugInfo(),
     timelineItemReactions: TimelineItemReactions = aTimelineItemReactions(),
 ): TimelineItem.Event {
@@ -129,6 +130,7 @@ internal fun aTimelineItemEvent(
         localSendState = sendState,
         inReplyTo = inReplyTo,
         debugInfo = debugInfo,
+        isThreaded = isThreaded,
         origin = null
     )
 }

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

@@ -24,6 +24,7 @@ import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.gestures.draggable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Arrangement.spacedBy
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -75,6 +76,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemImageContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemPollContent
 import io.element.android.features.messages.impl.timeline.model.event.aTimelineItemTextContent
+import io.element.android.libraries.designsystem.VectorIcons
 import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
 import io.element.android.libraries.designsystem.components.EqualWidthColumn
 import io.element.android.libraries.designsystem.components.avatar.Avatar
@@ -84,6 +86,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.swipe.SwipeableActionsState
 import io.element.android.libraries.designsystem.swipe.rememberSwipeableActionsState
 import io.element.android.libraries.designsystem.text.toPx
+import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.core.EventId
 import io.element.android.libraries.matrix.api.core.UserId
@@ -370,14 +373,6 @@ private fun MessageEventBubbleContent(
     onPollAnswerSelected: (pollStartId: EventId, answerId: String) -> Unit,
     @SuppressLint("ModifierParameter") bubbleModifier: Modifier = Modifier, // need to rename this modifier to distinguish it from the following ones
 ) {
-    val timestampPosition = when (event.content) {
-        is TimelineItemImageContent,
-        is TimelineItemVideoContent,
-        is TimelineItemLocationContent -> TimestampPosition.Overlay
-        is TimelineItemPollContent -> TimestampPosition.Below
-        else -> TimestampPosition.Default
-    }
-    val replyToDetails = event.inReplyTo as? InReplyTo.Ready
 
     // Long clicks are not not automatically propagated from a `clickable`
     // to its `combinedClickable` parent so we do it manually
@@ -398,6 +393,24 @@ private fun MessageEventBubbleContent(
         )
     }
 
+    @Composable
+    fun ThreadDecoration(
+        modifier: Modifier = Modifier
+    ) {
+        Row(
+            modifier = modifier,
+            horizontalArrangement = spacedBy(4.dp, Alignment.Start),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(resourceId = VectorIcons.ThreadDecoration, contentDescription = null, tint = ElementTheme.colors.iconSecondary)
+            Text(
+                text = stringResource(CommonStrings.common_thread),
+                style = ElementTheme.typography.fontBodyXsRegular,
+                color = ElementTheme.colors.textPrimary,
+            )
+        }
+    }
+
     @Composable
     fun ContentAndTimestampView(
         timestampPosition: TimestampPosition,
@@ -450,47 +463,74 @@ private fun MessageEventBubbleContent(
     /** Groups the different components in a Column with some space between them. */
     @Composable
     fun CommonLayout(
+        timestampPosition: TimestampPosition,
+        showThreadDecoration: Boolean,
         inReplyToDetails: InReplyTo.Ready?,
         modifier: Modifier = Modifier
     ) {
-        var modifierWithPadding: Modifier = Modifier
-        var contentModifier: Modifier = Modifier
-        EqualWidthColumn(modifier = modifier, spacing = 8.dp) {
-            when {
-                inReplyToDetails != null -> {
-                    val senderName = inReplyToDetails.senderDisplayName ?: inReplyToDetails.senderId.value
-                    val attachmentThumbnailInfo = attachmentThumbnailInfoForInReplyTo(inReplyToDetails)
-                    val text = textForInReplyTo(inReplyToDetails)
-                    ReplyToContent(
-                        senderName = senderName,
-                        text = text,
-                        attachmentThumbnailInfo = attachmentThumbnailInfo,
-                        modifier = Modifier
-                            .padding(top = 8.dp, start = 8.dp, end = 8.dp)
-                            .clip(RoundedCornerShape(6.dp))
-                            .clickable(enabled = true, onClick = inReplyToClick),
-                    )
-                    if (timestampPosition == TimestampPosition.Overlay) {
-                        modifierWithPadding = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)
-                        contentModifier = Modifier.clip(RoundedCornerShape(12.dp))
-                    } else {
-                        contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 0.dp, bottom = 8.dp)
-                    }
-                }
-                timestampPosition != TimestampPosition.Overlay -> {
-                    contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp, bottom = 8.dp)
+        val modifierWithPadding: Modifier
+        val contentModifier: Modifier
+        when {
+            inReplyToDetails != null -> {
+                if (timestampPosition == TimestampPosition.Overlay) {
+                    modifierWithPadding = Modifier.padding(start = 8.dp, end = 8.dp, bottom = 8.dp)
+                    contentModifier = Modifier.clip(RoundedCornerShape(12.dp))
+                } else {
+                    contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 0.dp, bottom = 8.dp)
+                    modifierWithPadding = Modifier
                 }
             }
+            timestampPosition != TimestampPosition.Overlay -> {
+                modifierWithPadding = Modifier
+                contentModifier = Modifier.padding(start = 12.dp, end = 12.dp, top = 8.dp, bottom = 8.dp)
+            }
+            else -> {
+                modifierWithPadding = Modifier
+                contentModifier = Modifier
+            }
+        }
 
+        EqualWidthColumn(modifier = modifier, spacing = 8.dp) {
+            if (showThreadDecoration) {
+                ThreadDecoration(modifier = Modifier.padding(top = 8.dp, start = 12.dp, end = 12.dp))
+            }
+            if (inReplyToDetails != null) {
+                val senderName = inReplyToDetails.senderDisplayName ?: inReplyToDetails.senderId.value
+                val attachmentThumbnailInfo = attachmentThumbnailInfoForInReplyTo(inReplyToDetails)
+                val text = textForInReplyTo(inReplyToDetails)
+                val topPadding = if (showThreadDecoration) 0.dp else 8.dp
+                ReplyToContent(
+                    senderName = senderName,
+                    text = text,
+                    attachmentThumbnailInfo = attachmentThumbnailInfo,
+                    modifier = Modifier
+                        .padding(top = topPadding, start = 8.dp, end = 8.dp)
+                        .clip(RoundedCornerShape(6.dp))
+                        .clickable(enabled = true, onClick = inReplyToClick),
+                )
+            }
             ContentAndTimestampView(
                 timestampPosition = timestampPosition,
-                contentModifier = contentModifier,
                 modifier = modifierWithPadding,
+                contentModifier = contentModifier,
             )
         }
     }
 
-    CommonLayout(inReplyToDetails = replyToDetails, modifier = bubbleModifier)
+    val timestampPosition = when (event.content) {
+        is TimelineItemImageContent,
+        is TimelineItemVideoContent,
+        is TimelineItemLocationContent -> TimestampPosition.Overlay
+        is TimelineItemPollContent -> TimestampPosition.Below
+        else -> TimestampPosition.Default
+    }
+    val replyToDetails = event.inReplyTo as? InReplyTo.Ready
+    CommonLayout(
+        showThreadDecoration = event.isThreaded,
+        timestampPosition = timestampPosition,
+        inReplyToDetails = replyToDetails,
+        modifier = bubbleModifier
+    )
 }
 
 @Composable
@@ -694,6 +734,7 @@ private fun ContentToPreviewWithReply() {
                         aspectRatio = 5f
                     ),
                     inReplyTo = aInReplyToReady(replyContent),
+                    isThreaded = true,
                     groupPosition = TimelineItemGroupPosition.Last,
                 ),
                 isHighlighted = false,
@@ -714,11 +755,11 @@ private fun ContentToPreviewWithReply() {
 }
 
 private fun aInReplyToReady(
-    replyContent: String
+    replyContent: String,
 ): InReplyTo.Ready {
     return InReplyTo.Ready(
         eventId = EventId("\$event"),
-        content = MessageContent(replyContent, null, false, TextMessageType(replyContent, null)),
+        content = MessageContent(replyContent, null, false, false, TextMessageType(replyContent, null)),
         senderId = UserId("@Sender:domain"),
         senderDisplayName = "Sender",
         senderAvatarUrl = null,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/factories/event/TimelineItemEventFactory.kt

@@ -71,6 +71,7 @@ class TimelineItemEventFactory @Inject constructor(
             url = senderAvatarUrl,
             size = AvatarSize.TimelineSender
         )
+        currentTimelineItem.event
         return TimelineItem.Event(
             id = currentTimelineItem.uniqueId.toString(),
             eventId = currentTimelineItem.eventId,
@@ -85,6 +86,7 @@ class TimelineItemEventFactory @Inject constructor(
             reactionsState = currentTimelineItem.computeReactionsState(),
             localSendState = currentTimelineItem.event.localSendState,
             inReplyTo = currentTimelineItem.event.inReplyTo(),
+            isThreaded = currentTimelineItem.event.isThreaded(),
             debugInfo = currentTimelineItem.event.debugInfo,
             origin = currentTimelineItem.event.origin,
         )

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

@@ -66,6 +66,7 @@ sealed interface TimelineItem {
         val reactionsState: TimelineItemReactions,
         val localSendState: LocalEventSendState?,
         val inReplyTo: InReplyTo?,
+        val isThreaded: Boolean,
         val debugInfo: TimelineItemDebugInfo,
         val origin: TimelineItemEventOrigin?,
     ) : TimelineItem {

features/messages/impl/src/test/kotlin/io/element/android/features/messages/fixtures/aMessageEvent.kt

@@ -37,6 +37,7 @@ internal fun aMessageEvent(
     isMine: Boolean = true,
     content: TimelineItemEventContent = TimelineItemTextContent(body = A_MESSAGE, htmlDocument = null, isEdited = false),
     inReplyTo: InReplyTo? = null,
+    isThreaded: Boolean = false,
     debugInfo: TimelineItemDebugInfo = aTimelineItemDebugInfo(),
     sendState: LocalEventSendState = LocalEventSendState.Sent(AN_EVENT_ID),
 ) = TimelineItem.Event(
@@ -52,5 +53,6 @@ internal fun aMessageEvent(
     localSendState = sendState,
     inReplyTo = inReplyTo,
     debugInfo = debugInfo,
+    isThreaded = isThreaded,
     origin = null
 )

features/messages/impl/src/test/kotlin/io/element/android/features/messages/textcomposer/MessageComposerPresenterTest.kt

@@ -632,7 +632,7 @@ fun anEditMode(
     transactionId: TransactionId? = null,
 ) = MessageComposerMode.Edit(eventId, message, transactionId)
 
-fun aReplyMode() = MessageComposerMode.Reply(A_USER_NAME, null, AN_EVENT_ID, A_MESSAGE)
+fun aReplyMode() = MessageComposerMode.Reply(A_USER_NAME, null, false, AN_EVENT_ID, A_MESSAGE)
 fun aQuoteMode() = MessageComposerMode.Quote(AN_EVENT_ID, A_MESSAGE)
 
 private fun String.toMessage() = Message(