Implement new space selector bottom sheet (#6518)

* Delight: Edit layout experiment #6079
2026-04-19 08:03:50 +02:00 · 2022-08-05 13:39:45 +02:00
parent e39982a555
commit 1a2e6fdb89
47 changed files with 1705 additions and 295 deletions
@@ -0,0 +1,112 @@
+//
+// Copyright 2021 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
+import CommonKit
+
+struct SpaceSelectorCoordinatorParameters {
+    let session: MXSession
+    let parentSpaceId: String?
+    let selectedSpaceId: String?
+    let showHomeSpace: Bool
+    
+    init(session: MXSession,
+         parentSpaceId: String? = nil,
+         selectedSpaceId: String? = nil,
+         showHomeSpace: Bool = false) {
+        self.session = session
+        self.parentSpaceId = parentSpaceId
+        self.selectedSpaceId = selectedSpaceId
+        self.showHomeSpace = showHomeSpace
+    }
+}
+
+final class SpaceSelectorCoordinator: Coordinator, Presentable {
+    
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    private let parameters: SpaceSelectorCoordinatorParameters
+    private let hostingViewController: UIViewController
+    private var viewModel: SpaceSelectorViewModelProtocol
+    
+    private var indicatorPresenter: UserIndicatorTypePresenterProtocol
+    private var loadingIndicator: UserIndicator?
+    
+    // MARK: Public
+
+    // Must be used only internally
+    var childCoordinators: [Coordinator] = []
+    var completion: ((SpaceSelectorCoordinatorResult) -> Void)?
+    
+    // MARK: - Setup
+    
+    init(parameters: SpaceSelectorCoordinatorParameters) {
+        self.parameters = parameters
+        let service = SpaceSelectorService(session: parameters.session, parentSpaceId: parameters.parentSpaceId, showHomeSpace: parameters.showHomeSpace, selectedSpaceId: parameters.selectedSpaceId)
+        let viewModel = SpaceSelectorViewModel.makeViewModel(service: service)
+        let view = SpaceSelector(viewModel: viewModel.context)
+            .addDependency(AvatarService.instantiate(mediaManager: parameters.session.mediaManager))
+        self.viewModel = viewModel
+        let hostingViewController = VectorHostingController(rootView: view)
+        hostingViewController.hidesBackTitleWhenPushed = true
+        self.hostingViewController = hostingViewController
+        
+        indicatorPresenter = UserIndicatorTypePresenter(presentingViewController: self.hostingViewController)
+    }
+    
+    // MARK: - Public
+    
+    func start() {
+        MXLog.debug("[SpaceSelectorCoordinator] did start.")
+        viewModel.completion = { [weak self] result in
+            guard let self = self else { return }
+            MXLog.debug("[SpaceSheetCoordinator] SpaceSelectorViewModel did complete with result: \(result).")
+            switch result {
+            case .cancel:
+                self.completion?(.cancel)
+            case .homeSelected:
+                self.completion?(.homeSelected)
+            case .spaceSelected(let item):
+                self.completion?(.spaceSelected(item))
+            case .spaceDisclosure(let item):
+                self.completion?(.spaceDisclosure(item))
+            case .createSpace:
+                self.completion?(.createSpace(self.parameters.parentSpaceId))
+            }
+        }
+    }
+    
+    func toPresentable() -> UIViewController {
+        return self.hostingViewController
+    }
+    
+    // MARK: - Private
+    
+    /// Show an activity indicator whilst loading.
+    /// - Parameters:
+    ///   - label: The label to show on the indicator.
+    ///   - isInteractionBlocking: Whether the indicator should block any user interaction.
+    private func startLoading(label: String = VectorL10n.loading, isInteractionBlocking: Bool = true) {
+        loadingIndicator = indicatorPresenter.present(.loading(label: label, isInteractionBlocking: isInteractionBlocking))
+    }
+    
+    /// Hide the currently displayed activity indicator.
+    private func stopLoading() {
+        loadingIndicator = nil
+    }
+}
@@ -0,0 +1,60 @@
+// 
+// Copyright 2021 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 SwiftUI
+
+/// Using an enum for the screen allows you define the different state cases with
+/// the relevant associated data for each case.
+enum MockSpaceSelectorScreenState: MockScreenState, CaseIterable {
+    // A case for each state you want to represent
+    // with specific, minimal associated data that will allow you
+    // mock that screen.
+    case initialList
+    case emptyList
+    case selection
+
+    /// The associated screen
+    var screenType: Any.Type {
+        SpaceSelector.self
+    }
+    
+    /// A list of screen state definitions
+    static var allCases: [MockSpaceSelectorScreenState] {
+        [.initialList, .emptyList, .selection]
+    }
+    
+    /// Generate the view struct for the screen state.
+    var screenView: ([Any], AnyView)  {
+        let service: MockSpaceSelectorService
+        switch self {
+        case .initialList:
+            service = MockSpaceSelectorService()
+        case .emptyList:
+            service = MockSpaceSelectorService(spaceList: [MockSpaceSelectorService.homeItem])
+        case .selection:
+            service = MockSpaceSelectorService(selectedSpaceId: MockSpaceSelectorService.defaultSpaceList[2].id)
+        }
+        let viewModel = SpaceSelectorViewModel.makeViewModel(service: service)
+        
+        // can simulate service and viewModel actions here if needs be.
+        
+        return (
+            [service, viewModel],
+            AnyView(SpaceSelector(viewModel: viewModel.context))
+        )
+    }
+}
@@ -0,0 +1,92 @@
+// 
+// Copyright 2021 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 Combine
+import MatrixSDK
+
+class SpaceSelectorService: SpaceSelectorServiceProtocol {
+    
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    private let session: MXSession
+    private let parentSpaceId: String?
+    private let showHomeSpace: Bool
+
+    private var spaceList: [SpaceSelectorListItemData] {
+        var itemList = showHomeSpace && parentSpaceId == nil ? [SpaceSelectorListItemData(id: SpaceSelectorConstants.homeSpaceId, icon: Asset.Images.sideMenuActionIconFeedback.image, displayName: VectorL10n.allChatsTitle)] : []
+        
+        let notificationCounter = session.spaceService.notificationCounter
+        
+        if let parentSpaceId = parentSpaceId, let parentSpace = session.spaceService.getSpace(withId: parentSpaceId) {
+            itemList.append(contentsOf: parentSpace.childSpaces.compactMap { space in
+                SpaceSelectorListItemData.itemData(with: space, notificationCounter: notificationCounter)
+            })
+        } else {
+            itemList.append(contentsOf: session.spaceService.rootSpaces.compactMap { space in
+                SpaceSelectorListItemData.itemData(with: space, notificationCounter: notificationCounter)
+            })
+        }
+        return itemList
+    }
+    
+    private var parentSpaceName: String? {
+        guard let parentSpaceId = parentSpaceId, let summary = session.roomSummary(withRoomId: parentSpaceId) else {
+            return nil
+        }
+        
+        return summary.displayname
+    }
+    
+    // MARK: Public
+
+    private(set) var spaceListSubject: CurrentValueSubject<[SpaceSelectorListItemData], Never>
+    private(set) var parentSpaceNameSubject: CurrentValueSubject<String?, Never>
+    private(set) var selectedSpaceId: String?
+
+    // MARK: - Setup
+    
+    init(session: MXSession, parentSpaceId: String?, showHomeSpace: Bool, selectedSpaceId: String?) {
+        self.session = session
+        self.parentSpaceId = parentSpaceId
+        self.showHomeSpace = showHomeSpace
+        self.spaceListSubject = CurrentValueSubject([])
+        self.parentSpaceNameSubject = CurrentValueSubject(nil)
+        self.selectedSpaceId = selectedSpaceId
+
+        spaceListSubject.send(spaceList)
+        parentSpaceNameSubject.send(parentSpaceName)
+    }
+}
+
+fileprivate extension SpaceSelectorListItemData {
+    static func itemData(with space: MXSpace, notificationCounter: MXSpaceNotificationCounter) -> SpaceSelectorListItemData? {
+        guard let summary = space.summary else {
+            return nil
+        }
+        
+        let notificationState = notificationCounter.notificationState(forSpaceWithId: space.spaceId)
+        
+        return SpaceSelectorListItemData(id:summary.roomId,
+                                         avatar: summary.room.avatarData,
+                                         displayName: summary.displayname,
+                                         notificationCount: notificationState?.groupMissedDiscussionsCount ?? 0,
+                                         highlightedNotificationCount: notificationState?.groupMissedDiscussionsHighlightedCount ?? 0,
+                                         hasSubItems: !space.childSpaces.isEmpty)
+    }
+}
@@ -0,0 +1,41 @@
+// 
+// Copyright 2021 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 Combine
+import UIKit
+
+class MockSpaceSelectorService: SpaceSelectorServiceProtocol {
+    
+    static let homeItem = SpaceSelectorListItemData(id: SpaceSelectorConstants.homeSpaceId, avatar: nil, icon: UIImage(systemName: "house"), displayName: "All Chats", notificationCount: 0, highlightedNotificationCount: 0, hasSubItems: false)
+    static let defaultSpaceList = [
+        homeItem,
+        SpaceSelectorListItemData(id: "!aaabaa:matrix.org", avatar: nil, icon: UIImage(systemName: "number"), displayName: "Default Space", notificationCount: 0, highlightedNotificationCount: 0, hasSubItems: false),
+        SpaceSelectorListItemData(id: "!zzasds:matrix.org", avatar: nil, icon: UIImage(systemName: "number"), displayName: "Space with sub items", notificationCount: 0, highlightedNotificationCount: 0, hasSubItems: true),
+        SpaceSelectorListItemData(id: "!scthve:matrix.org", avatar: nil, icon: UIImage(systemName: "number"), displayName: "Space with notifications", notificationCount: 55, highlightedNotificationCount: 0, hasSubItems: true),
+        SpaceSelectorListItemData(id: "!ferggs:matrix.org", avatar: nil, icon: UIImage(systemName: "number"), displayName: "Space with highlight", notificationCount: 99, highlightedNotificationCount: 50, hasSubItems: false)
+    ]
+
+    var spaceListSubject: CurrentValueSubject<[SpaceSelectorListItemData], Never>
+    var parentSpaceNameSubject: CurrentValueSubject<String?, Never>
+    var selectedSpaceId: String?
+
+    init(spaceList: [SpaceSelectorListItemData] = defaultSpaceList, parentSpaceName: String? = nil, selectedSpaceId: String = SpaceSelectorConstants.homeSpaceId) {
+        self.spaceListSubject = CurrentValueSubject(spaceList)
+        self.parentSpaceNameSubject = CurrentValueSubject(parentSpaceName)
+        self.selectedSpaceId = selectedSpaceId
+    }
+}
@@ -0,0 +1,24 @@
+// 
+// Copyright 2021 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 Combine
+
+protocol SpaceSelectorServiceProtocol {
+    var spaceListSubject: CurrentValueSubject<[SpaceSelectorListItemData], Never> { get }
+    var parentSpaceNameSubject: CurrentValueSubject<String?, Never> { get }
+    var selectedSpaceId: String? { get }
+}
@@ -0,0 +1,110 @@
+// 
+// Copyright 2021 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
+
+// MARK: - Coordinator
+
+enum SpaceSelectorCoordinatorResult {
+    /// Cancel button has been presed
+    case cancel
+    /// Home Space (aka "All Chats") has been selected -> the app should switch to the home space
+    case homeSelected
+    /// A space has been selected -> the app should switch to this space
+    case spaceSelected(_ item: SpaceSelectorListItemData)
+    /// The disclosure button of a space has been pressed -> the parent coordinator should navigate to its sub-spaces
+    case spaceDisclosure(_ item: SpaceSelectorListItemData)
+    /// The create space button has been pressed
+    case createSpace(_ parentSpaceId: String?)
+}
+
+// MARK: View model
+
+enum SpaceSelectorConstants {
+    /// Arbitrary ID for the home space (aka "All Chats")
+    static let homeSpaceId = "SpaceSelectorListItemDataHomeSpaceId"
+}
+
+/// This structure contains all the data to display the information about a space
+struct SpaceSelectorListItemData {
+    /// Id of the space (`SpaceSelectorConstants.homeSpaceId` for the home space)
+    let id: String
+    /// avatar data of the space: set this property to `nil` if you want to display a space with a hardcoded icon
+    let avatar: AvatarInput?
+    /// hardcoded icon: only used if the avatar is not set
+    let icon: UIImage?
+    /// Displayname of the space
+    let displayName: String?
+    /// total number of notifications for this space
+    let notificationCount: UInt
+    /// total number of highlights for this space
+    let highlightedNotificationCount: UInt
+    /// Indicates if the space has sub spaces (condition the display of the disclosure button)
+    let hasSubItems: Bool
+    
+    init(id: String,
+         avatar: AvatarInput? = nil,
+         icon: UIImage? = nil,
+         displayName: String?,
+         notificationCount: UInt = 0,
+         highlightedNotificationCount: UInt = 0,
+         hasSubItems: Bool = false) {
+        self.id = id
+        self.avatar = avatar
+        self.icon = icon
+        self.displayName = displayName
+        self.notificationCount = notificationCount
+        self.highlightedNotificationCount = highlightedNotificationCount
+        self.hasSubItems = hasSubItems
+    }
+}
+
+extension SpaceSelectorListItemData: Identifiable, Equatable {}
+
+enum SpaceSelectorViewModelResult {
+    /// Cancel button has been presed
+    case cancel
+    /// Home Space (aka "All Chats") has been selected -> the app should switch to the home space
+    case homeSelected
+    /// A space has been selected -> the app should switch to this space
+    case spaceSelected(_ item: SpaceSelectorListItemData)
+    /// The disclosure button of a space has been pressed -> the parent coordinator should navigate to its sub-spaces
+    case spaceDisclosure(_ item: SpaceSelectorListItemData)
+    /// The create space button has been pressed
+    case createSpace
+}
+
+// MARK: View
+
+struct SpaceSelectorViewState: BindableState {
+    /// List of items that represents the list of sub space of the current space
+    var items: [SpaceSelectorListItemData]
+    /// Id of the currently selected space if there is a current space in the app
+    var selectedSpaceId: String?
+    /// String to be displayed as title for the navigation bar
+    var navigationTitle: String
+}
+
+enum SpaceSelectorViewAction {
+    /// Cancel button has been presed
+    case cancel
+    /// A space has been selected
+    case spaceSelected(_ item: SpaceSelectorListItemData)
+    /// The disclosure button of a space has been pressed
+    case spaceDisclosure(_ item: SpaceSelectorListItemData)
+    /// The create space button has been pressed
+    case createSpace
+}
@@ -0,0 +1,72 @@
+//
+// Copyright 2021 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
+import Combine
+
+typealias SpaceSelectorViewModelType = StateStoreViewModel<SpaceSelectorViewState,
+                                                                 Never,
+                                                                 SpaceSelectorViewAction>
+
+class SpaceSelectorViewModel: SpaceSelectorViewModelType, SpaceSelectorViewModelProtocol {
+
+    // MARK: - Properties
+
+    // MARK: Private
+
+    private let service: SpaceSelectorServiceProtocol
+
+    // MARK: Public
+
+    var completion: ((SpaceSelectorViewModelResult) -> Void)?
+
+    // MARK: - Setup
+
+    static func makeViewModel(service: SpaceSelectorServiceProtocol) -> SpaceSelectorViewModelProtocol {
+        return SpaceSelectorViewModel(service: service)
+    }
+
+    private init(service: SpaceSelectorServiceProtocol) {
+        self.service = service
+        super.init(initialViewState: Self.defaultState(service: service))
+    }
+
+    private static func defaultState(service: SpaceSelectorServiceProtocol) -> SpaceSelectorViewState {
+        let parentName = service.parentSpaceNameSubject.value
+        return SpaceSelectorViewState(items: service.spaceListSubject.value,
+                                      selectedSpaceId: service.selectedSpaceId,
+                                      navigationTitle: parentName ?? VectorL10n.spaceSelectorTitle)
+    }
+    
+    // MARK: - Public
+
+    override func process(viewAction: SpaceSelectorViewAction) {
+        switch viewAction {
+        case .cancel:
+            completion?(.cancel)
+        case .spaceSelected(let item):
+            if item.id == SpaceSelectorConstants.homeSpaceId {
+                completion?(.homeSelected)
+            } else {
+                completion?(.spaceSelected(item))
+            }
+        case .spaceDisclosure(let item):
+            completion?(.spaceDisclosure(item))
+        case .createSpace:
+            completion?(.createSpace)
+        }
+    }
+}
@@ -0,0 +1,24 @@
+// 
+// Copyright 2021 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
+
+protocol SpaceSelectorViewModelProtocol {
+    
+    var completion: ((SpaceSelectorViewModelResult) -> Void)? { get set }
+    static func makeViewModel(service: SpaceSelectorServiceProtocol) -> SpaceSelectorViewModelProtocol
+    var context: SpaceSelectorViewModelType.Context { get }
+}
@@ -0,0 +1,42 @@
+//
+// Copyright 2021 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 XCTest
+import RiotSwiftUI
+
+class SpaceSelectorUITests: MockScreenTestCase {
+    
+    func testInitialDisplay() {
+        app.goToScreenWithIdentifier(MockSpaceSelectorScreenState.initialList.title)
+        
+        let disclosureButtons = app.buttons.matching(identifier: "disclosureButton").allElementsBoundByIndex
+        XCTAssertEqual(disclosureButtons.count, MockSpaceSelectorService.defaultSpaceList.filter { $0.hasSubItems }.count)
+
+        let notificationBadges = app.staticTexts.matching(identifier: "notificationBadge").allElementsBoundByIndex
+        let itemsWithNotifications = MockSpaceSelectorService.defaultSpaceList.filter { $0.notificationCount > 0 }
+        XCTAssertEqual(notificationBadges.count, itemsWithNotifications.count)
+        for (index, notificationBadge) in notificationBadges.enumerated() {
+            XCTAssertEqual("\(itemsWithNotifications[index].notificationCount)", notificationBadge.label)
+        }
+        
+        let spaceItemNameList = app.staticTexts.matching(identifier: "itemName").allElementsBoundByIndex
+        XCTAssertEqual(spaceItemNameList.count, MockSpaceSelectorService.defaultSpaceList.count)
+        for (index, item) in MockSpaceSelectorService.defaultSpaceList.enumerated() {
+            XCTAssertEqual(item.displayName, spaceItemNameList[index].label)
+        }
+    }
+
+}
@@ -0,0 +1,41 @@
+// 
+// Copyright 2021 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 XCTest
+import Combine
+
+@testable import RiotSwiftUI
+
+class SpaceSelectorViewModelTests: XCTestCase {
+    
+    var service: MockSpaceSelectorService!
+    var viewModel: SpaceSelectorViewModelProtocol!
+    var context: SpaceSelectorViewModelType.Context!
+    var cancellables = Set<AnyCancellable>()
+    
+    override func setUpWithError() throws {
+        service = MockSpaceSelectorService()
+        viewModel = SpaceSelectorViewModel.makeViewModel(service: service)
+        context = viewModel.context
+    }
+
+    func testInitialState() {
+        XCTAssertEqual(context.viewState.selectedSpaceId, MockSpaceSelectorService.homeItem.id)
+        XCTAssertEqual(context.viewState.items, MockSpaceSelectorService.defaultSpaceList)
+        XCTAssertEqual(context.viewState.navigationTitle, VectorL10n.spaceSelectorTitle)
+    }
+
+}
@@ -0,0 +1,76 @@
+// 
+// Copyright 2021 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 SpaceSelector: View {
+
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    @ViewBuilder
+    private var rightButton: some View {
+        Button(VectorL10n.create) {
+            viewModel.send(viewAction: .createSpace)
+        }
+    }
+
+    // MARK: Public
+    
+    @ObservedObject var viewModel: SpaceSelectorViewModel.Context
+    
+    var body: some View {
+        ScrollView {
+            LazyVStack {
+                ForEach(viewModel.viewState.items) { item in
+                    SpaceSelectorListRow(avatar: item.avatar,
+                                         icon: item.icon,
+                                         displayName: item.displayName,
+                                         hasSubItems: item.hasSubItems,
+                                         isSelected: item.id == viewModel.viewState.selectedSpaceId,
+                                         notificationCount: item.notificationCount,
+                                         highlightedNotificationCount: item.highlightedNotificationCount,
+                                         disclosureAction: {
+                                            viewModel.send(viewAction: .spaceDisclosure(item))
+                                         }
+                        )
+                        .onTapGesture {
+                            viewModel.send(viewAction: .spaceSelected(item))
+                        }
+                }
+            }
+        }
+        .frame(maxHeight: .infinity)
+        .background(theme.colors.background.edgesIgnoringSafeArea(.all))
+        .navigationTitle(viewModel.viewState.navigationTitle)
+        .navigationBarItems(
+            trailing: rightButton
+        )
+        .accentColor(theme.colors.accent)
+    }
+}
+
+// MARK: - Previews
+
+struct SpaceSelector_Previews: PreviewProvider {
+    static let stateRenderer = MockSpaceSelectorScreenState.stateRenderer
+    static var previews: some View {
+        stateRenderer.screenGroup()
+    }
+}
@@ -0,0 +1,115 @@
+// 
+// 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 SpaceSelectorListRow: View {
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    // MARK: Public
+    
+    let avatar: AvatarInputProtocol?
+    let icon: UIImage?
+    let displayName: String?
+    let hasSubItems: Bool
+    let isSelected: Bool
+    let notificationCount: UInt
+    let highlightedNotificationCount: UInt
+    let disclosureAction: (() -> Void)?
+    
+    @ViewBuilder
+    var body: some View {
+        ZStack {
+            if isSelected {
+                RoundedRectangle(cornerRadius: 8)
+                    .fill(theme.colors.system)
+                    .padding(.horizontal, 8)
+            }
+            VStack {
+                HStack {
+                    if let avatar = avatar {
+                        SpaceAvatarImage(avatarData: avatar, size: .xSmall)
+                    }
+                    if let icon = icon {
+                        Image(uiImage: icon)
+                            .renderingMode(.template)
+                            .foregroundColor(theme.colors.primaryContent)
+                            .frame(width: 32, height: 32)
+                            .background(theme.colors.quinaryContent)
+                            .clipShape(RoundedRectangle(cornerRadius: 8))
+                    }
+                    Text(displayName ?? "")
+                        .foregroundColor(theme.colors.primaryContent)
+                        .font(theme.fonts.bodySB)
+                        .accessibility(identifier: "itemName")
+                    Spacer()
+                    if notificationCount > 0 {
+                        Text("\(notificationCount)")
+                            .multilineTextAlignment(.center)
+                            .foregroundColor(theme.colors.background)
+                            .font(theme.fonts.footnote)
+                            .padding(.vertical, 2)
+                            .padding(.horizontal, 6)
+                            .background(highlightedNotificationCount > 0 ? theme.colors.alert : theme.colors.secondaryContent)
+                            .clipShape(Capsule())
+                            .accessibility(identifier: "notificationBadge")
+                    }
+                    if hasSubItems {
+                        Button {
+                            disclosureAction?()
+                        } label: {
+                            Image(systemName: "chevron.right")
+                                .renderingMode(.template)
+                                .foregroundColor(theme.colors.accent)
+                        }
+                        .accessibility(identifier: "disclosureButton")
+                    }
+                }
+                .padding(.vertical, 8)
+            }
+            .padding(.horizontal)
+        }
+        .padding(.horizontal, 8)
+        .frame(maxWidth: .infinity)
+        .background(theme.colors.background)
+    }
+
+}
+
+// MARK: - Previews
+
+struct SpaceSelectorListRow_Previews: PreviewProvider {
+    
+    static var previews: some View {
+        sampleView.theme(.light).preferredColorScheme(.light)
+        sampleView.theme(.dark).preferredColorScheme(.dark)
+    }
+    
+    static var sampleView: some View {
+        VStack(spacing: 8) {
+            SpaceSelectorListRow(avatar: nil, icon: UIImage(systemName: "house"), displayName: "Space name", hasSubItems: false, isSelected: false, notificationCount: 0, highlightedNotificationCount: 0, disclosureAction: nil)
+            SpaceSelectorListRow(avatar: nil, icon: UIImage(systemName: "house"), displayName: "Space name", hasSubItems: true, isSelected: false, notificationCount: 0, highlightedNotificationCount: 0, disclosureAction: nil)
+            SpaceSelectorListRow(avatar: nil, icon: UIImage(systemName: "house"), displayName: "Space name", hasSubItems: true, isSelected: false, notificationCount: 99, highlightedNotificationCount: 0, disclosureAction: nil)
+            SpaceSelectorListRow(avatar: nil, icon: UIImage(systemName: "house"), displayName: "Space name", hasSubItems: false, isSelected: false, notificationCount: 99, highlightedNotificationCount: 1, disclosureAction: nil)
+            SpaceSelectorListRow(avatar: nil, icon: UIImage(systemName: "house"), displayName: "Space name", hasSubItems: true, isSelected: true, notificationCount: 99, highlightedNotificationCount: 1, disclosureAction: nil)
+        }
+    }
+    
+}