[Room details] Open room member details when clicking on user data in timeline (#482)

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

@@ -39,6 +39,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.libraries.architecture.BackstackNode
 import io.element.android.libraries.architecture.createNode
 import io.element.android.libraries.di.RoomScope
+import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.matrix.api.media.MediaSource
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.parcelize.Parcelize
@@ -89,6 +90,10 @@ class MessagesFlowNode @AssistedInject constructor(
                     override fun onPreviewAttachments(attachments: ImmutableList<Attachment>) {
                         backstack.push(NavTarget.AttachmentPreview(attachments.first()))
                     }
+
+                    override fun onUserDataClicked(userId: UserId) {
+                        callback?.onUserDataClicked(userId)
+                    }
                 }
                 createNode<MessagesNode>(buildContext, listOf(callback))
             }

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

@@ -28,6 +28,7 @@ import io.element.android.anvilannotations.ContributesNode
 import io.element.android.features.messages.impl.attachments.Attachment
 import io.element.android.features.messages.impl.timeline.model.TimelineItem
 import io.element.android.libraries.di.RoomScope
+import io.element.android.libraries.matrix.api.core.UserId
 import kotlinx.collections.immutable.ImmutableList
 
 @ContributesNode(RoomScope::class)
@@ -43,6 +44,7 @@ class MessagesNode @AssistedInject constructor(
         fun onRoomDetailsClicked()
         fun onEventClicked(event: TimelineItem.Event)
         fun onPreviewAttachments(attachments: ImmutableList<Attachment>)
+        fun onUserDataClicked(userId: UserId)
     }
 
     private fun onRoomDetailsClicked() {
@@ -57,6 +59,10 @@ class MessagesNode @AssistedInject constructor(
         callback?.onPreviewAttachments(attachments)
     }
 
+    private fun onUserDataClicked(userId: UserId) {
+        callback?.onUserDataClicked(userId)
+    }
+
     @Composable
     override fun View(modifier: Modifier) {
         val state = presenter.present()
@@ -66,6 +72,7 @@ class MessagesNode @AssistedInject constructor(
             onRoomDetailsClicked = this::onRoomDetailsClicked,
             onEventClicked = this::onEventClicked,
             onPreviewAttachments = this::onPreviewAttachments,
+            onUserDataClicked = this::onUserDataClicked,
             modifier = modifier,
         )
     }

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

@@ -85,6 +85,7 @@ import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.LogCompositions
+import io.element.android.libraries.matrix.api.core.UserId
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.launch
 import timber.log.Timber
@@ -97,6 +98,7 @@ fun MessagesView(
     onBackPressed: () -> Unit,
     onRoomDetailsClicked: () -> Unit,
     onEventClicked: (event: TimelineItem.Event) -> Unit,
+    onUserDataClicked: (UserId) -> Unit,
     onPreviewAttachments: (ImmutableList<Attachment>) -> Unit,
     modifier: Modifier = Modifier,
 ) {
@@ -203,6 +205,7 @@ fun MessagesView(
                         .consumeWindowInsets(padding),
                     onMessageClicked = ::onMessageClicked,
                     onMessageLongClicked = ::onMessageLongClicked,
+                    onUserDataClicked = onUserDataClicked,
                 )
             },
             snackbarHost = {
@@ -240,6 +243,7 @@ fun MessagesViewContent(
     state: MessagesState,
     modifier: Modifier = Modifier,
     onMessageClicked: (TimelineItem.Event) -> Unit = {},
+    onUserDataClicked: (UserId) -> Unit = {},
     onMessageLongClicked: (TimelineItem.Event) -> Unit = {},
 ) {
     Column(
@@ -255,6 +259,7 @@ fun MessagesViewContent(
                 modifier = Modifier.weight(1f),
                 onMessageClicked = onMessageClicked,
                 onMessageLongClicked = onMessageLongClicked,
+                onUserDataClicked = onUserDataClicked,
             )
         }
         MessageComposerView(
@@ -354,6 +359,7 @@ private fun ContentToPreview(state: MessagesState) {
         onBackPressed = {},
         onRoomDetailsClicked = {},
         onEventClicked = {},
-        onPreviewAttachments = {}
+        onPreviewAttachments = {},
+        onUserDataClicked = {},
     )
 }

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

@@ -18,6 +18,7 @@ package io.element.android.features.messages.impl.timeline
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
@@ -87,6 +88,7 @@ import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 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.UserId
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.launch
@@ -95,6 +97,7 @@ import kotlinx.coroutines.launch
 fun TimelineView(
     state: TimelineState,
     modifier: Modifier = Modifier,
+    onUserDataClicked: (UserId) -> Unit = {},
     onMessageClicked: (TimelineItem.Event) -> Unit = {},
     onMessageLongClicked: (TimelineItem.Event) -> Unit = {},
 ) {
@@ -120,6 +123,7 @@ fun TimelineView(
                     highlightedItem = state.highlightedEventId?.value,
                     onClick = onMessageClicked,
                     onLongClick = onMessageLongClicked,
+                    onUserDataClick = onUserDataClicked,
                 )
                 if (index == state.timelineItems.lastIndex) {
                     onReachedLoadMore()
@@ -139,6 +143,7 @@ fun TimelineView(
 fun TimelineItemRow(
     timelineItem: TimelineItem,
     highlightedItem: String?,
+    onUserDataClick: (UserId) -> Unit,
     onClick: (TimelineItem.Event) -> Unit,
     onLongClick: (TimelineItem.Event) -> Unit,
     modifier: Modifier = Modifier
@@ -173,6 +178,7 @@ fun TimelineItemRow(
                     isHighlighted = highlightedItem == timelineItem.identifier(),
                     onClick = ::onClick,
                     onLongClick = ::onLongClick,
+                    onUserDataClick = onUserDataClick,
                     modifier = modifier,
                 )
             }
@@ -203,6 +209,7 @@ fun TimelineItemRow(
                                 highlightedItem = highlightedItem,
                                 onClick = onClick,
                                 onLongClick = onLongClick,
+                                onUserDataClick = onUserDataClick,
                             )
                         }
                     }
@@ -230,15 +237,21 @@ fun TimelineItemEventRow(
     isHighlighted: Boolean,
     onClick: () -> Unit,
     onLongClick: () -> Unit,
+    onUserDataClick: (UserId) -> Unit,
     modifier: Modifier = Modifier
 ) {
     val interactionSource = remember { MutableInteractionSource() }
 
+    fun onUserDataClicked() {
+        onUserDataClick(event.senderId)
+    }
+
     val (parentAlignment, contentAlignment) = if (event.isMine) {
         Pair(Alignment.CenterEnd, Alignment.End)
     } else {
         Pair(Alignment.CenterStart, Alignment.Start)
     }
+
     Box(
         modifier = modifier
             .fillMaxWidth()
@@ -257,6 +270,7 @@ fun TimelineItemEventRow(
                         Modifier
                             .zIndex(1f)
                             .offset(y = 12.dp)
+                            .clickable(onClick = ::onUserDataClicked)
                     )
                 }
                 val bubbleState = BubbleState(