Threaded timeline composer

2026-11-02 21:33:26 +00:00 · 2025-05-30 16:15:17 +03:00
parent c6c32079f6
commit 9804be70eb
9 changed files with 185 additions and 45 deletions
@@ -6,18 +6,23 @@
 //

 import Combine
+import HTMLParser
 import SwiftUI
+import WysiwygComposer

 struct ThreadTimelineScreenCoordinatorParameters {
+    let clientProxy: ClientProxyProtocol
    let roomProxy: JoinedRoomProxyProtocol
    let timelineController: TimelineControllerProtocol
    let mediaProvider: MediaProviderProtocol
    let mediaPlayerProvider: MediaPlayerProviderProtocol
    let voiceMessageMediaManager: VoiceMessageMediaManagerProtocol
-    let appMediator: AppMediatorProtocol
    let emojiProvider: EmojiProviderProtocol
+    let completionSuggestionService: CompletionSuggestionServiceProtocol
+    let appMediator: AppMediatorProtocol
+    let appSettings: AppSettings
+    let composerDraftService: ComposerDraftServiceProtocol
    let timelineControllerFactory: TimelineControllerFactoryProtocol
-    let clientProxy: ClientProxyProtocol
 }

 enum ThreadTimelineScreenCoordinatorAction {
@@ -37,6 +42,8 @@ final class ThreadTimelineScreenCoordinator: CoordinatorProtocol {
    private let parameters: ThreadTimelineScreenCoordinatorParameters
    private let viewModel: ThreadTimelineScreenViewModelProtocol
    private let timelineViewModel: TimelineViewModelProtocol
+    private var composerViewModel: ComposerToolbarViewModelProtocol
+    private var wysiwygViewModel: WysiwygComposerViewModel
    
    private var cancellables = Set<AnyCancellable>()
 
@@ -57,11 +64,28 @@ final class ThreadTimelineScreenCoordinator: CoordinatorProtocol {
                                              voiceMessageMediaManager: parameters.voiceMessageMediaManager,
                                              userIndicatorController: ServiceLocator.shared.userIndicatorController,
                                              appMediator: parameters.appMediator,
-                                              appSettings: ServiceLocator.shared.settings,
+                                              appSettings: parameters.appSettings,
                                              analyticsService: ServiceLocator.shared.analytics,
                                              emojiProvider: parameters.emojiProvider,
                                              timelineControllerFactory: parameters.timelineControllerFactory,
                                              clientProxy: parameters.clientProxy)
+        
+        wysiwygViewModel = WysiwygComposerViewModel(minHeight: ComposerConstant.minHeight,
+                                                    maxCompressedHeight: ComposerConstant.maxHeight,
+                                                    maxExpandedHeight: ComposerConstant.maxHeight,
+                                                    parserStyle: .elementX)
+        
+        #warning("Drafts are not handled and they can't be without rust side changes")
+        
+        composerViewModel = ComposerToolbarViewModel(initialText: nil,
+                                                     roomProxy: parameters.roomProxy,
+                                                     wysiwygViewModel: wysiwygViewModel,
+                                                     completionSuggestionService: parameters.completionSuggestionService,
+                                                     mediaProvider: parameters.mediaProvider,
+                                                     mentionDisplayHelper: ComposerMentionDisplayHelper(timelineContext: timelineViewModel.context),
+                                                     appSettings: parameters.appSettings,
+                                                     analyticsService: ServiceLocator.shared.analytics,
+                                                     composerDraftService: parameters.composerDraftService)
    }
    
    func start() {
@@ -103,6 +127,14 @@ final class ThreadTimelineScreenCoordinator: CoordinatorProtocol {
                }
            }
            .store(in: &cancellables)
+        
+        composerViewModel.actions
+            .sink { [weak self] action in
+                guard let self else { return }
+
+                timelineViewModel.process(composerAction: action)
+            }
+            .store(in: &cancellables)
    }
    
    func stop() {
@@ -110,6 +142,12 @@ final class ThreadTimelineScreenCoordinator: CoordinatorProtocol {
    }
        
    func toPresentable() -> AnyView {
-        AnyView(ThreadTimelineScreen(context: viewModel.context, timelineContext: timelineViewModel.context))
+        let composerToolbar = ComposerToolbar(context: composerViewModel.context,
+                                              wysiwygViewModel: wysiwygViewModel,
+                                              keyCommands: composerViewModel.keyCommands)
+        
+        return AnyView(ThreadTimelineScreen(context: viewModel.context,
+                                            timelineContext: timelineViewModel.context,
+                                            composerToolbar: composerToolbar))
    }
 }
