Adds Thread List UI Component

CHANGELOG.md

@@ -3,7 +3,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 # Upcoming
 
+### ✅ Added
+- New Thread List UI Component [#621](https://github.com/GetStream/stream-chat-swiftui/pull/621)
+- Handles marking a thread read in `ChatChannelViewModel` [#621](https://github.com/GetStream/stream-chat-swiftui/pull/621)
+- Adds `ViewFactory.makeChannelListItemBackground` [#621](https://github.com/GetStream/stream-chat-swiftui/pull/621)
+### 🐞 Fixed
+- Fix Channel List loading view shimmering effect not working [#621](https://github.com/GetStream/stream-chat-swiftui/pull/621)
+- Fix Channel List not preselecting the Channel on iPad [#621](https://github.com/GetStream/stream-chat-swiftui/pull/621)
 ### 🔄 Changed
+- Channel List Item has now a background color when it is selected on iPad [#621](https://github.com/GetStream/stream-chat-swiftui/pull/621)
 
 # [4.64.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.64.0)
 _October 03, 2024_

DemoAppSwiftUI/DemoAppSwiftUIApp.swift

@@ -14,7 +14,7 @@ struct DemoAppSwiftUIApp: App {
 
     @ObservedObject var appState = AppState.shared
     @ObservedObject var notificationsHandler = NotificationsHandler.shared
-    
+
     var channelListController: ChatChannelListController? {
         appState.channelListController
     }
@@ -27,18 +27,14 @@ struct DemoAppSwiftUIApp: App {
             case .notLoggedIn:
                 LoginView()
             case .loggedIn:
-                if notificationsHandler.notificationChannelId != nil {
-                    ChatChannelListView(
-                        viewFactory: DemoAppFactory.shared,
-                        channelListController: channelListController,
-                        selectedChannelId: notificationsHandler.notificationChannelId
-                    )
-                } else {
-                    ChatChannelListView(
-                        viewFactory: DemoAppFactory.shared,
-                        channelListController: channelListController
-                    )
-                }
+                    TabView {
+                        channelListView()
+                            .tabItem { Label("Chat", systemImage: "message") }
+                            .badge(appState.unreadCount.channels)
+                        threadListView()
+                            .tabItem { Label("Threads", systemImage: "text.bubble") }
+                            .badge(appState.unreadCount.threads)
+                    }
             }
         }
         .onChange(of: appState.userState) { newValue in
@@ -57,13 +53,33 @@ struct DemoAppSwiftUIApp: App {
                  appState.channelListController = chatClient.channelListController(query: channelListQuery)
                  }
                  */
+                appState.currentUserController = chatClient.currentUserController()
                 notificationsHandler.setupRemoteNotifications()
             }
         }
     }
+
+    func channelListView() -> ChatChannelListView<DemoAppFactory> {
+        if notificationsHandler.notificationChannelId != nil {
+            ChatChannelListView(
+                viewFactory: DemoAppFactory.shared,
+                channelListController: channelListController,
+                selectedChannelId: notificationsHandler.notificationChannelId
+            )
+        } else {
+            ChatChannelListView(
+                viewFactory: DemoAppFactory.shared,
+                channelListController: channelListController
+            )
+        }
+    }
+
+    func threadListView() -> ChatThreadListView<DemoAppFactory> {
+        ChatThreadListView(viewFactory: DemoAppFactory.shared)
+    }
 }
 
-class AppState: ObservableObject {
+class AppState: ObservableObject, CurrentChatUserControllerDelegate {
 
     @Published var userState: UserState = .launchAnimation {
         willSet {
@@ -72,12 +88,30 @@ class AppState: ObservableObject {
             }
         }
     }
-
+
+    @Published var unreadCount: UnreadCount = .noUnread
+
     var channelListController: ChatChannelListController?
+    var currentUserController: CurrentChatUserController? {
+        didSet {
+            currentUserController?.delegate = self
+            currentUserController?.synchronize()
+        }
+    }
 
     static let shared = AppState()
 
     private init() {}
+
+    func currentUserController(_ controller: CurrentChatUserController, didChangeCurrentUserUnreadCount: UnreadCount) {
+        self.unreadCount = didChangeCurrentUserUnreadCount
+        let totalUnreadBadge = unreadCount.channels + unreadCount.threads
+        if #available(iOS 16.0, *) {
+            UNUserNotificationCenter.current().setBadgeCount(totalUnreadBadge)
+        } else {
+            UIApplication.shared.applicationIconBadgeNumber = totalUnreadBadge
+        }
+    }
 }
 
 enum UserState {

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/PinnedMessagesView.swift

@@ -86,6 +86,7 @@ struct PinnedMessageView: View {
         if message.poll != nil {
             return "📊 \(L10n.Channel.Item.poll)"
         }
-        return channel.attachmentPreviewText(for: message) ?? message.adjustedText
+        let messageFormatter = InjectedValues[\.utils].messagePreviewFormatter
+        return messageFormatter.formatAttachmentContent(for: message) ?? message.adjustedText
     }
 }

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -238,6 +238,9 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         if canMarkRead {
             sendReadEventIfNeeded(for: first)
         }
+        if shouldMarkThreadRead {
+            sendThreadReadEvent()
+        }
     }
 
     public func scrollToLastMessage() {
@@ -346,6 +349,9 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
                 sendReadEventIfNeeded(for: message)
             }
         }
+        if index == 0 && shouldMarkThreadRead {
+            sendThreadReadEvent()
+        }
     }
 
     open func groupMessages() {
@@ -655,7 +661,24 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
             }
         }
     }
