Add a new RoomThreadListScreen and hook it up to the RoomThreadListService

It will automatically paginate to fill the screen and update the list as updates come in.
2026-11-03 06:55:59 +00:00 · 2026-03-23 17:55:50 +02:00
parent e97ed6ec5c
commit e7e1e990db
16 changed files with 413 additions and 8 deletions
@@ -0,0 +1,48 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+// periphery:ignore:all - this is just a roomThreadList remove this comment once generating the final file
+
+import Combine
+import SwiftUI
+
+struct RoomThreadListScreenCoordinatorParameters {
+    let threadListServiceProxy: RoomThreadListServiceProxyProtocol
+    let mediaProvider: MediaProviderProtocol
+}
+
+enum RoomThreadListScreenCoordinatorAction { }
+
+final class RoomThreadListScreenCoordinator: CoordinatorProtocol {
+    private let parameters: RoomThreadListScreenCoordinatorParameters
+    private let viewModel: RoomThreadListScreenViewModelProtocol
+    
+    private var cancellables = Set<AnyCancellable>()
+ 
+    private let actionsSubject: PassthroughSubject<RoomThreadListScreenCoordinatorAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<RoomThreadListScreenCoordinatorAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+    
+    init(parameters: RoomThreadListScreenCoordinatorParameters) {
+        self.parameters = parameters
+        
+        viewModel = RoomThreadListScreenViewModel(threadListServiceProxy: parameters.threadListServiceProxy,
+                                                  mediaProvider: parameters.mediaProvider)
+    }
+    
+    func start() {
+        viewModel.actionsPublisher.sink { [weak self] action in
+            MXLog.info("Coordinator: received view model action: \(action)")
+        }
+        .store(in: &cancellables)
+    }
+        
+    func toPresentable() -> AnyView {
+        AnyView(RoomThreadListScreen(context: viewModel.context))
+    }
+}
@@ -0,0 +1,25 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Foundation
+
+enum RoomThreadListScreenViewModelAction { }
+
+struct RoomThreadListScreenViewState: BindableState {
+    var items = [RoomThreadListItem]()
+    
+    var isPaginating = false
+    
+    var bindings: RoomThreadListScreenViewStateBindings
+}
+
+struct RoomThreadListScreenViewStateBindings { }
+
+enum RoomThreadListScreenViewAction {
+    case oldestItemDidAppear
+    case oldestItemDidDisappear
+}
@@ -0,0 +1,75 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Combine
+import SwiftUI
+
+typealias RoomThreadListScreenViewModelType = StateStoreViewModelV2<RoomThreadListScreenViewState, RoomThreadListScreenViewAction>
+
+class RoomThreadListScreenViewModel: RoomThreadListScreenViewModelType, RoomThreadListScreenViewModelProtocol {
+    private let threadListServiceProxy: RoomThreadListServiceProxyProtocol
+    
+    private var isOldestItemVisible = false
+    
+    private let actionsSubject: PassthroughSubject<RoomThreadListScreenViewModelAction, Never> = .init()
+    var actionsPublisher: AnyPublisher<RoomThreadListScreenViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
+
+    init(threadListServiceProxy: RoomThreadListServiceProxyProtocol, mediaProvider: MediaProviderProtocol) {
+        self.threadListServiceProxy = threadListServiceProxy
+        
+        super.init(initialViewState: .init(bindings: .init()), mediaProvider: mediaProvider)
+        
+        updateItems(self.threadListServiceProxy.itemsPublisher.value)
+        
+        threadListServiceProxy.itemsPublisher
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] items in
+                self?.updateItems(items)
+            }
+            .store(in: &cancellables)
+        
+        threadListServiceProxy.paginationStatePublisher
+            .receive(on: DispatchQueue.main)
+            .sink { [weak self] paginationState in
+                guard let self else { return }
+                state.isPaginating = paginationState == .loading
+                Task { await self.paginateIfNecessary(paginationState: paginationState) }
+            }
+            .store(in: &cancellables)
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: RoomThreadListScreenViewAction) {
+        MXLog.info("View model: received view action: \(viewAction)")
+        
+        switch viewAction {
+        case .oldestItemDidAppear:
+            isOldestItemVisible = true
+            
+            Task {
+                await paginateIfNecessary(paginationState: threadListServiceProxy.paginationStatePublisher.value)
+            }
+        case .oldestItemDidDisappear:
+            isOldestItemVisible = false
+        }
+    }
+    
+    // MARK: - Private
+    
+    private func paginateIfNecessary(paginationState: RoomThreadListPaginationState) async {
+        if isOldestItemVisible, case .idle(endReached: false) = paginationState {
+            _ = await threadListServiceProxy.paginate()
+        }
+    }
+    
+    private func updateItems(_ items: [RoomThreadListItem]) {
+        state.items = items
+    }
+}
@@ -0,0 +1,14 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Combine
+
+@MainActor
+protocol RoomThreadListScreenViewModelProtocol {
+    var actionsPublisher: AnyPublisher<RoomThreadListScreenViewModelAction, Never> { get }
+    var context: RoomThreadListScreenViewModelType.Context { get }
+}
@@ -0,0 +1,153 @@
+//
+// Copyright 2025 Element Creations Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
+// Please see LICENSE files in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct RoomThreadListScreen: View {
+    @Bindable var context: RoomThreadListScreenViewModel.Context
+    
+    var body: some View {
+        ScrollView {
+            LazyVStack(spacing: 0) {
+                ForEach(context.viewState.items) { item in
+                    RoomThreadListCell(item: item, mediaProvider: context.mediaProvider)
+                        .padding(.horizontal, 16)
+                        .padding(.vertical, 8)
+                }
+                
+                footer
+            }
+        }
+        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+        .navigationTitle(L10n.commonThreads)
+        .navigationBarTitleDisplayMode(.inline)
+    }
+    
+    private var footer: some View {
+        // Needs to be wrapped in a LazyStack otherwise appearance calls don't trigger
+        LazyVStack(spacing: 0) {
+            ProgressView()
+                .padding()
+                .opacity(context.viewState.isPaginating ? 1 : 0)
+            
+            Rectangle()
+                .frame(height: 1)
+                .foregroundStyle(.compound.bgCanvasDefault)
+                .onAppear {
+                    context.send(viewAction: .oldestItemDidAppear)
+                }
+                .onDisappear {
+                    context.send(viewAction: .oldestItemDidDisappear)
+                }
+        }
+    }
+}
+
+private struct RoomThreadListCell: View {
+    let item: RoomThreadListItem
+    let mediaProvider: MediaProviderProtocol?
+    
+    var body: some View {
+        HStack(alignment: .center, spacing: 16) {
+            LoadableAvatarImage(url: item.rootMessageDetails.sender.avatarURL,
+                                name: item.rootMessageDetails.sender.displayName,
+                                contentID: item.rootMessageDetails.sender.id,
+                                avatarSize: .user(on: .threadList),
+                                mediaProvider: mediaProvider)
+                .accessibilityHidden(true)
+            
+            VStack(alignment: .leading, spacing: 2) {
+                HStack(alignment: .center, spacing: 16) {
+                    creatorDetails
+                    Spacer()
+                    timestamp
+                }
+                
+                rootMessageDetails
+                latestMessageDetails
+            }
+        }
+    }
+    
+    private var creatorDetails: some View {
+        Text(item.rootMessageDetails.sender.disambiguatedDisplayName ?? item.rootMessageDetails.sender.id)
+            .font(.compound.bodyLGSemibold)
+            .foregroundColor(.compound.textPrimary)
+            .lineLimit(1)
+    }
+    
+    @ViewBuilder
+    private var rootMessageDetails: some View {
+        if let message = item.rootMessageDetails.message {
+            Text(message)
+                .font(.compound.bodyMD)
+                .foregroundColor(.compound.textSecondary)
+                .lineLimit(1)
+                .frame(maxWidth: .infinity, alignment: .leading)
+        }
+    }
+    
+    @ViewBuilder
+    private var latestMessageDetails: some View {
+        if let latestMessageDetails = item.latestMessageDetails {
+            HStack(alignment: .center, spacing: 8) {
+                Label {
+                    Text("\(item.numberOfReplies)")
+                        .font(.compound.bodySMSemibold)
+                        .foregroundColor(.compound.textSecondary)
+                } icon: {
+                    CompoundIcon(\.threads, size: .small, relativeTo: .compound.bodySMSemibold)
+                        .foregroundColor(.compound.iconSecondary)
+                }
+                .labelStyle(.custom(spacing: 4, alignment: .center, iconLayout: .trailing))
+                
+                LoadableAvatarImage(url: latestMessageDetails.sender.avatarURL,
+                                    name: latestMessageDetails.sender.displayName,
+                                    contentID: latestMessageDetails.sender.id,
+                                    avatarSize: .user(on: .threadSummary),
+                                    mediaProvider: mediaProvider)
+                    .accessibilityHidden(true)
+                
+                if let message = latestMessageDetails.message {
+                    Text(message)
+                        .font(.compound.bodySM)
+                        .foregroundColor(.compound.textSecondary)
+                        .lineLimit(1)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                }
+            }
+        }
+    }
+    
+    private var timestamp: some View {
+        if let latestMessageDetails = item.latestMessageDetails {
+            Text(latestMessageDetails.timestamp.formattedMinimal())
+                .font(.compound.bodySM)
+                .foregroundColor(.compound.textSecondary)
+        } else {
+            Text(item.rootMessageDetails.timestamp.formattedTime())
+                .font(.compound.bodySM)
+                .foregroundColor(.compound.textSecondary)
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct RoomThreadListScreen_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = makeViewModel()
+    
+    static var previews: some View {
+        RoomThreadListScreen(context: viewModel.context)
+    }
+    
+    static func makeViewModel() -> RoomThreadListScreenViewModel {
+        RoomThreadListScreenViewModel(threadListServiceProxy: RoomThreadListServiceProxyMock(.init()),
+                                      mediaProvider: MediaProviderMock(configuration: .init()))
+    }
+}