Bottom Sheet to confirm DM creation (#3739)

* created the view to hold the bottom sheet * added the sheet to the start chat screen * switched the alert with the bottom sheet in the room member details * add a small delay to not always show the loader * suggested PR changes * pr suggestions and updated tests
2026-11-05 11:58:32 +00:00 · 2025-02-05 13:28:00 +01:00
parent 42257a18db
commit 921d1c627d
21 changed files with 216 additions and 54 deletions
@@ -73,6 +73,7 @@ struct RoomMemberDetailsScreenViewStateBindings {
    
    var ignoreUserAlert: IgnoreUserAlertItem?
    var alertInfo: AlertInfo<RoomMemberDetailsScreenAlertType>?
+    var inviteConfirmationUser: UserProfileProxy?
    
    /// A media item that will be previewed with QuickLook.
    var mediaPreviewItem: MediaPreviewItem?
@@ -85,11 +86,11 @@ enum RoomMemberDetailsScreenViewAction {
    case unignoreConfirmed
    case displayAvatar(URL)
    case openDirectChat
+    case createDirectChat
    case startCall(roomID: String)
 }

 enum RoomMemberDetailsScreenAlertType: Hashable {
    case failedOpeningDirectChat
-    case createDirectChatConfirmation
    case unknown
 }
@@ -71,6 +71,8 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
            Task { await displayFullScreenAvatar(url) }
        case .openDirectChat:
            Task { await openDirectChat() }
+        case .createDirectChat:
+            Task { await createDirectChat() }
        case .startCall(let roomID):
            actionsSubject.send(.startCall(roomID: roomID))
        }
@@ -187,12 +189,7 @@ class RoomMemberDetailsScreenViewModel: RoomMemberDetailsScreenViewModelType, Ro
            if let roomID {
                actionsSubject.send(.openDirectChat(roomID: roomID))
            } else {
-                let string = roomMemberProxy.displayName ?? roomMemberProxy.userID
-                state.bindings.alertInfo = .init(id: .createDirectChatConfirmation,
-                                                 title: L10n.screenRoomMemberDetailsAlertCreateDmTitle,
-                                                 message: L10n.screenRoomMemberDetailsAlertCreateDmMessage(string),
-                                                 primaryButton: .init(title: L10n.screenRoomMemberDetailsAlertCreateDmConfirmationTitle) { [weak self] in Task { await self?.createDirectChat() }},
-                                                 secondaryButton: .init(title: L10n.actionCancel, role: .cancel, action: nil))
+                state.bindings.inviteConfirmationUser = .init(userID: roomMemberProxy.userID, displayName: roomMemberProxy.displayName, avatarURL: roomMemberProxy.avatarURL)
            }
        case .failure:
            state.bindings.alertInfo = .init(id: .failedOpeningDirectChat)
@@ -25,6 +25,12 @@ struct RoomMemberDetailsScreen: View {
        .navigationTitle(L10n.screenRoomMemberDetailsTitle)
        .alert(item: $context.ignoreUserAlert, actions: blockUserAlertActions, message: blockUserAlertMessage)
        .alert(item: $context.alertInfo)
+        .sheet(item: $context.inviteConfirmationUser) { user in
+            SendInviteConfirmationView(userToInvite: user,
+                                       mediaProvider: context.mediaProvider) {
+                context.send(viewAction: .createDirectChat)
+            }
+        }
        .track(screen: .User)
        .interactiveQuickLook(item: $context.mediaPreviewItem, allowEditing: false)
    }
@@ -37,10 +37,13 @@ struct StartChatScreenViewStateBindings {
    
    /// Information describing the currently displayed alert.
    var alertInfo: AlertInfo<StartChatScreenErrorType>?
+    
+    var selectedUserToInvite: UserProfileProxy?
 }

 enum StartChatScreenViewAction {
    case close
    case createRoom
+    case createDM(user: UserProfileProxy)
    case selectUser(UserProfileProxy)
 }
@@ -54,20 +54,23 @@ class StartChatScreenViewModel: StartChatScreenViewModelType, StartChatScreenVie
        case .createRoom:
            actionsSubject.send(.createRoom)
        case .selectUser(let user):
-            showLoadingIndicator()
+            showLoadingIndicator(delay: .milliseconds(200))
            Task {
                let currentDirectRoom = await userSession.clientProxy.directRoomForUserID(user.userID)
                switch currentDirectRoom {
                case .success(.some(let roomId)):
-                    self.hideLoadingIndicator()
-                    self.actionsSubject.send(.openRoom(withIdentifier: roomId))
+                    hideLoadingIndicator()
+                    actionsSubject.send(.openRoom(withIdentifier: roomId))
                case .success:
-                    await self.createDirectRoom(with: user)
+                    hideLoadingIndicator()
+                    state.bindings.selectedUserToInvite = user
                case .failure:
-                    self.hideLoadingIndicator()
-                    self.displayError()
+                    hideLoadingIndicator()
+                    displayError()
                }
            }
+        case .createDM(let user):
+            Task { await createDirectRoom(user: user) }
        }
    }
    
