Merge pull request #519 from vector-im/misc/cjs/create-join-design-feedback

Design tweaks for create/join rooms

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/ElementTextStyles.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.libraries.designsystem
 
+import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -25,12 +26,14 @@ import androidx.compose.ui.unit.sp
 // TODO Remove
 object ElementTextStyles {
 
+    @Suppress("DEPRECATION")
     val Button = TextStyle(
         fontSize = 16.sp,
-        fontWeight = FontWeight.Bold,
+        fontWeight = FontWeight.Medium,
         lineHeight = 22.sp,
         fontStyle = FontStyle.Normal,
         textAlign = TextAlign.Center,
+        platformStyle = PlatformTextStyle(includeFontPadding = false)
     )
 
     object Bold {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/ProgressDialog.kt

@@ -19,7 +19,8 @@ package io.element.android.libraries.designsystem.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
@@ -46,29 +47,10 @@ fun ProgressDialog(
         onDismissRequest = onDismiss,
         properties = DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false)
     ) {
-        Box(
-            contentAlignment = Alignment.Center,
-            modifier = modifier
-                .fillMaxWidth()
-                .background(
-                    color = MaterialTheme.colorScheme.surfaceVariant,
-                    shape = RoundedCornerShape(8.dp)
-                )
-        ) {
-            Column(horizontalAlignment = Alignment.CenterHorizontally) {
-                CircularProgressIndicator(
-                    modifier = Modifier.padding(16.dp),
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-                if (!text.isNullOrBlank()) {
-                    Text(
-                        text = text,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                        modifier = Modifier.padding(16.dp)
-                    )
-                }
-            }
-        }
+        ProgressDialogContent(
+            modifier = modifier,
+            text = text,
+        )
     }
 }
 
@@ -80,22 +62,23 @@ private fun ProgressDialogContent(
     Box(
         contentAlignment = Alignment.Center,
         modifier = modifier
-            .fillMaxWidth()
             .background(
                 color = MaterialTheme.colorScheme.surfaceVariant,
                 shape = RoundedCornerShape(8.dp)
             )
     ) {
-        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.padding(top = 38.dp, bottom = 32.dp, start = 40.dp, end = 40.dp)
+        ) {
             CircularProgressIndicator(
-                modifier = Modifier.padding(16.dp),
                 color = MaterialTheme.colorScheme.onSurfaceVariant
             )
             if (!text.isNullOrBlank()) {
+                Spacer(modifier = Modifier.height(22.dp))
                 Text(
                     text = text,
                     color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    modifier = Modifier.padding(16.dp)
                 )
             }
         }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/Avatar.kt

@@ -49,7 +49,7 @@ fun Avatar(
     val commonModifier = modifier
         .size(avatarData.size.dp)
         .clip(CircleShape)
-    if (avatarData.url == null) {
+    if (avatarData.url.isNullOrBlank()) {
         InitialsAvatar(
             avatarData = avatarData,
             modifier = commonModifier,
@@ -72,7 +72,7 @@ private fun ImageAvatar(
     AsyncImage(
         model = avatarData,
         onError = {
-            Timber.e("TAG", "Error $it\n${it.result}", it.result.throwable)
+            Timber.e(it.result.throwable, "Error loading avatar $it\n${it.result}")
         },
         contentDescription = contentDescription,
         contentScale = ContentScale.Crop,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementTypography.kt

@@ -16,6 +16,7 @@
 
 package io.element.android.libraries.designsystem.theme
 
+import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -107,3 +108,13 @@ val titleMediumDefault: TextStyle = TextStyle(
     letterSpacing = 0.5.sp
 )
 
+// Temporary style for text that needs to be aligned without weird font padding issues.  `includeFontPadding` will default to false in a future version of
+// compose, at which point this can be removed.
+//
+// Ref: https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b
+@Suppress("DEPRECATION")
+val noFontPadding: TextStyle = TextStyle(
+    platformStyle = PlatformTextStyle(
+        includeFontPadding = false
+    )
+)

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

@@ -27,7 +27,6 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.ModalBottomSheetState
 import androidx.compose.material.ModalBottomSheetValue
-import androidx.compose.material.Text
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -35,10 +34,12 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
 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.ModalBottomSheetLayout
+import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.ui.media.AvatarAction
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
@@ -62,6 +63,7 @@ fun AvatarActionBottomSheet(
     ModalBottomSheetLayout(
         modifier = modifier,
         sheetState = modalBottomSheetState,
+        displayHandle = true,
         sheetContent = {
             AvatarActionBottomSheetContent(
                 actions = actions,
@@ -91,6 +93,7 @@ private fun AvatarActionBottomSheetContent(
                 headlineContent = {
                     Text(
                         text = stringResource(action.titleResId),
+                        fontSize = 16.sp,
                         color = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
                     )
                 },
@@ -98,7 +101,7 @@ private fun AvatarActionBottomSheetContent(
                     Icon(
                         imageVector = action.icon,
                         contentDescription = stringResource(action.titleResId),
-                        tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
+                        tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.secondary,
                     )
                 }
             )

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

@@ -20,12 +20,14 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 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 androidx.compose.ui.unit.dp
 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
@@ -79,8 +81,10 @@ fun CheckableUserRow(
         )
 
         Checkbox(
+            modifier = Modifier
+                .padding(end = 16.dp),
             checked = checked,
-            onCheckedChange = onCheckedChange,
+            onCheckedChange = null,
             enabled = enabled,
         )
     }

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

@@ -16,9 +16,11 @@
 
 package io.element.android.libraries.matrix.ui.components
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -38,6 +40,7 @@ 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.Text
+import io.element.android.libraries.designsystem.theme.noFontPadding
 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
@@ -46,7 +49,7 @@ import io.element.android.libraries.matrix.ui.model.getBestName
 fun MatrixUserRow(
     matrixUser: MatrixUser,
     modifier: Modifier = Modifier,
-    avatarSize: AvatarSize = AvatarSize.MEDIUM,
+    avatarSize: AvatarSize = AvatarSize.Custom(36.dp),
 ) = UserRow(
     avatarData = matrixUser.getAvatarData(avatarSize),
     name = matrixUser.getBestName(),
@@ -71,25 +74,29 @@ fun UserRow(
         Avatar(avatarData)
         Column(
             modifier = Modifier
-                .padding(start = 12.dp),
+                .padding(start = 12.dp)
+                .fillMaxHeight(),
+            verticalArrangement = Arrangement.SpaceBetween,
         ) {
             // Name
             Text(
                 fontSize = 16.sp,
-                fontWeight = FontWeight.SemiBold,
+                fontWeight = FontWeight.Normal,
                 text = name,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 color = MaterialTheme.colorScheme.primary,
+                style = noFontPadding,
             )
             // Id
             subtext?.let {
                 Text(
                     text = subtext,
                     color = MaterialTheme.colorScheme.secondary,
-                    fontSize = 14.sp,
+                    fontSize = 12.sp,
                     maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
+                    overflow = TextOverflow.Ellipsis,
+                    style = noFontPadding,
                 )
             }
         }

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

@@ -16,16 +16,20 @@
 
 package io.element.android.libraries.matrix.ui.components
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 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.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -38,7 +42,7 @@ 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.Surface
 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
@@ -51,7 +55,9 @@ fun SelectedUser(
     modifier: Modifier = Modifier,
     onUserRemoved: (MatrixUser) -> Unit = {},
 ) {
-    Box(modifier = modifier.width(56.dp)) {
+    Box(modifier = modifier
+        .width(56.dp)
+    ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
@@ -63,18 +69,23 @@ fun SelectedUser(
                 style = MaterialTheme.typography.bodyLarge,
             )
         }
-        IconButton(
+        Surface(
+            color = MaterialTheme.colorScheme.primary,
             modifier = Modifier
                 .clip(CircleShape)
-                .background(MaterialTheme.colorScheme.primary)
                 .size(20.dp)
-                .align(Alignment.TopEnd),
-            onClick = { onUserRemoved(matrixUser) }
+                .align(Alignment.TopEnd)
+                .clickable(
+                    indication = rememberRipple(),
+                    interactionSource = remember { MutableInteractionSource() },
+                    onClick = { onUserRemoved(matrixUser) }
+                ),
         ) {
             Icon(
                 imageVector = Icons.Default.Close,
                 contentDescription = stringResource(id = StringR.string.action_remove),
                 tint = MaterialTheme.colorScheme.onPrimary,
+                modifier = Modifier.padding(2.dp)
             )
         }
     }

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

@@ -16,18 +16,27 @@
 
 package io.element.android.libraries.matrix.ui.components
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@@ -35,6 +44,7 @@ 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
+import kotlin.math.floor
 
 @Composable
 fun SelectedUsersList(
@@ -56,16 +66,64 @@ fun SelectedUsersList(
         }
     }
 
+    val rowWidth by remember {
+        derivedStateOf {
+            lazyListState.layoutInfo.viewportSize.width - lazyListState.layoutInfo.beforeContentPadding
+        }
+    }
+
+    // Calculate spacing to show between each user. This is at least [minimumSpacing], and will grow to ensure that if the available space is filled with
+    // users, the last visible user will be precisely half visible. This gives an obvious affordance that there are more entries and the list can be scrolled.
+    // For efficiency, we assume that all the children are the same width. If they needed to be different sizes we'd have to do this calculation each time
+    // they needed to be measured.
+    val minimumSpacing = with(LocalDensity.current) { 24.dp.toPx() }
+    val userWidth = with(LocalDensity.current) { 56.dp.toPx() }
+    val userSpacing by remember {
+        derivedStateOf {
+            if (rowWidth == 0) {
+                // The row hasn't yet been measured yet, so we don't know how big it is
+                minimumSpacing
+            } else {
+                val userWidthWithSpacing = userWidth + minimumSpacing
+                val maxVisibleUsers = rowWidth / userWidthWithSpacing
+
+                // Round down the number of visible users to end with a state where one is half visible
+                val targetFraction = (userWidth / 2) / userWidthWithSpacing
+                val targetUsers = floor(maxVisibleUsers - targetFraction) + targetFraction
+
+                // Work out how much extra spacing we need to reduce the number of users that much, then split it evenly amongst the visible users
+                val extraSpacing = (maxVisibleUsers - targetUsers) * userWidthWithSpacing
+                val extraSpacingPerUser = extraSpacing / floor(targetUsers)
+
+                minimumSpacing + extraSpacingPerUser
+            }
+        }
+    }
+
     LazyRow(
         state = lazyListState,
-        modifier = modifier,
+        modifier = modifier
+            .fillMaxWidth(),
         contentPadding = contentPadding,
-        horizontalArrangement = Arrangement.spacedBy(24.dp),
     ) {
-        items(selectedUsers.toList()) { matrixUser ->
-            SelectedUser(
-                matrixUser = matrixUser,
-                onUserRemoved = onUserRemoved,
+        itemsIndexed(selectedUsers.toList()) { index, matrixUser ->
+            Layout(
+                content = {
+                    SelectedUser(
+                        matrixUser = matrixUser,
+                        onUserRemoved = onUserRemoved,
+                    )
+                },
+                measurePolicy = { measurables, constraints ->
+                    val placeable = measurables.first().measure(constraints)
+                    val spacing = if (index == selectedUsers.lastIndex) 0f else userSpacing
+                    layout(
+                        width = (placeable.width + spacing).toInt(),
+                        height = placeable.height
+                    ) {
+                        placeable.place(0, 0)
+                    }
+                }
             )
         }
     }
@@ -81,7 +139,23 @@ internal fun SelectedUsersListDarkPreview() = ElementPreviewDark { ContentToPrev
 
 @Composable
 private fun ContentToPreview() {
-    SelectedUsersList(
-        selectedUsers = aMatrixUserList().take(6).toImmutableList(),
-    )
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        // Two users that will be visible with no scrolling
+        SelectedUsersList(
+            selectedUsers = aMatrixUserList().take(2).toImmutableList(),
+            modifier = Modifier
+                .width(200.dp)
+                .border(1.dp, Color.Red)
+        )
+
+        // Multiple users that don't fit, so will be spaced out per the measure policy
+        for (i in 0..5) {
+            SelectedUsersList(
+                selectedUsers = aMatrixUserList().take(6).toImmutableList(),
+                modifier = Modifier
+                    .width((200 + (i * 20)).dp)
+                    .border(1.dp, Color.Red)
+            )
+        }
+    }
 }

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

@@ -17,9 +17,11 @@
 package io.element.android.libraries.matrix.ui.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -39,10 +41,12 @@ 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.ElementThemedPreview
 import io.element.android.libraries.designsystem.theme.components.Checkbox
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.noFontPadding
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 import io.element.android.libraries.ui.strings.R
 
@@ -62,7 +66,9 @@ fun UnresolvedUserRow(
         Avatar(avatarData)
         Column(
             modifier = Modifier
-                .padding(start = 12.dp),
+                .padding(start = 12.dp)
+                .fillMaxHeight(),
+            verticalArrangement = Arrangement.SpaceBetween,
         ) {
             // ID
             Text(
@@ -72,10 +78,11 @@ fun UnresolvedUserRow(
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 color = MaterialTheme.colorScheme.primary,
+                style = noFontPadding,
             )
 
             // Warning
-            Row(modifier = Modifier.fillMaxWidth()) {
+            Row(modifier = Modifier.fillMaxWidth().padding(top = 3.dp)) {
                 Icon(
                     imageVector = Icons.Filled.Error,
                     contentDescription = "",
@@ -121,8 +128,9 @@ fun CheckableUnresolvedUserRow(
         )
 
         Checkbox(
+            modifier = Modifier.padding(end = 16.dp),
             checked = checked,
-            onCheckedChange = onCheckedChange,
+            onCheckedChange = null,
             enabled = enabled,
         )
     }
@@ -142,9 +150,9 @@ internal fun CheckableUnresolvedUserRowPreview() =
     ElementThemedPreview {
         val matrixUser = aMatrixUser()
         Column {
-            CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(), matrixUser.userId.value)
-            CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(), matrixUser.userId.value)
-            CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(), matrixUser.userId.value, enabled = false)
-            CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(), matrixUser.userId.value, enabled = false)
+            CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value)
+            CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value)
+            CheckableUnresolvedUserRow(false, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value, enabled = false)
+            CheckableUnresolvedUserRow(true, matrixUser.getAvatarData(AvatarSize.Custom(36.dp)), matrixUser.userId.value, enabled = false)
         }
     }

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -69,6 +69,7 @@
   <string name="common_encryption_enabled">"Encryption enabled"</string>
   <string name="common_error">"Error"</string>
   <string name="common_file">"File"</string>
+  <string name="common_file_saved_on_disk_android">"File saved to Downloads"</string>
   <string name="common_gif">"GIF"</string>
   <string name="common_image">"Image"</string>
   <string name="common_invite_unknown_profile">"We can’t validate this user’s Matrix ID. The invite might not be received."</string>
@@ -89,6 +90,7 @@
   <string name="common_report_a_bug">"Report a bug"</string>
   <string name="common_report_submitted">"Report submitted"</string>
   <string name="common_room_name">"Room name"</string>
+  <string name="common_room_name_placeholder">"e.g. your project name"</string>
   <string name="common_search_for_someone">"Search for someone"</string>
   <string name="common_search_results">"Search results"</string>
   <string name="common_security">"Security"</string>
@@ -102,6 +104,7 @@
   <string name="common_success">"Success"</string>
   <string name="common_suggestions">"Suggestions"</string>
   <string name="common_topic">"Topic"</string>
+  <string name="common_topic_placeholder">"What is this room about?"</string>
   <string name="common_unable_to_decrypt">"Unable to decrypt"</string>
   <string name="common_unable_to_invite_message">"We were unable to successfully send invites to one or more users."</string>
   <string name="common_unable_to_invite_title">"Unable to send invite(s)"</string>

libraries/usersearch/api/src/main/kotlin/io/element/android/libraries/usersearch/api/UserListDataSource.kt

@@ -21,6 +21,6 @@ import io.element.android.libraries.matrix.api.user.MatrixUser
 
 interface UserListDataSource {
     //TODO should probably have a flow
-    suspend fun search(query: String): List<MatrixUser>
+    suspend fun search(query: String, count: Long): List<MatrixUser>
     suspend fun getProfile(userId: UserId): MatrixUser?
 }

libraries/usersearch/impl/src/main/kotlin/io/element/android/libraries/usersearch/impl/MatrixUserListDataSource.kt

@@ -28,16 +28,12 @@ import javax.inject.Inject
 class MatrixUserListDataSource @Inject constructor(
     private val client: MatrixClient
 ) : UserListDataSource {
-    override suspend fun search(query: String): List<MatrixUser> {
-        val res = client.searchUsers(query, MAX_SEARCH_RESULTS)
+    override suspend fun search(query: String, count: Long): List<MatrixUser> {
+        val res = client.searchUsers(query, count)
         return res.getOrNull()?.results.orEmpty()
     }
 
     override suspend fun getProfile(userId: UserId): MatrixUser? {
         return client.getProfile(userId).getOrNull()
     }
-
-    companion object {
-        private const val MAX_SEARCH_RESULTS = 5L
-    }
 }

libraries/usersearch/impl/src/main/kotlin/io/element/android/libraries/usersearch/impl/MatrixUserRepository.kt

@@ -45,7 +45,7 @@ class MatrixUserRepository @Inject constructor(
             // Debounce
             delay(DEBOUNCE_TIME_MILLIS)
 
-            val results = dataSource.search(query).map { UserSearchResult(it) }.toMutableList()
+            val results = dataSource.search(query, MAXIMUM_SEARCH_RESULTS).map { UserSearchResult(it) }.toMutableList()
 
             // If the query is a user ID and the result doesn't contain that user ID, query the profile information explicitly
             if (isUserId && results.none { it.matrixUser.userId.value == query }) {
@@ -61,7 +61,8 @@ class MatrixUserRepository @Inject constructor(
     }
 
     companion object {
-        private const val DEBOUNCE_TIME_MILLIS = 500L
+        private const val DEBOUNCE_TIME_MILLIS = 250L
         private const val MINIMUM_SEARCH_LENGTH = 3
+        private const val MAXIMUM_SEARCH_RESULTS = 10L
     }
 }

libraries/usersearch/impl/src/test/kotlin/io/element/android/libraries/usersearch/impl/MatrixUserListDataSourceTest.kt

@@ -47,7 +47,7 @@ internal class MatrixUserListDataSourceTest {
         )
         val dataSource = MatrixUserListDataSource(matrixClient)
 
-        val results = dataSource.search("test")
+        val results = dataSource.search("test", 2)
         Truth.assertThat(results).containsExactly(
             aMatrixUserProfile(),
             aMatrixUserProfile(userId = A_USER_ID_2)
@@ -63,7 +63,7 @@ internal class MatrixUserListDataSourceTest {
         )
         val dataSource = MatrixUserListDataSource(matrixClient)
 
-        val results = dataSource.search("test")
+        val results = dataSource.search("test", 2)
         Truth.assertThat(results).isEmpty()
     }
 

libraries/usersearch/test/src/main/kotlin/io/element/android/libraries/usersearch/test/FakeUserListDataSource.kt

@@ -25,7 +25,7 @@ class FakeUserListDataSource : UserListDataSource {
     private var searchResult: List<MatrixUser> = emptyList()
     private var profile: MatrixUser? = null
 
-    override suspend fun search(query: String): List<MatrixUser> = searchResult
+    override suspend fun search(query: String, count: Long): List<MatrixUser> = searchResult.take(count.toInt())
 
     override suspend fun getProfile(userId: UserId): MatrixUser? = profile