Extract composer toolbar to a dedicated component (#1427)

* Extract composer toolbar to a dedicated component * Use publisher for composer mode * Introduce `RoomScreenComposerProvider` * Add `ComposerToolbarViewModelTests` * Rename protocols and add passthrough subjects for focused and composer mode * Remove `ComposerToolbarViewActionHandler` and `ComposerToolbarCoordinatorParameters` * Remove `RoomScreenComposerActionHandlerProtocol` and `RoomScreenComposerProviderProtocol` * Re-arrange code a bit * Remove composer mode being stored on `RoomScreen` * Rename `process(viewAction: ComposerToolbarViewAction)` to `process(composerAction: ComposerToolbarViewAction)` * Replace PassthroughSubject with direct function call * Remove `ComposerToolbarCoordinator` * Remove `cancelEdit` and `cancelReply` from external composer view model actions * Use `RoomScreenComposerAction` as a sub-`RoomScreenViewModelAction` * Move `ComposerToolbarViewModel` callback to actionsSubject * Move `RoomScreenViewModel` callback to actionsSubject * Fix `RoomScreenViewModelTests` * Rename `composerAction` parameter to `roomAction` * Fix unit tests
2026-11-04 10:33:45 +00:00 · 2023-08-08 14:25:23 +02:00
parent 9a7a9c8d98
commit 59865a4b16
19 changed files with 513 additions and 204 deletions
@@ -38,8 +38,10 @@ enum RoomScreenCoordinatorAction {

 final class RoomScreenCoordinator: CoordinatorProtocol {
    private var parameters: RoomScreenCoordinatorParameters
-
    private var viewModel: RoomScreenViewModelProtocol
+    private var composerViewModel: ComposerToolbarViewModel
+
+    private var cancellables = Set<AnyCancellable>()

    private let actionsSubject: PassthroughSubject<RoomScreenCoordinatorAction, Never> = .init()
    var actions: AnyPublisher<RoomScreenCoordinatorAction, Never> {
@@ -48,49 +50,63 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
    
    init(parameters: RoomScreenCoordinatorParameters) {
        self.parameters = parameters
-        
+
        viewModel = RoomScreenViewModel(timelineController: parameters.timelineController,
                                        mediaProvider: parameters.mediaProvider,
                                        roomProxy: parameters.roomProxy,
                                        appSettings: ServiceLocator.shared.settings,
                                        analytics: ServiceLocator.shared.analytics,
                                        userIndicatorController: ServiceLocator.shared.userIndicatorController)
+
+        composerViewModel = ComposerToolbarViewModel()
    }
    
    // MARK: - Public
    
    func start() {
-        viewModel.callback = { [weak self] action in
-            guard let self else { return }
-            
-            switch action {
-            case .displayRoomDetails:
-                actionsSubject.send(.presentRoomDetails)
-            case .displayEmojiPicker(let itemID, let selectedEmojis):
-                actionsSubject.send(.presentEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
-            case .displayReportContent(let itemID, let senderID):
-                actionsSubject.send(.presentReportContent(itemID: itemID, senderID: senderID))
-            case .displayCameraPicker:
-                actionsSubject.send(.presentMediaUploadPicker(.camera))
-            case .displayMediaPicker:
-                actionsSubject.send(.presentMediaUploadPicker(.photoLibrary))
-            case .displayDocumentPicker:
-                actionsSubject.send(.presentMediaUploadPicker(.documents))
-            case .displayLocationPicker:
-                actionsSubject.send(.presentLocationPicker)
-            case .displayMediaUploadPreviewScreen(let url):
-                actionsSubject.send(.presentMediaUploadPreviewScreen(url))
-            case .displayRoomMemberDetails(let member):
-                actionsSubject.send(.presentRoomMemberDetails(member: member))
-            case .displayMessageForwarding(let itemID):
-                actionsSubject.send(.presentMessageForwarding(itemID: itemID))
-            case .displayLocation(let body, let geoURI, let description):
-                actionsSubject.send(.presentLocationViewer(body: body, geoURI: geoURI, description: description))
+        viewModel.actions
+            .sink { [weak self] action in
+                guard let self else { return }
+
+                switch action {
+                case .displayRoomDetails:
+                    actionsSubject.send(.presentRoomDetails)
+                case .displayEmojiPicker(let itemID, let selectedEmojis):
+                    actionsSubject.send(.presentEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
+                case .displayReportContent(let itemID, let senderID):
+                    actionsSubject.send(.presentReportContent(itemID: itemID, senderID: senderID))
+                case .displayCameraPicker:
+                    actionsSubject.send(.presentMediaUploadPicker(.camera))
+                case .displayMediaPicker:
+                    actionsSubject.send(.presentMediaUploadPicker(.photoLibrary))
+                case .displayDocumentPicker:
+                    actionsSubject.send(.presentMediaUploadPicker(.documents))
+                case .displayLocationPicker:
+                    actionsSubject.send(.presentLocationPicker)
+                case .displayMediaUploadPreviewScreen(let url):
+                    actionsSubject.send(.presentMediaUploadPreviewScreen(url))
+                case .displayRoomMemberDetails(let member):
+                    actionsSubject.send(.presentRoomMemberDetails(member: member))
+                case .displayMessageForwarding(let itemID):
+                    actionsSubject.send(.presentMessageForwarding(itemID: itemID))
+                case .displayLocation(let body, let geoURI, let description):
+                    actionsSubject.send(.presentLocationViewer(body: body, geoURI: geoURI, description: description))
+                case .composer(let action):
+                    composerViewModel.process(roomAction: action)
+                }
            }
-        }
+            .store(in: &cancellables)
+
+        composerViewModel.actions
+            .sink { [weak self] composerAction in
+                guard let self else { return }
+
+                viewModel.process(composerAction: composerAction)
+            }
+            .store(in: &cancellables)
    }
    
    func toPresentable() -> AnyView {
-        AnyView(RoomScreen(context: viewModel.context))
+        AnyView(RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context)))
    }
 }
@@ -32,6 +32,7 @@ enum RoomScreenViewModelAction {
    case displayRoomMemberDetails(member: RoomMemberProxyProtocol)
    case displayMessageForwarding(itemID: TimelineItemIdentifier)
    case displayLocation(body: String, geoURI: GeoURI, description: String?)
+    case composer(action: RoomScreenComposerAction)
 }

 enum RoomScreenComposerMode: Equatable {
@@ -55,10 +56,7 @@ enum RoomScreenViewAction {
    case itemDisappeared(itemID: TimelineItemIdentifier)
    case itemTapped(itemID: TimelineItemIdentifier)
    case linkClicked(url: URL)
-    case sendMessage
    case toggleReaction(key: String, itemID: TimelineItemIdentifier)
-    case cancelReply
-    case cancelEdit
    case sendReadReceiptIfNeeded(TimelineItemIdentifier)
    case paginateBackwards
    
@@ -67,11 +65,6 @@ enum RoomScreenViewAction {
    
    case displayEmojiPicker(itemID: TimelineItemIdentifier)
    
-    case displayCameraPicker
-    case displayMediaPicker
-    case displayDocumentPicker
-    case displayLocationPicker
-    
    case handlePasteOrDrop(provider: NSItemProvider)
    case tappedOnUser(userID: String)
    
@@ -83,6 +76,13 @@ enum RoomScreenViewAction {
    case scrolledToBottom
 }

+enum RoomScreenComposerAction {
+    case setMode(mode: RoomScreenComposerMode)
+    case setText(text: String)
+    case removeFocus
+    case clear
+}
+
 struct RoomScreenViewState: BindableState {
    var roomID: String
    var roomTitle = ""
@@ -93,29 +93,16 @@ struct RoomScreenViewState: BindableState {
    var readReceiptsEnabled: Bool
    var isEncryptedOneToOneRoom = false
    var timelineViewState = TimelineViewState() // check the doc before changing this
-    var composerMode: RoomScreenComposerMode = .default
    var swiftUITimelineEnabled = false
-    
+
    var bindings: RoomScreenViewStateBindings
    
    /// A closure providing the actions to show when long pressing on an item in the timeline.
    var timelineItemMenuActionProvider: (@MainActor (_ itemId: TimelineItemIdentifier) -> TimelineItemMenuActions?)?
-    
-    var sendButtonDisabled: Bool {
-        bindings.composerText.count == 0
-    }
 }

 struct RoomScreenViewStateBindings {
-    var composerText: String
-    var composerFocused: Bool
-    
    var isScrolledToBottom = true
-    var showAttachmentPopover = false {
-        didSet {
-            composerFocused = false
-        }
-    }
    
    /// The state of wether reactions listed on the timeline are expanded/collapsed.
    /// Key is itemID, value is the collapsed state.
@@ -34,11 +34,14 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
    private let analytics: AnalyticsService
    private unowned let userIndicatorController: UserIndicatorControllerProtocol
    private let notificationCenterProtocol: NotificationCenterProtocol
+    private let composerFocusedSubject = PassthroughSubject<Bool, Never>()
+
+    private let actionsSubject: PassthroughSubject<RoomScreenViewModelAction, Never> = .init()

    private var canCurrentUserRedact = false
    
    private var paginateBackwardsTask: Task<Void, Never>?
-    
+
    init(timelineController: RoomTimelineControllerProtocol,
         mediaProvider: MediaProviderProtocol,
         roomProxy: RoomProxyProtocol,
@@ -59,11 +62,12 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                                                         timelineStyle: appSettings.timelineStyle,
                                                         readReceiptsEnabled: appSettings.readReceiptsEnabled,
                                                         isEncryptedOneToOneRoom: roomProxy.isEncryptedOneToOneRoom,
-                                                         bindings: .init(composerText: "", composerFocused: false, reactionsCollapsed: [:])),
+                                                         bindings: .init(reactionsCollapsed: [:])),
                   imageProvider: mediaProvider)
        
        setupSubscriptions()
-        
+        setupDirectRoomSubscriptionsIfNeeded()
+
        state.timelineItemMenuActionProvider = { [weak self] itemId -> TimelineItemMenuActions? in
            guard let self else {
                return nil
@@ -73,18 +77,22 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        }

        buildTimelineViews()
-        
-        trackComposerMode()
+
+        // Note: beware if we get to e.g. restore a reply / edit,
+        // maybe we are tracking a non-needed first initial state
+        trackComposerMode(.default)
    }
    
    // MARK: - Public

-    var callback: ((RoomScreenViewModelAction) -> Void)?
+    var actions: AnyPublisher<RoomScreenViewModelAction, Never> {
+        actionsSubject.eraseToAnyPublisher()
+    }
    
    override func process(viewAction: RoomScreenViewAction) {
        switch viewAction {
        case .displayRoomDetails:
-            callback?(.displayRoomDetails)
+            actionsSubject.send(.displayRoomDetails)
        case .itemAppeared(let id):
            Task { await timelineController.processItemAppearance(id) }
        case .itemDisappeared(let id):
@@ -93,15 +101,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            Task { await itemTapped(with: id) }
        case .linkClicked(let url):
            MXLog.warning("Link clicked: \(url)")
-        case .sendMessage:
-            Task { await sendCurrentMessage() }
        case .toggleReaction(let emoji, let itemId):
            Task { await timelineController.toggleReaction(emoji, to: itemId) }
-        case .cancelReply:
-            setComposerMode(.default)
-        case .cancelEdit:
-            setComposerMode(.default)
-            state.bindings.composerText = ""
        case .sendReadReceiptIfNeeded(let lastVisibleItemID):
            Task { await sendReadReceiptIfNeeded(for: lastVisibleItemID) }
        case .timelineItemMenu(let itemID):
@@ -115,14 +116,6 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        case .timelineItemMenuAction(let itemID, let action):
            processTimelineItemMenuAction(action, itemID: itemID)
-        case .displayCameraPicker:
-            callback?(.displayCameraPicker)
-        case .displayMediaPicker:
-            callback?(.displayMediaPicker)
-        case .displayDocumentPicker:
-            callback?(.displayDocumentPicker)
-        case .displayLocationPicker:
-            callback?(.displayLocationPicker)
        case .handlePasteOrDrop(let provider):
            handlePasteOrDrop(provider)
        case .tappedOnUser(userID: let userID):
@@ -143,6 +136,27 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
        }
    }
+
+    func process(composerAction: ComposerToolbarViewModelAction) {
+        switch composerAction {
+        case .sendMessage(let message, let mode):
+            Task { await sendCurrentMessage(message, mode: mode) }
+        case .displayCameraPicker:
+            actionsSubject.send(.displayCameraPicker)
+        case .displayMediaPicker:
+            actionsSubject.send(.displayMediaPicker)
+        case .displayDocumentPicker:
+            actionsSubject.send(.displayDocumentPicker)
+        case .displayLocationPicker:
+            actionsSubject.send(.displayLocationPicker)
+        case .handlePasteOrDrop(let provider):
+            handlePasteOrDrop(provider)
+        case .composerModeChanged(mode: let mode):
+            trackComposerMode(mode)
+        case .focusedChanged(isFocused: let isFocused):
+            composerFocusedSubject.send(isFocused)
+        }
+    }
    
    // MARK: - Private

@@ -197,8 +211,6 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            }
            .weakAssign(to: \.state.members, on: self)
            .store(in: &cancellables)
-
-        setupDirectRoomSubscriptionsIfNeeded()
    }

    private func setupDirectRoomSubscriptionsIfNeeded() {
@@ -206,8 +218,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            return
        }

-        let shouldShowInviteAlert = context.$viewState
-            .map(\.bindings.composerFocused)
+        let shouldShowInviteAlert = composerFocusedSubject
            .removeDuplicates()
            .map { [weak self] isFocused in
                guard let self else { return false }
@@ -292,10 +303,10 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol

        switch action {
        case .displayMediaFile(let file, let title):
-            state.bindings.composerFocused = false // Hide the keyboard otherwise a big white space is sometimes shown when dismissing the preview.
+            actionsSubject.send(.composer(action: .removeFocus)) // Hide the keyboard otherwise a big white space is sometimes shown when dismissing the preview.
            state.bindings.mediaPreviewItem = MediaPreviewItem(file: file, title: title)
        case .displayLocation(let body, let geoURI, let description):
-            callback?(.displayLocation(body: body, geoURI: geoURI, description: description))
+            actionsSubject.send(.displayLocation(body: body, geoURI: geoURI, description: description))
        case .none:
            break
        }
@@ -409,18 +420,14 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        return eventTimelineItem.properties.reactions.isEmpty && eventTimelineItem.sender == otherEventTimelineItem.sender
    }

-    private func sendCurrentMessage() async {
-        guard !state.bindings.composerText.isEmpty else {
+    private func sendCurrentMessage(_ currentMessage: String, mode: RoomScreenComposerMode) async {
+        guard !currentMessage.isEmpty else {
            fatalError("This message should never be empty")
        }
-        
-        let currentMessage = state.bindings.composerText
-        let currentComposerState = state.composerMode

-        state.bindings.composerText = ""
-        setComposerMode(.default)
+        actionsSubject.send(.composer(action: .clear))

-        switch currentComposerState {
+        switch mode {
        case .reply(let itemId, _):
            await timelineController.sendMessage(currentMessage, inReplyTo: itemId)
        case .edit(let originalItemId):
@@ -430,16 +437,10 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        }
    }
    
-    private func setComposerMode(_ mode: RoomScreenComposerMode) {
-        guard mode != state.composerMode else { return }
-        state.composerMode = mode
-        trackComposerMode()
-    }
-    
-    private func trackComposerMode() {
+    private func trackComposerMode(_ mode: RoomScreenComposerMode) {
        var isEdit = false
        var isReply = false
-        switch state.composerMode {
+        switch mode {
        case .edit:
            isEdit = true
        case .reply:
@@ -473,7 +474,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            // Don't show a menu for non-event based items.
            return
        }
-        
+
+        actionsSubject.send(.composer(action: .removeFocus))
        state.bindings.actionMenuInfo = .init(item: eventTimelineItem)
    }
    
@@ -555,10 +557,9 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            guard let messageTimelineItem = timelineItem as? EventBasedMessageTimelineItemProtocol else {
                return
            }
-            
-            state.bindings.composerFocused = true
-            state.bindings.composerText = messageTimelineItem.body
-            setComposerMode(.edit(originalItemId: messageTimelineItem.id))
+
+            actionsSubject.send(.composer(action: .setText(text: messageTimelineItem.body)))
+            actionsSubject.send(.composer(action: .setMode(mode: .edit(originalItemId: messageTimelineItem.id))))
        case .copyPermalink:
            do {
                guard let eventID = eventTimelineItem.id.eventID else {
@@ -581,13 +582,11 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                }
            }
        case .reply:
-            state.bindings.composerFocused = true
-            
            let replyDetails = TimelineItemReplyDetails.loaded(sender: eventTimelineItem.sender, contentType: buildReplyContent(for: eventTimelineItem))
-            
-            setComposerMode(.reply(itemID: eventTimelineItem.id, replyDetails: replyDetails))
+
+            actionsSubject.send(.composer(action: .setMode(mode: .reply(itemID: eventTimelineItem.id, replyDetails: replyDetails))))
        case .forward(let itemID):
-            callback?(.displayMessageForwarding(itemID: itemID))
+            actionsSubject.send(.displayMessageForwarding(itemID: itemID))
        case .viewSource:
            let debugInfo = timelineController.debugInfo(for: eventTimelineItem.id)
            MXLog.info(debugInfo)
@@ -597,13 +596,13 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                await timelineController.retryDecryption(for: sessionID)
            }
        case .report:
-            callback?(.displayReportContent(itemID: itemID, senderID: eventTimelineItem.sender.id))
+            actionsSubject.send(.displayReportContent(itemID: itemID, senderID: eventTimelineItem.sender.id))
        case .react:
            showEmojiPicker(for: itemID)
        }
        
        if action.switchToDefaultComposer {
-            setComposerMode(.default)
+            actionsSubject.send(.composer(action: .setMode(mode: .default)))
        }
    }
    
@@ -652,7 +651,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                        }
                    }.value

-                    self.callback?(.displayMediaUploadPreviewScreen(url: url))
+                    self.actionsSubject.send(.displayMediaUploadPreviewScreen(url: url))
                } catch {
                    self.displayError(.toast(L10n.screenRoomErrorFailedProcessingMedia))
                    MXLog.error("Failed storing NSItemProvider data \(providerDescription) with error: \(error)")
@@ -678,7 +677,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
        
        switch result {
        case .success(let member):
-            callback?(.displayRoomMemberDetails(member: member))
+            actionsSubject.send(.displayRoomMemberDetails(member: member))
        case .failure(let error):
            displayError(.alert(L10n.screenRoomErrorFailedRetrievingUserDetails))
            MXLog.error("Failed retrieving the user given the following id \(userID) with error: \(error)")
@@ -770,7 +769,7 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
            return
        }
        let selectedEmojis = Set(eventTimelineItem.properties.reactions.compactMap { $0.isHighlighted ? $0.key : nil })
-        callback?(.displayEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
+        actionsSubject.send(.displayEmojiPicker(itemID: itemID, selectedEmojis: selectedEmojis))
    }
    
    private func showReactionSummary(for itemID: TimelineItemIdentifier, selectedKey: String) {
@@ -14,10 +14,13 @@
 // limitations under the License.
 //

+import Combine
 import Foundation
+import SwiftUI

@MainActor
 protocol RoomScreenViewModelProtocol {
-    var callback: ((RoomScreenViewModelAction) -> Void)? { get set }
+    var actions: AnyPublisher<RoomScreenViewModelAction, Never> { get }
    var context: RoomScreenViewModelType.Context { get }
+    func process(composerAction: ComposerToolbarViewModelAction)
 }
@@ -1,272 +0,0 @@
-//
-// Copyright 2022 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-struct MessageComposer: View {
-    @Binding var text: String
-    @Binding var focused: Bool
-    let sendingDisabled: Bool
-    let mode: RoomScreenComposerMode
-    
-    let sendAction: EnterKeyHandler
-    let pasteAction: PasteHandler
-    let replyCancellationAction: () -> Void
-    let editCancellationAction: () -> Void
-    
-    @State private var isMultiline = false
-    @ScaledMetric private var sendButtonIconSize = 16
-    
-    var body: some View {
-        let roundedRectangle = RoundedRectangle(cornerRadius: borderRadius)
-        VStack(alignment: .leading, spacing: -6) {
-            header
-            HStack(alignment: .bottom) {
-                MessageComposerTextField(placeholder: L10n.richTextEditorComposerPlaceholder,
-                                         text: $text,
-                                         focused: $focused,
-                                         isMultiline: $isMultiline,
-                                         maxHeight: 300,
-                                         enterKeyHandler: sendAction,
-                                         pasteHandler: pasteAction)
-                    .tint(.compound.iconAccentTertiary)
-                    .padding(.vertical, 10)
-                
-                Button {
-                    sendAction()
-                } label: {
-                    submitButtonImage
-                        .symbolVariant(.fill)
-                        .font(.compound.bodyLG)
-                        .foregroundColor(sendingDisabled ? .compound.iconDisabled : .global.white)
-                        .background {
-                            Circle()
-                                .foregroundColor(sendingDisabled ? .clear : .compound.iconAccentTertiary)
-                        }
-                }
-                .disabled(sendingDisabled)
-                .animation(.linear(duration: 0.1), value: sendingDisabled)
-                .keyboardShortcut(.return, modifiers: [.command])
-                .padding([.vertical, .trailing], 6)
-            }
-        }
-        .padding(.leading, 12.0)
-        .background {
-            ZStack {
-                roundedRectangle
-                    .fill(Color.compound.bgSubtleSecondary)
-                roundedRectangle
-                    .stroke(Color.compound._borderTextFieldFocused, lineWidth: 1)
-                    .opacity(focused ? 1 : 0)
-            }
-        }
-        // Explicitly disable all animations to fix weirdness with the header immediately
-        // appearing whilst the text field and keyboard are still animating up to it.
-        .animation(.noAnimation, value: mode)
-    }
-    
-    @ViewBuilder
-    private var header: some View {
-        switch mode {
-        case .reply(_, let replyDetails):
-            MessageComposerReplyHeader(replyDetails: replyDetails, action: replyCancellationAction)
-        case .edit:
-            MessageComposerEditHeader(action: editCancellationAction)
-        case .default:
-            EmptyView()
-        }
-    }
-    
-    private var submitButtonImage: some View {
-        // ZStack with opacity so the button size is consistent.
-        ZStack {
-            Image(systemName: "checkmark")
-                .opacity(mode.isEdit ? 1 : 0)
-                .fontWeight(.medium)
-                .accessibilityLabel(L10n.actionConfirm)
-                .accessibilityHidden(!mode.isEdit)
-            Image(asset: Asset.Images.timelineComposerSendMessage)
-                .resizable()
-                .frame(width: sendButtonIconSize, height: sendButtonIconSize)
-                .padding(EdgeInsets(top: 7, leading: 8, bottom: 7, trailing: 6))
-                .opacity(mode.isEdit ? 0 : 1)
-                .accessibilityLabel(L10n.actionSend)
-                .accessibilityHidden(mode.isEdit)
-        }
-    }
-    
-    private var borderRadius: CGFloat {
-        switch mode {
-        case .default:
-            return isMultiline ? 20 : 28
-        case .reply, .edit:
-            return 20
-        }
-    }
-}
-
-private struct MessageComposerReplyHeader: View {
-    let replyDetails: TimelineItemReplyDetails
-    let action: () -> Void
-    
-    var body: some View {
-        TimelineReplyView(placement: .composer, timelineItemReplyDetails: replyDetails)
-            .frame(maxWidth: .infinity, alignment: .leading)
-            .padding(4.0)
-            .background(Color.compound.bgCanvasDefault)
-            .cornerRadius(13.0)
-            .padding([.trailing, .vertical], 8.0)
-            .padding([.leading], -4.0)
-            .overlay(alignment: .topTrailing) {
-                Button(action: action) {
-                    Image(systemName: "xmark")
-                        .font(.compound.bodySM.weight(.medium))
-                        .foregroundColor(.compound.iconTertiary)
-                        .padding(16.0)
-                }
-            }
-    }
-}
-
-private struct MessageComposerEditHeader: View {
-    let action: () -> Void
-    
-    var body: some View {
-        HStack(alignment: .center) {
-            Label(L10n.commonEditing, systemImage: "pencil.line")
-                .labelStyle(MessageComposerHeaderLabelStyle())
-            Spacer()
-            Button(action: action) {
-                Image(systemName: "xmark")
-                    .font(.compound.bodySM.weight(.medium))
-                    .foregroundColor(.compound.iconTertiary)
-                    .padding(EdgeInsets(top: 10, leading: 12, bottom: 12, trailing: 14))
-            }
-        }
-    }
-}
-
-private struct MessageComposerHeaderLabelStyle: LabelStyle {
-    func makeBody(configuration: Configuration) -> some View {
-        HStack(alignment: .firstTextBaseline, spacing: 5) {
-            configuration.icon
-            configuration.title
-        }
-        .font(.compound.bodySM)
-        .foregroundColor(.compound.textSecondary)
-        .lineLimit(1)
-    }
-}
-
-struct MessageComposer_Previews: PreviewProvider {
-    static let viewModel = RoomScreenViewModel.mock
-
-    static var previews: some View {
-        VStack {
-            MessageComposer(text: .constant(""),
-                            focused: .constant(false),
-                            sendingDisabled: true,
-                            mode: .default,
-                            sendAction: { },
-                            pasteAction: { _ in },
-                            replyCancellationAction: { },
-                            editCancellationAction: { })
-
-            MessageComposer(text: .constant("This is a short message."),
-                            focused: .constant(false),
-                            sendingDisabled: false,
-                            mode: .default,
-                            sendAction: { },
-                            pasteAction: { _ in },
-                            replyCancellationAction: { },
-                            editCancellationAction: { })
-
-            MessageComposer(text: .constant("This is a very long message that will wrap to 2 lines on an iPhone 14."),
-                            focused: .constant(false),
-                            sendingDisabled: false,
-                            mode: .default,
-                            sendAction: { },
-                            pasteAction: { _ in },
-                            replyCancellationAction: { },
-                            editCancellationAction: { })
-
-            MessageComposer(text: .constant("This is an even longer message that will wrap to 3 lines on an iPhone 14, just to see the difference it makes."),
-                            focused: .constant(false),
-                            sendingDisabled: false,
-                            mode: .default,
-                            sendAction: { },
-                            pasteAction: { _ in },
-                            replyCancellationAction: { },
-                            editCancellationAction: { })
-
-            MessageComposer(text: .constant("Some message"),
-                            focused: .constant(false),
-                            sendingDisabled: false,
-                            mode: .edit(originalItemId: .random),
-                            sendAction: { },
-                            pasteAction: { _ in },
-                            replyCancellationAction: { },
-                            editCancellationAction: { })
-
-            MessageComposer(text: .constant(""),
-                            focused: .constant(false),
-                            sendingDisabled: false,
-                            mode: .reply(itemID: .random,
-                                         replyDetails: .loaded(sender: .init(id: "Kirk"),
-                                                               contentType: .text(.init(body: "Text: Where the wild things are")))),
-                            sendAction: { },
-                            pasteAction: { _ in },
-                            replyCancellationAction: { },
-                            editCancellationAction: { })
-        }
-        .padding(.horizontal)
-
-        ScrollView {
-            VStack {
-                let replyTypes: [TimelineItemReplyDetails] = [
-                    .loaded(sender: .init(id: "Dave"), contentType: .audio(.init(body: "Audio: Ride the lightning", duration: 100, source: nil, contentType: nil))),
-                    .loaded(sender: .init(id: "James"), contentType: .emote(.init(body: "Emote: James thinks he's the phantom lord"))),
-                    .loaded(sender: .init(id: "Robert"), contentType: .file(.init(body: "File: Crash course in brain surgery.pdf", source: nil, thumbnailSource: nil, contentType: nil))),
-                    .loaded(sender: .init(id: "Cliff"), contentType: .image(.init(body: "Image: Pushead",
-                                                                                  source: .init(url: .picturesDirectory, mimeType: nil),
-                                                                                  thumbnailSource: .init(url: .picturesDirectory, mimeType: nil)))),
-                    .loaded(sender: .init(id: "Jason"), contentType: .notice(.init(body: "Notice: Too far gone?"))),
-                    .loaded(sender: .init(id: "Kirk"), contentType: .text(.init(body: "Text: Where the wild things are"))),
-                    .loaded(sender: .init(id: "Lars"), contentType: .video(.init(body: "Video: Through the never",
-                                                                                 duration: 100,
-                                                                                 source: nil,
-                                                                                 thumbnailSource: .init(url: .picturesDirectory, mimeType: nil)))),
-                    .loading(eventID: "")
-                ]
-
-                ForEach(replyTypes, id: \.self) { replyDetails in
-                    MessageComposer(text: .constant(""),
-                                    focused: .constant(false),
-                                    sendingDisabled: false,
-                                    mode: .reply(itemID: .random,
-                                                 replyDetails: replyDetails),
-                                    sendAction: { },
-                                    pasteAction: { _ in },
-                                    replyCancellationAction: { },
-                                    editCancellationAction: { })
-                }
-            }
-        }
-        .padding(.horizontal)
-        .environmentObject(viewModel.context)
-        .previewDisplayName("Replying")
-    }
-}
@@ -1,278 +0,0 @@
-//
-// Copyright 2022 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-typealias EnterKeyHandler = () -> Void
-typealias PasteHandler = (NSItemProvider) -> Void
-
-struct MessageComposerTextField: View {
-    let placeholder: String
-    @Binding var text: String
-    @Binding var focused: Bool
-    @Binding var isMultiline: Bool
-    
-    let maxHeight: CGFloat
-    let enterKeyHandler: EnterKeyHandler
-    let pasteHandler: PasteHandler
-    
-    var body: some View {
-        UITextViewWrapper(text: $text,
-                          focused: $focused,
-                          isMultiline: $isMultiline,
-                          maxHeight: maxHeight,
-                          enterKeyHandler: enterKeyHandler,
-                          pasteHandler: pasteHandler)
-            .accessibilityLabel(placeholder)
-            .background(placeholderView, alignment: .topLeading)
-    }
-    
-    @ViewBuilder
-    private var placeholderView: some View {
-        if text.isEmpty {
-            Text(placeholder)
-                .foregroundColor(.compound.textPlaceholder)
-                .accessibilityHidden(true)
-        }
-    }
-}
-
-private struct UITextViewWrapper: UIViewRepresentable {
-    typealias UIViewType = UITextView
-
-    @Binding var text: String
-    @Binding var focused: Bool
-    @Binding var isMultiline: Bool
-    
-    let maxHeight: CGFloat
-
-    let enterKeyHandler: EnterKeyHandler
-    let pasteHandler: PasteHandler
-    
-    private let font = UIFont.preferredFont(forTextStyle: .body)
-    
-    func makeUIView(context: UIViewRepresentableContext<UITextViewWrapper>) -> UITextView {
-        let textView = ElementTextView()
-        textView.isMultiline = $isMultiline
-        textView.delegate = context.coordinator
-        textView.elementDelegate = context.coordinator
-        textView.textColor = .compound.textPrimary
-        textView.isEditable = true
-        textView.font = font
-        textView.isSelectable = true
-        textView.isUserInteractionEnabled = true
-        textView.backgroundColor = UIColor.clear
-        textView.returnKeyType = .default
-        textView.textContainer.lineFragmentPadding = 0.0
-        textView.textContainerInset = .zero
-        textView.keyboardType = .default
-
-        textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
-
-        return textView
-    }
-    
-    func sizeThatFits(_ proposal: ProposedViewSize, uiView: UITextView, context: Context) -> CGSize? {
-        // Note: Coalescing a width of zero here returns a size for the view with 1 line of text visible.
-        let newSize = uiView.sizeThatFits(CGSize(width: proposal.width ?? .zero,
-                                                 height: CGFloat.greatestFiniteMagnitude))
-        let width = proposal.width ?? newSize.width
-        let height = min(maxHeight, newSize.height)
-        
-        return CGSize(width: width, height: height)
-    }
-
-    func updateUIView(_ textView: UITextView, context: UIViewRepresentableContext<UITextViewWrapper>) {
-        if textView.text != text {
-            textView.text = text
-
-            if text.isEmpty {
-                // text cleared, probably because the written text is sent
-                // reload keyboard type
-                if textView.isFirstResponder {
-                    textView.keyboardType = .twitter
-                    textView.reloadInputViews()
-                    textView.keyboardType = .default
-                    textView.reloadInputViews()
-                }
-            }
-        }
-
-        if !focused, textView.isFirstResponder {
-            textView.resignFirstResponder()
-        } else if focused, textView.window != nil, !textView.isFirstResponder {
-            textView.becomeFirstResponder()
-        }
-    }
-
-    func makeCoordinator() -> Coordinator {
-        Coordinator(text: $text,
-                    focused: $focused,
-                    maxHeight: maxHeight,
-                    enterKeyHandler: enterKeyHandler,
-                    pasteHandler: pasteHandler)
-    }
-    
-    final class Coordinator: NSObject, UITextViewDelegate, ElementTextViewDelegate {
-        private var text: Binding<String>
-        private var focused: Binding<Bool>
-        
-        private let maxHeight: CGFloat
-        
-        private let enterKeyHandler: EnterKeyHandler
-        private let pasteHandler: PasteHandler
-        
-        init(text: Binding<String>,
-             focused: Binding<Bool>,
-             maxHeight: CGFloat,
-             enterKeyHandler: @escaping EnterKeyHandler,
-             pasteHandler: @escaping PasteHandler) {
-            self.text = text
-            self.focused = focused
-            self.maxHeight = maxHeight
-            self.enterKeyHandler = enterKeyHandler
-            self.pasteHandler = pasteHandler
-        }
-        
-        func textViewDidChange(_ textView: UITextView) {
-            text.wrappedValue = textView.text
-        }
-        
-        func textViewDidBeginEditing(_ textView: UITextView) {
-            DispatchQueue.main.async {
-                self.focused.wrappedValue = true
-            }
-        }
-        
-        func textViewDidEndEditing(_ textView: UITextView) {
-            DispatchQueue.main.async {
-                self.focused.wrappedValue = false
-            }
-        }
-        
-        func textViewDidReceiveEnterKeyPress(_ textView: UITextView) {
-            enterKeyHandler()
-        }
-        
-        func textViewDidReceiveShiftEnterKeyPress(_ textView: UITextView) {
-            textView.insertText("\n")
-        }
-        
-        func textView(_ textView: UITextView, didReceivePasteWith provider: NSItemProvider) {
-            pasteHandler(provider)
-        }
-    }
-}
-
-private protocol ElementTextViewDelegate: AnyObject {
-    func textViewDidReceiveShiftEnterKeyPress(_ textView: UITextView)
-    func textViewDidReceiveEnterKeyPress(_ textView: UITextView)
-    func textView(_ textView: UITextView, didReceivePasteWith provider: NSItemProvider)
-}
-
-private class ElementTextView: UITextView {
-    weak var elementDelegate: ElementTextViewDelegate?
-    
-    var isMultiline: Binding<Bool>?
-    
-    override var keyCommands: [UIKeyCommand]? {
-        [UIKeyCommand(input: "\r", modifierFlags: .shift, action: #selector(shiftEnterKeyPressed)),
-         UIKeyCommand(input: "\r", modifierFlags: [], action: #selector(enterKeyPressed))]
-    }
-    
-    @objc func shiftEnterKeyPressed(sender: UIKeyCommand) {
-        elementDelegate?.textViewDidReceiveShiftEnterKeyPress(self)
-    }
-    
-    @objc func enterKeyPressed(sender: UIKeyCommand) {
-        elementDelegate?.textViewDidReceiveEnterKeyPress(self)
-    }
-    
-    override func layoutSubviews() {
-        super.layoutSubviews()
-        
-        guard let isMultiline, let font else { return }
-        
-        let numberOfLines = frame.height / font.lineHeight
-        if numberOfLines > 1.5 {
-            if !isMultiline.wrappedValue {
-                isMultiline.wrappedValue = true
-            }
-        } else {
-            if isMultiline.wrappedValue {
-                isMultiline.wrappedValue = false
-            }
-        }
-    }
-    
-    // Pasting support
-    
-    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
-        if super.canPerformAction(action, withSender: sender) {
-            return true
-        }
-        
-        guard action == #selector(paste(_:)) else {
-            return false
-        }
-        
-        return UIPasteboard.general.itemProviders.first?.isSupportedForPasteOrDrop ?? false
-    }
-    
-    override func paste(_ sender: Any?) {
-        guard let provider = UIPasteboard.general.itemProviders.first,
-              provider.isSupportedForPasteOrDrop else {
-            // If the item is not supported for media upload then
-            // just try pasting its contents into the textfield
-            super.paste(sender)
-            return
-        }
-        
-        elementDelegate?.textView(self, didReceivePasteWith: provider)
-    }
-}
-
-struct MessageComposerTextField_Previews: PreviewProvider {
-    static var previews: some View {
-        VStack {
-            PreviewWrapper(text: "123")
-            PreviewWrapper(text: "")
-            PreviewWrapper(text: "A really long message that will wrap to multiple lines on a phone in portrait.")
-        }
-    }
-    
-    struct PreviewWrapper: View {
-        @State var text: String
-        @State var focused: Bool
-        @State var isMultiline: Bool
-        
-        init(text: String) {
-            _text = .init(initialValue: text)
-            _focused = .init(initialValue: false)
-            _isMultiline = .init(initialValue: false)
-        }
-        
-        var body: some View {
-            MessageComposerTextField(placeholder: "Placeholder",
-                                     text: $text,
-                                     focused: $focused,
-                                     isMultiline: $isMultiline,
-                                     maxHeight: 300,
-                                     enterKeyHandler: { },
-                                     pasteHandler: { _ in })
-        }
-    }
-}
@@ -1,114 +0,0 @@
-//
-// Copyright 2023 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-struct RoomAttachmentPicker: View {
-    @ObservedObject var context: RoomScreenViewModel.Context
-    @Environment(\.isPresented) var isPresented
-    
-    @State private var sheetContentHeight = CGFloat(0)
-    
-    var body: some View {
-        Button {
-            context.showAttachmentPopover = true
-        } label: {
-            Image(systemName: "plus.circle.fill")
-                .font(.compound.headingLG)
-                .foregroundColor(.compound.textActionPrimary)
-        }
-        .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPicker)
-        .popover(isPresented: $context.showAttachmentPopover) {
-            VStack(alignment: .leading, spacing: 0.0) {
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayMediaPicker)
-                } label: {
-                    PickerLabel(title: L10n.screenRoomAttachmentSourceGallery, icon: Image(systemName: "photo.fill"))
-                }
-                
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayDocumentPicker)
-                } label: {
-                    PickerLabel(title: L10n.screenRoomAttachmentSourceFiles, icon: Image(systemName: "paperclip"))
-                }
-                
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayCameraPicker)
-                } label: {
-                    PickerLabel(title: L10n.screenRoomAttachmentSourceCamera, icon: Image(systemName: "camera.fill"))
-                }
-
-                Button {
-                    context.showAttachmentPopover = false
-                    context.send(viewAction: .displayLocationPicker)
-                } label: {
-                    PickerLabel(title: L10n.screenRoomAttachmentSourceLocation, icon: Image(asset: Asset.Images.locationPin))
-                }
-            }
-            .padding(.top, isPresented ? 20 : 0)
-            .background {
-                // This is done in the background otherwise GeometryReader tends to expand to
-                // all the space given to it like color or shape.
-                GeometryReader { proxy in
-                    Color.clear
-                        .onAppear {
-                            sheetContentHeight = proxy.size.height
-                        }
-                }
-            }
-            .presentationDetents([.height(sheetContentHeight)])
-            .presentationBackground(Color.compound.bgCanvasDefault)
-            .presentationDragIndicator(.visible)
-        }
-    }
-    
-    private struct PickerLabel: View {
-        let title: String
-        let icon: Image
-
-        init(title: String, icon: Image) {
-            self.title = title
-            self.icon = icon
-        }
-        
-        var body: some View {
-            Label {
-                Text(title)
-            } icon: {
-                icon
-            }
-            .labelStyle(FixedIconSizeLabelStyle())
-            .multilineTextAlignment(.leading)
-            .frame(maxWidth: .infinity, alignment: .leading)
-            .padding(16)
-        }
-    }
-}
-
-struct RoomAttachmentPicker_Previews: PreviewProvider {
-    static let viewModel = RoomScreenViewModel(timelineController: MockRoomTimelineController(),
-                                               mediaProvider: MockMediaProvider(),
-                                               roomProxy: RoomProxyMock(with: .init(displayName: "")),
-                                               appSettings: ServiceLocator.shared.settings,
-                                               analytics: ServiceLocator.shared.analytics,
-                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)
-    static var previews: some View {
-        RoomAttachmentPicker(context: viewModel.context)
-    }
-}
@@ -19,24 +19,20 @@ import SwiftUI
 struct RoomScreen: View {
    @ObservedObject var context: RoomScreenViewModel.Context
    @State private var dragOver = false
-    
+    let composerToolbar: ComposerToolbar
+
    private let attachmentButtonPadding = 10.0
    
    var body: some View {
        timeline
            .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
            .safeAreaInset(edge: .bottom, spacing: 0) {
-                HStack(alignment: .bottom, spacing: attachmentButtonPadding) {
-                    RoomAttachmentPicker(context: context)
-                        .padding(.bottom, 5) // centre align with the send button
-                    messageComposer
-                        .environmentObject(context)
-                }
-                .padding(.leading, attachmentButtonPadding)
-                .padding(.trailing, 12)
-                .padding(.top, 8)
-                .padding(.bottom)
-                .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+                composerToolbar
+                    .padding(.leading, attachmentButtonPadding)
+                    .padding(.trailing, 12)
+                    .padding(.top, 8)
+                    .padding(.bottom)
+                    .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar { toolbar }
@@ -124,24 +120,6 @@ struct RoomScreen: View {
        .animation(.elementDefault, value: context.isScrolledToBottom)
    }
    
-    private var messageComposer: some View {
-        MessageComposer(text: $context.composerText,
-                        focused: $context.composerFocused,
-                        sendingDisabled: context.viewState.sendButtonDisabled,
-                        mode: context.viewState.composerMode) {
-            sendMessage()
-        } pasteAction: { provider in
-            context.send(viewAction: .handlePasteOrDrop(provider: provider))
-        } replyCancellationAction: {
-            context.send(viewAction: .cancelReply)
-        } editCancellationAction: {
-            context.send(viewAction: .cancelEdit)
-        }
-        .onChange(of: context.actionMenuInfo) { _ in
-            context.composerFocused = false
-        }
-    }
-    
    @ViewBuilder
    private var loadingIndicator: some View {
        if context.viewState.showLoading {
@@ -162,11 +140,6 @@ struct RoomScreen: View {
            RoomHeaderView(context: context)
        }
    }
-    
-    private func sendMessage() {
-        guard !context.viewState.sendButtonDisabled else { return }
-        context.send(viewAction: .sendMessage)
-    }
 }

 // MARK: - Previews
@@ -178,10 +151,12 @@ struct RoomScreen_Previews: PreviewProvider {
                                               appSettings: ServiceLocator.shared.settings,
                                               analytics: ServiceLocator.shared.analytics,
                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)
+
+    static let composerViewModel = ComposerToolbarViewModel()
    
    static var previews: some View {
        NavigationStack {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context))
        }
    }
 }
