Merge pull request #1093 from vector-im/feature/bma/senderNameBubble

Feature/bma/sender name bubble

changelog.d/1033.bugfix

@@ -0,0 +1 @@
+Timeline: sender names are now displayed in one single line.

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

@@ -106,6 +106,7 @@ internal fun aTimelineItemEvent(
     eventId: EventId = EventId("\$" + Random.nextInt().toString()),
     transactionId: TransactionId? = null,
     isMine: Boolean = false,
+    senderDisplayName: String = "Sender",
     content: TimelineItemEventContent = aTimelineItemTextContent(),
     groupPosition: TimelineItemGroupPosition = TimelineItemGroupPosition.None,
     sendState: LocalEventSendState = LocalEventSendState.Sent(eventId),
@@ -123,7 +124,7 @@ internal fun aTimelineItemEvent(
         reactionsState = timelineItemReactions,
         sentTime = "12:34",
         isMine = isMine,
-        senderDisplayName = "Sender",
+        senderDisplayName = senderDisplayName,
         groupPosition = groupPosition,
         localSendState = sendState,
         inReplyTo = inReplyTo,
@@ -141,11 +142,13 @@ fun aTimelineItemReactions(
         reactions = buildList {
             repeat(count) { index ->
                 val key = emojis[index % emojis.size]
-                add(anAggregatedReaction(
-                    key = key,
-                    count = index + 1,
-                    isHighlighted = isHighlighted
-                ))
+                add(
+                    anAggregatedReaction(
+                        key = key,
+                        count = index + 1,
+                        isHighlighted = isHighlighted
+                    )
+                )
             }
         }.toPersistentList()
     )

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

@@ -340,6 +340,8 @@ private fun MessageSenderInformation(
             Spacer(modifier = Modifier.width(4.dp))
             Text(
                 text = sender,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
                 color = MaterialTheme.colorScheme.primary,
                 style = ElementTheme.typography.fontBodyMdMedium,
             )
@@ -786,3 +788,25 @@ private fun ContentWithManyReactionsToPreview() {
         }
     }
 }
+
+// Note: no need for light/dark variant for this preview
+@Preview
+@Composable
+internal fun TimelineItemEventRowLongSenderNamePreview() = ElementPreviewLight {
+    TimelineItemEventRow(
+        event = aTimelineItemEvent(
+            senderDisplayName = "a long sender display name to test single line and ellipsis at the end of the line",
+        ),
+        isHighlighted = false,
+        canReply = true,
+        onClick = {},
+        onLongClick = {},
+        onUserDataClick = {},
+        inReplyToClick = {},
+        onReactionClick = { _, _ -> },
+        onReactionLongClick = { _, _ -> },
+        onMoreReactionsClick = {},
+        onSwipeToReply = {},
+        onTimestampClicked = {},
+    )
+}

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components_null_TimelineItemEventRowLongSenderName_0_null,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cb071f845598b35931253304f4c9f4c865b5fe9f57662c03c88a0c94a7835d83
+size 18615