Add support for space rooms on the JoinRoomScreen. (#4582)

* Add support for space rooms to JoinRoomScreenModel. * Make a single wrapper type for JoinRoomScreen previews to simplify instantiation. * Add previews for JoinRoomScreen for spaces.
2026-11-03 06:55:59 +00:00 · 2025-10-07 10:51:58 +01:00
parent 1a5ff8b012
commit 8cd5c9862e
102 changed files with 671 additions and 321 deletions
@@ -23,7 +23,7 @@ struct JoinRoomScreen: View {
        if context.viewState.roomDetails?.inviter != nil {
            return 32
        }
-        return context.viewState.mode == .knocked ? 151 : 44
+        return context.viewState.mode == .knocked ? 151 : 32
    }

    var body: some View {
@@ -57,60 +57,83 @@ struct JoinRoomScreen: View {
    @ViewBuilder
    private var defaultView: some View {
        VStack(spacing: 16) {
-            if let inviter = context.viewState.roomDetails?.inviter {
-                RoomInviterLabel(inviter: inviter,
-                                 shouldHideAvatar: context.viewState.hideInviteAvatars,
-                                 mediaProvider: context.mediaProvider)
-                    .multilineTextAlignment(.center)
-                    .font(.compound.bodyMD)
-                    .foregroundStyle(.compound.textSecondary)
-                    .padding(.bottom, 44)
-            }
-            
-            if let avatar = context.viewState.avatar {
-                RoomAvatarImage(avatar: avatar,
-                                avatarSize: .room(on: .joinRoom),
-                                mediaProvider: context.mediaProvider)
-                    .dynamicTypeSize(dynamicTypeSize < .accessibility1 ? dynamicTypeSize : .accessibility1)
-                    .accessibilityHidden(true)
-            } else {
-                RoomAvatarImage(avatar: .room(id: "", name: nil, avatarURL: nil),
-                                avatarSize: .room(on: .joinRoom),
-                                mediaProvider: context.mediaProvider)
-                    .dynamicTypeSize(dynamicTypeSize < .accessibility1 ? dynamicTypeSize : .accessibility1)
-                    .hidden()
-                    .accessibilityHidden(true)
-            }
+            RoomAvatarImage(avatar: context.viewState.avatar ?? .room(id: "", name: nil, avatarURL: nil),
+                            avatarSize: .room(on: .joinRoom),
+                            mediaProvider: context.mediaProvider)
+                .dynamicTypeSize(dynamicTypeSize < .accessibility1 ? dynamicTypeSize : .accessibility1)
+                .opacity(context.viewState.avatar == nil ? 0 : 1)
+                .accessibilityHidden(true)
            
            VStack(spacing: 8) {
                Text(context.viewState.title)
-                    .font(.compound.headingMDBold)
+                    .font(.compound.headingLGBold)
                    .foregroundStyle(.compound.textPrimary)
                    .multilineTextAlignment(.center)
                
                if let subtitle = context.viewState.subtitle {
-                    Text(subtitle)
-                        .font(.compound.bodyLG)
-                        .foregroundStyle(.compound.textSecondary)
-                        .multilineTextAlignment(.center)
+                    Label {
+                        Text(subtitle)
+                            .font(.compound.bodyLG)
+                            .foregroundStyle(.compound.textSecondary)
+                            .multilineTextAlignment(.center)
+                    } icon: {
+                        if let icon = context.viewState.subtitleIcon {
+                            CompoundIcon(icon)
+                                .foregroundStyle(.compound.iconTertiary)
+                        }
+                    }
                }
                
                if !context.viewState.isDMInvite, let memberCount = context.viewState.roomDetails?.memberCount {
-                    BadgeLabel(title: "\(memberCount)", icon: \.userProfile, style: .default)
+                    JoinedMembersBadgeView(heroes: context.viewState.roomDetails?.heroes ?? [],
+                                           joinedCount: memberCount,
+                                           mediaProvider: context.mediaProvider)
                }
-                
-                if let topic = context.viewState.roomDetails?.topic {
-                    Text(topic)
+            }
+            
+            if let topic = context.viewState.roomDetails?.topic {
+                Text(topic)
+                    .font(.compound.bodyMD)
+                    .foregroundStyle(.compound.textPrimary)
+                    .multilineTextAlignment(.center)
+                    .lineLimit(2)
+            }
+            
+            if let inviter = context.viewState.roomDetails?.inviter {
+                VStack(spacing: 8) {
+                    Text(L10n.screenJoinRoomInvitedBy)
                        .font(.compound.bodyMD)
-                        .foregroundStyle(.compound.textSecondary)
+                        .foregroundStyle(.compound.textPrimary)
                        .multilineTextAlignment(.center)
-                        .lineLimit(3)
-                }
-                
-                if context.viewState.mode == .knockable {
-                    knockMessage
-                        .padding(.top, 19)
+                    
+                    LoadableAvatarImage(url: inviter.avatarURL,
+                                        name: inviter.displayName,
+                                        contentID: inviter.id,
+                                        avatarSize: .custom(52),
+                                        mediaProvider: context.mediaProvider)
+                        .accessibilityHidden(true)
+                    
+                    VStack(spacing: 4) {
+                        if let displayName = inviter.displayName {
+                            Text(displayName)
+                                .font(.compound.bodyLGSemibold)
+                                .foregroundStyle(.compound.textPrimary)
+                                .multilineTextAlignment(.center)
+                        }
+                        
+                        Text(inviter.id)
+                            .font(.compound.bodySM)
+                            .foregroundStyle(.compound.textSecondary)
+                            .multilineTextAlignment(.center)
+                    }
                }
+                .accessibilityElement(children: .combine)
+                .padding(.top, 16)
+            }
+            
+            if context.viewState.mode == .knockable {
+                knockMessage
+                    .padding(.top, 19)
            }
        }
    }
@@ -304,67 +327,66 @@ struct JoinRoomScreen: View {
 // MARK: - Previews

 struct JoinRoomScreen_Previews: PreviewProvider, TestablePreview {
-    static let unknownViewModel = makeViewModel(mode: .unknown)
-    static let joinableViewModel = makeViewModel(mode: .joinable)
-    static let restrictedViewModel = makeViewModel(mode: .restricted, canJoinRoom: false)
-    static let restrictedJoinableViewModel = makeViewModel(mode: .restricted)
-    static let inviteRequiredViewModel = makeViewModel(mode: .inviteRequired)
-    static let invitedViewModel = makeViewModel(mode: .invited(isDM: false))
-    static let invitedDMViewModel = makeViewModel(mode: .invited(isDM: true))
-    static let invitedViewModelWithHiddenAvatars = makeViewModel(mode: .invited(isDM: false), hideInviteAvatars: true)
-    static let invitedDMViewModelWithHiddenAvatars = makeViewModel(mode: .invited(isDM: true), hideInviteAvatars: true)
-    static let knockableViewModel = makeViewModel(mode: .knockable)
-    static let knockedViewModel = makeViewModel(mode: .knocked)
-    static let bannedViewModel = makeViewModel(mode: .banned(sender: "Bob", reason: "Spamming"))
-    static let forbiddenViewModel = makeViewModel(mode: .forbidden)
+    static let previewWrappers: [JoinRoomScreenPreviewWrapper] = [
+        .init(mode: .unknown),
+        .init(mode: .joinable),
+        .init(mode: .restricted, canJoinRoom: false),
+        .init(mode: .restricted, customPreviewName: "RestrictedJoinable"),
+        .init(mode: .inviteRequired),
+        .init(mode: .invited(isDM: false)),
+        .init(mode: .invited(isDM: true)),
+        .init(mode: .invited(isDM: false), hideInviteAvatars: true, customPreviewName: "InvitedWithHiddenAvatars"),
+        .init(mode: .knockable),
+        .init(mode: .knocked),
+        .init(mode: .banned(sender: "Bob", reason: "Spamming")),
+        .init(mode: .forbidden)
+    ]
    
    static var previews: some View {
-        makePreview(viewModel: unknownViewModel, mode: .unknown)
-        makePreview(viewModel: joinableViewModel, mode: .joinable)
-        makePreview(viewModel: restrictedViewModel, mode: .restricted)
-        makePreview(viewModel: restrictedJoinableViewModel, mode: .restricted,
-                    customPreviewName: "RestrictedJoinable")
-        makePreview(viewModel: inviteRequiredViewModel, mode: .inviteRequired)
-        makePreview(viewModel: invitedViewModel, mode: .invited(isDM: false))
-        makePreview(viewModel: invitedDMViewModel, mode: .invited(isDM: true))
-        makePreview(viewModel: invitedViewModelWithHiddenAvatars,
-                    mode: .invited(isDM: false),
-                    customPreviewName: "InvitedWithHiddenAvatars")
-        makePreview(viewModel: knockableViewModel, mode: .knockable)
-        makePreview(viewModel: knockedViewModel, mode: .knocked)
-        makePreview(viewModel: bannedViewModel, mode: .banned(sender: nil, reason: nil))
-        makePreview(viewModel: forbiddenViewModel, mode: .forbidden)
-    }
-    
-    @ViewBuilder
-    static func makePreview(viewModel: JoinRoomScreenViewModel,
-                            mode: JoinRoomScreenMode,
-                            customPreviewName: String? = nil) -> some View {
-        if mode == .forbidden {
-            NavigationStack {
-                JoinRoomScreen(context: viewModel.context)
-            }
-            .snapshotPreferences(expect: viewModel.context.$viewState.map { state in
-                state.mode == .forbidden
-            })
-            .onAppear {
-                forbiddenViewModel.context.send(viewAction: .join)
-            }
-            .previewDisplayName(customPreviewName ?? mode.previewDisplayName)
-        } else {
-            NavigationStack {
-                JoinRoomScreen(context: viewModel.context)
-            }
-            .snapshotPreferences(expect: viewModel.context.$viewState.map { state in
-                state.roomDetails != nil
-            })
-            .previewDisplayName(customPreviewName ?? mode.previewDisplayName)
+        ForEach(previewWrappers) { wrapper in
+            wrapper.preview
        }
    }
+}
+
+struct JoinRoomScreenSpace_Previews: PreviewProvider, TestablePreview {
+    static let previewWrappers: [JoinRoomScreenPreviewWrapper] = [
+        .init(isSpace: true, mode: .joinable),
+        .init(isSpace: true, mode: .restricted, canJoinRoom: false),
+        .init(isSpace: true, mode: .restricted, customPreviewName: "RestrictedJoinable"),
+        .init(isSpace: true, mode: .inviteRequired),
+        .init(isSpace: true, mode: .invited(isDM: false)),
+        .init(isSpace: true, mode: .invited(isDM: false), hideInviteAvatars: true, customPreviewName: "InvitedWithHiddenAvatars"),
+        .init(isSpace: true, mode: .knockable),
+        .init(isSpace: true, mode: .knocked),
+        .init(isSpace: true, mode: .banned(sender: "Bob", reason: "Spamming")),
+        .init(isSpace: true, mode: .forbidden)
+    ]
    
-    static func makeViewModel(mode: JoinRoomScreenMode,
-                              canJoinRoom: Bool = true,
-                              hideInviteAvatars: Bool = false) -> JoinRoomScreenViewModel {
+    static var previews: some View {
+        ForEach(previewWrappers) { wrapper in
+            wrapper.preview
+        }
+    }
+}
+
+@MainActor
+struct JoinRoomScreenPreviewWrapper: Identifiable {
+    let id = UUID()
+    let viewModel: JoinRoomScreenViewModel
+    let mode: JoinRoomScreenMode
+    let isSpace: Bool
+    let customPreviewName: String?
+    
+    init(isSpace: Bool = false,
+         mode: JoinRoomScreenMode,
+         canJoinRoom: Bool = true,
+         hideInviteAvatars: Bool = false,
+         customPreviewName: String? = nil) {
+        self.mode = mode
+        self.isSpace = isSpace
+        self.customPreviewName = customPreviewName
+        
        let appSettings = AppSettings()
        appSettings.knockingEnabled = true
        
@@ -419,17 +441,20 @@ struct JoinRoomScreen_Previews: PreviewProvider, TestablePreview {
            break
        }
        
-        return JoinRoomScreenViewModel(roomID: "1",
-                                       via: [],
-                                       appSettings: appSettings,
-                                       userSession: UserSessionMock(.init(clientProxy: clientProxy)),
-                                       userIndicatorController: ServiceLocator.shared.userIndicatorController)
+        let source: JoinRoomScreenSource = if isSpace {
+            .space(SpaceRoomProxyMock(mode: mode))
+        } else {
+            .generic(roomID: "1", via: [])
+        }
+        
+        viewModel = JoinRoomScreenViewModel(source: source,
+                                            appSettings: appSettings,
+                                            userSession: UserSessionMock(.init(clientProxy: clientProxy)),
+                                            userIndicatorController: ServiceLocator.shared.userIndicatorController)
    }
-}
-
-private extension JoinRoomScreenMode {
+    
    var previewDisplayName: String {
-        switch self {
+        switch mode {
        case .unknown:
            return "Unknown"
        case .loading:
@@ -452,4 +477,30 @@ private extension JoinRoomScreenMode {
            return "Forbidden"
        }
    }
+    
+    @ViewBuilder
+    var preview: some View {
+        let previewDisplayName = customPreviewName ?? previewDisplayName
+        let previewDisplayNameSuffix = isSpace ? " Space" : ""
+        if mode == .forbidden {
+            NavigationStack {
+                JoinRoomScreen(context: viewModel.context)
+            }
+            .snapshotPreferences(expect: viewModel.context.$viewState.map { state in
+                state.mode == .forbidden
+            })
+            .onAppear {
+                viewModel.context.send(viewAction: .join)
+            }
+            .previewDisplayName(previewDisplayName + previewDisplayNameSuffix)
+        } else {
+            NavigationStack {
+                JoinRoomScreen(context: viewModel.context)
+            }
+            .snapshotPreferences(expect: viewModel.context.$viewState.map { state in
+                state.roomDetails != nil
+            })
+            .previewDisplayName(previewDisplayName + previewDisplayNameSuffix)
+        }
+    }
 }