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-03 16:10:20 +00:00 · 2025-02-05 13:28:00 +01:00
parent 42257a18db
commit 921d1c627d
21 changed files with 216 additions and 54 deletions
@@ -370,6 +370,10 @@
 "screen_advanced_settings_element_call_base_url" = "Custom Element Call base URL";
 "screen_advanced_settings_element_call_base_url_description" = "Set a custom base URL for Element Call.";
 "screen_advanced_settings_element_call_base_url_validation_error" = "Invalid URL, please make sure you include the protocol (http/https) and the correct address.";
+"screen_bottom_sheet_create_dm_confirmation_button_title" = "Send invite";
+"screen_bottom_sheet_create_dm_message" = "Would you like to start a chat with %1$@ (%2$@)?";
+"screen_bottom_sheet_create_dm_message_no_displayname" = "Would you like to start a chat with %1$@?";
+"screen_bottom_sheet_create_dm_title" = "Send invite?";
 "screen_create_room_room_access_section_anyone_option_description" = "Anyone can join this room";
 "screen_create_room_room_access_section_anyone_option_title" = "Anyone";
 "screen_create_room_room_access_section_header" = "Room Access";
@@ -387,6 +391,7 @@
 "screen_join_room_knock_message_description" = "Message (optional)";
 "screen_join_room_knock_sent_description" = "You will receive an invite to join the room if your request is accepted.";
 "screen_join_room_knock_sent_title" = "Request to join sent";
+"screen_join_room_loading_alert_message" = "We could not display the room preview. This may be due to network or server issues.";
 "screen_knock_requests_list_accept_all_alert_confirm_button_title" = "Yes, accept all";
 "screen_knock_requests_list_accept_all_alert_description" = "Are you sure you want to accept all requests to join?";
 "screen_knock_requests_list_accept_all_alert_title" = "Accept all requests";
@@ -840,9 +845,6 @@
 "screen_room_error_failed_retrieving_user_details" = "Could not retrieve user details";
 "screen_room_invite_again_alert_message" = "Would you like to invite them back?";
 "screen_room_invite_again_alert_title" = "You are alone in this chat";
-"screen_room_member_details_alert_create_dm_confirmation_title" = "Send invite";
-"screen_room_member_details_alert_create_dm_message" = "Would you like to start a chat with %1$@?";
-"screen_room_member_details_alert_create_dm_title" = "Send invite?";
 "screen_room_member_details_block_alert_action" = "Block";
 "screen_room_member_details_block_alert_description" = "Blocked users won't be able to send you messages and all their messages will be hidden. You can unblock them anytime.";
 "screen_room_member_details_block_user" = "Block user";
@@ -370,6 +370,10 @@
 "screen_advanced_settings_element_call_base_url" = "Custom Element Call base URL";
 "screen_advanced_settings_element_call_base_url_description" = "Set a custom base URL for Element Call.";
 "screen_advanced_settings_element_call_base_url_validation_error" = "Invalid URL, please make sure you include the protocol (http/https) and the correct address.";
+"screen_bottom_sheet_create_dm_confirmation_button_title" = "Send invite";
+"screen_bottom_sheet_create_dm_message" = "Would you like to start a chat with %1$@ (%2$@)?";
+"screen_bottom_sheet_create_dm_message_no_displayname" = "Would you like to start a chat with %1$@?";
+"screen_bottom_sheet_create_dm_title" = "Send invite?";
 "screen_create_room_room_access_section_anyone_option_description" = "Anyone can join this room";
 "screen_create_room_room_access_section_anyone_option_title" = "Anyone";
 "screen_create_room_room_access_section_header" = "Room Access";
@@ -387,6 +391,7 @@
 "screen_join_room_knock_message_description" = "Message (optional)";
 "screen_join_room_knock_sent_description" = "You will receive an invite to join the room if your request is accepted.";
 "screen_join_room_knock_sent_title" = "Request to join sent";
+"screen_join_room_loading_alert_message" = "We could not display the room preview. This may be due to network or server issues.";
 "screen_knock_requests_list_accept_all_alert_confirm_button_title" = "Yes, accept all";
 "screen_knock_requests_list_accept_all_alert_description" = "Are you sure you want to accept all requests to join?";
 "screen_knock_requests_list_accept_all_alert_title" = "Accept all requests";
@@ -840,9 +845,6 @@
 "screen_room_error_failed_retrieving_user_details" = "Could not retrieve user details";
 "screen_room_invite_again_alert_message" = "Would you like to invite them back?";
 "screen_room_invite_again_alert_title" = "You are alone in this chat";
