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