room members list redesign

2026-11-03 06:55:59 +00:00 · 2025-11-20 20:11:55 +01:00
parent bfa287b3f8
commit cb28597eb6
33 changed files with 156 additions and 93 deletions
@@ -22,7 +22,7 @@ struct RoomMembersListScreen: View {
                        .tag(RoomMembersListScreenMode.banned)
                }
                .pickerStyle(.segmented)
-                .padding(.horizontal, 16)
+                .padding(ListRowPadding.insets)
            }
            
            if context.mode == .members {
@@ -38,15 +38,14 @@ struct RoomMembersListScreen: View {
                    .foregroundStyle(.secondary)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: .infinity)
-                    .background(.compound.bgCanvasDefault)
            }
        }
+        .compoundList()
        .searchable(text: $context.searchQuery,
                    placement: .navigationBarDrawer(displayMode: .always),
                    prompt: L10n.commonSearchForSomeone)
        .compoundSearchField()
        .autocorrectionDisabled()
-        .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
        .navigationTitle(L10n.commonPeople)
        .navigationBarTitleDisplayMode(.inline)
        .sheet(item: $context.manageMemeberViewModel) {
@@ -59,41 +58,44 @@ struct RoomMembersListScreen: View {
    
    // MARK: - Private
    
+    @ViewBuilder
    var roomMembers: some View {
-        LazyVStack(alignment: .leading, spacing: 12) {
-            membersSection(entries: context.viewState.visibleInvitedMembers, sectionTitle: L10n.screenRoomMemberListPendingHeaderTitle)
-            membersSection(entries: context.viewState.visibleJoinedMembers, sectionTitle: L10n.screenRoomMemberListHeaderTitle(Int(context.viewState.joinedMembersCount)))
-        }
+        membersSection(entries: context.viewState.visibleInvitedMembers, section: .invited)
+        membersSection(entries: context.viewState.visibleJoinedMembers, section: .joined)
    }
    
    var bannedUsers: some View {
-        LazyVStack(alignment: .leading, spacing: 12) {
-            membersSection(entries: context.viewState.visibleBannedMembers)
-        }
+        membersSection(entries: context.viewState.visibleBannedMembers, section: .banned)
    }
    
    @ViewBuilder
-    private func membersSection(entries: [RoomMemberListScreenEntry], sectionTitle: String? = nil) -> some View {
+    private func membersSection(entries: [RoomMemberListScreenEntry], section: MembersSection) -> some View {
        if !entries.isEmpty {
            Section {
-                ForEach(entries, id: \.member.id) { entry in
-                    RoomMembersListScreenMemberCell(listEntry: entry, context: context)
+                LazyVStack(alignment: .leading, spacing: 0) {
+                    ForEach(entries, id: \.member.id) { entry in
+                        ListRow(kind: .custom {
+                            RoomMembersListScreenMemberCell(listEntry: entry, isLast: entries.last == entry, context: context)
+                        })
+                    }
                }
+                .background(.compound.bgCanvasDefault)
+                .clipShape(sectionShape)
            } header: {
-                if let sectionTitle {
-                    Text(sectionTitle)
-                        .foregroundColor(.compound.textSecondary)
-                        .font(.compound.bodyLG)
-                        .padding(.top, 12)
-                } else {
-                    // Put something in here to maintain constant top padding.
-                    Spacer().frame(height: 0)
-                }
+                section.header(count: entries.count)
            }
            .padding(.horizontal, 16)
        }
    }
    
+    private var sectionShape: AnyShape {
+        if #available(iOS 26, *) {
+            AnyShape(ConcentricRectangle(corners: .concentric(minimum: 26)))
+        } else {
+            AnyShape(RoundedRectangle(cornerRadius: 8))
+        }
+    }
+    
    @ToolbarContentBuilder
    private var toolbar: some ToolbarContent {
        ToolbarItem(placement: .confirmationAction) {
@@ -106,6 +108,40 @@ struct RoomMembersListScreen: View {
    }
 }

+private enum MembersSection {
+    case joined
+    case invited
+    case banned
+    
+    private func sectionTitle(count: Int) -> String {
+        switch self {
+        case .banned:
+            L10n.screenRoomMemberListBannedHeaderTitle(count)
+        case .invited:
+            L10n.screenRoomMemberListHeaderTitle(count)
+        case .joined:
+            L10n.screenRoomMemberListPendingHeaderTitle(count)
+        }
+    }
+    
+    @ViewBuilder
+    private func text(count: Int) -> some View {
+        switch self {
+        case .invited, .joined:
+            Text(sectionTitle(count: count))
+        case .banned:
+            Text(sectionTitle(count: count))
+                .foregroundStyle(.compound.bgCriticalPrimary)
+        }
+    }
+    
+    func header(count: Int) -> some View {
+        text(count: count)
+            .compoundListSectionHeader()
+            .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}
+
 // MARK: - Previews

 struct RoomMembersListScreen_Previews: PreviewProvider, TestablePreview {
@@ -6,28 +6,30 @@
 // Please see LICENSE files in the repository root for full details.
 //

+import Compound
 import SwiftUI

 struct RoomMembersListScreenMemberCell: View {
    let listEntry: RoomMemberListScreenEntry
+    let isLast: Bool
    let context: RoomMembersListScreenViewModel.Context

    var body: some View {
        Button {
            context.send(viewAction: .selectMember(listEntry.member))
        } label: {
-            HStack(spacing: 8) {
+            HStack(spacing: 16) {
                LoadableAvatarImage(url: avatarURL,
                                    name: avatarName,
                                    contentID: listEntry.member.id,
-                                    avatarSize: .user(on: .roomDetails),
+                                    avatarSize: .user(on: .roomMembersList),
                                    mediaProvider: context.mediaProvider)
                    .accessibilityHidden(true)
                
                HStack(alignment: .center, spacing: 4) {
-                    VStack(alignment: .leading, spacing: 0) {
+                    VStack(alignment: .leading, spacing: 2) {
                        Text(title)
-                            .font(.compound.bodyMDSemibold)
+                            .font(.compound.bodyLG)
                            .foregroundColor(.compound.textPrimary)
                            .lineLimit(1)
                        
@@ -44,11 +46,19 @@ struct RoomMembersListScreenMemberCell: View {
                    
                    if let role {
                        Text(role)
-                            .font(.compound.bodyXS)
+                            .font(.compound.bodyLG)
                            .foregroundStyle(.compound.textSecondary)
                    }
                }
+                .overlay(alignment: .bottom) {
+                    if !isLast {
+                        ListRowColor.separatorTint
+                            .frame(height: 1)
+                            .offset(x: 0, y: ListRowPadding.vertical)
+                    }
+                }
            }
+            .padding(ListRowPadding.insets)
            .frame(maxWidth: .infinity, alignment: .leading)
            .accessibilityElement(children: .combine)
        }
@@ -124,17 +134,17 @@ struct RoomMembersListMemberCell_Previews: PreviewProvider, TestablePreview {
                                                          userIndicatorController: ServiceLocator.shared.userIndicatorController,
                                                          analytics: ServiceLocator.shared.analytics)
    static var previews: some View {
-        VStack(spacing: 12) {
+        VStack(spacing: 0) {
            Section("Invited/Joined") {
                ForEach(members, id: \.member.id) { entry in
-                    RoomMembersListScreenMemberCell(listEntry: entry, context: viewModel.context)
+                    RoomMembersListScreenMemberCell(listEntry: entry, isLast: members.last == entry, context: viewModel.context)
                }
            }
            
            // Banned members should have their profiles hidden and the avatar should use the first letter from their user ID.
            Section("Banned") {
                ForEach(bannedMembers, id: \.member.id) { entry in
-                    RoomMembersListScreenMemberCell(listEntry: entry, context: viewModel.context)
+                    RoomMembersListScreenMemberCell(listEntry: entry, isLast: bannedMembers.last == entry, context: viewModel.context)
                }
            }
        }