Room details screen (#348)

* Create screen module

* Display details on header tap

* Add strings

* Add room avatar size on details

* Update members method signature

* Use room proxy values

* Create room members screen

* Display room members on tap

* Update previews and mock room proxy

* Commit project file

* Various tweaks and cleanup following code review

* More small tweaks + UI and screenshot tests

Co-authored-by: Stefan Ceriu <stefanc@matrix.org>

ElementX/Sources/Screens/RoomDetails/RoomDetailsCoordinator.swift

@@ -0,0 +1,72 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomDetailsCoordinatorParameters {
+    let navigationStackCoordinator: NavigationStackCoordinator
+    let roomProxy: RoomProxyProtocol
+    let mediaProvider: MediaProviderProtocol
+}
+
+enum RoomDetailsCoordinatorAction {
+    case cancel
+}
+
+final class RoomDetailsCoordinator: CoordinatorProtocol {
+    private let parameters: RoomDetailsCoordinatorParameters
+    private var viewModel: RoomDetailsViewModelProtocol
+    private var navigationStackCoordinator: NavigationStackCoordinator { parameters.navigationStackCoordinator }
+    
+    var callback: ((RoomDetailsCoordinatorAction) -> Void)?
+    
+    init(parameters: RoomDetailsCoordinatorParameters) {
+        self.parameters = parameters
+        
+        viewModel = RoomDetailsViewModel(roomProxy: parameters.roomProxy,
+                                         mediaProvider: parameters.mediaProvider)
+    }
+    
+    // MARK: - Public
+    
+    func start() {
+        viewModel.callback = { [weak self] action in
+            guard let self else { return }
+            MXLog.debug("RoomDetailsViewModel did complete with result: \(action).")
+            switch action {
+            case .peopleTapped:
+                self.showPeople()
+            case .cancel:
+                self.callback?(.cancel)
+            }
+        }
+    }
+        
+    func toPresentable() -> AnyView {
+        AnyView(RoomDetailsScreen(context: viewModel.context))
+    }
+
+    private func showPeople() {
+        let params = RoomMembersCoordinatorParameters(roomProxy: parameters.roomProxy,
+                                                      mediaProvider: parameters.mediaProvider)
+        let coordinator = RoomMembersCoordinator(parameters: params)
+        coordinator.callback = { [weak self] _ in
+            self?.navigationStackCoordinator.pop()
+        }
+
+        navigationStackCoordinator.push(coordinator)
+    }
+}

ElementX/Sources/Screens/RoomDetails/RoomDetailsModels.swift

@@ -0,0 +1,73 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+import UIKit
+
+// MARK: - Coordinator
+
+// MARK: View model
+
+enum RoomDetailsViewModelAction {
+    case peopleTapped
+    case cancel
+}
+
+// MARK: View
+
+struct RoomDetailsViewState: BindableState {
+    let roomId: String
+    let isEncrypted: Bool
+    let isDirect: Bool
+    var roomTitle = ""
+    var roomTopic: String?
+    var roomAvatar: UIImage?
+    var members: [RoomDetailsMember]
+    
+    var isLoadingMembers: Bool {
+        members.isEmpty
+    }
+
+    var bindings: RoomDetailsViewStateBindings
+}
+
+struct RoomDetailsViewStateBindings {
+    /// Information describing the currently displayed alert.
+    var alertInfo: AlertInfo<RoomDetailsErrorType>?
+}
+
+enum RoomDetailsErrorType: Hashable {
+    /// A specific error message shown in an alert.
+    case alert(String)
+}
+
+enum RoomDetailsViewAction {
+    case processTapPeople
+}
+
+struct RoomDetailsMember: Identifiable, Equatable {
+    let id: String
+    let name: String?
+    let avatarUrl: String?
+    // cached
+    var avatar: UIImage?
+
+    init(withProxy proxy: RoomMemberProxy) {
+        id = proxy.userId
+        name = proxy.displayName
+        avatarUrl = proxy.avatarUrl
+    }
+}

ElementX/Sources/Screens/RoomDetails/RoomDetailsViewModel.swift

@@ -0,0 +1,75 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+typealias RoomDetailsViewModelType = StateStoreViewModel<RoomDetailsViewState, RoomDetailsViewAction>
+
+class RoomDetailsViewModel: RoomDetailsViewModelType, RoomDetailsViewModelProtocol {
+    // MARK: - Properties
+
+    // MARK: Private
+
+    private let roomProxy: RoomProxyProtocol
+    private let mediaProvider: MediaProviderProtocol
+
+    // MARK: Public
+
+    var callback: ((RoomDetailsViewModelAction) -> Void)?
+
+    // MARK: - Setup
+
+    init(roomProxy: RoomProxyProtocol,
+         mediaProvider: MediaProviderProtocol) {
+        self.roomProxy = roomProxy
+        self.mediaProvider = mediaProvider
+        super.init(initialViewState: .init(roomId: roomProxy.id,
+                                           isEncrypted: roomProxy.isEncrypted,
+                                           isDirect: roomProxy.isDirect,
+                                           roomTitle: roomProxy.displayName ?? roomProxy.name ?? "Unknown Room",
+                                           roomTopic: roomProxy.topic,
+                                           members: [],
+                                           bindings: .init()))
+
+        Task {
+            switch await roomProxy.members() {
+            case .success(let members):
+                state.members = members.map { RoomDetailsMember(withProxy: $0) }
+            case .failure(let error):
+                MXLog.debug("Failed to retrieve room members: \(error)")
+                state.bindings.alertInfo = AlertInfo(id: .alert(ElementL10n.unknownError))
+            }
+        }
+
+        if let avatarURL = roomProxy.avatarURL {
+            Task {
+                if case let .success(avatar) = await mediaProvider.loadImageFromURLString(avatarURL,
+                                                                                          avatarSize: .room(on: .details)) {
+                    state.roomAvatar = avatar
+                }
+            }
+        }
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: RoomDetailsViewAction) async {
+        switch viewAction {
+        case .processTapPeople:
+            callback?(.peopleTapped)
+        }
+    }
+}

ElementX/Sources/Screens/RoomDetails/RoomDetailsViewModelProtocol.swift

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+
+@MainActor
+protocol RoomDetailsViewModelProtocol {
+    var callback: ((RoomDetailsViewModelAction) -> Void)? { get set }
+    var context: RoomDetailsViewModelType.Context { get }
+}

ElementX/Sources/Screens/RoomDetails/View/RoomDetailsScreen.swift

@@ -0,0 +1,171 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomDetailsScreen: View {
+    // MARK: Private
+    
+    @Environment(\.colorScheme) private var colorScheme
+    @ScaledMetric private var avatarSize = AvatarSize.room(on: .details).value
+    @ScaledMetric private var menuIconSize = 30.0
+    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
+
+    // MARK: Public
+    
+    @ObservedObject var context: RoomDetailsViewModel.Context
+    
+    // MARK: Views
+    
+    var body: some View {
+        Form {
+            headerSection
+
+            if let topic = context.viewState.roomTopic {
+                topicSection(with: topic)
+            }
+
+            aboutSection
+
+            if context.viewState.isEncrypted {
+                securitySection
+            }
+        }
+        .alert(item: $context.alertInfo) { $0.alert }
+        .navigationTitle(ElementL10n.roomDetailsTitle)
+    }
+
+    private var headerSection: some View {
+        VStack(spacing: 16.0) {
+            roomAvatarImage
+            Text(context.viewState.roomTitle)
+                .foregroundColor(.element.primaryContent)
+                .font(.element.headline)
+                .multilineTextAlignment(.center)
+        }
+        .frame(maxWidth: .infinity, alignment: .center)
+        .listRowBackground(Color.clear)
+        .padding(.top, 18)
+        .padding(.bottom, 42)
+    }
+
+    private func topicSection(with topic: String) -> some View {
+        Section(ElementL10n.roomSettingsTopic) {
+            Text(topic)
+                .foregroundColor(.element.secondaryContent)
+                .font(.element.footnote)
+        }
+    }
+
+    private var aboutSection: some View {
+        Section(ElementL10n.roomDetailsAboutSectionTitle) {
+            Button {
+                context.send(viewAction: .processTapPeople)
+            } label: {
+                HStack {
+                    Image(systemName: "person")
+                        .foregroundColor(.element.systemGray)
+                        .padding(4)
+                        .background(Color.element.systemGray6)
+                        .clipShape(Circle())
+                        .frame(width: menuIconSize, height: menuIconSize)
+                    Text(ElementL10n.bottomActionPeople)
+                        .foregroundColor(.element.primaryContent)
+                        .font(.body)
+                    Spacer()
+                    
+                    if context.viewState.isLoadingMembers {
+                        ProgressView()
+                    } else {
+                        Text(String(context.viewState.members.count))
+                            .foregroundColor(.element.secondaryContent)
+                            .font(.element.body)
+                        Image(systemName: "chevron.forward")
+                            .foregroundColor(.element.secondaryContent)
+                    }
+                }
+            }
+            .listRowInsets(listRowInsets)
+            .foregroundColor(.element.primaryContent)
+            .accessibilityIdentifier("peopleButton")
+            .disabled(context.viewState.isLoadingMembers)
+        }
+    }
+    
+    private var securitySection: some View {
+        Section(ElementL10n.roomProfileSectionSecurity) {
+            HStack(alignment: .center) {
+                Image(systemName: "lock.shield")
+                    .foregroundColor(.element.systemGray)
+                    .padding(4)
+                    .background(Color.element.systemGray6)
+                    .clipShape(Circle())
+                    .frame(width: menuIconSize, height: menuIconSize)
+                VStack(alignment: .leading) {
+                    Text(ElementL10n.encryptionEnabled)
+                        .foregroundColor(.element.primaryContent)
+                        .font(.element.body)
+                    Text(ElementL10n.encryptionEnabledTileDescription)
+                        .foregroundColor(.element.secondaryContent)
+                        .font(.element.footnote)
+                }
+                Spacer()
+                Image(systemName: "checkmark")
+                    .foregroundColor(.element.secondaryContent)
+            }
+        }
+    }
+
+    @ViewBuilder private var roomAvatarImage: some View {
+        if let avatar = context.viewState.roomAvatar {
+            Image(uiImage: avatar)
+                .resizable()
+                .scaledToFill()
+                .frame(width: avatarSize, height: avatarSize)
+                .clipShape(Circle())
+                .accessibilityIdentifier("roomAvatarImage")
+        } else {
+            PlaceholderAvatarImage(text: context.viewState.roomTitle,
+                                   contentId: context.viewState.roomId)
+                .clipShape(Circle())
+                .frame(width: avatarSize, height: avatarSize)
+                .accessibilityIdentifier("roomAvatarPlaceholderImage")
+        }
+    }
+}
+
+// MARK: - Previews
+
+struct RoomDetails_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            let members: [RoomMemberProxy] = [
+                .mockAlice,
+                .mockBob,
+                .mockCharlie
+            ]
+            let roomProxy = MockRoomProxy(displayName: "Room A",
+                                          topic: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                                          isDirect: false,
+                                          isEncrypted: true,
+                                          members: members)
+            let viewModel = RoomDetailsViewModel(roomProxy: roomProxy,
+                                                 mediaProvider: MockMediaProvider())
+            RoomDetailsScreen(context: viewModel.context)
+        }
+        .tint(.element.accent)
+    }
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersCoordinator.swift