@@ -52,10 +52,6 @@ class TimelineTableViewController: UIViewController {
            sendReadReceiptIfNeeded()
        }
    }
-
-    /// The mode of the message composer. This is used to render selected
-    /// items in the timeline when replying, editing etc.
-    var composerMode: RoomScreenComposerMode = .default
    
    /// Whether or not the timeline has more messages to back paginate.
    var canBackPaginate = true
@@ -65,9 +65,6 @@ struct UITimelineView: UIViewControllerRepresentable {
            if tableViewController.isBackPaginating != context.viewState.timelineViewState.isBackPaginating {
                tableViewController.isBackPaginating = context.viewState.timelineViewState.isBackPaginating
            }
-            if tableViewController.composerMode != context.viewState.composerMode {
-                tableViewController.composerMode = context.viewState.composerMode
-            }
            
            // Doesn't have an equatable conformance :(
            tableViewController.contextMenuActionProvider = context.viewState.timelineItemMenuActionProvider
@@ -88,10 +85,12 @@ struct UITimelineView_Previews: PreviewProvider {
                                               appSettings: ServiceLocator.shared.settings,
                                               analytics: ServiceLocator.shared.analytics,
                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)
+
+    static let composerViewModel = ComposerToolbarViewModel()
    
    static var previews: some View {
        NavigationStack {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context))
        }
    }
 }
@@ -174,9 +174,11 @@ struct TimelineView_Previews: PreviewProvider {
                                               analytics: ServiceLocator.shared.analytics,
                                               userIndicatorController: ServiceLocator.shared.userIndicatorController)

+    static let composerViewModel = ComposerToolbarViewModel()
+
    static var previews: some View {
        NavigationStack {
-            RoomScreen(context: viewModel.context)
+            RoomScreen(context: viewModel.context, composerToolbar: ComposerToolbar(context: composerViewModel.context))
        }
    }
 }