Truncate and ellipsize long reactions (#821)

* Truncate and ellipsize long reactions

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

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

@@ -44,6 +44,7 @@ import androidx.compose.ui.unit.sp
 import io.element.android.features.messages.impl.R
 import io.element.android.features.messages.impl.timeline.model.AggregatedReaction
 import io.element.android.features.messages.impl.timeline.model.AggregatedReactionProvider
+import io.element.android.features.messages.impl.timeline.model.aTimelineItemReactions
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.preview.DayNightPreviews
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -132,7 +133,7 @@ private fun IconContent(
 )
 
 @Composable
-fun ReactionContent(
+private fun ReactionContent(
     reaction: AggregatedReaction,
     modifier: Modifier = Modifier,
 ) = Row(
@@ -140,7 +141,7 @@ fun ReactionContent(
     modifier = modifier,
 ) {
     Text(
-        text = reaction.key,
+        text = reaction.displayKey,
         fontSize = 15.sp, lineHeight = reactionEmojiLineHeight
     )
     if (reaction.count > 1) {
@@ -148,7 +149,7 @@ fun ReactionContent(
         Text(
             text = reaction.count.toString(),
             color = if (reaction.isHighlighted) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
-            fontSize = 14.sp
+            fontSize = 14.sp,
         )
     }
 }
@@ -174,6 +175,12 @@ internal fun MessagesReactionExtraButtonsPreview() = ElementPreview {
             content = MessagesReactionsButtonContent.Text("12 more"),
             onClick = {}
         )
+        MessagesReactionButton(
+            content = MessagesReactionsButtonContent.Reaction(aTimelineItemReactions().reactions.first().copy(
+                key = "A very long reaction with many characters that should be truncated"
+            )),
+            onClick = {}
+        )
     }
 }
 

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

@@ -16,8 +16,18 @@
 
 package io.element.android.features.messages.impl.timeline.model
 
+import io.element.android.libraries.core.extensions.ellipsize
+
 /**
- * @property key the reaction key (e.g. "👍")
+ * Length at which we ellipsize a reaction key for display
+ *
+ * Reactions can be free text, so we need to limit the length
+ * displayed on screen.
+ */
+private const val MAX_DISPLAY_CHARS = 16
+
+/**
+ * @property key the full reaction key (e.g. "👍", "YES!")
  * @property count the number of users who reacted with this key
  * @property isHighlighted true if the reaction has (also) been sent by the current user.
  */
@@ -25,4 +35,14 @@ data class AggregatedReaction(
     val key: String,
     val count: Int,
     val isHighlighted: Boolean = false
-)
+) {
+
+    /**
+     * The key to be displayed on screen.
+     *
+     * See [MAX_DISPLAY_CHARS].
+     */
+    val displayKey: String by lazy {
+        key.ellipsize(MAX_DISPLAY_CHARS)
+    }
+}

features/messages/impl/src/test/kotlin/io/element/android/features/messages/timeline/model/AggregatedReactionTest.kt

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.messages.timeline.model
+
+import io.element.android.features.messages.impl.timeline.model.AggregatedReaction
+import org.junit.Assert.assertEquals
+import org.junit.Test
+
+class AggregatedReactionTest {
+    @Test
+    fun `reaction display key is shortened`() {
+        val reaction = AggregatedReaction(
+                key = "1234567890123456790",
+                count = 1,
+                isHighlighted = false
+        )
+
+        assertEquals("1234567890123456…", reaction.displayKey)
+    }
+}