@@ -107,7 +110,7 @@ class StartChatScreenViewModel: StartChatScreenViewModelType, StartChatScreenVie
        }
    }
        
-    private func createDirectRoom(with user: UserProfileProxy) async {
+    private func createDirectRoom(user: UserProfileProxy) async {
        defer {
            hideLoadingIndicator()
        }
@@ -131,11 +134,12 @@ class StartChatScreenViewModel: StartChatScreenViewModelType, StartChatScreenVie
    
    private static let loadingIndicatorIdentifier = "\(StartChatScreenViewModel.self)-Loading"
    
-    private func showLoadingIndicator() {
+    private func showLoadingIndicator(delay: Duration? = nil) {
        userIndicatorController.submitIndicator(UserIndicator(id: Self.loadingIndicatorIdentifier,
                                                              type: .modal(progress: .indeterminate, interactiveDismissDisabled: true, allowsInteraction: false),
                                                              title: L10n.commonLoading,
-                                                              persistent: true))
+                                                              persistent: true),
+                                                delay: delay)
    }
    
    private func hideLoadingIndicator() {
@@ -0,0 +1,95 @@
+//
+// Copyright 2025 New Vector 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 SendInviteConfirmationView: View {
+    let userToInvite: UserProfileProxy
+    let mediaProvider: MediaProviderProtocol?
+    let onInvite: () -> Void
+    
+    @Environment(\.dismiss) private var dismiss
+    
+    @State private var sheetHeight: CGFloat = .zero
+    private let topPadding: CGFloat = 24
+    
+    private var subtitle: String {
+        if let displayName = userToInvite.displayName {
+            L10n.screenBottomSheetCreateDmMessage(displayName, userToInvite.userID)
+        } else {
+            L10n.screenBottomSheetCreateDmMessageNoDisplayname(userToInvite.userID)
+        }
+    }
+    
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 40) {
+                header
+                actions
+            }
+            .readHeight($sheetHeight)
+        }
+        .scrollBounceBehavior(.basedOnSize)
+        .padding(.top, topPadding) // For the drag indicator
+        .presentationDetents([.height(sheetHeight + topPadding)])
+        .presentationDragIndicator(.visible)
+        .presentationBackground(.compound.bgCanvasDefault)
+    }
+    
+    private var header: some View {
+        VStack(spacing: 16) {
+            LoadableAvatarImage(url: userToInvite.avatarURL,
+                                name: userToInvite.displayName,
+                                contentID: userToInvite.userID,
+                                avatarSize: .user(on: .sendInviteConfirmation),
+                                mediaProvider: mediaProvider)
+            VStack(spacing: 8) {
+                Text(L10n.screenBottomSheetCreateDmTitle)
+                    .multilineTextAlignment(.center)
+                    .font(.compound.headingMDBold)
+                    .foregroundStyle(.compound.textPrimary)
+                Text(subtitle)
+                    .multilineTextAlignment(.center)
+                    .font(.compound.bodyMD)
+                    .foregroundStyle(.compound.textSecondary)
+            }
+        }
+        .padding(.horizontal, 24)
+    }
+    
+    private var actions: some View {
+        VStack(spacing: 16) {
+            Button {
+                dismiss()
+                onInvite()
+            } label: {
+                Label(L10n.screenBottomSheetCreateDmConfirmationButtonTitle,
+                      icon: \.userAdd,
+                      iconSize: .medium,
+                      relativeTo: .compound.bodyLGSemibold)
+            }
+            .buttonStyle(.compound(.primary))
+            
+            Button {
+                dismiss()
+            } label: {
+                Text(L10n.actionCancel)
+                    .padding(.vertical, 14)
+            }
+            .buttonStyle(.compound(.plain))
+        }
+        .padding(.horizontal, 16)
+    }
+}
+
+struct SendInviteConfirmationView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        SendInviteConfirmationView(userToInvite: .mockBob,
+                                   mediaProvider: nil) { }
+    }
+}
@@ -31,6 +31,11 @@ struct StartChatScreen: View {
                          disablesInteractiveDismiss: true)
        .compoundSearchField()
        .alert(item: $context.alertInfo)