-
+
+    private var shouldMarkThreadRead: Bool {
+        guard UIApplication.shared.applicationState == .active else {
+            return false
+        }
+        guard messageController?.replies.isEmpty == false else {
+            return false
+        }
+
+        return channelDataSource.hasLoadedAllNextMessages
+    }
+
+    private func sendThreadReadEvent() {
+        throttler.throttle { [weak self] in
+            self?.messageController?.markThreadRead()
+        }
+    }
+
     private func handleDateChange() {
         guard showScrollToLatestButton == true, let currentDate = currentDate else {
             currentDateString = nil

Sources/StreamChatSwiftUI/ChatChannel/Reactions/MessageActions/DefaultMessageActions.swift

@@ -110,6 +110,36 @@ extension MessageAction {
             messageActions.append(copyAction)
         }
 
+        if message.isRootOfThread {
+            let messageController = InjectedValues[\.utils]
+                .channelControllerFactory
+                .makeMessageController(for: message.id, channelId: channel.cid)
+            // At the moment, this is the only way to know if we are inside a thread.
+            // This should be optimised in the future and provide the view context.
+            let isInsideThreadView = messageController.replies.count > 0
+            if isInsideThreadView {
+                let markThreadUnreadAction = markThreadAsUnreadAction(
+                    messageController: messageController,
+                    message: message,
+                    onFinish: onFinish,
+                    onError: onError
+                )
+                messageActions.append(markThreadUnreadAction)
+            }
+        } else if !message.isSentByCurrentUser {
+            if !message.isPartOfThread || message.showReplyInChannel {
+                let markUnreadAction = markAsUnreadAction(
+                    for: message,
+                    channel: channel,
+                    chatClient: chatClient,
+                    onFinish: onFinish,
+                    onError: onError
+                )
+
+                messageActions.append(markUnreadAction)
+            }
+        }
+
         if message.isSentByCurrentUser {
             if message.poll == nil {
                 let editAction = editMessageAction(
@@ -130,18 +160,6 @@ extension MessageAction {
 
             messageActions.append(deleteAction)
         } else {
-            if !message.isPartOfThread || message.showReplyInChannel {
-                let markUnreadAction = markAsUnreadAction(
-                    for: message,
-                    channel: channel,
-                    chatClient: chatClient,
-                    onFinish: onFinish,
-                    onError: onError
-                )
-
-                messageActions.append(markUnreadAction)
-            }
-
             if channel.canFlagMessage {
                 let flagAction = flagMessageAction(
                     for: message,
@@ -512,6 +530,38 @@ extension MessageAction {
         return unreadAction
     }
 
+    private static func markThreadAsUnreadAction(
+        messageController: ChatMessageController,
+        message: ChatMessage,
+        onFinish: @escaping (MessageActionInfo) -> Void,
+        onError: @escaping (Error) -> Void
+    ) -> MessageAction {
+        let action = {
+            messageController.markThreadUnread() { error in
+                if let error {
+                    onError(error)
+                } else {
+                    onFinish(
+                        MessageActionInfo(
+                            message: message,
+                            identifier: MessageActionId.markUnread
+                        )
+                    )
+                }
+            }
+        }
+        let unreadAction = MessageAction(
+            id: MessageActionId.markUnread,
+            title: L10n.Message.Actions.markUnread,
+            iconName: "message.badge",
+            action: action,
+            confirmationPopup: nil,
+            isDestructive: false
+        )
+
+        return unreadAction
+    }
+
     private static func muteAction(
         for message: ChatMessage,
         channel: ChatChannel,

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelList.swift

@@ -108,6 +108,7 @@ public struct ChannelList<Factory: ViewFactory>: View {
 
 /// LazyVStack displaying list of channels.
 public struct ChannelsLazyVStack<Factory: ViewFactory>: View {
+    @Injected(\.colors) private var colors
 
     private var factory: Factory
     var channels: LazyCachedMapCollection<ChatChannel>
@@ -170,6 +171,10 @@ public struct ChannelsLazyVStack<Factory: ViewFactory>: View {
                     trailingSwipeLeftButtonTapped: trailingSwipeLeftButtonTapped,
                     leadingSwipeButtonTapped: leadingSwipeButtonTapped
                 )
+                .background(factory.makeChannelListItemBackground(
+                    channel: channel,
+                    isSelected: selectedChannel?.channel.id == channel.id
+                ))
                 .onAppear {
                     if let index = channels.firstIndex(where: { chatChannel in
                         chatChannel.id == channel.id

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift

@@ -270,14 +270,9 @@ public struct InjectedChannelInfo {
 extension ChatChannel {
 
     public var lastMessageText: String? {
-        if let latestMessage = latestMessages.first {
-            if let text = pollMessageText(for: latestMessage) {
-                return text
-            }
-            return "\(latestMessage.author.name ?? latestMessage.author.id): \(textContent(for: latestMessage))"
-        } else {
-            return nil
-        }
+        guard let latestMessage = latestMessages.first else { return nil }
+        let messageFormatter = InjectedValues[\.utils].messagePreviewFormatter
+        return messageFormatter.format(latestMessage)
     }
 
     public var shouldShowTypingIndicator: Bool {
@@ -312,70 +307,4 @@ extension ChatChannel {
             return ""
         }
     }
-
-    private func textContent(for previewMessage: ChatMessage) -> String {
-        if let attachmentPreviewText = attachmentPreviewText(for: previewMessage) {
-            return attachmentPreviewText
-        }
-        if let textContent = previewMessage.textContent, !textContent.isEmpty {
-            return textContent
-        }
-        return previewMessage.adjustedText
-    }
-
-    /// The message preview text in case it contains attachments.
-    /// - Parameter previewMessage: The preview message of the channel.
-    /// - Returns: A string representing the message preview text.
-    func attachmentPreviewText(for previewMessage: ChatMessage) -> String? {
-        guard let attachment = previewMessage.allAttachments.first, !previewMessage.isDeleted else {
-            return nil
-        }
-        let text = previewMessage.textContent ?? previewMessage.text
-        switch attachment.type {
-        case .audio:
-            let defaultAudioText = L10n.Channel.Item.audio
-            return "🎧 \(text.isEmpty ? defaultAudioText : text)"
-        case .file:
-            guard let fileAttachment = previewMessage.fileAttachments.first else {
-                return nil
-            }
-            let title = fileAttachment.payload.title
-            return "📄 \(title ?? text)"
-        case .image:
-            let defaultPhotoText = L10n.Channel.Item.photo
-            return "📷 \(text.isEmpty ? defaultPhotoText : text)"
-        case .video:
-            let defaultVideoText = L10n.Channel.Item.video
-            return "📹 \(text.isEmpty ? defaultVideoText : text)"
-        case .giphy:
-            return "/giphy"
-        case .voiceRecording:
-            let defaultVoiceMessageText = L10n.Channel.Item.voiceMessage
-            return "🎧 \(text.isEmpty ? defaultVoiceMessageText : text)"
-        default:
-            return nil
-        }
-    }
-
-    private func pollMessageText(for previewMessage: ChatMessage) -> String? {
-        guard let poll = previewMessage.poll, !previewMessage.isDeleted else { return nil }
-        var components = ["📊"]
-        if let latestVoter = poll.latestVotes.first?.user {
-            if latestVoter.id == membership?.id {
-                components.append(L10n.Channel.Item.pollYouVoted)
-            } else {
-                components.append(L10n.Channel.Item.pollSomeoneVoted(latestVoter.name ?? latestVoter.id))
-            }
-        } else if let creator = poll.createdBy {
-            if previewMessage.isSentByCurrentUser {
-                components.append(L10n.Channel.Item.pollYouCreated)
-            } else {
-                components.append(L10n.Channel.Item.pollSomeoneCreated(creator.name ?? creator.id))
-            }
-        }
-        if !poll.name.isEmpty {
-            components.append(poll.name)
-        }
-        return components.joined(separator: " ")
-    }
 }