@@ -0,0 +1,55 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomMembersCoordinatorParameters {
+    let roomProxy: RoomProxyProtocol
+    let mediaProvider: MediaProviderProtocol
+}
+
+enum RoomMembersCoordinatorAction {
+    case cancel
+}
+
+final class RoomMembersCoordinator: CoordinatorProtocol {
+    private let parameters: RoomMembersCoordinatorParameters
+    private var viewModel: RoomMembersViewModelProtocol
+    
+    var callback: ((RoomMembersCoordinatorAction) -> Void)?
+    
+    init(parameters: RoomMembersCoordinatorParameters) {
+        self.parameters = parameters
+        
+        viewModel = RoomMembersViewModel(roomProxy: parameters.roomProxy,
+                                         mediaProvider: parameters.mediaProvider)
+    }
+    
+    func start() {
+        viewModel.callback = { [weak self] action in
+            guard let self else { return }
+            MXLog.debug("RoomMembersViewModel did complete with result: \(action).")
+            switch action {
+            case .cancel:
+                self.callback?(.cancel)
+            }
+        }
+    }
+        
+    func toPresentable() -> AnyView {
+        AnyView(RoomMembersScreen(context: viewModel.context))
+    }
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersModels.swift

@@ -0,0 +1,50 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+
+enum RoomMembersViewModelAction {
+    case cancel
+}
+
+struct RoomMembersViewState: BindableState {
+    var members: [RoomDetailsMember]
+
+    var bindings: RoomMembersViewStateBindings
+
+    var visibleMembers: [RoomDetailsMember] {
+        if bindings.searchQuery.isEmpty {
+            return members
+        }
+
+        return members.lazy.filter { member in
+            member.id.localizedCaseInsensitiveContains(bindings.searchQuery) ||
+                member.name?.localizedCaseInsensitiveContains(bindings.searchQuery) ?? false
+        }
+    }
+}
+
+struct RoomMembersViewStateBindings {
+    var searchQuery = ""
+
+    /// Information describing the currently displayed alert.
+    var alertInfo: AlertInfo<RoomDetailsErrorType>?
+}
+
+enum RoomMembersViewAction {
+    case selectMember(id: String)
+    case loadMemberData(id: String)
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersViewModel.swift

@@ -0,0 +1,78 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+typealias RoomMembersViewModelType = StateStoreViewModel<RoomMembersViewState, RoomMembersViewAction>
+
+class RoomMembersViewModel: RoomMembersViewModelType, RoomMembersViewModelProtocol {
+    private let roomProxy: RoomProxyProtocol
+    private let mediaProvider: MediaProviderProtocol
+
+    var callback: ((RoomMembersViewModelAction) -> Void)?
+
+    init(roomProxy: RoomProxyProtocol,
+         mediaProvider: MediaProviderProtocol) {
+        self.roomProxy = roomProxy
+        self.mediaProvider = mediaProvider
+        super.init(initialViewState: .init(members: [],
+                                           bindings: .init()))
+
+        Task {
+            switch await roomProxy.members() {
+            case .success(let members):
+                state.members = members.map { RoomDetailsMember(withProxy: $0) }
+            case .failure(let error):
+                MXLog.debug("Failed to retrieve room members: \(error)")
+                state.bindings.alertInfo = AlertInfo(id: .alert(ElementL10n.unknownError))
+            }
+        }
+    }
+    
+    // MARK: - Public
+    
+    override func process(viewAction: RoomMembersViewAction) async {
+        switch viewAction {
+        case .selectMember(let id):
+            MXLog.debug("Member selected: \(id)")
+        case .loadMemberData(let id):
+            await loadAvatar(forMember: id)
+        }
+    }
+
+    private func loadAvatar(forMember memberId: String) async {
+        guard let member = state.members.first(where: { $0.id == memberId }) else {
+            return
+        }
+        if member.avatar != nil {
+            // already loaded
+            return
+        }
+        guard let avatarUrl = member.avatarUrl else {
+            // user has no avatar
+            return
+        }
+
+        switch await mediaProvider.loadImageFromURLString(avatarUrl, avatarSize: .user(on: .roomDetails)) {
+        case .success(let image):
+            if let index = state.members.firstIndex(where: { $0.id == memberId }) {
+                state.members[index].avatar = image
+            }
+        case .failure(let error):
+            MXLog.debug("Failed to retrieve room member avatar: \(error)")
+        }
+    }
+}

ElementX/Sources/Screens/RoomMembers/RoomMembersViewModelProtocol.swift

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+
+@MainActor
+protocol RoomMembersViewModelProtocol {
+    var callback: ((RoomMembersViewModelAction) -> Void)? { get set }
+    var context: RoomMembersViewModelType.Context { get }
+}

ElementX/Sources/Screens/RoomMembers/View/RoomMembersMemberCell.swift

@@ -0,0 +1,84 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomMembersMemberCell: View {
+    @ScaledMetric private var avatarSize = AvatarSize.user(on: .roomDetails).value
+
+    let member: RoomDetailsMember
+    let context: RoomMembersViewModel.Context
+
+    var body: some View {
+        Button {
+            context.send(viewAction: .selectMember(id: member.id))
+        } label: {
+            HStack {
+                if let avatar = member.avatar {
+                    Image(uiImage: avatar)
+                        .resizable()
+                        .scaledToFill()
+                        .frame(width: avatarSize, height: avatarSize)
+                        .clipShape(Circle())
+                        .accessibilityHidden(true)
+                } else {
+                    PlaceholderAvatarImage(text: member.name ?? "", contentId: member.id)
+                        .clipShape(Circle())
+                        .frame(width: avatarSize, height: avatarSize)
+                        .accessibilityHidden(true)
+                }
+
+                Text(member.name ?? "")
+                    .font(.element.callout.bold())
+                    .foregroundColor(.element.primaryContent)
+                    .lineLimit(1)
+
+                Spacer()
+            }
+            .accessibilityElement(children: .combine)
+            .task {
+                context.send(viewAction: .loadMemberData(id: member.id))
+            }
+        }
+    }
+}
+
+struct RoomMembersMemberCell_Previews: PreviewProvider {
+    static var previews: some View {
+        body.preferredColorScheme(.light)
+            .tint(.element.accent)
+        body.preferredColorScheme(.dark)
+            .tint(.element.accent)
+    }
+
+    static var body: some View {
+        let members: [RoomMemberProxy] = [
+            .mockAlice,
+            .mockBob,
+            .mockCharlie
+        ]
+        let roomProxy = MockRoomProxy(displayName: "Room A",
+                                      members: members)
+        let viewModel = RoomMembersViewModel(roomProxy: roomProxy,
+                                             mediaProvider: MockMediaProvider())
+
+        return VStack {
+            ForEach(members) { member in
+                RoomMembersMemberCell(member: .init(withProxy: member), context: viewModel.context)
+            }
+        }
+    }
+}

ElementX/Sources/Screens/RoomMembers/View/RoomMembersScreen.swift

@@ -0,0 +1,61 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+struct RoomMembersScreen: View {
+    @Environment(\.colorScheme) private var colorScheme
+
+    @ObservedObject var context: RoomMembersViewModel.Context
+    
+    var body: some View {
+        Form {
+            Section {
+                ForEach(context.viewState.visibleMembers) { member in
+                    RoomMembersMemberCell(member: member, context: context)
+                        .id(member.id)
+                }
+            } footer: {
+                Text(ElementL10n.roomTitleMembers(context.viewState.members.count))
+                    .foregroundColor(.element.secondaryContent)
+                    .font(.element.footnote)
+            }
+        }
+        .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
+        .alert(item: $context.alertInfo) { $0.alert }
+        .navigationTitle(ElementL10n.listMembers)
+    }
+}
+
+// MARK: - Previews
+
+struct RoomMembers_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            let members: [RoomMemberProxy] = [
+                .mockAlice,
+                .mockBob,
+                .mockCharlie
+            ]
+            let roomProxy = MockRoomProxy(displayName: "Room A",
+                                          members: members)
+            let viewModel = RoomMembersViewModel(roomProxy: roomProxy,
+                                                 mediaProvider: MockMediaProvider())
+            RoomMembersScreen(context: viewModel.context)
+        }
+        .tint(.element.accent)
+    }
+}

