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

ElementX/Sources/Screens/StartChatScreen/StartChatScreenModels.swift

@@ -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)
 }

ElementX/Sources/Screens/StartChatScreen/StartChatScreenViewModel.swift

@@ -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() {

ElementX/Sources/Screens/StartChatScreen/View/SendInviteConfirmationView.swift

@@ -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) { }
+    }
+}

ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift

@@ -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