[Room member list] Display room member list (#276)

* Implement room member list

* Move timeline initialization back to `TimelinePresenter`.

* Fix crash when the `innerRoom` inside a `RustMatrixRoom` is destroyed but `syncUpdateFlow` is still running.

* Address review comments

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsFlowNode.kt

@@ -24,9 +24,11 @@ import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.plugin.Plugin
 import com.bumble.appyx.navmodel.backstack.BackStack
+import com.bumble.appyx.navmodel.backstack.operation.push
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
+import io.element.android.features.roomdetails.impl.members.RoomMemberListNode
 import io.element.android.libraries.architecture.BackstackNode
 import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler
 import io.element.android.libraries.architecture.createNode
@@ -49,11 +51,25 @@ class RoomDetailsFlowNode @AssistedInject constructor(
     sealed interface NavTarget : Parcelable {
         @Parcelize
         object RoomDetails : NavTarget
+
+        @Parcelize
+        object RoomMemberList : NavTarget
+    }
+
+    interface Callback : Plugin {
+        fun openRoomMemberList()
+    }
+
+    val callback = object : Callback {
+        override fun openRoomMemberList() {
+            backstack.push(NavTarget.RoomMemberList)
+        }
     }
 
     override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
         return when (navTarget) {
-            NavTarget.RoomDetails -> createNode<RoomDetailsNode>(buildContext)
+            NavTarget.RoomDetails -> createNode<RoomDetailsNode>(buildContext, listOf(callback))
+            NavTarget.RoomMemberList -> createNode<RoomMemberListNode>(buildContext)
         }
     }
 

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsNode.kt

@@ -23,6 +23,7 @@ import androidx.compose.ui.platform.LocalContext
 import com.bumble.appyx.core.modality.BuildContext
 import com.bumble.appyx.core.node.Node
 import com.bumble.appyx.core.plugin.Plugin
+import com.bumble.appyx.core.plugin.plugins
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
@@ -40,6 +41,12 @@ class RoomDetailsNode @AssistedInject constructor(
     private val room: MatrixRoom,
 ) : Node(buildContext, plugins = plugins) {
 
+    private val callback = plugins<RoomDetailsFlowNode.Callback>().firstOrNull()
+
+    private fun openRoomMemberList() {
+        callback?.openRoomMemberList()
+    }
+
     private fun onShareRoom(context: Context) {
         val alias = room.alias ?: room.alternativeAliases.firstOrNull()
         val permalinkResult = alias?.let { PermalinkBuilder.permalinkForRoomAlias(it) }
@@ -64,6 +71,7 @@ class RoomDetailsNode @AssistedInject constructor(
             modifier = modifier,
             goBack = { navigateUp() },
             onShareRoom = { onShareRoom(context) },
+            openRoomMemberList = ::openRoomMemberList,
         )
     }
 }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsPresenter.kt

@@ -17,8 +17,16 @@
 package io.element.android.features.roomdetails.impl
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.architecture.Presenter
 import io.element.android.libraries.matrix.api.room.MatrixRoom
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
 import javax.inject.Inject
 
 class RoomDetailsPresenter @Inject constructor(
@@ -29,13 +37,24 @@ class RoomDetailsPresenter @Inject constructor(
     override fun present(): RoomDetailsState {
 //        fun handleEvents(event: RoomDetailsEvent) {}
 
+        var memberCount: Async<Int> by remember { mutableStateOf(Async.Loading()) }
+        LaunchedEffect(Unit) {
+            withContext(Dispatchers.IO) {
+                memberCount = runCatching { room.memberCount() }
+                    .fold(
+                        onSuccess = { Async.Success(it) },
+                        onFailure = { Async.Failure(it) }
+                    )
+            }
+        }
+
         return RoomDetailsState(
             roomId = room.roomId.value,
             roomName = room.name ?: room.displayName,
             roomAlias = room.alias,
             roomAvatarUrl = room.avatarUrl,
             roomTopic = room.topic,
-            memberCount = room.members.size,
+            memberCount = memberCount,
             isEncrypted = room.isEncrypted,
 //            eventSink = ::handleEvents
         )

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsState.kt

@@ -16,13 +16,15 @@
 
 package io.element.android.features.roomdetails.impl
 
+import io.element.android.libraries.architecture.Async
+
 data class RoomDetailsState(
     val roomId: String,
     val roomName: String,
     val roomAlias: String?,
     val roomAvatarUrl: String?,
     val roomTopic: String?,
-    val memberCount: Int,
+    val memberCount: Async<Int>,
     val isEncrypted: Boolean,
 //    val eventSink: (RoomDetailsEvent) -> Unit
 )

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsStateProvider.kt

@@ -17,6 +17,7 @@
 package io.element.android.features.roomdetails.impl
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.architecture.Async
 
 open class RoomDetailsStateProvider : PreviewParameterProvider<RoomDetailsState> {
     override val values: Sequence<RoomDetailsState>
@@ -25,6 +26,7 @@ open class RoomDetailsStateProvider : PreviewParameterProvider<RoomDetailsState>
             aRoomDetailsState().copy(roomTopic = null),
             aRoomDetailsState().copy(isEncrypted = false),
             aRoomDetailsState().copy(roomAlias = null),
+            aRoomDetailsState().copy(memberCount = Async.Failure(Throwable())),
             // Add other state here
         )
 }
@@ -39,7 +41,7 @@ fun aRoomDetailsState() = RoomDetailsState(
         "|| MAIL iki/Marketing " +
         "|| MAI iki/Marketing " +
         "|| MAI iki/Marketing...",
-    memberCount = 32,
+    memberCount = Async.Success(32),
     isEncrypted = true,
 //    eventSink = {}
 )

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsView.kt

@@ -42,6 +42,8 @@ import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.architecture.isLoading
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
@@ -62,6 +64,7 @@ fun RoomDetailsView(
     state: RoomDetailsState,
     goBack: () -> Unit,
     onShareRoom: () -> Unit,
+    openRoomMemberList: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Scaffold(
@@ -87,7 +90,12 @@ fun RoomDetailsView(
                 TopicSection(roomTopic = state.roomTopic)
             }
 
-            MembersSection(memberCount = state.memberCount)
+            val memberCount = (state.memberCount as? Async.Success<Int>)?.state
+            MembersSection(
+                memberCount = memberCount,
+                isLoading = state.memberCount.isLoading(),
+                openRoomMemberList = openRoomMemberList
+            )
 
             if (state.isEncrypted) {
                 SecuritySection()
@@ -148,12 +156,19 @@ internal fun TopicSection(roomTopic: String, modifier: Modifier = Modifier) {
 }
 
 @Composable
-internal fun MembersSection(memberCount: Int, modifier: Modifier = Modifier) {
+internal fun MembersSection(
+    memberCount: Int?,
+    isLoading: Boolean,
+    modifier: Modifier = Modifier,
+    openRoomMemberList: () -> Unit
+) {
     PreferenceCategory(modifier = modifier) {
         PreferenceText(
             title = stringResource(R.string.screen_room_details_people_title),
             icon = Icons.Outlined.Person,
-            currentValue = memberCount.toString(),
+            currentValue = memberCount?.toString(),
+            onClick = openRoomMemberList,
+            loadingCurrentValue = isLoading,
         )
         PreferenceText(
             title = stringResource(R.string.screen_room_details_invite_people_title),
@@ -200,5 +215,6 @@ private fun ContentToPreview(state: RoomDetailsState) {
         state = state,
         goBack = {},
         onShareRoom = {},
+        openRoomMemberList = {},
     )
 }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/di/RoomMemberModule.kt

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.di
+
+import com.squareup.anvil.annotations.ContributesTo
+import dagger.Binds
+import dagger.Module
+import io.element.android.features.roomdetails.impl.members.RoomMatrixUserDataSource
+import io.element.android.features.userlist.api.MatrixUserDataSource
+import io.element.android.libraries.di.RoomScope
+import javax.inject.Named
+
+@Module
+@ContributesTo(RoomScope::class)
+interface RoomMemberModule {
+
+    @Binds
+    @Named("RoomMembers")
+    fun bindRoomMemberUserListDataSource(dataSource: RoomMatrixUserDataSource): MatrixUserDataSource
+
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMatrixUserDataSource.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.members
+
+import io.element.android.features.userlist.api.MatrixUserDataSource
+import io.element.android.libraries.core.bool.orFalse
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.matrix.api.core.UserId
+import io.element.android.libraries.matrix.api.room.MatrixRoom
+import io.element.android.libraries.matrix.api.room.RoomMember
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import javax.inject.Inject
+
+class RoomMatrixUserDataSource @Inject constructor(
+    private val room: MatrixRoom
+) : MatrixUserDataSource {
+
+    override suspend fun search(query: String): List<MatrixUser> {
+        return room.members().filter { member ->
+            if (query.isBlank()) {
+                true
+            } else {
+                member.userId.contains(query, ignoreCase = true) || member.displayName?.contains(query, ignoreCase = true).orFalse()
+            }
+        }.map(::mapMemberToMatrixUser)
+    }
+
+    override suspend fun getProfile(userId: UserId): MatrixUser? {
+        return null
+    }
+
+    private fun mapMemberToMatrixUser(member: RoomMember): MatrixUser {
+        return MatrixUser(
+            id = UserId(member.userId),
+            username = member.displayName,
+            avatarData = AvatarData(
+                id = member.userId,
+                name = member.displayName,
+                url = member.avatarUrl
+            )
+        )
+    }
+
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListNode.kt

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.members
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.bumble.appyx.core.modality.BuildContext
+import com.bumble.appyx.core.node.Node
+import com.bumble.appyx.core.plugin.Plugin
+import dagger.assisted.Assisted
+import dagger.assisted.AssistedInject
+import io.element.android.anvilannotations.ContributesNode
+import io.element.android.libraries.di.RoomScope
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import timber.log.Timber
+
+@ContributesNode(RoomScope::class)
+class RoomMemberListNode @AssistedInject constructor(
+    @Assisted buildContext: BuildContext,
+    @Assisted plugins: List<Plugin>,
+    private val presenter: RoomMemberListPresenter,
+) : Node(buildContext, plugins = plugins) {
+
+    private fun onUserSelected(matrixUser: MatrixUser) {
+        Timber.d("TODO: implement user selection. User: $matrixUser")
+    }
+
+    @Composable
+    override fun View(modifier: Modifier) {
+        val state = presenter.present()
+        RoomMemberListView(
+            state = state,
+            modifier = modifier,
+            onBackPressed = { navigateUp() },
+            onUserSelected = ::onUserSelected,
+        )
+    }
+}

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListPresenter.kt

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.members
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import io.element.android.features.userlist.api.SelectionMode
+import io.element.android.features.userlist.api.MatrixUserDataSource
+import io.element.android.features.userlist.api.UserListPresenter
+import io.element.android.features.userlist.api.UserListPresenterArgs
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import javax.inject.Inject
+import javax.inject.Named
+
+class RoomMemberListPresenter @Inject constructor(
+    private val userListPresenterFactory: UserListPresenter.Factory,
+    @Named("RoomMembers") private val matrixUserDataSource: MatrixUserDataSource,
+) : Presenter<RoomMemberListState> {
+
+    private val userListPresenter by lazy {
+        userListPresenterFactory.create(
+            UserListPresenterArgs(selectionMode = SelectionMode.Single),
+            matrixUserDataSource,
+        )
+    }
+
+    @Composable
+    override fun present(): RoomMemberListState {
+        val userListState = userListPresenter.present()
+        val allUsers = remember { mutableStateOf<Async<ImmutableList<MatrixUser>>>(Async.Loading()) }
+        LaunchedEffect(Unit) {
+            withContext(Dispatchers.IO) {
+                allUsers.value = Async.Success(matrixUserDataSource.search("").toImmutableList())
+            }
+        }
+        return RoomMemberListState(
+            allUsers = allUsers.value,
+            userListState = userListState
+        )
+    }
+}
+

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListState.kt

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.members
+
+import io.element.android.features.userlist.api.UserListState
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+
+data class RoomMemberListState(
+    val allUsers: Async<ImmutableList<MatrixUser>>,
+    val userListState: UserListState,
+//    val eventSink: (AddPeopleEvents) -> Unit,
+)

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListStateProvider.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.members
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.features.userlist.api.aUserListState
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.matrix.ui.components.aMatrixUser
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+
+internal class RoomMemberListStateProvider : PreviewParameterProvider<RoomMemberListState> {
+    override val values: Sequence<RoomMemberListState>
+        get() = sequenceOf(
+            aRoomMemberListState(allUsers = Async.Success(persistentListOf(aMatrixUser()))),
+            aRoomMemberListState(allUsers = Async.Loading())
+        )
+}
+
+internal fun aRoomMemberListState(
+    searchResults: ImmutableList<MatrixUser> = persistentListOf(),
+    allUsers: Async<ImmutableList<MatrixUser>> = Async.Uninitialized,
+) =
+    RoomMemberListState(
+        userListState = aUserListState().copy(searchResults = searchResults),
+        allUsers = allUsers,
+    )

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListView.kt

@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.impl.members
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.element.android.features.roomdetails.impl.R
+import io.element.android.features.userlist.api.SearchSingleUserResultItem
+import io.element.android.features.userlist.api.UserListView
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.architecture.isLoading
+import io.element.android.libraries.designsystem.ElementTextStyles
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.CenterAlignedTopAppBar
+import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
+import io.element.android.libraries.designsystem.theme.components.Scaffold
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun RoomMemberListView(
+    state: RoomMemberListState,
+    modifier: Modifier = Modifier,
+    onBackPressed: () -> Unit = {},
+    onUserSelected: (MatrixUser) -> Unit = {},
+) {
+    Scaffold(
+        topBar = {
+            if (!state.userListState.isSearchActive) {
+                RoomMemberListTopBar(onBackPressed = onBackPressed)
+            }
+        }
+    ) { padding ->
+        Column(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(padding),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            UserListView(
+                state = state.userListState,
+                onUserSelected = onUserSelected,
+            )
+
+            if (!state.userListState.isSearchActive) {
+                if (state.allUsers is Async.Success) {
+                    LazyColumn(modifier = Modifier.fillMaxWidth(), state = rememberLazyListState()) {
+                        item {
+                            val memberCount = state.allUsers.state.count()
+                            Text(
+                                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
+                                text = pluralStringResource(id = R.plurals.screen_room_member_list_header_title, count = memberCount, memberCount),
+                                style = ElementTextStyles.Regular.callout,
+                                color = MaterialTheme.colorScheme.secondary,
+                                textAlign = TextAlign.Start,
+                            )
+                        }
+                        items(state.allUsers.state) { matrixUser ->
+                            SearchSingleUserResultItem(
+                                modifier = Modifier.fillMaxWidth(),
+                                matrixUser = matrixUser,
+                                onClick = { onUserSelected(matrixUser) }
+                            )
+                        }
+                    }
+                } else if (state.allUsers.isLoading()) {
+                    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                        CircularProgressIndicator()
+                    }
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun RoomMemberListTopBar(
+    modifier: Modifier = Modifier,
+    onBackPressed: () -> Unit = {},
+) {
+    CenterAlignedTopAppBar(
+        modifier = modifier,
+        title = {
+            Text(
+                text = stringResource(R.string.screen_room_details_people_title),
+                fontSize = 16.sp,
+                fontWeight = FontWeight.SemiBold,
+            )
+        },
+        navigationIcon = { BackButton(onClick = onBackPressed) },
+    )
+}
+
+@Preview
+@Composable
+fun RoomMemberListLightPreview(@PreviewParameter(RoomMemberListStateProvider::class) state: RoomMemberListState) =
+    ElementPreviewLight { ContentToPreview(state) }
+
+@Preview
+@Composable
+fun RoomMemberListDarkPreview(@PreviewParameter(RoomMemberListStateProvider::class) state: RoomMemberListState) =
+    ElementPreviewDark { ContentToPreview(state) }
+
+@Composable
+private fun ContentToPreview(state: RoomMemberListState) {
+    RoomMemberListView(state)
+}

features/roomdetails/impl/src/main/res/values/localazy.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <plurals name="screen_room_member_list_header_title">
+    <item quantity="one">"1 person"</item>
+    <item quantity="other">"%1$d people"</item>
+  </plurals>
   <string name="screen_room_details_encryption_enabled_subtitle">"Messages are secured with locks. Only you and the recipients have the unique keys to unlock them."</string>
   <string name="screen_room_details_encryption_enabled_title">"Message encryption enabled"</string>
   <string name="screen_room_details_invite_people_title">"Invite people"</string>

features/roomdetails/impl/src/test/kotlin/io/element/android/features/roomdetails/RoomDetailsPresenterTests.kt

@@ -21,6 +21,7 @@ import app.cash.molecule.moleculeFlow
 import app.cash.turbine.test
 import com.google.common.truth.Truth
 import io.element.android.features.roomdetails.impl.RoomDetailsPresenter
+import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.matrix.api.core.RoomId
 import io.element.android.libraries.matrix.api.room.RoomMember
 import io.element.android.libraries.matrix.test.A_ROOM_ID
@@ -42,8 +43,25 @@ class RoomDetailsPresenterTests {
             Truth.assertThat(initialState.roomName).isEqualTo(room.name)
             Truth.assertThat(initialState.roomAvatarUrl).isEqualTo(room.avatarUrl)
             Truth.assertThat(initialState.roomTopic).isEqualTo(room.topic)
-            Truth.assertThat(initialState.memberCount).isEqualTo(room.members.count())
+            Truth.assertThat(initialState.memberCount).isEqualTo(Async.Loading(null))
             Truth.assertThat(initialState.isEncrypted).isEqualTo(room.isEncrypted)
+
+            cancelAndIgnoreRemainingEvents()
+        }
+    }
+
+    @Test
+    fun `present - room member count is calculated asynchronously`() = runTest {
+        val room = aMatrixRoom()
+        val presenter = RoomDetailsPresenter(room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            Truth.assertThat(initialState.memberCount).isEqualTo(Async.Loading(null))
+
+            val finalState = awaitItem()
+            Truth.assertThat(finalState.memberCount).isEqualTo(Async.Success(0))
         }
     }
 
@@ -56,6 +74,24 @@ class RoomDetailsPresenterTests {
         }.test {
             val initialState = awaitItem()
             Truth.assertThat(initialState.roomName).isEqualTo(room.displayName)
+
+            cancelAndIgnoreRemainingEvents()
+        }
+    }
+
+    @Test
+    fun `present - can handle error while fetching member count`() = runTest {
+        val room = aMatrixRoom(name = null).apply {
+            givenFetchMemberResult(Result.failure(Throwable()))
+        }
+        val presenter = RoomDetailsPresenter(room)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            skipItems(1)
+            Truth.assertThat(awaitItem().memberCount).isInstanceOf(Async.Failure::class.java)
+
+            cancelAndIgnoreRemainingEvents()
         }
     }
 }

features/roomdetails/impl/src/test/kotlin/io/element/android/features/roomdetails/members/RoomMemberListPresenterTests.kt

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2023 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.
+ */
+
+package io.element.android.features.roomdetails.members
+
+import app.cash.molecule.RecompositionClock
+import app.cash.molecule.moleculeFlow
+import app.cash.turbine.test
+import com.google.common.truth.Truth
+import io.element.android.features.roomdetails.impl.members.RoomMemberListPresenter
+import io.element.android.features.userlist.api.SelectionMode
+import io.element.android.features.userlist.api.MatrixUserDataSource
+import io.element.android.features.userlist.api.UserListPresenter
+import io.element.android.features.userlist.api.UserListPresenterArgs
+import io.element.android.features.userlist.impl.DefaultUserListPresenter
+import io.element.android.features.userlist.test.FakeMatrixUserDataSource
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.matrix.ui.components.aMatrixUser
+import kotlinx.coroutines.test.runTest
+import okhttp3.internal.toImmutableList
+import org.junit.Test
+
+class RoomMemberListPresenterTests {
+
+    @Test
+    fun `present - search is done automatically on start, but is async`() = runTest {
+        val searchResult = listOf(aMatrixUser())
+        val userListDataSource = FakeMatrixUserDataSource().apply {
+            givenSearchResult(searchResult)
+        }
+        val userListFactory = object : UserListPresenter.Factory {
+            override fun create(args: UserListPresenterArgs, dataSource: MatrixUserDataSource) = DefaultUserListPresenter(args, dataSource)
+        }
+        val presenter = RoomMemberListPresenter(userListFactory, userListDataSource)
+        moleculeFlow(RecompositionClock.Immediate) {
+            presenter.present()
+        }.test {
+            val initialState = awaitItem()
+            Truth.assertThat(initialState.allUsers).isInstanceOf(Async.Loading::class.java)
+            Truth.assertThat(initialState.userListState.isSearchActive).isFalse()
+            Truth.assertThat(initialState.userListState.searchResults).isEmpty()
+            Truth.assertThat(initialState.userListState.selectionMode).isEqualTo(SelectionMode.Single)
+
+            val loadedState = awaitItem()
+            Truth.assertThat((loadedState.allUsers as? Async.Success)?.state).isEqualTo(searchResult.toImmutableList())
+        }
+    }
+
+}