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-02 21:33:26 +00:00 · 2025-02-05 13:28:00 +01:00
parent 42257a18db
commit 921d1c627d
21 changed files with 216 additions and 54 deletions
@@ -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