ios: fix inaccurate floating unread counters in chat message view (#4781)

* ios: fix inaccurate floating unread counters in chat message view * account for inset; remove old on appear/disappear blocks * revert id * first visible * remove UnreadChatItemCounts * cleanup * revert duplicates * add todo * throttle first * cleanup * lines --------- Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
2026-03-31 03:16:05 +00:00 · 2024-08-29 19:25:08 +03:00
parent eef1e97ecc
commit 0b0b78293f
6 changed files with 83 additions and 106 deletions
--- a/apps/ios/Shared/Model/ChatModel.swift
+++ b/apps/ios/Shared/Model/ChatModel.swift
@@ -888,35 +888,6 @@ final class ChatModel: ObservableObject {
            _ = upsertGroupMember(groupInfo, updatedMember)
        }
    }
-
-    func unreadChatItemCounts(itemsInView: Set<String>) -> UnreadChatItemCounts {
-        var i = 0
-        var totalBelow = 0
-        var unreadBelow = 0
-        while i < im.reversedChatItems.count - 1 && !itemsInView.contains(im.reversedChatItems[i].viewId) {
-            totalBelow += 1
-            if im.reversedChatItems[i].isRcvNew {
-                unreadBelow += 1
-            }
-            i += 1
-        }
-        return UnreadChatItemCounts(
-            // TODO these thresholds account for the fact that items are still "visible" while
-            // covered by compose area, they should be replaced with the actual height in pixels below the screen.
-            isNearBottom: totalBelow < 15,
-            isReallyNearBottom: totalBelow < 2,
-            unreadBelow: unreadBelow
-        )
-    }
-
-    func topItemInView(itemsInView: Set<String>) -> ChatItem? {
-        let maxIx = im.reversedChatItems.count - 1
-        var i = 0
-        let inView = { itemsInView.contains(self.im.reversedChatItems[$0].viewId) }
-        while i < maxIx && !inView(i) { i += 1 }
-        while i < maxIx && inView(i) { i += 1 }
-        return im.reversedChatItems[min(i - 1, maxIx)]
-    }
 }

 struct ShowingInvitation {
@@ -929,12 +900,6 @@ struct NTFContactRequest {
    var chatId: String
 }

-struct UnreadChatItemCounts: Equatable {
-    var isNearBottom: Bool
-    var isReallyNearBottom: Bool
-    var unreadBelow: Int
-}
-
 final class Chat: ObservableObject, Identifiable, ChatLike {
    @Published var chatInfo: ChatInfo
    @Published var chatItems: [ChatItem]
--- a/apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift
+++ b/apps/ios/Shared/Views/Chat/ChatItem/FramedItemView.swift
@@ -12,7 +12,7 @@ import SimpleXChat
 struct FramedItemView: View {
    @EnvironmentObject var m: ChatModel
    @EnvironmentObject var theme: AppTheme
-    @EnvironmentObject var scrollModel: ReverseListScrollModel<ChatItem>
+    @EnvironmentObject var scrollModel: ReverseListScrollModel
    @ObservedObject var chat: Chat
    var chatItem: ChatItem
    var preview: UIImage?
--- a/apps/ios/Shared/Views/Chat/ChatItem/FullScreenMediaView.swift
+++ b/apps/ios/Shared/Views/Chat/ChatItem/FullScreenMediaView.swift
@@ -13,7 +13,7 @@ import AVKit

 struct FullScreenMediaView: View {
    @EnvironmentObject var m: ChatModel
-    @EnvironmentObject var scrollModel: ReverseListScrollModel<ChatItem>
+    @EnvironmentObject var scrollModel: ReverseListScrollModel
    @State var chatItem: ChatItem
    @State var image: UIImage?
    @State var player: AVPlayer? = nil
--- a/apps/ios/Shared/Views/Chat/ChatView.swift
+++ b/apps/ios/Shared/Views/Chat/ChatView.swift
@@ -22,8 +22,8 @@ struct ChatView: View {
    @Environment(\.presentationMode) var presentationMode
    @Environment(\.scenePhase) var scenePhase
    @State @ObservedObject var chat: Chat
-    @StateObject private var scrollModel = ReverseListScrollModel<ChatItem>()
-    @StateObject private var floatingButtonModel = FloatingButtonModel()
+    @StateObject private var scrollModel = ReverseListScrollModel()
+    @StateObject private var floatingButtonModel: FloatingButtonModel = .shared
    @State private var showChatInfoSheet: Bool = false
    @State private var showAddMembersSheet: Bool = false
    @State private var composeState = ComposeState()
@@ -76,7 +76,8 @@ struct ChatView: View {
            VStack(spacing: 0) {
                ZStack(alignment: .bottomTrailing) {
                    chatItemsList()
-                    floatingButtons(counts: floatingButtonModel.unreadChatItemCounts)
+                    // TODO: Extract into a separate view, to reduce the scope of `FloatingButtonModel` updates
+                    floatingButtons(unreadBelow: floatingButtonModel.unreadBelow, isNearBottom: floatingButtonModel.isNearBottom)
                }
                connectingText()
                if selectedChatItems == nil {
@@ -413,12 +414,6 @@ struct ChatView: View {
                    revealedChatItem: $revealedChatItem,
                    selectedChatItems: $selectedChatItems
                )
-                .onAppear {
-                    floatingButtonModel.appeared(viewId: ci.viewId)
-                }
-                .onDisappear {
-                    floatingButtonModel.disappeared(viewId: ci.viewId)
-                }
                .id(ci.id) // Required to trigger `onAppear` on iOS15
            } loadPage: {
                loadChatItems(cInfo)
@@ -429,13 +424,10 @@ struct ChatView: View {
            .onChange(of: searchText) { _ in
                Task { await loadChat(chat: chat, search: searchText) }
            }
-            .onChange(of: im.reversedChatItems) { _ in
-                floatingButtonModel.chatItemsChanged()
-            }
            .onChange(of: im.itemAdded) { added in
                if added {
                    im.itemAdded = false
-                    if floatingButtonModel.unreadChatItemCounts.isReallyNearBottom {
+                    if floatingButtonModel.isReallyNearBottom {
                        scrollModel.scrollToBottom()
                    }
                }
@@ -458,57 +450,43 @@ struct ChatView: View {
    }

    class FloatingButtonModel: ObservableObject {
-        private enum Event {
-            case appeared(String)
-            case disappeared(String)
-            case chatItemsChanged
-        }
-
-        @Published var unreadChatItemCounts: UnreadChatItemCounts
-
-        private let events = PassthroughSubject<Event, Never>()
+        static let shared = FloatingButtonModel()
+        @Published var unreadBelow: Int = 0
+        @Published var isNearBottom: Bool = true
+        var isReallyNearBottom: Bool { scrollOffset.value > 0 && scrollOffset.value < 500 }
+        let visibleItems = PassthroughSubject<[String], Never>()
+        let scrollOffset = CurrentValueSubject<Double, Never>(0)
        private var bag = Set<AnyCancellable>()

        init() {
-            unreadChatItemCounts = UnreadChatItemCounts(
-                isNearBottom: true,
-                isReallyNearBottom: true,
-                unreadBelow: 0
-            )
-            events
+            visibleItems
                .receive(on: DispatchQueue.global(qos: .background))
-                .scan(Set<String>()) { itemsInView, event in
-                    var updated = itemsInView
-                    switch event {
-                    case let .appeared(viewId): updated.insert(viewId)
-                    case let .disappeared(viewId): updated.remove(viewId)
-                    case .chatItemsChanged: ()
-                    }
-                    return updated
+                .map { itemIds in
+                    if let viewId = itemIds.first,
+                       let index = ItemsModel.shared.reversedChatItems.firstIndex(where: { $0.viewId == viewId }) {
+                        ItemsModel.shared.reversedChatItems[..<index].reduce(into: 0) { unread, chatItem in
+                            if chatItem.isRcvNew { unread += 1 }
+                        }
+                    } else { 0 }
                }
-                .map { ChatModel.shared.unreadChatItemCounts(itemsInView: $0) }
                .removeDuplicates()
-                .throttle(for: .seconds(0.2), scheduler: DispatchQueue.main, latest: true)
-                .assign(to: \.unreadChatItemCounts, on: self)
+                .receive(on: DispatchQueue.main)
+                .assign(to: \.unreadBelow, on: self)
                .store(in: &bag)
-        }

-        func appeared(viewId: String) {
-            events.send(.appeared(viewId))
-        }
-
-        func disappeared(viewId: String) {
-            events.send(.disappeared(viewId))
-        }
-
-        func chatItemsChanged() {
-            events.send(.chatItemsChanged)
+            scrollOffset
+                .map { $0 < 800 }
+                .removeDuplicates()
+                // Delay the state change until scroll to bottom animation is finished
+                .delay(for: 0.35, scheduler: DispatchQueue.main)
+                .assign(to: \.isNearBottom, on: self)
+                .store(in: &bag)
        }
    }

-    private func floatingButtons(counts: UnreadChatItemCounts) -> some View {
+    private func floatingButtons(unreadBelow: Int, isNearBottom: Bool) -> some View {
        VStack {
-            let unreadAbove = chat.chatStats.unreadCount - counts.unreadBelow
+            let unreadAbove = chat.chatStats.unreadCount - unreadBelow
            if unreadAbove > 0 {
                circleButton {
                    unreadCountText(unreadAbove)
@@ -529,16 +507,16 @@ struct ChatView: View {
                }
            }
            Spacer()
-            if counts.unreadBelow > 0 {
+            if unreadBelow > 0 {
                circleButton {
-                    unreadCountText(counts.unreadBelow)
+                    unreadCountText(unreadBelow)
                        .font(.callout)
                        .foregroundColor(theme.colors.primary)
                }
                .onTapGesture {
                    scrollModel.scrollToBottom()
                }
-            } else if !counts.isNearBottom {
+            } else if !isNearBottom {
                circleButton {
                    Image(systemName: "chevron.down")
                        .foregroundColor(theme.colors.primary)
--- a/apps/ios/Shared/Views/Chat/ReverseList.swift
+++ b/apps/ios/Shared/Views/Chat/ReverseList.swift
@@ -8,15 +8,16 @@

 import SwiftUI
 import Combine
+import SimpleXChat

 /// A List, which displays it's items in reverse order - from bottom to top
-struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIViewControllerRepresentable {
-    let items: Array<Item>
+struct ReverseList<Content: View>: UIViewControllerRepresentable {
+    let items: Array<ChatItem>

-    @Binding var scrollState: ReverseListScrollModel<Item>.State
+    @Binding var scrollState: ReverseListScrollModel.State

    /// Closure, that returns user interface for a given item
-    let content: (Item) -> Content
+    let content: (ChatItem) -> Content

    let loadPage: () -> Void

@@ -25,7 +26,9 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
    }

    func updateUIViewController(_ controller: Controller, context: Context) {
+        controller.representer = self
        if case let .scrollingTo(destination) = scrollState, !items.isEmpty {
+            controller.view.layer.removeAllAnimations()
            switch destination {
            case .nextPage:
                controller.scrollToNextPage()
@@ -42,9 +45,10 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
    /// Controller, which hosts SwiftUI cells
    class Controller: UITableViewController {
        private enum Section { case main }
-        private let representer: ReverseList
-        private var dataSource: UITableViewDiffableDataSource<Section, Item>!
+        var representer: ReverseList
+        private var dataSource: UITableViewDiffableDataSource<Section, ChatItem>!
        private var itemCount: Int = 0
+        private let updateFloatingButtons = PassthroughSubject<Void, Never>()
        private var bag = Set<AnyCancellable>()

        init(representer: ReverseList) {
@@ -71,7 +75,7 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
            }

            // 3. Configure data source
-            self.dataSource = UITableViewDiffableDataSource<Section, Item>(
+            self.dataSource = UITableViewDiffableDataSource<Section, ChatItem>(
                tableView: tableView
            ) { (tableView, indexPath, item) -> UITableViewCell? in
                if indexPath.item > self.itemCount - 8, self.itemCount > 8 {
@@ -103,6 +107,10 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
                    name: notificationName,
                    object: nil
                )
+            updateFloatingButtons
+                .throttle(for: 0.2, scheduler: DispatchQueue.main, latest: true)
+                .sink { self.updateVisibleItems() }
+                .store(in: &bag)
        }

        @available(*, unavailable)
@@ -171,8 +179,8 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
            Task { representer.scrollState = .atDestination }
        }

-        func update(items: Array<Item>) {
-            var snapshot = NSDiffableDataSourceSnapshot<Section, Item>()
+        func update(items: [ChatItem]) {
+            var snapshot = NSDiffableDataSourceSnapshot<Section, ChatItem>()
            snapshot.appendSections([.main])
            snapshot.appendItems(items)
            dataSource.defaultRowAnimation = .none
@@ -188,6 +196,32 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
                )
            }
            itemCount = items.count
+            updateFloatingButtons.send()
+        }
+
+        override func scrollViewDidScroll(_ scrollView: UIScrollView) {
+            updateFloatingButtons.send()
+        }
+
+        private func updateVisibleItems() {
+            let fbm = ChatView.FloatingButtonModel.shared
+            fbm.scrollOffset.send(tableView.contentOffset.y + InvertedTableView.inset)
+            fbm.visibleItems.send(
+                (tableView.indexPathsForVisibleRows ?? [])
+                    .compactMap { indexPath -> String? in
+                        let relativeFrame = tableView.superview!.convert(
+                            tableView.rectForRow(at: indexPath),
+                            from: tableView
+                        )
+                        // Checks that the cell is visible accounting for the added insets
+                        let isVisible =
+                            relativeFrame.maxY > InvertedTableView.inset &&
+                            relativeFrame.minY < tableView.frame.height - InvertedTableView.inset
+                        return indexPath.item < representer.items.count && isVisible
+                        ? representer.items[indexPath.item].viewId
+                        : nil
+                    }
+            )
        }
    }

@@ -232,12 +266,12 @@ struct ReverseList<Item: Identifiable & Hashable & Sendable, Content: View>: UIV
 }

 /// Manages ``ReverseList`` scrolling
-class ReverseListScrollModel<Item: Identifiable>: ObservableObject {
+class ReverseListScrollModel: ObservableObject {
    /// Represents Scroll State of ``ReverseList``
    enum State: Equatable {
        enum Destination: Equatable {
            case nextPage
-            case item(Item.ID)
+            case item(ChatItem.ID)
            case bottom
        }

@@ -255,7 +289,7 @@ class ReverseListScrollModel<Item: Identifiable>: ObservableObject {
        state = .scrollingTo(.bottom)
    }

-    func scrollToItem(id: Item.ID) {
+    func scrollToItem(id: ChatItem.ID) {
        state = .scrollingTo(.item(id))
    }
 }
--- a/apps/ios/Shared/Views/ChatList/ChatPreviewView.swift
+++ b/apps/ios/Shared/Views/ChatList/ChatPreviewView.swift
@@ -324,12 +324,12 @@ struct ChatPreviewView: View {
        case let .image(_, image):
            smallContentPreview(size: dynamicMediaSize) {
                CIImageView(chatItem: ci, preview: UIImage(base64Encoded: image), maxWidth: dynamicMediaSize, smallView: true, showFullScreenImage: $showFullscreenGallery)
-                    .environmentObject(ReverseListScrollModel<ChatItem>())
+                    .environmentObject(ReverseListScrollModel())
            }
        case let .video(_,image, duration):
            smallContentPreview(size: dynamicMediaSize) {
                CIVideoView(chatItem: ci, preview: UIImage(base64Encoded: image), duration: duration, maxWidth: dynamicMediaSize, videoWidth: nil, smallView: true, showFullscreenPlayer: $showFullscreenGallery)
-                    .environmentObject(ReverseListScrollModel<ChatItem>())
+                    .environmentObject(ReverseListScrollModel())
            }
        case let .voice(_, duration):
            smallContentPreviewVoice(size: dynamicMediaSize) {