Restyle unread divider and extract shared MessagesStripDivider

stream-chat-android-compose/api/stream-chat-android-compose.api

@@ -2081,25 +2081,33 @@ public final class io/getstream/chat/android/compose/ui/messages/header/Composab
 	public final fun getLambda$957576860$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
 }
 
-public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageDividerKt {
-	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageDividerKt;
-	public fun <init> ()V
-	public final fun getLambda$112548111$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
-}
-
 public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageItemKt {
 	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageItemKt;
 	public fun <init> ()V
 	public final fun getLambda$-1743229499$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
 	public final fun getLambda$1362745058$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
 }
 
+public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesDateDividerKt {
+	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesDateDividerKt;
+	public fun <init> ()V
+	public final fun getLambda$-1504635216$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
+	public final fun getLambda$1340569822$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesKt {
 	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesKt;
 	public fun <init> ()V
 	public final fun getLambda$203042131$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
 }
 
+public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesStripDividerKt {
+	public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesStripDividerKt;
+	public fun <init> ()V
+	public final fun getLambda$-1884807062$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
+	public final fun getLambda$228610811$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
+}
+
 public final class io/getstream/chat/android/compose/ui/messages/list/MessageContainerKt {
 	public static final field HighlightFadeOutDurationMillis I
 	public static final fun DefaultMessageContent (Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/ui/common/state/messages/list/MessageItemState;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;III)V

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt

@@ -68,8 +68,6 @@ import io.getstream.chat.android.compose.ui.theme.MessageListTypingIndicatorItem
 import io.getstream.chat.android.compose.ui.theme.MessageListUnreadSeparatorItemContentParams
 import io.getstream.chat.android.compose.ui.theme.MessageStyling
 import io.getstream.chat.android.compose.ui.theme.StreamTokens
-import io.getstream.chat.android.compose.ui.util.bottomBorder
-import io.getstream.chat.android.compose.ui.util.topBorder
 import io.getstream.chat.android.models.Message
 import io.getstream.chat.android.models.Option
 import io.getstream.chat.android.models.Poll
@@ -217,7 +215,7 @@ public fun LazyItemScope.MessageItem(
  */
 @Composable
 internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorItemState) {
-    MessageDivider(
+    MessagesDateDivider(
         text = ChatTheme.dateFormatter.formatRelativeDate(dateSeparator.date),
         modifier = Modifier
             .semantics(mergeDescendants = true) {
@@ -235,14 +233,14 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorItem
  */
 @Composable
 internal fun DefaultMessageUnreadSeparatorContent(unreadSeparatorItemState: UnreadSeparatorItemState) {
-    MessageDivider(
-        text = stringResource(R.string.stream_compose_message_list_unread_separator),
-        modifier = Modifier
-            .semantics(mergeDescendants = true) {
-                testTag = "Stream_UnreadMessagesBadge"
-            }
-            .padding(vertical = StreamTokens.spacingXs)
-            .fillMaxWidth(),
+    MessagesStripDivider(
+        modifier = Modifier.semantics(mergeDescendants = true) {
+            testTag = "Stream_UnreadMessagesBadge"
+        },
+        text = stringResource(
+            R.string.stream_compose_message_list_unread_separator,
+            unreadSeparatorItemState.unreadCount,
+        ),
     )
 }
 
@@ -255,25 +253,15 @@ internal fun DefaultMessageUnreadSeparatorContent(unreadSeparatorItemState: Unre
 @Composable
 internal fun DefaultMessageThreadSeparatorContent(threadSeparator: ThreadDateSeparatorItemState) {
     val replyCount = threadSeparator.replyCount
-    val colors = ChatTheme.colors
-
-    Text(
-        modifier = Modifier
-            .padding(vertical = StreamTokens.spacingXs)
-            .topBorder(colors.borderCoreSubtle)
-            .bottomBorder(colors.borderCoreSubtle)
-            .fillMaxWidth()
-            .background(colors.backgroundCoreSurfaceSubtle)
-            .padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs)
-            .testTag("Stream_RepliesCount"),
+    MessagesStripDivider(
+        modifier = Modifier.semantics(mergeDescendants = true) {
+            testTag = "Stream_RepliesCount"
+        },
         text = pluralStringResource(
             R.plurals.stream_compose_message_list_thread_separator,
             replyCount,
             replyCount,
         ),
-        color = colors.chatTextSystem,
-        style = ChatTheme.typography.metadataEmphasis,
-        textAlign = TextAlign.Center,
     )
 }
 

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageDivider.kt → stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessagesDateDivider.kt

@@ -17,9 +17,7 @@
 package io.getstream.chat.android.compose.ui.messages.list
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Text
@@ -31,7 +29,7 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.StreamTokens
 
 @Composable
-internal fun MessageDivider(text: String, modifier: Modifier = Modifier) {
+internal fun MessagesDateDivider(text: String, modifier: Modifier = Modifier) {
     val colors = ChatTheme.colors
 
     Box(modifier, contentAlignment = Alignment.Center) {
@@ -48,15 +46,26 @@ internal fun MessageDivider(text: String, modifier: Modifier = Modifier) {
 
 @Preview
 @Composable
-private fun MessageDividerPreview() {
+private fun MessagesDateDividerTodayPreview() {
     ChatTheme {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.spacedBy(StreamTokens.spacingXs),
-        ) {
-            MessageDivider("Unread messages")
-            MessageDivider("Today")
-            MessageDivider("Tue, 25 Dec")
-        }
+        MessagesDateDividerToday()
     }
 }
+
+@Composable
+internal fun MessagesDateDividerToday() {
+    MessagesDateDivider(text = "Today")
+}
+
+@Preview
+@Composable
+private fun MessagesDateDividerAbsoluteDatePreview() {
+    ChatTheme {
+        MessagesDateDividerAbsoluteDate()
+    }
+}
+
+@Composable
+internal fun MessagesDateDividerAbsoluteDate() {
+    MessagesDateDivider(text = "Tue, 25 Dec")
+}

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessagesStripDivider.kt

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2014-2026 Stream.io Inc. All rights reserved.
+ *
+ * Licensed under the Stream License;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+ *
+ * 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.getstream.chat.android.compose.ui.messages.list
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import io.getstream.chat.android.compose.ui.theme.ChatTheme
+import io.getstream.chat.android.compose.ui.theme.StreamTokens
+import io.getstream.chat.android.compose.ui.util.bottomBorder
+import io.getstream.chat.android.compose.ui.util.topBorder
+
+@Composable
+internal fun MessagesStripDivider(text: String, modifier: Modifier = Modifier) {
+    val colors = ChatTheme.colors
+    Text(
+        modifier = modifier
+            .padding(vertical = StreamTokens.spacingXs)
+            .topBorder(colors.borderCoreSubtle)
+            .bottomBorder(colors.borderCoreSubtle)
+            .fillMaxWidth()
+            .background(colors.backgroundCoreSurfaceSubtle)
+            .padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs),
+        text = text,
+        color = colors.chatTextSystem,
+        style = ChatTheme.typography.metadataEmphasis,
+        textAlign = TextAlign.Center,
+    )
+}
+
+@Preview
+@Composable
+private fun MessagesStripDividerUnreadPreview() {
+    ChatTheme {
+        MessagesStripDividerUnread()
+    }
+}
+
+@Composable
+internal fun MessagesStripDividerUnread() {
+    MessagesStripDivider(text = "9 unread messages")
+}
+
+@Preview
+@Composable
+private fun MessagesStripDividerRepliesPreview() {
+    ChatTheme {
+        MessagesStripDividerReplies()
+    }
+}
+
+@Composable
+internal fun MessagesStripDividerReplies() {
+    MessagesStripDivider(text = "5 replies")
+}

stream-chat-android-compose/src/main/res/values-es/strings.xml

@@ -133,7 +133,7 @@
   <string name="stream_compose_message_list_show_translation">"Mostrar traducción"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_replies">"%d respuestas"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_reply">"%d respuesta"</string>
-  <string name="stream_compose_message_list_unread_separator">"Mensajes no leídos"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d mensajes no leídos"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"Archivo adjunto no compatible"</string>
   <string name="stream_compose_message_list_view">"Ver"</string>
   <string name="stream_compose_message_list_view_original">"Ver original"</string>

stream-chat-android-compose/src/main/res/values-fr/strings.xml

@@ -133,7 +133,7 @@
   <string name="stream_compose_message_list_show_translation">"Afficher la traduction"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_replies">"%d réponses"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_reply">"%d réponse"</string>
-  <string name="stream_compose_message_list_unread_separator">"Messages non lus"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d messages non lus"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"Pièce jointe non prise en charge"</string>
   <string name="stream_compose_message_list_view">"Voir"</string>
   <string name="stream_compose_message_list_view_original">"Voir l\'original"</string>

stream-chat-android-compose/src/main/res/values-hi/strings.xml

@@ -189,8 +189,8 @@
   <string name="stream_compose_message_list_show_translation">"अनुवाद दिखाएँ"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_replies">"%d जवाब"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_reply">"%d जवाब"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d अपठित मैसेज"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"असमर्थित अटैचमेंट"</string>
-  <string name="stream_compose_message_list_unread_separator">"अपठित मैसेज"</string>
   <string name="stream_compose_message_list_view">"देखें"</string>
   <string name="stream_compose_message_list_view_original">"मूल देखें"</string>
   <string name="stream_compose_message_list_you">"आप"</string>

stream-chat-android-compose/src/main/res/values-in/strings.xml

@@ -133,7 +133,7 @@
   <string name="stream_compose_message_list_show_translation">"Tampilkan terjemahan"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_replies">"%d balasan"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_reply">"%d balasan"</string>
-  <string name="stream_compose_message_list_unread_separator">"Pesan Belum Dibaca"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d pesan belum dibaca"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"Lampiran tidak didukung"</string>
   <string name="stream_compose_message_list_view">"Lihat"</string>
   <string name="stream_compose_message_list_view_original">"Lihat aslinya"</string>

stream-chat-android-compose/src/main/res/values-it/strings.xml

@@ -189,8 +189,8 @@
   <string name="stream_compose_message_list_show_translation">"Mostra traduzione"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_replies">"%d risposte"</string>
   <string name="stream_compose_message_list_thread_footnote_thread_reply">"%d risposta"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d messaggi non letti"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"Allegato non supportato"</string>
-  <string name="stream_compose_message_list_unread_separator">"Messaggi non letti"</string>
   <string name="stream_compose_message_list_view">"Visualizza"</string>
   <string name="stream_compose_message_list_view_original">"Vedi originale"</string>
   <string name="stream_compose_message_list_you">"Tu"</string>

stream-chat-android-compose/src/main/res/values-ja/strings.xml

@@ -144,7 +144,7 @@
   <plurals name="stream_compose_message_list_thread_separator">
     <item quantity="other">"%d件の返信"</item>
   </plurals>
-  <string name="stream_compose_message_list_unread_separator">"未読メッセージ"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d件の未読メッセージ"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"サポートされていない添付ファイル"</string>
   <string name="stream_compose_message_list_view">"表示"</string>
   <string name="stream_compose_message_list_view_original">"原文を表示"</string>

stream-chat-android-compose/src/main/res/values-ko/strings.xml

@@ -144,7 +144,7 @@
   <plurals name="stream_compose_message_list_thread_separator">
     <item quantity="other">"%d개의 답장"</item>
   </plurals>
-  <string name="stream_compose_message_list_unread_separator">"읽지 않은 메시지"</string>
+  <string name="stream_compose_message_list_unread_separator">"%d개의 읽지 않은 메시지"</string>
   <string name="stream_compose_message_list_unsupported_attachment">"지원되지 않는 첨부파일"</string>
   <string name="stream_compose_message_list_view">"보기"</string>
   <string name="stream_compose_message_list_view_original">"원문 보기"</string>

stream-chat-android-compose/src/main/res/values/strings.xml

@@ -99,7 +99,7 @@
         <item quantity="one">%d Reply</item>
         <item quantity="other">%d Replies</item>
     </plurals>
-    <string name="stream_compose_message_list_unread_separator">Unread Messages</string>
+    <string name="stream_compose_message_list_unread_separator">%d unread messages</string>
     <string name="stream_compose_message_list_empty_messages">No messages</string>
     <string name="stream_compose_message_list_error_cannot_open_link">There is no app to view this url:\n%s</string>
     <string name="stream_compose_message_list_unsupported_attachment">Unsupported attachment</string>

stream-chat-android-compose/src/test/kotlin/io/getstream/chat/android/compose/ui/messages/MessageListTest.kt

@@ -38,6 +38,7 @@ import io.getstream.chat.android.ui.common.state.messages.list.MessageItemState
 import io.getstream.chat.android.ui.common.state.messages.list.MessageListState
 import io.getstream.chat.android.ui.common.state.messages.list.MessagePosition
 import io.getstream.chat.android.ui.common.state.messages.list.SystemMessageItemState
+import io.getstream.chat.android.ui.common.state.messages.list.ThreadDateSeparatorItemState
 import io.getstream.chat.android.ui.common.state.messages.list.UnreadSeparatorItemState
 import org.junit.Rule
 import org.junit.Test
@@ -159,6 +160,20 @@ internal class MessageListTest : PaparazziComposeTest {
             MessageList(messageListState = UnreadLabelMessageListState)
         }
     }
+
+    @Test
+    fun `unread separator visible`() {
+        snapshotWithDarkMode {
+            MessageList(messageListState = UnreadSeparatorMessageListState)
+        }
+    }
+
+    @Test
+    fun `thread separator`() {
+        snapshotWithDarkMode {
+            MessageList(messageListState = ThreadSeparatorMessageListState)
+        }
+    }
 }
 
 private val Date1 = Calendar.getInstance().apply { set(2022, 1, 1, 1, 1) }.time
@@ -268,6 +283,36 @@ private val UnreadLabelMessageListState = LoadedMessageListState.copy(
     ),
 )
 
+private val UnreadSeparatorMessageListState = LoadedMessageListState.copy(
+    messageItems = LoadedMessageListState.messageItems.take(3) +
+        UnreadSeparatorItemState(unreadCount = 3) +
+        LoadedMessageListState.messageItems.drop(3),
+)
+
+private val ThreadSeparatorMessageListState = MessageListState(
+    messageItems = listOf(
+        MessageItemState(
+            message = PreviewMessageData.message3,
+            isMine = false,
+            showMessageFooter = true,
+            ownCapabilities = ChannelCapabilities.toSet(),
+        ),
+        MessageItemState(
+            message = PreviewMessageData.message2,
+            isMine = true,
+            showMessageFooter = true,
+            ownCapabilities = ChannelCapabilities.toSet(),
+        ),
+        ThreadDateSeparatorItemState(date = Date1, replyCount = 2),
+        MessageItemState(
+            message = PreviewMessageData.message1,
+            isMine = false,
+            showMessageFooter = true,
+            ownCapabilities = ChannelCapabilities.toSet(),
+        ),
+    ),
+)
+
 @Composable
 private fun MessageList(
     messagesLazyListState: MessagesLazyListState = rememberMessagesLazyListState(),