Split user list views into multiple files

2023-04-12 16:31:51 +02:00
parent 6b3bb17bb2
commit cf8e91c3cf
12 changed files with 528 additions and 345 deletions
--- a/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/addpeople/AddPeopleView.kt
+++ b/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/addpeople/AddPeopleView.kt
@@ -30,7 +30,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.features.createroom.impl.R
-import io.element.android.features.userlist.api.UserListView
+import io.element.android.features.userlist.api.components.UserListView
 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
--- a/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt
+++ b/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt
@@ -55,7 +55,7 @@ import androidx.core.net.toUri
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
 import io.element.android.features.createroom.impl.R
-import io.element.android.features.userlist.api.SelectedUsersList
+import io.element.android.features.userlist.api.components.SelectedUsersList
 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
--- a/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt
+++ b/features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt
@@ -41,7 +41,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.features.createroom.impl.R
-import io.element.android.features.userlist.api.UserListView
+import io.element.android.features.userlist.api.components.UserListView
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
--- a/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListView.kt
+++ b/features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/members/RoomMemberListView.kt
@@ -39,8 +39,8 @@ 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.features.userlist.api.components.SearchSingleUserResultItem
+import io.element.android.features.userlist.api.components.UserListView
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.architecture.isLoading
 import io.element.android.libraries.designsystem.ElementTextStyles
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/UserListStateProvider.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/UserListStateProvider.kt
@@ -18,9 +18,9 @@ package io.element.android.features.userlist.api

 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import io.element.android.libraries.matrix.api.core.UserId
-import io.element.android.libraries.matrix.ui.model.MatrixUser
+import io.element.android.libraries.matrix.ui.components.aMatrixUserList
 import kotlinx.collections.immutable.persistentListOf
+import kotlinx.collections.immutable.toImmutableList

 open class UserListStateProvider : PreviewParameterProvider<UserListState> {
    override val values: Sequence<UserListState>
@@ -38,14 +38,14 @@ open class UserListStateProvider : PreviewParameterProvider<UserListState> {
                isSearchActive = true,
                searchQuery = "@someone:matrix.org",
                selectedUsers = aListOfSelectedUsers(),
-                searchResults = aListOfResults(),
+                searchResults = aMatrixUserList().toImmutableList(),
            ),
            aUserListState().copy(
                isSearchActive = true,
                searchQuery = "@someone:matrix.org",
                selectionMode = SelectionMode.Multiple,
                selectedUsers = aListOfSelectedUsers(),
-                searchResults = aListOfResults(),
+                searchResults = aMatrixUserList().toImmutableList(),
            )
        )
 }
@@ -63,25 +63,4 @@ fun aUserListState() = UserListState(
    eventSink = {}
 )