+        .sheet(item: $context.selectedUserToInvite) { user in
+            SendInviteConfirmationView(userToInvite: user, mediaProvider: context.mediaProvider) {
+                context.send(viewAction: .createDM(user: user))
+            }
+        }
    }

    // MARK: - Private
@@ -36,6 +36,7 @@ struct UserProfileScreenViewState: BindableState {

 struct UserProfileScreenViewStateBindings {
    var alertInfo: AlertInfo<UserProfileScreenAlertType>?
+    var inviteConfirmationUser: UserProfileProxy?
    
    /// A media item that will be previewed with QuickLook.
    var mediaPreviewItem: MediaPreviewItem?
@@ -44,6 +45,7 @@ struct UserProfileScreenViewStateBindings {
 enum UserProfileScreenViewAction {
    case displayAvatar(URL)
    case openDirectChat
+    case createDirectChat
    case startCall(roomID: String)
    case dismiss
 }
@@ -51,5 +53,4 @@ enum UserProfileScreenViewAction {
 enum UserProfileScreenAlertType: Hashable {
    case failedOpeningDirectChat
    case unknown
-    case createDirectChatConfirmation
 }
@@ -62,6 +62,8 @@ class UserProfileScreenViewModel: UserProfileScreenViewModelType, UserProfileScr
            Task { await displayFullScreenAvatar(url) }
        case .openDirectChat:
            Task { await openDirectChat() }
+        case .createDirectChat:
+            Task { await createDirectChat() }
        case .startCall(let roomID):
            actionsSubject.send(.startCall(roomID: roomID))
        case .dismiss:
@@ -121,12 +123,7 @@ class UserProfileScreenViewModel: UserProfileScreenViewModelType, UserProfileScr
            if let roomID {
                actionsSubject.send(.openDirectChat(roomID: roomID))
            } else {
-                let string = userProfile.displayName ?? userProfile.userID
-                state.bindings.alertInfo = .init(id: .createDirectChatConfirmation,
-                                                 title: L10n.screenRoomMemberDetailsAlertCreateDmTitle,
-                                                 message: L10n.screenRoomMemberDetailsAlertCreateDmMessage(string),
-                                                 primaryButton: .init(title: L10n.screenRoomMemberDetailsAlertCreateDmConfirmationTitle) { [weak self] in Task { await self?.createDirectChat() }},
-                                                 secondaryButton: .init(title: L10n.actionCancel, role: .cancel, action: nil))
+                state.bindings.inviteConfirmationUser = userProfile
            }
        case .failure:
            state.bindings.alertInfo = .init(id: .failedOpeningDirectChat)
@@ -22,6 +22,12 @@ struct UserProfileScreen: View {
        .navigationBarTitleDisplayMode(.inline)
        .toolbar { toolbar }
        .alert(item: $context.alertInfo)
+        .sheet(item: $context.inviteConfirmationUser) { user in
+            SendInviteConfirmationView(userToInvite: user,
+                                       mediaProvider: context.mediaProvider) {
+                context.send(viewAction: .createDirectChat)
+            }
+        }
        .track(screen: .User)
        .interactiveQuickLook(item: $context.mediaPreviewItem, allowEditing: false)
    }