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
@@ -746,8 +746,7 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
    }
    
    private func presentJoinRoomScreen(via: [String], animated: Bool) {
-        let coordinator = JoinRoomScreenCoordinator(parameters: .init(roomID: roomID,
-                                                                      via: via,
+        let coordinator = JoinRoomScreenCoordinator(parameters: .init(source: .generic(roomID: roomID, via: via),
                                                                      userSession: userSession,
                                                                      userIndicatorController: flowParameters.userIndicatorController,
                                                                      appSettings: flowParameters.appSettings))
@@ -236,8 +236,7 @@ class SpaceFlowCoordinator: FlowCoordinatorProtocol {
    private func presentJoinSpaceScreen() {
        guard case let .joinSpace(spaceRoomProxy) = entryPoint else { fatalError("Attempting to join a space with the wrong entry point.") }
        
-        let parameters = JoinRoomScreenCoordinatorParameters(roomID: spaceRoomProxy.id,
-                                                             via: [],
+        let parameters = JoinRoomScreenCoordinatorParameters(source: .space(spaceRoomProxy),
                                                             userSession: flowParameters.userSession,
                                                             userIndicatorController: flowParameters.userIndicatorController,
                                                             appSettings: flowParameters.appSettings)
@@ -1714,7 +1714,7 @@ internal enum L10n {
  internal static var screenJoinRoomDeclineAndBlockButtonTitle: String { return L10n.tr("Localizable", "screen_join_room_decline_and_block_button_title") }
  /// Joining failed
  internal static var screenJoinRoomFailMessage: String { return L10n.tr("Localizable", "screen_join_room_fail_message") }
-  /// This room is either invite-only or there might be restrictions to access at space level.
+  /// You either need to be invited to join or there might be restrictions to access.
  internal static var screenJoinRoomFailReason: String { return L10n.tr("Localizable", "screen_join_room_fail_reason") }
  /// Forget
  internal static var screenJoinRoomForgetAction: String { return L10n.tr("Localizable", "screen_join_room_forget_action") }
@@ -137,3 +137,43 @@ extension [SpaceRoomProxyProtocol] {
        ]
    }
 }
+
+extension SpaceRoomProxyMock {
+    convenience init(mode: JoinRoomScreenMode) {
+        var state: Membership?
+        var joinRule: JoinRule?
+        
+        switch mode {
+        case .joinable:
+            joinRule = .public
+        case .restricted:
+            joinRule = .restricted(rules: [])
+        case .inviteRequired:
+            joinRule = .private
+        case .invited:
+            state = .invited
+            joinRule = .private
+        case .knockable:
+            joinRule = .knock
+        case .knocked:
+            state = .knocked
+            joinRule = .knock
+        case .banned:
+            state = .banned
+        case .loading, .unknown, .forbidden:
+            break
+        }
+        
+        self.init(.init(id: "1",
+                        name: "The Three-Body Problem",
+                        avatarURL: .mockMXCAvatar,
+                        isSpace: true,
+                        childrenCount: 100,
+                        joinedMembersCount: 123,
+                        heroes: [.mockAlice, .mockBob, .mockCharlie],
+                        topic: "“Science and technology were the only keys to opening the door to the future, and people approached science with the faith and sincerity of elementary school students.”",
+                        canonicalAlias: "#3-body-problem:matrix.org",
+                        joinRule: joinRule,
+                        state: state))
+    }
+}
@@ -166,7 +166,7 @@ enum RoomAvatarSizeOnScreen {
        case .details:
            return 96
        case .joinRoom:
-            return 96
+            return 64
        case .spaceHeader:
            return 64
        }
@@ -0,0 +1,85 @@
+//
+// 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 JoinedMembersBadgeView: View {
+    let heroes: [UserProfileProxy]
+    let joinedCount: Int
+    
+    let mediaProvider: MediaProviderProtocol?
+    
+    var body: some View {
+        if heroes.isEmpty {
+            Label(title: title) {
+                CompoundIcon(\.userProfile, size: .small, relativeTo: .compound.bodyMD)
+                    .foregroundStyle(.compound.textSecondary)
+            }
+            .font(.compound.bodyMD)
+            .foregroundStyle(.compound.textSecondary)
+            .labelStyle(.custom(spacing: 4))
+            .padding(.trailing, 8)
+            .background(.compound.bgSubtleSecondary, in: Capsule())
+        } else {
+            Label(title: title) {
+                heroesFacePile
+            }
+            .font(.compound.bodyMD)
+            .foregroundStyle(.compound.textSecondary)
+            .labelStyle(.custom(spacing: 6))
+        }
+    }
+    
+    func title() -> Text {
+        Text("\(joinedCount)")
+    }
+    
+    var heroesFacePile: some View {
+        HStack(spacing: -8) {
+            ForEach(heroes.prefix(3).reversed()) { hero in
+                LoadableAvatarImage(url: hero.avatarURL,
+                                    name: hero.displayName,
+                                    contentID: hero.userID,
+                                    avatarSize: .user(on: .spaceHeader),
+                                    mediaProvider: mediaProvider)
+                    .mask {
+                        Circle()
+                            .fill(Color.white)
+                            .overlay {
+                                if hero != heroes.first {
+                                    Circle()
+                                        .inset(by: -2)
+                                        .fill(Color.black)
+                                        .offset(x: 12)
+                                }
+                            }
+                            .compositingGroup()
+                            .luminanceToAlpha()
+                    }
+            }
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct JoinedMembersBadgeView_Previews: PreviewProvider, TestablePreview {
+    static let mediaProvider = MediaProviderMock(configuration: .init())
+    
+    static var previews: some View {
+        VStack(spacing: 16) {
+            JoinedMembersBadgeView(heroes: [],
+                                   joinedCount: 123,
+                                   mediaProvider: mediaProvider)
+            
+            JoinedMembersBadgeView(heroes: [.mockAlice, .mockBob, .mockCharlie, .mockDan],
+                                   joinedCount: 123,
+                                   mediaProvider: mediaProvider)
+        }
+    }
+}
@@ -64,7 +64,9 @@ enum TestablePreviewsDictionary {
        "InviteUsersScreenSelectedItem_Previews" : InviteUsersScreenSelectedItem_Previews.self,
        "InviteUsersScreen_Previews" : InviteUsersScreen_Previews.self,
        "JoinRoomByAddressView_Previews" : JoinRoomByAddressView_Previews.self,
+        "JoinRoomScreenSpace_Previews" : JoinRoomScreenSpace_Previews.self,
        "JoinRoomScreen_Previews" : JoinRoomScreen_Previews.self,
+        "JoinedMembersBadgeView_Previews" : JoinedMembersBadgeView_Previews.self,
        "KnockRequestCell_Previews" : KnockRequestCell_Previews.self,
        "KnockRequestsBannerView_Previews" : KnockRequestsBannerView_Previews.self,
        "KnockRequestsListEmptyStateView_Previews" : KnockRequestsListEmptyStateView_Previews.self,
@@ -9,13 +9,26 @@ import Combine
 import SwiftUI

 struct JoinRoomScreenCoordinatorParameters {
-    let roomID: String
-    let via: [String]
+    let source: JoinRoomScreenSource
    let userSession: UserSessionProtocol
    let userIndicatorController: UserIndicatorControllerProtocol
    let appSettings: AppSettings
 }

+enum JoinRoomScreenSource {
+    case generic(roomID: String, via: [String])
+    case space(SpaceRoomProxyProtocol)
+    
+    func roomIDAndVia() -> (roomID: String, via: [String]) {
+        switch self {
+        case let .generic(roomID: roomID, via: via):
+            return (roomID: roomID, via: via)
+        case let .space(spaceRoomProxy):
+            return (roomID: spaceRoomProxy.id, via: spaceRoomProxy.via)
+        }
+    }
+}
+
 enum JoinRoomScreenJoinDetails {
    case roomID(String)
    case space(SpaceRoomListProxyProtocol)
@@ -38,8 +51,7 @@ final class JoinRoomScreenCoordinator: CoordinatorProtocol {
    }
    
    init(parameters: JoinRoomScreenCoordinatorParameters) {
-        viewModel = JoinRoomScreenViewModel(roomID: parameters.roomID,
-                                            via: parameters.via,
+        viewModel = JoinRoomScreenViewModel(source: parameters.source,
                                            appSettings: parameters.appSettings,
                                            userSession: parameters.userSession,
                                            userIndicatorController: parameters.userIndicatorController)
@@ -5,7 +5,8 @@
 // Please see LICENSE files in the repository root for full details.
 //

-import Foundation
+import Compound
+import SwiftUI

 enum JoinRoomScreenViewModelAction {
    case joined(JoinRoomScreenJoinDetails)
@@ -41,9 +42,13 @@ struct JoinRoomScreenRoomDetails {
    let canonicalAlias: String?
    let avatar: RoomAvatar?
    let memberCount: Int?
+    let heroes: [UserProfileProxy]
    let inviter: RoomInviterDetails?
    let isDirect: Bool?
+    
    let isSpace: Bool?
+    let childrenCount: Int?
+    let spaceVisibility: SpaceRoomProxyVisibility?
 }

 struct JoinRoomScreenViewState: BindableState {
@@ -70,16 +75,40 @@ struct JoinRoomScreenViewState: BindableState {
    }
    
    var subtitle: String? {
-        switch mode {
-        case .invited(isDM: true):
-            if let inviter = roomDetails?.inviter {
-                return inviter.displayName != nil ? inviter.id : nil
+        if roomDetails?.isSpace == true, let spaceVisibilityTitle, let childrenCount = roomDetails?.childrenCount {
+            return L10n.screenSpaceListDetails(spaceVisibilityTitle, L10n.commonRooms(childrenCount))
+        } else {
+            switch mode {
+            case .invited(isDM: true):
+                if let inviter = roomDetails?.inviter {
+                    return inviter.displayName != nil ? inviter.id : nil
+                }
+                return nil
+            case .loading, .unknown, .knocked:
+                return nil
+            default:
+                return roomDetails?.canonicalAlias
            }
-            return nil
-        case .loading, .unknown, .knocked:
-            return nil
-        default:
-            return roomDetails?.canonicalAlias
+        }
+    }
+    
+    var subtitleIcon: KeyPath<CompoundIcons, Image>? {
+        guard roomDetails?.isSpace == true else { return nil }
+        
+        return switch roomDetails?.spaceVisibility {
+        case .public: \.public
+        case .private: \.lock
+        case .restricted(let parentName): \.space
+        case .none: \.lock
+        }
+    }
+    
+    var spaceVisibilityTitle: String? {
+        switch roomDetails?.spaceVisibility {
+        case .public: L10n.commonPublicSpace
+        case .private: L10n.commonPrivateSpace
+        case .restricted(let parentName): L10n.screenSpaceListParentSpace(parentName)
+        case .none: L10n.commonPrivateSpace
        }
    }
    
@@ -88,7 +117,7 @@ struct JoinRoomScreenViewState: BindableState {
        // https://github.com/matrix-org/matrix-rust-sdk/issues/4825
        if isDMInvite, let inviter = roomDetails?.inviter {
            .heroes([.init(userID: inviter.id, displayName: inviter.displayName, avatarURL: hideInviteAvatars ? nil : inviter.avatarURL)])
-        } else if let roomDetails, let avatar = roomDetails.avatar {
+        } else if let avatar = roomDetails?.avatar {
            shouldHideAvatars ? avatar.removingAvatar : avatar
        } else if let name = roomDetails?.name {
            .room(id: roomID, name: name, avatarURL: nil)
@@ -12,8 +12,7 @@ import SwiftUI
 typealias JoinRoomScreenViewModelType = StateStoreViewModel<JoinRoomScreenViewState, JoinRoomScreenViewAction>

 class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewModelProtocol {
-    private let roomID: String
-    private let via: [String]
+    private let source: JoinRoomScreenSource
    private let appSettings: AppSettings
    private let clientProxy: ClientProxyProtocol
    private let userIndicatorController: UserIndicatorControllerProtocol
@@ -28,17 +27,16 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
        actionsSubject.eraseToAnyPublisher()
    }

-    init(roomID: String,
-         via: [String],
+    init(source: JoinRoomScreenSource,
         appSettings: AppSettings,
         userSession: UserSessionProtocol,
         userIndicatorController: UserIndicatorControllerProtocol) {
-        self.roomID = roomID
-        self.via = via
+        self.source = source
        self.appSettings = appSettings
        clientProxy = userSession.clientProxy
        self.userIndicatorController = userIndicatorController
        
+        let (roomID, _) = source.roomIDAndVia()
        super.init(initialViewState: JoinRoomScreenViewState(roomID: roomID), mediaProvider: userSession.mediaProvider)
        
        clientProxy.hideInviteAvatarsPublisher
@@ -100,21 +98,26 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
        
        await updateRoom()
        
-        switch await clientProxy.roomPreviewForIdentifier(roomID, via: via) {
-        case .success(let roomPreview):
+        switch source {
+        case .generic(let roomID, let via):
+            switch await clientProxy.roomPreviewForIdentifier(roomID, via: via) {
+            case .success(let roomPreview):
+                isLoadingPreview = false
+                self.roomPreview = roomPreview
+                await updateRoomDetails()
+            case .failure(.roomPreviewIsPrivate):
+                // Handled by the mode, we don't need an error indicator.
+                isLoadingPreview = false
+            case .failure:
+                hideLoadingIndicator()
+                state.bindings.alertInfo = .init(id: .loadingError,
+                                                 title: L10n.commonError,
+                                                 message: L10n.screenJoinRoomLoadingAlertMessage,
+                                                 primaryButton: .init(title: L10n.actionTryAgain) { [weak self] in Task { await self?.loadRoomDetails() }},
+                                                 secondaryButton: .init(title: L10n.actionCancel, role: .cancel) { [weak self] in self?.actionsSubject.send(.dismiss) })
+            }
+        case .space(let spaceRoomProxyProtocol):
            isLoadingPreview = false
-            self.roomPreview = roomPreview
-            await updateRoomDetails()
-        case .failure(.roomPreviewIsPrivate):
-            // Handled by the mode, we don't need an error indicator.
-            isLoadingPreview = false
-        case .failure:
-            hideLoadingIndicator()
-            state.bindings.alertInfo = .init(id: .loadingError,
-                                             title: L10n.commonError,
-                                             message: L10n.screenJoinRoomLoadingAlertMessage,
-                                             primaryButton: .init(title: L10n.actionTryAgain) { [weak self] in Task { await self?.loadRoomDetails() }},
-                                             secondaryButton: .init(title: L10n.actionCancel, role: .cancel) { [weak self] in self?.actionsSubject.send(.dismiss) })
        }
        
        hideLoadingIndicator()
@@ -127,7 +130,7 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
        // of giving us information for non-joined rooms (at least not on synapse)
        // See if we known about the room locally and, if so, have that
        // take priority over the preview one.
-        if let room = await clientProxy.roomForIdentifier(roomID) {
+        if let room = await clientProxy.roomForIdentifier(state.roomID) {
            self.room = room
            await updateRoomDetails()
        }
@@ -164,7 +167,17 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
        default:
            break
        }
-
+        
+        switch source {
+        case .generic(let roomID, _):
+            await updateGenericRoomDetails(roomID: roomID, roomInfo: roomInfo, inviter: inviter)
+        case .space(let spaceRoomProxy):
+            await updateSpaceRoomDetails(spaceRoomProxy: spaceRoomProxy, inviter: inviter)
+        }
+        await updateMode()
+    }
+    
+    private func updateGenericRoomDetails(roomID: String, roomInfo: BaseRoomInfoProxyProtocol?, inviter: RoomInviterDetails?) async {
        let info = roomPreview?.info ?? roomInfo
        let avatar: RoomAvatar? = if let avatar = info?.avatar {
            avatar
@@ -178,11 +191,26 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
                                                      canonicalAlias: info?.canonicalAlias,
                                                      avatar: avatar,
                                                      memberCount: info?.joinedMembersCount,
+                                                      heroes: [],
                                                      inviter: inviter,
                                                      isDirect: info?.isDirect,
-                                                      isSpace: info?.isSpace)
-        
-        await updateMode()
+                                                      isSpace: info?.isSpace,
+                                                      childrenCount: nil,
+                                                      spaceVisibility: nil)
+    }
+    
+    private func updateSpaceRoomDetails(spaceRoomProxy: SpaceRoomProxyProtocol, inviter: RoomInviterDetails?) async {
+        state.roomDetails = JoinRoomScreenRoomDetails(name: spaceRoomProxy.computedName,
+                                                      topic: spaceRoomProxy.topic,
+                                                      canonicalAlias: spaceRoomProxy.canonicalAlias,
+                                                      avatar: spaceRoomProxy.avatar,
+                                                      memberCount: spaceRoomProxy.joinedMembersCount,
+                                                      heroes: spaceRoomProxy.heroes,
+                                                      inviter: inviter,
+                                                      isDirect: spaceRoomProxy.isDirect,
+                                                      isSpace: spaceRoomProxy.isSpace,
+                                                      childrenCount: spaceRoomProxy.childrenCount,
+                                                      spaceVisibility: spaceRoomProxy.visibility)
    }
    
    private func updateMode() async {
@@ -191,12 +219,32 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
            return
        }
        
-        if roomPreview == nil, room == nil {
+        if case .generic = source, roomPreview == nil, room == nil {
            state.mode = .unknown
            return
        }
        
-        if let roomPreview {
+        if case .space(let spaceRoomProxy) = source {
+            switch spaceRoomProxy.state {
+            case .invited:
+                state.mode = .invited(isDM: spaceRoomProxy.isDirect == true && spaceRoomProxy.joinedMembersCount == 1)
+            case .knocked:
+                state.mode = .knocked
+            case .banned:
+                state.mode = .banned(sender: nil, reason: nil)
+            default:
+                switch spaceRoomProxy.joinRule {
+                case .private, .invite:
+                    state.mode = .inviteRequired
+                case .knock, .knockRestricted:
+                    state.mode = appSettings.knockingEnabled ? .knockable : .joinable
+                case .restricted(let rules):
+                    state.mode = clientProxy.canJoinRoom(with: rules) ? .joinable : .restricted
+                default:
+                    state.mode = .joinable
+                }
+            }
+        } else if let roomPreview {
            let membershipDetails = await roomPreview.ownMembershipDetails
            
            switch roomPreview.info.membership {
@@ -259,6 +307,7 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
                }
            }
        } else {
+            let (roomID, via) = source.roomIDAndVia()
            switch await clientProxy.joinRoom(roomID, via: via) {
            case .success:
                await finishJoinAction()
@@ -279,6 +328,7 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
    }
    
    private func finishJoinAction() async {
+        let roomID = state.roomID
        appSettings.seenInvites.remove(roomID)
        
        guard state.roomDetails?.isSpace == true else {
@@ -313,6 +363,7 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
                userIndicatorController.submitIndicator(.init(title: L10n.errorUnknown))
            }
        } else {
+            let (roomID, via) = source.roomIDAndVia()
            switch await clientProxy.knockRoom(roomID,
                                               via: via,
                                               message: state.bindings.knockMessage.isBlank ? nil : state.bindings.knockMessage) {
@@ -332,7 +383,7 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
            return
        }
        
-        let roomName = roomDetails.name ?? roomID
+        let roomName = roomDetails.name ?? state.roomID
        state.bindings.alertInfo = .init(id: .declineInvite,
                                         title: L10n.screenInvitesDeclineChatTitle,
                                         message: L10n.screenInvitesDeclineChatMessage(roomName),
@@ -373,11 +424,10 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
    
    @discardableResult
    private func declineInvite() async -> Bool {
-        defer {
-            userIndicatorController.retractIndicatorWithId(roomID)
-        }
+        let roomID = state.roomID
        
        userIndicatorController.submitIndicator(UserIndicator(id: roomID, type: .modal, title: L10n.commonLoading, persistent: true))
+        defer { userIndicatorController.retractIndicatorWithId(roomID) }
        
        guard case let .invited(roomProxy) = room else {
            userIndicatorController.submitIndicator(.init(title: L10n.errorUnknown))
@@ -398,11 +448,10 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
    }
    
    private func cancelKnock() async {
-        defer {
-            userIndicatorController.retractIndicatorWithId(roomID)
-        }
+        let roomID = state.roomID
        
        userIndicatorController.submitIndicator(UserIndicator(id: roomID, type: .modal, title: L10n.commonLoading, persistent: true))
+        defer { userIndicatorController.retractIndicatorWithId(roomID) }
        
        guard case let .knocked(roomProxy) = room else {
            userIndicatorController.submitIndicator(.init(title: L10n.errorUnknown))
@@ -419,11 +468,10 @@ class JoinRoomScreenViewModel: JoinRoomScreenViewModelType, JoinRoomScreenViewMo
    }
    
    private func forgetRoom() async {
-        defer {
-            userIndicatorController.retractIndicatorWithId(roomID)
-        }
+        let roomID = state.roomID
        
        userIndicatorController.submitIndicator(UserIndicator(id: roomID, type: .modal, title: L10n.commonLoading, persistent: true))
+        defer { userIndicatorController.retractIndicatorWithId(roomID) }
        
        guard case let .banned(roomProxy) = room else {
            userIndicatorController.submitIndicator(.init(title: L10n.errorUnknown))
@@ -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)
+        }
+    }
 }
@@ -29,7 +29,7 @@ struct SpaceHeaderView: View {
                
                spaceDetails
                
-                SpaceHeaderMembersView(heroes: spaceRoomProxy.heroes,
+                JoinedMembersBadgeView(heroes: spaceRoomProxy.heroes,
                                       joinedCount: spaceRoomProxy.joinedMembersCount,
                                       mediaProvider: mediaProvider)
            }
@@ -92,64 +92,6 @@ struct SpaceHeaderView: View {
    }
 }

-struct SpaceHeaderMembersView: View {
-    let heroes: [UserProfileProxy]
-    let joinedCount: Int
-    
-    let mediaProvider: MediaProviderProtocol?
-    
-    var body: some View {
-        if heroes.isEmpty {
-            Label(title: title) {
-                CompoundIcon(\.userProfile, size: .small, relativeTo: .compound.bodyMD)
-                    .foregroundStyle(.compound.textSecondary)
-            }
-            .font(.compound.bodyMD)
-            .foregroundStyle(.compound.textSecondary)
-            .labelStyle(.custom(spacing: 4))
-            .padding(.trailing, 8)
-            .background(.compound.bgSubtleSecondary, in: Capsule())
-        } else {
-            Label(title: title) {
-                heroesFacePile
-            }
-            .font(.compound.bodyMD)
-            .foregroundStyle(.compound.textSecondary)
-            .labelStyle(.custom(spacing: 6))
-        }
-    }
-    
-    func title() -> Text {
-        Text("\(joinedCount)")
-    }
-    
-    var heroesFacePile: some View {
-        HStack(spacing: -8) {
-            ForEach(heroes.prefix(3).reversed()) { hero in
-                LoadableAvatarImage(url: hero.avatarURL,
-                                    name: hero.displayName,
-                                    contentID: hero.userID,
-                                    avatarSize: .user(on: .spaceHeader),
-                                    mediaProvider: mediaProvider)
-                    .mask {
-                        Circle()
-                            .fill(Color.white)
-                            .overlay {
-                                if hero != heroes.first {
-                                    Circle()
-                                        .inset(by: -2)
-                                        .fill(Color.black)
-                                        .offset(x: 12)
-                                }
-                            }
-                            .compositingGroup()
-                            .luminanceToAlpha()
-                    }
-            }
-        }
-    }
-}
-
 // MARK: - Previews

 struct SpaceHeaderView_Previews: PreviewProvider, TestablePreview {