Implemented channel list read indicators

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageContainerView.swift

@@ -143,8 +143,10 @@ struct MessageContainerView<Factory: ViewFactory>: View {
                         } else if message.isSentByCurrentUser {
                             HStack(spacing: 4) {
                                 MessageReadIndicatorView(
-                                    readUsers: readUsers,
-                                    isGroup: isInGroup
+                                    readUsers: channel.readUsers(
+                                        currentUserId: chatClient.currentUserId
+                                    ),
+                                    showReadCount: isInGroup
                                 )
                                 MessageDateView(message: message)
                             }
@@ -162,14 +164,6 @@ struct MessageContainerView<Factory: ViewFactory>: View {
         .padding(.top, reactionsShown ? 24 : 0)
     }
 
-    private var readUsers: [ChatUser] {
-        let readUsers = channel.reads.filter {
-            $0.lastReadAt > message.createdAt &&
-                $0.user.id != chatClient.currentUserId
-        }.map(\.user)
-        return readUsers
-    }
-    
     private var contentWidth: CGFloat {
         let padding: CGFloat = 8
         let minimumWidth: CGFloat = 240

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListHelperViews.swift

@@ -46,11 +46,11 @@ struct MessageReadIndicatorView: View {
     @Injected(\.colors) private var colors
 
     var readUsers: [ChatUser]
-    var isGroup: Bool
+    var showReadCount: Bool
 
     var body: some View {
         HStack(spacing: 2) {
-            if isGroup && !readUsers.isEmpty {
+            if showReadCount && !readUsers.isEmpty {
                 Text("\(readUsers.count)")
                     .font(fonts.footnoteBold)
                     .foregroundColor(colors.tintColor)
@@ -59,7 +59,7 @@ struct MessageReadIndicatorView: View {
                 uiImage: !readUsers.isEmpty ? images.readByAll : images.messageSent
             )
             .customizable()
-            .foregroundColor(!readUsers.isEmpty ? colors.tintColor : nil)
+            .foregroundColor(!readUsers.isEmpty ? colors.tintColor : Color(colors.textLowEmphasis))
             .frame(height: 16)
         }
     }

Sources/StreamChatSwiftUI/ChatChannel/Utils/ChatChannelExtensions.swift

@@ -44,6 +44,17 @@ extension ChatChannel {
         }
     }
 
+    func readUsers(currentUserId: UserId?) -> [ChatUser] {
+        guard let message = latestMessages.first else {
+            return []
+        }
+        let readUsers = reads.filter {
+            $0.lastReadAt > message.createdAt &&
+                $0.user.id != currentUserId
+        }.map(\.user)
+        return readUsers
+    }
+    
     private var lastSeenDateFormatter: (Date) -> String? {
         DateUtils.timeAgo
     }

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelList.swift

@@ -93,7 +93,7 @@ extension ChatChannel: Identifiable {
     }
 
     public var id: String {
-        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(unreadCount.messages)-\(typingUsersString)"
+        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(unreadCount.messages)-\(typingUsersString)-\(readUsers(currentUserId: nil).count)"
     }
 
     private var lastActiveMembersCount: Int {

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift

@@ -70,7 +70,17 @@ public struct ChatChannelListItem: View {
                             )
                         }
 
-                        SubtitleText(text: timestampText)
+                        HStack(spacing: 4) {
+                            if let message = channel.latestMessages.first, message.isSentByCurrentUser {
+                                MessageReadIndicatorView(
+                                    readUsers: channel.readUsers(
+                                        currentUserId: chatClient.currentUserId
+                                    ),
+                                    showReadCount: false
+                                )
+                            }
+                            SubtitleText(text: timestampText)
+                        }
                     }
                 }
                 .padding(.all, 8)