ElementX/Sources/Screens/RoomScreen/RoomScreenCoordinator.swift

@@ -18,10 +18,9 @@ import SwiftUI
 
 struct RoomScreenCoordinatorParameters {
     let navigationStackCoordinator: NavigationStackCoordinator
+    let roomProxy: RoomProxyProtocol
     let timelineController: RoomTimelineControllerProtocol
     let mediaProvider: MediaProviderProtocol
-    let roomName: String?
-    let roomAvatarUrl: String?
     let emojiProvider: EmojiProviderProtocol
 }
 
@@ -43,8 +42,8 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
         viewModel = RoomScreenViewModel(timelineController: parameters.timelineController,
                                         timelineViewFactory: RoomTimelineViewFactory(),
                                         mediaProvider: parameters.mediaProvider,
-                                        roomName: parameters.roomName,
-                                        roomAvatarUrl: parameters.roomAvatarUrl)
+                                        roomName: parameters.roomProxy.displayName ?? parameters.roomProxy.name,
+                                        roomAvatarUrl: parameters.roomProxy.avatarURL)
     }
     
     // MARK: - Public
@@ -54,6 +53,8 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
             guard let self else { return }
             MXLog.debug("RoomScreenViewModel did complete with result: \(result).")
             switch result {
+            case .displayRoomDetails:
+                self.displayRoomDetails()
             case .displayVideo(let videoURL):
                 self.displayVideo(for: videoURL)
             case .displayFile(let fileURL, let title):
@@ -122,4 +123,21 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
         
         navigationStackCoordinator.setSheetCoordinator(coordinator)
     }