-fun aListOfSelectedUsers() = persistentListOf(
-    MatrixUser(id = UserId("@someone:matrix.org")),
-    MatrixUser(id = UserId("@other:matrix.org"), username = "other"),
-)
-
-fun aListOfResults() = persistentListOf(
-    MatrixUser(id = UserId("@someone:matrix.org")),
-    MatrixUser(id = UserId("@other:matrix.org"), username = "other"),
-    MatrixUser(
-        id = UserId("@someone_with_a_very_long_matrix_identifier:a_very_long_domain.org"),
-        username = "hey, I am someone with a very long display name"
-    ),
-    MatrixUser(id = UserId("@someone_2:matrix.org"), username = "someone 2"),
-    MatrixUser(id = UserId("@someone_3:matrix.org"), username = "someone 3"),
-    MatrixUser(id = UserId("@someone_4:matrix.org"), username = "someone 4"),
-    MatrixUser(id = UserId("@someone_5:matrix.org"), username = "someone 5"),
-    MatrixUser(id = UserId("@someone_6:matrix.org"), username = "someone 6"),
-    MatrixUser(id = UserId("@someone_7:matrix.org"), username = "someone 7"),
-    MatrixUser(id = UserId("@someone_8:matrix.org"), username = "someone 8"),
-    MatrixUser(id = UserId("@someone_9:matrix.org"), username = "someone 9"),
-    MatrixUser(id = UserId("@someone_10:matrix.org"), username = "someone 10"),
-)
+fun aListOfSelectedUsers() = aMatrixUserList().take(4).toImmutableList()
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/UserListView.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/UserListView.kt
@@ -1,314 +0,0 @@
-/*
- * 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.userlist.api
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SearchBarDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalFocusManager
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextOverflow
-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.designsystem.components.avatar.Avatar
-import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-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.Icon
-import io.element.android.libraries.designsystem.theme.components.IconButton
-import io.element.android.libraries.designsystem.theme.components.SearchBar
-import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.matrix.ui.components.CheckableMatrixUserRow
-import io.element.android.libraries.matrix.ui.components.MatrixUserRow
-import io.element.android.libraries.matrix.ui.model.MatrixUser
-import io.element.android.libraries.matrix.ui.model.getBestName
-import kotlinx.collections.immutable.ImmutableList
-import io.element.android.libraries.ui.strings.R as StringR
-
-@Composable
-fun UserListView(
-    state: UserListState,
-    modifier: Modifier = Modifier,
-    onUserSelected: (MatrixUser) -> Unit = {},
-    onUserDeselected: (MatrixUser) -> Unit = {},
-) {
-    Column(
-        modifier = modifier,
-    ) {
-        SearchUserBar(
-            modifier = Modifier.fillMaxWidth(),
-            query = state.searchQuery,
-            results = state.searchResults,
-            selectedUsers = state.selectedUsers,
-            selectedUsersListState = state.selectedUsersListState,
-            active = state.isSearchActive,
-            isMultiSelectionEnabled = state.isMultiSelectionEnabled,
-            onActiveChanged = { state.eventSink(UserListEvents.OnSearchActiveChanged(it)) },
-            onTextChanged = { state.eventSink(UserListEvents.UpdateSearchQuery(it)) },
-            onUserSelected = {
-                state.eventSink(UserListEvents.AddToSelection(it))
-                onUserSelected(it)
-            },
-            onUserDeselected = {
-                state.eventSink(UserListEvents.RemoveFromSelection(it))
-                onUserDeselected(it)
-            },
-        )
-
-        if (state.isMultiSelectionEnabled && !state.isSearchActive && state.selectedUsers.isNotEmpty()) {
-            SelectedUsersList(
-                listState = state.selectedUsersListState,
-                contentPadding = PaddingValues(16.dp),
-                selectedUsers = state.selectedUsers,
-                onUserRemoved = {
-                    state.eventSink(UserListEvents.RemoveFromSelection(it))
-                    onUserDeselected(it)
-                },
-            )
-        }
-    }
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchUserBar(
-    query: String,
-    results: ImmutableList<MatrixUser>,
-    selectedUsers: ImmutableList<MatrixUser>,
-    selectedUsersListState: LazyListState,
-    active: Boolean,
-    isMultiSelectionEnabled: Boolean,
-    modifier: Modifier = Modifier,
-    placeHolderTitle: String = stringResource(StringR.string.common_search_for_someone),
-    onActiveChanged: (Boolean) -> Unit = {},
-    onTextChanged: (String) -> Unit = {},
-    onUserSelected: (MatrixUser) -> Unit = {},
-    onUserDeselected: (MatrixUser) -> Unit = {},
-) {
-    val focusManager = LocalFocusManager.current
-
-    if (!active) {
-        onTextChanged("")
-        focusManager.clearFocus()
-    }
-
-    SearchBar(
-        query = query,
-        onQueryChange = onTextChanged,
-        onSearch = { focusManager.clearFocus() },
-        active = active,
-        onActiveChange = onActiveChanged,
-        modifier = modifier
-            .padding(horizontal = if (!active) 16.dp else 0.dp),
-        placeholder = {
-            Text(
-                text = placeHolderTitle,
-                modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
-            )
-        },
-        leadingIcon = if (active) {
-            { BackButton(onClick = { onActiveChanged(false) }) }
-        } else {
-            null
-        },
-        trailingIcon = when {
-            active && query.isNotEmpty() -> {
-                {
-                    IconButton(onClick = { onTextChanged("") }) {
-                        Icon(Icons.Default.Close, stringResource(StringR.string.action_clear))
-                    }
-                }
-            }
-            !active -> {
-                {
-                    Icon(
-                        imageVector = Icons.Default.Search,
-                        contentDescription = stringResource(StringR.string.action_search),
-                        modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
-                    )
-                }
-            }
-            else -> null
-        },
-        colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
-        content = {
-            if (isMultiSelectionEnabled && active && selectedUsers.isNotEmpty()) {
-                SelectedUsersList(
-                    listState = selectedUsersListState,
-                    contentPadding = PaddingValues(16.dp),
-                    selectedUsers = selectedUsers,
-                    onUserRemoved = onUserDeselected,
-                )
-            }
-
-            LazyColumn {
-                if (isMultiSelectionEnabled) {
-                    items(results) { matrixUser ->
-                        SearchMultipleUsersResultItem(
-                            modifier = Modifier.fillMaxWidth(),
-                            matrixUser = matrixUser,
-                            isUserSelected = selectedUsers.find { it.id == matrixUser.id } != null,
-                            onCheckedChange = { checked ->
-                                if (checked) {
-                                    onUserSelected(matrixUser)
-                                } else {
-                                    onUserDeselected(matrixUser)
-                                }
-                            }
-                        )
-                    }
-                } else {
-                    items(results) { matrixUser ->
-                        SearchSingleUserResultItem(
-                            modifier = Modifier.fillMaxWidth(),
-                            matrixUser = matrixUser,
-                            onClick = { onUserSelected(matrixUser) }
-                        )
-                    }
-                }
-            }
-        },
-    )
-}
-
-@Composable
-fun SearchMultipleUsersResultItem(
-    matrixUser: MatrixUser,
-    isUserSelected: Boolean,
-    modifier: Modifier = Modifier,
-    onCheckedChange: (Boolean) -> Unit,
-) {
-    CheckableMatrixUserRow(
-        checked = isUserSelected,
-        modifier = modifier,
-        matrixUser = matrixUser,
-        avatarSize = AvatarSize.Custom(36.dp),
-        onCheckedChange = onCheckedChange,
-    )
-}
-
-@Composable
-fun SearchSingleUserResultItem(
-    matrixUser: MatrixUser,
-    modifier: Modifier = Modifier,
-    onClick: () -> Unit = {},
-) {
-    MatrixUserRow(
-        modifier = modifier.clickable(onClick = onClick),
-        matrixUser = matrixUser,
-        avatarSize = AvatarSize.Custom(36.dp),
-    )
-}
-
-@Composable
-fun SelectedUsersList(
-    listState: LazyListState,
-    selectedUsers: ImmutableList<MatrixUser>,
-    modifier: Modifier = Modifier,
-    contentPadding: PaddingValues = PaddingValues(0.dp),
-    onUserRemoved: (MatrixUser) -> Unit = {},
-) {
-    LazyRow(
-        state = listState,
-        modifier = modifier,
-        contentPadding = contentPadding,
-        horizontalArrangement = Arrangement.spacedBy(24.dp),
-    ) {
-        items(selectedUsers.toList()) { matrixUser ->
-            SelectedUser(
-                matrixUser = matrixUser,
-                onUserRemoved = onUserRemoved,
-            )
-        }
-    }
-}
-
-@Composable
-fun SelectedUser(
-    matrixUser: MatrixUser,
-    modifier: Modifier = Modifier,
-    onUserRemoved: (MatrixUser) -> Unit,
-) {
-    Box(modifier = modifier.width(56.dp)) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-        ) {
-            Avatar(matrixUser.avatarData.copy(size = AvatarSize.Custom(56.dp)))
-            Text(
-                text = matrixUser.getBestName(),
-                overflow = TextOverflow.Ellipsis,
-                maxLines = 1,
-                style = MaterialTheme.typography.bodyLarge,
-            )
-        }
-        IconButton(
-            modifier = Modifier
-                .clip(CircleShape)
-                .background(MaterialTheme.colorScheme.primary)
-                .size(20.dp)
-                .align(Alignment.TopEnd),
-            onClick = { onUserRemoved(matrixUser) }
-        ) {
-            Icon(
-                imageVector = Icons.Default.Close,
-                contentDescription = stringResource(id = StringR.string.action_remove),
-                tint = MaterialTheme.colorScheme.onPrimary,
-            )
-        }
-    }
-}
-
-@Preview
-@Composable
-internal fun UserListViewLightPreview(@PreviewParameter(UserListStateProvider::class) state: UserListState) =
-    ElementPreviewLight { ContentToPreview(state) }
-
-@Preview
-@Composable
-internal fun UserListViewDarkPreview(@PreviewParameter(UserListStateProvider::class) state: UserListState) =
-    ElementPreviewDark { ContentToPreview(state) }
-
-@Composable
-private fun ContentToPreview(state: UserListState) {
-    UserListView(state = state)
-}
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SearchMultipleUsersResultItem.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SearchMultipleUsersResultItem.kt
@@ -0,0 +1,61 @@
+/*
+ * 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.userlist.api.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.matrix.ui.components.CheckableMatrixUserRow
+import io.element.android.libraries.matrix.ui.components.aMatrixUser
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+
+@Composable
+fun SearchMultipleUsersResultItem(
+    matrixUser: MatrixUser,
+    isUserSelected: Boolean,
+    modifier: Modifier = Modifier,
+    onCheckedChange: (Boolean) -> Unit = {},
+) {
+    CheckableMatrixUserRow(
+        checked = isUserSelected,
+        modifier = modifier,
+        matrixUser = matrixUser,
+        avatarSize = AvatarSize.Custom(36.dp),
+        onCheckedChange = onCheckedChange,
+    )
+}
+
+@Preview
+@Composable
+internal fun SearchMultipleUsersResultItemLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun SearchMultipleUsersResultItemDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        SearchMultipleUsersResultItem(matrixUser = aMatrixUser(), isUserSelected = true)
+        SearchMultipleUsersResultItem(matrixUser = aMatrixUser(), isUserSelected = false)
+    }
+}
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SearchSingleUserResultItem.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SearchSingleUserResultItem.kt
@@ -0,0 +1,55 @@
+/*
+ * 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.userlist.api.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.matrix.ui.components.MatrixUserRow
+import io.element.android.libraries.matrix.ui.components.aMatrixUser
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+
+@Composable
+fun SearchSingleUserResultItem(
+    matrixUser: MatrixUser,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+) {
+    MatrixUserRow(
+        modifier = modifier.clickable(onClick = onClick),
+        matrixUser = matrixUser,
+        avatarSize = AvatarSize.Custom(36.dp),
+    )
+}
+
+@Preview
+@Composable
+internal fun SearchSingleUserResultItemLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun SearchSingleUserResultItemDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    SearchSingleUserResultItem(matrixUser = aMatrixUser())
+}
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SearchUserBar.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SearchUserBar.kt
@@ -0,0 +1,146 @@
+/*
+ * 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.userlist.api.components
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconButton
+import io.element.android.libraries.designsystem.theme.components.SearchBar
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import io.element.android.libraries.ui.strings.R
+import kotlinx.collections.immutable.ImmutableList
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchUserBar(
+    query: String,
+    results: ImmutableList<MatrixUser>,
+    selectedUsers: ImmutableList<MatrixUser>,
+    selectedUsersListState: LazyListState,
+    active: Boolean,
+    isMultiSelectionEnabled: Boolean,
+    modifier: Modifier = Modifier,
+    placeHolderTitle: String = stringResource(R.string.common_search_for_someone),
+    onActiveChanged: (Boolean) -> Unit = {},
+    onTextChanged: (String) -> Unit = {},
+    onUserSelected: (MatrixUser) -> Unit = {},
+    onUserDeselected: (MatrixUser) -> Unit = {},
+) {
+    val focusManager = LocalFocusManager.current
+
+    if (!active) {
+        onTextChanged("")
+        focusManager.clearFocus()
+    }
+
+    SearchBar(
+        query = query,
+        onQueryChange = onTextChanged,
+        onSearch = { focusManager.clearFocus() },
+        active = active,
+        onActiveChange = onActiveChanged,
+        modifier = modifier
+            .padding(horizontal = if (!active) 16.dp else 0.dp),
+        placeholder = {
+            Text(
+                text = placeHolderTitle,
+                modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
+            )
+        },
+        leadingIcon = if (active) {
+            { BackButton(onClick = { onActiveChanged(false) }) }
+        } else {
+            null
+        },
+        trailingIcon = when {
+            active && query.isNotEmpty() -> {
+                {
+                    IconButton(onClick = { onTextChanged("") }) {
+                        Icon(Icons.Default.Close, stringResource(R.string.action_clear))
+                    }
+                }
+            }
+            !active -> {
+                {
+                    Icon(
+                        imageVector = Icons.Default.Search,
+                        contentDescription = stringResource(R.string.action_search),
+                        modifier = Modifier.alpha(0.4f), // FIXME align on Design system theme (removing alpha should be fine)
+                    )
+                }
+            }
+            else -> null
+        },
+        colors = if (!active) SearchBarDefaults.colors() else SearchBarDefaults.colors(containerColor = Color.Transparent),
+        content = {
+            if (isMultiSelectionEnabled && active && selectedUsers.isNotEmpty()) {
+                SelectedUsersList(
+                    listState = selectedUsersListState,
+                    contentPadding = PaddingValues(16.dp),
+                    selectedUsers = selectedUsers,
+                    onUserRemoved = onUserDeselected,
+                )
+            }
+
+            LazyColumn {
+                if (isMultiSelectionEnabled) {
+                    items(results) { matrixUser ->
+                        SearchMultipleUsersResultItem(
+                            modifier = Modifier.fillMaxWidth(),
+                            matrixUser = matrixUser,
+                            isUserSelected = selectedUsers.find { it.id == matrixUser.id } != null,
+                            onCheckedChange = { checked ->
+                                if (checked) {
+                                    onUserSelected(matrixUser)
+                                } else {
+                                    onUserDeselected(matrixUser)
+                                }
+                            }
+                        )
+                    }
+                } else {
+                    items(results) { matrixUser ->
+                        SearchSingleUserResultItem(
+                            modifier = Modifier.fillMaxWidth(),
+                            matrixUser = matrixUser,
+                            onClick = { onUserSelected(matrixUser) }
+                        )
+                    }
+                }
+            }
+        },
+    )
+}
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SelectedUser.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SelectedUser.kt
@@ -0,0 +1,94 @@
+/*
+ * 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.userlist.api.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconButton
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.matrix.ui.components.aMatrixUser
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import io.element.android.libraries.matrix.ui.model.getBestName
+import io.element.android.libraries.ui.strings.R
+
+@Composable
+fun SelectedUser(
+    matrixUser: MatrixUser,
+    modifier: Modifier = Modifier,
+    onUserRemoved: (MatrixUser) -> Unit = {},
+) {
+    Box(modifier = modifier.width(56.dp)) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Avatar(matrixUser.avatarData.copy(size = AvatarSize.Custom(56.dp)))
+            Text(
+                text = matrixUser.getBestName(),
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+                style = MaterialTheme.typography.bodyLarge,
+            )
+        }
+        IconButton(
+            modifier = Modifier
+                .clip(CircleShape)
+                .background(MaterialTheme.colorScheme.primary)
+                .size(20.dp)
+                .align(Alignment.TopEnd),
+            onClick = { onUserRemoved(matrixUser) }
+        ) {
+            Icon(
+                imageVector = Icons.Default.Close,
+                contentDescription = stringResource(id = R.string.action_remove),
+                tint = MaterialTheme.colorScheme.onPrimary,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun SelectedUserLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun SelectedUserDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    SelectedUser(aMatrixUser())
+}
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SelectedUsersList.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/SelectedUsersList.kt
@@ -0,0 +1,71 @@
+/*
+ * 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.userlist.api.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.features.userlist.api.aListOfSelectedUsers
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+
+@Composable
+fun SelectedUsersList(
+    listState: LazyListState,
+    selectedUsers: ImmutableList<MatrixUser>,
+    modifier: Modifier = Modifier,
+    contentPadding: PaddingValues = PaddingValues(0.dp),
+    onUserRemoved: (MatrixUser) -> Unit = {},
+) {
+    LazyRow(
+        state = listState,
+        modifier = modifier,
+        contentPadding = contentPadding,
+        horizontalArrangement = Arrangement.spacedBy(24.dp),
+    ) {
+        items(selectedUsers.toList()) { matrixUser ->
+            SelectedUser(
+                matrixUser = matrixUser,
+                onUserRemoved = onUserRemoved,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun SelectedUsersListLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun SelectedUsersListDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    SelectedUsersList(
+        listState = LazyListState(),
+        selectedUsers = aListOfSelectedUsers(),
+    )
+}
--- a/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/UserListView.kt
+++ b/features/userlist/api/src/main/kotlin/io/element/android/features/userlist/api/components/UserListView.kt
@@ -0,0 +1,91 @@
+/*
+ * 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.userlist.api.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.features.userlist.api.UserListEvents
+import io.element.android.features.userlist.api.UserListState
+import io.element.android.features.userlist.api.UserListStateProvider
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.matrix.ui.model.MatrixUser
+
+@Composable
+fun UserListView(
+    state: UserListState,
+    modifier: Modifier = Modifier,
+    onUserSelected: (MatrixUser) -> Unit = {},
+    onUserDeselected: (MatrixUser) -> Unit = {},
+) {
+    Column(
+        modifier = modifier,
+    ) {
+        SearchUserBar(
+            modifier = Modifier.fillMaxWidth(),
+            query = state.searchQuery,
+            results = state.searchResults,
+            selectedUsers = state.selectedUsers,
+            selectedUsersListState = state.selectedUsersListState,
+            active = state.isSearchActive,
+            isMultiSelectionEnabled = state.isMultiSelectionEnabled,
+            onActiveChanged = { state.eventSink(UserListEvents.OnSearchActiveChanged(it)) },
+            onTextChanged = { state.eventSink(UserListEvents.UpdateSearchQuery(it)) },
+            onUserSelected = {
+                state.eventSink(UserListEvents.AddToSelection(it))
+                onUserSelected(it)
+            },
+            onUserDeselected = {
+                state.eventSink(UserListEvents.RemoveFromSelection(it))
+                onUserDeselected(it)
+            },
+        )
+
+        if (state.isMultiSelectionEnabled && !state.isSearchActive && state.selectedUsers.isNotEmpty()) {
+            SelectedUsersList(
+                listState = state.selectedUsersListState,
+                contentPadding = PaddingValues(16.dp),
+                selectedUsers = state.selectedUsers,
+                onUserRemoved = {
+                    state.eventSink(UserListEvents.RemoveFromSelection(it))
+                    onUserDeselected(it)
+                },
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun UserListViewLightPreview(@PreviewParameter(UserListStateProvider::class) state: UserListState) =
+    ElementPreviewLight { ContentToPreview(state) }
+
+@Preview
+@Composable
+internal fun UserListViewDarkPreview(@PreviewParameter(UserListStateProvider::class) state: UserListState) =
+    ElementPreviewDark { ContentToPreview(state) }
+
+@Composable
+private fun ContentToPreview(state: UserListState) {
+    UserListView(state = state)
+}