@@ -9,15 +9,96 @@ import Compound
 import SwiftUI

 struct ThreadTimelineScreen: View {
-    @ObservedObject var context: ThreadTimelineScreenViewModel.Context
-    @ObservedObject var timelineContext: TimelineViewModel.Context
+    @ObservedObject private var context: ThreadTimelineScreenViewModelType.Context
+    @ObservedObject private var timelineContext: TimelineViewModelType.Context
+    @ObservedObject private var composerToolbarContext: ComposerToolbarViewModelType.Context
+    @State private var dragOver = false
+    private let composerToolbar: ComposerToolbar
+    
+    init(context: ThreadTimelineScreenViewModelType.Context,
+         timelineContext: TimelineViewModelType.Context,
+         composerToolbar: ComposerToolbar) {
+        self.context = context
+        self.timelineContext = timelineContext
+        self.composerToolbar = composerToolbar
+        composerToolbarContext = composerToolbar.context
+    }
        
    var body: some View {
        TimelineView(timelineContext: timelineContext)
            .navigationTitle("Thread")
            .navigationBarTitleDisplayMode(.inline)
            .background(.compound.bgCanvasDefault)
-            .interactiveDismissDisabled()
+            .toolbarBackground(.visible, for: .navigationBar) // Fix the toolbar's background.
            .timelineMediaPreview(viewModel: $context.mediaPreviewViewModel)
+            .overlay(alignment: .bottomTrailing) {
+                scrollToBottomButton
+            }
+            .safeAreaInset(edge: .bottom, spacing: 0) {
+                composer
+                    .padding(.bottom, composerToolbarContext.composerFormattingEnabled ? 8 : 12)
+                    .background {
+                        if composerToolbarContext.composerFormattingEnabled {
+                            RoundedRectangle(cornerRadius: 20)
+                                .stroke(Color.compound.borderInteractiveSecondary, lineWidth: 0.5)
+                                .ignoresSafeArea()
+                        }
+                    }
+                    .padding(.top, 8)
+                    .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+                    .environmentObject(timelineContext)
+                    .environment(\.timelineContext, timelineContext)
+                    // Make sure the reply header honours the hideTimelineMedia setting too.
+                    .environment(\.shouldAutomaticallyLoadImages, !timelineContext.viewState.hideTimelineMedia)
+            }
+            .onDrop(of: ["public.item", "public.file-url"], isTargeted: $dragOver) { providers -> Bool in
+                guard let provider = providers.first,
+                      provider.isSupportedForPasteOrDrop else {
+                    return false
+                }
+                
+                timelineContext.send(viewAction: .handlePasteOrDrop(provider: provider))
+                return true
+            }
+    }
+    
+    @ViewBuilder
+    private var composer: some View {
+        #warning("Check permissions here too")
+//        if roomContext.viewState.canSendMessage {
+        composerToolbar
+//        } else {
+//            Text(L10n.screenRoomTimelineNoPermissionToPost)
+//                .font(.compound.bodyLG)
+//                .foregroundStyle(.compound.textDisabled)
+//                .multilineTextAlignment(.center)
+//                .padding(.vertical, 10) // Matches the MessageComposerStyleModifier
+//        }
+    }
+    
+    private var scrollToBottomButton: some View {
+        Button { timelineContext.send(viewAction: .scrollToBottom) } label: {
+            Image(systemName: "chevron.down")
+                .font(.compound.bodyLG)
+                .fontWeight(.semibold)
+                .foregroundColor(.compound.iconSecondary)
+                .padding(13)
+                .offset(y: 1)
+                .background {
+                    Circle()
+                        .fill(Color.compound.iconOnSolidPrimary)
+                        // Intentionally using system primary colour to get white/black.
+                        .shadow(color: .primary.opacity(0.33), radius: 2.0)
+                }
+                .padding()
+        }
+        .opacity(isAtBottomAndLive ? 0.0 : 1.0)
+        .accessibilityHidden(isAtBottomAndLive)
+        .animation(.elementDefault, value: isAtBottomAndLive)
+        .accessibilityIdentifier(A11yIdentifiers.roomScreen.scrollToBottom)
+    }
+    
+    private var isAtBottomAndLive: Bool {
+        timelineContext.isScrolledToBottom && timelineContext.viewState.timelineState.isLive
    }
 }