RoomScreenViewModel is now TimelineViewModel (#3157)

Co-authored-by: Stefan Ceriu <stefanc@matrix.org>
2026-11-03 06:55:59 +00:00 · 2024-08-13 13:36:40 +02:00
parent 4519275559
commit 1ad361a6e8
88 changed files with 2266 additions and 1973 deletions
@@ -0,0 +1,92 @@
+//
+// 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 Compound
+import SFSafeSymbols
+import SwiftUI
+
+/// The contents of the context menu shown when right clicking an item in the timeline on a Mac
+struct TimelineItemMacContextMenu: View {
+    let item: RoomTimelineItemProtocol
+    let actionProvider: TimelineItemMenuActionProvider
+    let send: (TimelineItemMenuAction) -> Void
+    
+    var body: some View {
+        if ProcessInfo.processInfo.isiOSAppOnMac {
+            if let menuActions = actionProvider.makeActions() {
+                Section {
+                    if !menuActions.reactions.isEmpty {
+                        if #available(iOS 17.0, *) {
+                            let reactions = (item as? EventBasedTimelineItemProtocol)?.properties.reactions ?? []
+                            ControlGroup {
+                                ForEach(menuActions.reactions, id: \.key) {
+                                    ReactionToggle(reaction: $0, reactions: reactions) {
+                                        send(.toggleReaction(key: $0))
+                                    }
+                                }
+                                
+                                Button { send(.react) } label: {
+                                    CompoundIcon(\.reactionAdd)
+                                }
+                            }
+                            .controlGroupStyle(.palette)
+                        } else {
+                            Button { send(.react) } label: {
+                                TimelineItemMenuAction.react.label
+                            }
+                        }
+                    }
+                    
+                    ForEach(menuActions.actions) { action in
+                        Button(role: action.isDestructive ? .destructive : nil) {
+                            send(action)
+                        } label: {
+                            action.label
+                        }
+                    }
+                }
+                
+                Section {
+                    ForEach(menuActions.debugActions) { action in
+                        Button(role: action.isDestructive ? .destructive : nil) {
+                            send(action)
+                        } label: {
+                            action.label
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// A button that acts as a toggle for reacting to a message.
+private struct ReactionToggle: View {
+    let reaction: TimelineItemMenuReaction
+    let reactions: [AggregatedReaction]
+    let action: (String) -> Void
+    
+    var isOn: Bool {
+        reactions.contains { $0.key == reaction.key && $0.isHighlighted }
+    }
+    
+    var body: some View {
+        Button { action(reaction.key) } label: {
+            Image(systemSymbol: reaction.symbol)
+                .symbolVariant(isOn ? .fill : .none)
+        }
+    }
+}
@@ -0,0 +1,237 @@
+//
+// 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 Compound
+import SwiftUI
+
+struct TimelineItemMenu: View {
+    @EnvironmentObject private var context: TimelineViewModel.Context
+    @Environment(\.dismiss) private var dismiss
+    
+    @State private var reactionsFrame = CGRect.zero
+    
+    let item: EventBasedTimelineItemProtocol
+    let actions: TimelineItemMenuActions
+    private let feedbackGenerator = UIImpactFeedbackGenerator(style: .heavy)
+    
+    var body: some View {
+        VStack(spacing: 8) {
+            messagePreview
+                .frame(idealWidth: 300.0)
+            
+            Divider()
+                .background(Color.compound.bgSubtlePrimary)
+            
+            ScrollView {
+                VStack(alignment: .leading, spacing: 0.0) {
+                    if !actions.reactions.isEmpty {
+                        reactionsSection
+                            .padding(.top, 4.0)
+                            .padding(.bottom, 8.0)
+
+                        Divider()
+                            .background(Color.compound.bgSubtlePrimary)
+                    }
+
+                    if !actions.actions.isEmpty {
+                        viewsForActions(actions.actions)
+
+                        Divider()
+                            .background(Color.compound.bgSubtlePrimary)
+                    }
+                    
+                    viewsForActions(actions.debugActions)
+                }
+            }
+        }
+        .accessibilityIdentifier(A11yIdentifiers.roomScreen.timelineItemActionMenu)
+        .presentationDetents([.medium, .large])
+        .presentationBackground(Color.compound.bgCanvasDefault)
+        .presentationDragIndicator(.visible)
+    }
+    
+    private var messagePreview: some View {
+        VStack(alignment: .leading, spacing: 20) {
+            HStack(alignment: .top, spacing: 0.0) {
+                LoadableAvatarImage(url: item.sender.avatarURL,
+                                    name: item.sender.displayName,
+                                    contentID: item.sender.id,
+                                    avatarSize: .user(on: .timeline),
+                                    imageProvider: context.imageProvider)
+                    .accessibilityHidden(true)
+                
+                Spacer(minLength: 8.0)
+                
+                VStack(alignment: .leading, spacing: 0) {
+                    Text(item.sender.displayName ?? item.sender.id)
+                        .font(.compound.bodySMSemibold)
+                        .foregroundColor(.compound.textPrimary)
+                        .textSelection(.enabled)
+                    
+                    Text(item.timelineMenuDescription)
+                        .font(.compound.bodyMD)
+                        .foregroundColor(.compound.textSecondary)
+                        .lineLimit(1)
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+                
+                Spacer(minLength: 16.0)
+                
+                Text(item.timestamp)
+                    .font(.compound.bodyXS)
+                    .foregroundColor(.compound.textSecondary)
+            }
+            .accessibilityElement(children: .combine)
+            
+            if let authenticity = item.properties.encryptionAuthenticity {
+                Label(authenticity.message, icon: authenticity.icon, iconSize: .small, relativeTo: .compound.bodySMSemibold)
+                    .font(.compound.bodySMSemibold)
+                    .foregroundStyle(authenticity.foregroundStyle)
+            }
+        }
+        .padding(.horizontal)
+        .padding(.top, 32.0)
+        .padding(.bottom, 4.0)
+    }
+    
+    private var reactionsSection: some View {
+        ScrollView(.horizontal) {
+            HStack(alignment: .center, spacing: 8) {
+                ForEach(actions.reactions, id: \.key) {
+                    reactionButton(for: $0.key)
+                }
+                
+                Button {
+                    dismiss()
+                    // Otherwise we get errors that a sheet is already presented
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                        context.send(viewAction: .displayEmojiPicker(itemID: item.id))
+                    }
+                } label: {
+                    CompoundIcon(\.reactionAdd, size: .medium, relativeTo: .compound.headingLG)
+                        .foregroundColor(.compound.iconSecondary)
+                        .padding(10)
+                }
+                .accessibilityLabel(L10n.actionReact)
+            }
+            .padding(.horizontal)
+            .frame(minWidth: reactionsFrame.width, maxWidth: .infinity, alignment: .center)
+        }
+        .scrollIndicators(.hidden)
+        .scrollBounceBehavior(.basedOnSize, axes: .horizontal)
+        .readFrame($reactionsFrame)
+    }
+    
+    private func reactionButton(for emoji: String) -> some View {
+        Button {
+            feedbackGenerator.impactOccurred()
+            dismiss()
+            context.send(viewAction: .toggleReaction(key: emoji, itemID: item.id))
+        } label: {
+            Text(emoji)
+                .font(.compound.headingLG)
+                .padding(8)
+                .background(Circle()
+                    .foregroundColor(reactionBackgroundColor(for: emoji)))
+                .frame(maxWidth: .infinity, alignment: .leading)
+        }
+    }
+    
+    private func reactionBackgroundColor(for emoji: String) -> Color {
+        if let reaction = item.properties.reactions.first(where: { $0.key == emoji }),
+           reaction.isHighlighted {
+            return .compound.bgActionPrimaryRest
+        } else {
+            return .clear
+        }
+    }
+    
+    private func viewsForActions(_ actions: [TimelineItemMenuAction]) -> some View {
+        ForEach(actions, id: \.self) { action in
+            Button(role: action.isDestructive ? .destructive : nil) {
+                send(action)
+            } label: {
+                action.label
+                    .labelStyle(.menuSheet)
+            }
+        }
+    }
+    
+    private func send(_ action: TimelineItemMenuAction) {
+        dismiss()
+        // Otherwise we might get errors that a sheet is already presented
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+            context.send(viewAction: .handleTimelineItemMenuAction(itemID: item.id, action: action))
+        }
+    }
+}
+
+private extension EncryptionAuthenticity {
+    var foregroundStyle: SwiftUI.Color {
+        switch color {
+        case .red: .compound.textCriticalPrimary
+        case .gray: .compound.textSecondary
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct TimelineItemMenu_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = TimelineViewModel.mock
+    static let (item, actions) = makeItem()
+    static let (backupItem, _) = makeItem(authenticity: .notGuaranteed(color: .gray))
+    static let (unsignedItem, _) = makeItem(authenticity: .unsignedDevice(color: .red))
+    static let (unencryptedItem, _) = makeItem(authenticity: .sentInClear(color: .red))
+
+    static var previews: some View {
+        TimelineItemMenu(item: item, actions: actions)
+            .environmentObject(viewModel.context)
+            .previewDisplayName("With button shapes off")
+        
+        TimelineItemMenu(item: item, actions: actions)
+            .environmentObject(viewModel.context)
+            .environment(\._accessibilityShowButtonShapes, true)
+            .previewDisplayName("With button shapes on")
+        
+        TimelineItemMenu(item: backupItem, actions: actions)
+            .environmentObject(viewModel.context)
+            .previewDisplayName("Authenticity not guaranteed")
+        
+        TimelineItemMenu(item: unsignedItem, actions: actions)
+            .environmentObject(viewModel.context)
+            .previewDisplayName("Unsigned")
+        
+        TimelineItemMenu(item: unencryptedItem, actions: actions)
+            .environmentObject(viewModel.context)
+            .previewDisplayName("Unencrypted")
+    }
+    
+    static func makeItem(authenticity: EncryptionAuthenticity? = nil) -> (TextRoomTimelineItem, TimelineItemMenuActions)! {
+        guard var item = RoomTimelineItemFixtures.singleMessageChunk.first as? TextRoomTimelineItem,
+              let actions = TimelineItemMenuActions(isReactable: true,
+                                                    actions: [.copy, .edit, .reply(isThread: false), .pin, .redact],
+                                                    debugActions: [.viewSource]) else {
+            return nil
+        }
+        
+        if let authenticity {
+            item.properties.encryptionAuthenticity = authenticity
+        }
+        
+        return (item, actions)
+    }
+}
@@ -0,0 +1,144 @@
+//
+// Copyright 2024 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 SFSafeSymbols
+import SwiftUI
+
+struct TimelineItemMenuActions {
+    let reactions: [TimelineItemMenuReaction]
+    let actions: [TimelineItemMenuAction]
+    let debugActions: [TimelineItemMenuAction]
+    
+    init?(isReactable: Bool, actions: [TimelineItemMenuAction], debugActions: [TimelineItemMenuAction]) {
+        if !isReactable, actions.isEmpty, debugActions.isEmpty {
+            return nil
+        }
+        
+        self.actions = actions
+        self.debugActions = debugActions
+        reactions = if isReactable {
+            [
+                .init(key: "👍️", symbol: .handThumbsup),
+                .init(key: "👎️", symbol: .handThumbsdown),
+                .init(key: "🔥", symbol: .flame),
+                .init(key: "❤️", symbol: .heart),
+                .init(key: "👏", symbol: .handsClap)
+            ]
+        } else {
+            []
+        }
+    }
+}
+
+struct TimelineItemMenuReaction {
+    let key: String
+    let symbol: SFSymbol
+}
+
+enum TimelineItemMenuAction: Identifiable, Hashable {
+    case copy
+    case edit
+    case copyPermalink
+    case redact
+    case reply(isThread: Bool)
+    case forward(itemID: TimelineItemIdentifier)
+    case viewSource
+    case retryDecryption(sessionID: String)
+    case report
+    case react
+    case toggleReaction(key: String)
+    case endPoll(pollStartID: String)
+    case pin
+    case unpin
+    
+    var id: Self { self }
+    
+    /// Whether the item should cancel a reply/edit occurring in the composer.
+    var switchToDefaultComposer: Bool {
+        switch self {
+        case .reply, .edit:
+            return false
+        default:
+            return true
+        }
+    }
+    
+    /// Whether the action should be shown for an item that failed to send.
+    var canAppearInFailedEcho: Bool {
+        switch self {
+        case .copy, .edit, .redact, .viewSource:
+            return true
+        default:
+            return false
+        }
+    }
+    
+    /// Whether the action should be shown for a redacted item.
+    var canAppearInRedacted: Bool {
+        switch self {
+        case .viewSource:
+            return true
+        default:
+            return false
+        }
+    }
+    
+    /// Whether or not the action is destructive.
+    var isDestructive: Bool {
+        switch self {
+        case .redact, .report:
+            return true
+        default:
+            return false
+        }
+    }
+    
+    /// The action's label.
+    @ViewBuilder
+    var label: some View {
+        switch self {
+        case .copy:
+            Label(L10n.actionCopy, icon: \.copy)
+        case .edit:
+            Label(L10n.actionEdit, icon: \.edit)
+        case .copyPermalink:
+            Label(L10n.actionCopyLinkToMessage, icon: \.link)
+        case .reply(let isThread):
+            Label(isThread ? L10n.actionReplyInThread : L10n.actionReply, icon: \.reply)
+        case .forward:
+            Label(L10n.actionForward, icon: \.forward)
+        case .redact:
+            Label(L10n.actionRemove, icon: \.delete)
+        case .viewSource:
+            Label(L10n.actionViewSource, icon: \.code)
+        case .retryDecryption:
+            Label(L10n.actionRetryDecryption, systemImage: "arrow.down.message")
+        case .report:
+            Label(L10n.actionReportContent, icon: \.chatProblem)
+        case .react:
+            Label(L10n.actionReact, icon: \.reactionAdd)
+        case .toggleReaction:
+            // Unused label - manually created in TimelineItemMacContextMenu.
+            Label(L10n.actionReact, icon: \.reactionAdd)
+        case .endPoll:
+            Label(L10n.actionEndPoll, icon: \.pollsEnd)
+        case .pin:
+            Label(L10n.actionPin, icon: \.pin)
+        case .unpin:
+            Label(L10n.actionUnpin, icon: \.unpin)
+        }
+    }
+}
@@ -0,0 +1,112 @@
+//
+// Copyright 2024 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 Foundation
+
+struct TimelineItemMenuActionProvider {
+    let timelineItem: RoomTimelineItemProtocol
+    let canCurrentUserRedactSelf: Bool
+    let canCurrentUserRedactOthers: Bool
+    let canCurrentUserPin: Bool
+    let pinnedEventIDs: Set<String>
+    let isDM: Bool
+    let isViewSourceEnabled: Bool
+    
+    // swiftlint:disable:next cyclomatic_complexity
+    func makeActions() -> TimelineItemMenuActions? {
+        guard let item = timelineItem as? EventBasedTimelineItemProtocol else {
+            // Don't show a context menu for non-event based items.
+            return nil
+        }
+
+        if timelineItem is StateRoomTimelineItem {
+            // Don't show a context menu for state events.
+            return nil
+        }
+
+        var debugActions: [TimelineItemMenuAction] = []
+        if isViewSourceEnabled {
+            debugActions.append(.viewSource)
+        }
+
+        if let encryptedItem = timelineItem as? EncryptedRoomTimelineItem {
+            switch encryptedItem.encryptionType {
+            case .megolmV1AesSha2(let sessionID, _):
+                debugActions.append(.retryDecryption(sessionID: sessionID))
+            default:
+                break
+            }
+            
+            return .init(isReactable: false, actions: [.copyPermalink], debugActions: debugActions)
+        }
+        
+        var actions: [TimelineItemMenuAction] = []
+
+        if item.canBeRepliedTo {
+            if let messageItem = item as? EventBasedMessageTimelineItemProtocol {
+                actions.append(.reply(isThread: messageItem.isThreaded))
+            } else {
+                actions.append(.reply(isThread: false))
+            }
+        }
+        
+        if item.isForwardable {
+            actions.append(.forward(itemID: item.id))
+        }
+        
+        if canCurrentUserPin, let eventID = item.id.eventID {
+            actions.append(pinnedEventIDs.contains(eventID) ? .unpin : .pin)
+        }
+
+        if item.isEditable {
+            actions.append(.edit)
+        }
+
+        if item.isCopyable {
+            actions.append(.copy)
+        }
+        
+        if item.isRemoteMessage {
+            actions.append(.copyPermalink)
+        }
+
+        if canRedactItem(item), let poll = item.pollIfAvailable, !poll.hasEnded, let eventID = item.id.eventID {
+            actions.append(.endPoll(pollStartID: eventID))
+        }
+        
+        if canRedactItem(item) {
+            actions.append(.redact)
+        }
+
+        if !item.isOutgoing {
+            actions.append(.report)
+        }
+
+        if item.hasFailedToSend {
+            actions = actions.filter(\.canAppearInFailedEcho)
+        }
+
+        if item.isRedacted {
+            actions = actions.filter(\.canAppearInRedacted)
+        }
+
+        return .init(isReactable: item.isReactable, actions: actions, debugActions: debugActions)
+    }
+    
+    private func canRedactItem(_ item: EventBasedTimelineItemProtocol) -> Bool {
+        item.isOutgoing ? canCurrentUserRedactSelf : canCurrentUserRedactOthers && !isDM
+    }
+}