-"screen_room_member_details_alert_create_dm_confirmation_title" = "Send invite";
-"screen_room_member_details_alert_create_dm_message" = "Would you like to start a chat with %1$@?";
-"screen_room_member_details_alert_create_dm_title" = "Send invite?";
 "screen_room_member_details_block_alert_action" = "Block";
 "screen_room_member_details_block_alert_description" = "Blocked users won't be able to send you messages and all their messages will be hidden. You can unblock them anytime.";
 "screen_room_member_details_block_user" = "Block user";
@@ -1014,6 +1014,18 @@ internal enum L10n {
  internal static var screenBlockedUsersUnblockAlertTitle: String { return L10n.tr("Localizable", "screen_blocked_users_unblock_alert_title") }
  /// Unblocking…
  internal static var screenBlockedUsersUnblocking: String { return L10n.tr("Localizable", "screen_blocked_users_unblocking") }
+  /// Send invite
+  internal static var screenBottomSheetCreateDmConfirmationButtonTitle: String { return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_confirmation_button_title") }
+  /// Would you like to start a chat with %1$@ (%2$@)?
+  internal static func screenBottomSheetCreateDmMessage(_ p1: Any, _ p2: Any) -> String {
+    return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_message", String(describing: p1), String(describing: p2))
+  }
+  /// Would you like to start a chat with %1$@?
+  internal static func screenBottomSheetCreateDmMessageNoDisplayname(_ p1: Any) -> String {
+    return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_message_no_displayname", String(describing: p1))
+  }
+  /// Send invite?
+  internal static var screenBottomSheetCreateDmTitle: String { return L10n.tr("Localizable", "screen_bottom_sheet_create_dm_title") }
  /// Attach screenshot
  internal static var screenBugReportAttachScreenshot: String { return L10n.tr("Localizable", "screen_bug_report_attach_screenshot") }
  /// You may contact me if you have any follow up questions.
@@ -1326,6 +1338,8 @@ internal enum L10n {
  internal static var screenJoinRoomKnockSentDescription: String { return L10n.tr("Localizable", "screen_join_room_knock_sent_description") }
  /// Request to join sent
  internal static var screenJoinRoomKnockSentTitle: String { return L10n.tr("Localizable", "screen_join_room_knock_sent_title") }
+  /// We could not display the room preview. This may be due to network or server issues.
+  internal static var screenJoinRoomLoadingAlertMessage: String { return L10n.tr("Localizable", "screen_join_room_loading_alert_message") }
  /// %1$@ does not support spaces yet. You can access spaces on web.
  internal static func screenJoinRoomSpaceNotSupportedDescription(_ p1: Any) -> String {
    return L10n.tr("Localizable", "screen_join_room_space_not_supported_description", String(describing: p1))
@@ -1938,14 +1952,6 @@ internal enum L10n {
  internal static var screenRoomInviteAgainAlertMessage: String { return L10n.tr("Localizable", "screen_room_invite_again_alert_message") }
  /// You are alone in this chat
  internal static var screenRoomInviteAgainAlertTitle: String { return L10n.tr("Localizable", "screen_room_invite_again_alert_title") }
-  /// Send invite
-  internal static var screenRoomMemberDetailsAlertCreateDmConfirmationTitle: String { return L10n.tr("Localizable", "screen_room_member_details_alert_create_dm_confirmation_title") }
-  /// Would you like to start a chat with %1$@?
-  internal static func screenRoomMemberDetailsAlertCreateDmMessage(_ p1: Any) -> String {
-    return L10n.tr("Localizable", "screen_room_member_details_alert_create_dm_message", String(describing: p1))
-  }
-  /// Send invite?
-  internal static var screenRoomMemberDetailsAlertCreateDmTitle: String { return L10n.tr("Localizable", "screen_room_member_details_alert_create_dm_title") }
  /// Block
  internal static var screenRoomMemberDetailsBlockAlertAction: String { return L10n.tr("Localizable", "screen_room_member_details_block_alert_action") }
  /// Blocked users won't be able to send you messages and all their messages will be hidden. You can unblock them anytime.
@@ -76,6 +76,7 @@ enum UserAvatarSizeOnScreen {
    case knockingUserBanner
    case knockingUserList
    case mediaPreviewDetails
+    case sendInviteConfirmation

    var value: CGFloat {
        switch self {
@@ -113,6 +114,8 @@ enum UserAvatarSizeOnScreen {
            return 52
        case .mediaPreviewDetails:
            return 32
+        case .sendInviteConfirmation:
+            return 64
        }
    }
 }
@@ -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)
    }
@@ -55,3 +55,7 @@ extension SearchUsersResultsProxy {
        limited = sdkResults.limited
    }
 }
+
+extension UserProfileProxy: Identifiable {
+    var id: String { userID }
+}