Refactor search related functionality (#436)

Refactor search related functionality

This is a prelude to adding the feature of inviting users to
a room, getting everything in the right place and reusable.

What this does:

## User search refactor

Moves the (global) user search logic (dealing with MXIDs,
minimum lengths, debounces) into a `UserRepository`.

This now sits in a `usersearch` library, which will be
used by the create room flow and the new invite flow.

## SearchBar logic pull-up

Every place we use SearchBar, we're doing the same things
to style placeholders, show back/cancel buttons, etc.

We also have a results type that is duplicated for
basically every feature that uses the search bar.

I've pushed all this common functionality into the
SearchBar itself. This makes the component a bit less
general purpose, but saves a lot of repetition.

## Remove the userlist feature

Almost all the functionality of the userlist feature
is now exclusively used by the create room feature.
Room details uses its own version because the
requirements are different.

Components useful elsewhere (SelectedUsers and
SelectedUser) have gone to matrixui, everything else
has gone to createroom.

## Other bits and pieces

I've fixed everywhere that uses Scaffold to correctly
consume the WindowInsets if the contentPadding is
applied to the contents (which it universally is).
This was a change in the last version of Material3
(I guess previously Scaffold handled the consumption
for us). This fixes weird gaps above search bars.

Added overloads for the MatrixUserRow and
CheckedMatrixUserRow that take the name/subtitle/avatar
separately, so the invites list can pass arbitrary
text like "User has already been invited".

The `blockuser` package was for some reason not
under `impl` but alongside it, I've bumped it into
the right place.

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableMatrixUserRow.kt

@@ -26,11 +26,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
 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.Checkbox
 import io.element.android.libraries.matrix.api.user.MatrixUser
+import io.element.android.libraries.matrix.ui.model.getAvatarData
+import io.element.android.libraries.matrix.ui.model.getBestName
 
 @Composable
 fun CheckableMatrixUserRow(
@@ -40,18 +43,39 @@ fun CheckableMatrixUserRow(
     avatarSize: AvatarSize = AvatarSize.MEDIUM,
     onCheckedChange: (Boolean) -> Unit = {},
     enabled: Boolean = true,
-) {
+) = CheckableUserRow(
+    checked = checked,
+    avatarData = matrixUser.getAvatarData(avatarSize),
+    name = matrixUser.getBestName(),
+    subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value,
+    modifier = modifier,
+    onCheckedChange = onCheckedChange,
+    enabled = enabled,
+)
 
+@Composable
+fun CheckableUserRow(
+    checked: Boolean,
+    avatarData: AvatarData,
+    name: String,
+    subtext: String?,
+    modifier: Modifier = Modifier,
+    onCheckedChange: (Boolean) -> Unit = {},
+    enabled: Boolean = true,
+) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .clickable(role = Role.Checkbox) { onCheckedChange(!checked) },
+            .clickable(role = Role.Checkbox, enabled = enabled) {
+                onCheckedChange(!checked)
+            },
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        MatrixUserRow(
+        UserRow(
             modifier = Modifier.weight(1f),
-            matrixUser = matrixUser,
-            avatarSize = avatarSize,
+            avatarData = avatarData,
+            name = name,
+            subtext = subtext,
         )
 
         Checkbox(
@@ -77,5 +101,7 @@ private fun ContentToPreview(matrixUser: MatrixUser) {
     Column {
         CheckableMatrixUserRow(checked = true, matrixUser)
         CheckableMatrixUserRow(checked = false, matrixUser)
+        CheckableMatrixUserRow(checked = true, matrixUser, enabled = false)
+        CheckableMatrixUserRow(checked = false, matrixUser, enabled = false)
     }
 }

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt

@@ -33,6 +33,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
 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
@@ -46,6 +47,19 @@ fun MatrixUserRow(
     matrixUser: MatrixUser,
     modifier: Modifier = Modifier,
     avatarSize: AvatarSize = AvatarSize.MEDIUM,
+) = UserRow(
+    avatarData = matrixUser.getAvatarData(avatarSize),
+    name = matrixUser.getBestName(),
+    subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value,
+    modifier = modifier,
+)
+
+@Composable
+fun UserRow(
+    avatarData: AvatarData,
+    name: String,
+    subtext: String?,
+    modifier: Modifier = Modifier,
 ) {
     Row(
         modifier = modifier
@@ -54,9 +68,7 @@ fun MatrixUserRow(
             .height(IntrinsicSize.Min),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Avatar(
-            matrixUser.getAvatarData(size = avatarSize),
-        )
+        Avatar(avatarData)
         Column(
             modifier = Modifier
                 .padding(start = 12.dp),
@@ -65,15 +77,15 @@ fun MatrixUserRow(
             Text(
                 fontSize = 16.sp,
                 fontWeight = FontWeight.SemiBold,
-                text = matrixUser.getBestName(),
+                text = name,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 color = MaterialTheme.colorScheme.primary,
             )
             // Id
-            if (matrixUser.displayName.isNullOrEmpty().not()) {
+            subtext?.let {
                 Text(
-                    text = matrixUser.userId.value,
+                    text = subtext,
                     color = MaterialTheme.colorScheme.secondary,
                     fontSize = 14.sp,
                     maxLines = 1,

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/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.libraries.matrix.ui.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.api.user.MatrixUser
+import io.element.android.libraries.matrix.ui.model.getAvatarData
+import io.element.android.libraries.matrix.ui.model.getBestName
+import io.element.android.libraries.ui.strings.R as StringR
+
+@Composable
+fun SelectedUser(
+    matrixUser: MatrixUser,
+    modifier: Modifier = Modifier,
+    onUserRemoved: (MatrixUser) -> Unit = {},
+) {
+    Box(modifier = modifier.width(56.dp)) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Avatar(matrixUser.getAvatarData(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 SelectedUserLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun SelectedUserDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    SelectedUser(aMatrixUser())
+}

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUsersList.kt

@@ -0,0 +1,87 @@
+/*
+ * 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.libraries.matrix.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.matrix.api.user.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
+
+@Composable
+fun SelectedUsersList(
+    selectedUsers: ImmutableList<MatrixUser>,
+    modifier: Modifier = Modifier,
+    autoScroll: Boolean = false,
+    contentPadding: PaddingValues = PaddingValues(0.dp),
+    onUserRemoved: (MatrixUser) -> Unit = {},
+) {
+    val lazyListState = rememberLazyListState()
+    if (autoScroll) {
+        var currentSize by rememberSaveable { mutableStateOf(selectedUsers.size) }
+        LaunchedEffect(selectedUsers.size) {
+            val isItemAdded = selectedUsers.size > currentSize
+            if (isItemAdded) {
+                lazyListState.animateScrollToItem(selectedUsers.lastIndex)
+            }
+            currentSize = selectedUsers.size
+        }
+    }
+
+    LazyRow(
+        state = lazyListState,
+        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(
+        selectedUsers = aMatrixUserList().take(6).toImmutableList(),
+    )
+}