+    
+    private func displayRoomDetails() {
+        guard let roomProxy = parameters?.roomProxy,
+              let mediaProvider = parameters?.mediaProvider else {
+            return
+        }
+        
+        let params = RoomDetailsCoordinatorParameters(navigationStackCoordinator: navigationStackCoordinator,
+                                                      roomProxy: roomProxy,
+                                                      mediaProvider: mediaProvider)
+        let coordinator = RoomDetailsCoordinator(parameters: params)
+        coordinator.callback = { [weak self] _ in
+            self?.navigationStackCoordinator.pop()
+        }
+
+        navigationStackCoordinator.push(coordinator)
+    }
 }

ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift

@@ -18,6 +18,7 @@ import Combine
 import UIKit
 
 enum RoomScreenViewModelAction {
+    case displayRoomDetails
     case displayVideo(videoURL: URL)
     case displayFile(fileURL: URL, title: String?)
     case displayEmojiPicker(itemId: String)
@@ -30,6 +31,7 @@ enum RoomScreenComposerMode: Equatable {
 }
 
 enum RoomScreenViewAction {
+    case headerTapped
     case displayEmojiPicker(itemId: String)
     case emojiTapped(emoji: String, itemId: String)
     case paginateBackwards

ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift

@@ -98,6 +98,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
     // swiftlint:disable:next cyclomatic_complexity
     override func process(viewAction: RoomScreenViewAction) async {
         switch viewAction {
+        case .headerTapped:
+            callback?(.displayRoomDetails)
         case .paginateBackwards:
             await paginateBackwards()
         case .itemAppeared(let id):

ElementX/Sources/Screens/RoomScreen/View/RoomHeaderView.swift

@@ -24,12 +24,16 @@ struct RoomHeaderView: View {
     @ObservedObject var context: RoomScreenViewModel.Context
 
     var body: some View {
-        HStack(spacing: 8) {
-            roomAvatar
-                .accessibilityHidden(true)
-            Text(context.viewState.roomTitle)
-                .font(.element.headline)
-                .accessibilityIdentifier("roomNameLabel")
+        Button {
+            context.send(viewAction: .headerTapped)
+        } label: {
+            HStack(spacing: 8) {
+                roomAvatar
+                    .accessibilityHidden(true)
+                Text(context.viewState.roomTitle)
+                    .font(.element.headline)
+                    .accessibilityIdentifier("roomNameLabel")
+            }
         }
     }