Implement the SpaceAddRoomsScreen. (#4951)

* Update proxies ready for adding rooms to a space. - ClientProxy.recentlyVisitedRooms to take a filter and to return room proxies. - Expose SpaceServiceProxy.addChildToSpace. * Implement the SpaceAddRoomsScreen. * Fix the designs of the selected carousels. Add more snapshot tests for inviting users. * Fix for screen using wrong avatar size.
2026-11-02 21:33:26 +00:00 · 2026-01-14 12:07:57 +00:00
parent 530e249eee
commit cde9714a83
61 changed files with 1060 additions and 102 deletions
@@ -101,28 +101,22 @@ struct InviteUsersScreen: View {
        }
    }
    
-    @ScaledMetric private var cellWidth: CGFloat = 72
+    @ScaledMetric private var selectedUserCellWidth: CGFloat = 80

    private var selectedUsersSection: some View {
        ScrollView(.horizontal, showsIndicators: false) {
-            ScrollViewReader { scrollView in
-                HStack(spacing: 16) {
-                    ForEach(context.viewState.selectedUsers, id: \.userID) { user in
-                        InviteUsersScreenSelectedItem(user: user, mediaProvider: context.mediaProvider) {
-                            deselect(user)
-                        }
-                        .frame(width: cellWidth)
+            HStack(spacing: 8) {
+                ForEach(context.viewState.selectedUsers, id: \.userID) { user in
+                    InviteUsersScreenSelectedItem(user: user, mediaProvider: context.mediaProvider) {
+                        deselect(user)
                    }
+                    .frame(width: selectedUserCellWidth)
                }
-                .onChange(of: context.viewState.scrollToLastID) { _, lastAddedID in
-                    guard let id = lastAddedID else { return }
-                    withElementAnimation(.easeInOut) {
-                        scrollView.scrollTo(id)
-                    }
-                }
-                .padding(.horizontal, 14)
            }
+            .padding(.horizontal, 16)
+            .scrollTargetLayout()
        }
+        .scrollPosition(id: $context.selectedUsersPosition, anchor: .trailing)
    }
    
    @ToolbarContentBuilder
@@ -152,20 +146,54 @@ struct InviteUsersScreen: View {
 // MARK: - Previews

 struct InviteUsersScreen_Previews: PreviewProvider, TestablePreview {
-    static let viewModel = {
-        let userDiscoveryService = UserDiscoveryServiceMock()
-        userDiscoveryService.searchProfilesWithReturnValue = .success([.mockAlice])
-        return InviteUsersScreenViewModel(userSession: UserSessionMock(.init()),
-                                          roomProxy: JoinedRoomProxyMock(.init()),
-                                          isSkippable: true,
-                                          userDiscoveryService: userDiscoveryService,
-                                          userIndicatorController: UserIndicatorControllerMock(),
-                                          appSettings: ServiceLocator.shared.settings)
-    }()
+    static let viewModel = makeViewModel()
+    static let searchingViewModel = makeViewModel(searchQuery: "Alice")
+    static let selectedViewModel = makeViewModel(hasSelection: true)
    
    static var previews: some View {
        NavigationStack {
            InviteUsersScreen(context: viewModel.context)
        }
+        .previewDisplayName("Suggestions")
+        .snapshotPreferences(expect: viewModel.context.$viewState.map { !$0.usersSection.users.isEmpty })
+        
+        NavigationStack {
+            InviteUsersScreen(context: searchingViewModel.context)
+        }
+        .previewDisplayName("Searching")
+        .snapshotPreferences(expect: searchingViewModel.context.$viewState.map {
+            $0.usersSection.type == .searchResult && !$0.usersSection.users.isEmpty
+        })
+        
+        NavigationStack {
+            InviteUsersScreen(context: selectedViewModel.context)
+        }
+        .previewDisplayName("Selected")
+        .snapshotPreferences(expect: selectedViewModel.context.$viewState.map { !$0.selectedUsers.isEmpty })
+    }
+    
+    static func makeViewModel(searchQuery: String? = nil, hasSelection: Bool = false) -> InviteUsersScreenViewModel {
+        let clientProxy = ClientProxyMock(.init())
+        clientProxy.recentConversationCounterpartsReturnValue = [.mockAlice, .mockBob, .mockCharlie, .mockDan, .mockVerbose]
+        
+        let userDiscoveryService = UserDiscoveryServiceMock()
+        userDiscoveryService.searchProfilesWithReturnValue = .success([.mockAlice])
+        
+        let viewModel = InviteUsersScreenViewModel(userSession: UserSessionMock(.init(clientProxy: clientProxy)),
+                                                   roomProxy: JoinedRoomProxyMock(.init(members: [])),
+                                                   isSkippable: true,
+                                                   userDiscoveryService: userDiscoveryService,
+                                                   userIndicatorController: UserIndicatorControllerMock(),
+                                                   appSettings: ServiceLocator.shared.settings)
+        
+        if let searchQuery {
+            viewModel.context.searchQuery = searchQuery
+        }
+        
+        if hasSelection {
+            viewModel.state.selectedUsers = [.mockAlice]
+        }
+        
+        return viewModel
    }
 }
@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //

+import Compound
 import SwiftUI

 struct InviteUsersScreenSelectedItem: View {
@@ -14,13 +15,13 @@ struct InviteUsersScreenSelectedItem: View {
    let dismissAction: () -> Void
    
    var body: some View {
-        VStack(spacing: 0) {
+        VStack(spacing: 10) {
            avatar
                .accessibilityHidden(true)
            
            Text(user.displayName ?? user.userID)
-                .font(.compound.bodyMD)
-                .foregroundColor(.compound.textPrimary)
+                .font(.compound.bodySM)
+                .foregroundColor(.compound.textSecondary)
                .lineLimit(1)
        }
        .accessibilityElement(children: .combine)
@@ -35,15 +36,14 @@ struct InviteUsersScreenSelectedItem: View {
                            contentID: user.userID,
                            avatarSize: .user(on: .inviteUsers),
                            mediaProvider: mediaProvider)
-            .overlay(alignment: .topTrailing) {
-                Button(action: dismissAction) {
-                    Image(systemName: "xmark.circle.fill")
-                        .resizable()
-                        .scaledFrame(size: 20)
-                        .symbolRenderingMode(.palette)
-                        .foregroundStyle(Color.compound.iconOnSolidPrimary, Color.compound.iconPrimary)
-                }
-            }
+            .overlayRemoveItemButton(action: dismissAction)
+    }
+    
+    var closeButtonLabel: some View {
+        CompoundIcon(\.close, size: .custom(12), relativeTo: .compound.bodySM)
+            .foregroundStyle(.compound.iconOnSolidPrimary)
+            .padding(2)
+            .background(.compound.iconPrimary, in: Circle())
    }
 }

@@ -52,10 +52,10 @@ struct InviteUsersScreenSelectedItem_Previews: PreviewProvider, TestablePreview
    
    static var previews: some View {
        ScrollView(.horizontal) {
-            HStack(spacing: 28) {
+            HStack(spacing: 8) {
                ForEach(people, id: \.userID) { user in
                    InviteUsersScreenSelectedItem(user: user, mediaProvider: MediaProviderMock(configuration: .init())) { }
-                        .frame(width: 72)
+                        .frame(width: 80)
                }
            }
        }