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

Design tweaks for create/join rooms

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/components/SearchUserBar.kt

@@ -16,15 +16,26 @@
 
 package io.element.android.features.createroom.impl.components
 
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.SearchBar
 import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
 import io.element.android.libraries.matrix.api.user.MatrixUser
@@ -49,6 +60,8 @@ fun SearchUserBar(
     onUserSelected: (MatrixUser) -> Unit = {},
     onUserDeselected: (MatrixUser) -> Unit = {},
 ) {
+    val columnState = rememberLazyListState()
+
     SearchBar(
         query = query,
         onQueryChange = onTextChanged,
@@ -59,19 +72,38 @@ fun SearchUserBar(
         showBackButton = showBackButton,
         contentPrefix = {
             if (isMultiSelectionEnabled && active && selectedUsers.isNotEmpty()) {
+                // We want the selected users to behave a bit like a top bar - when the list below is scrolled, the colour
+                // should change to indicate elevation.
+
+                val elevation = remember {
+                    derivedStateOf {
+                        if (columnState.canScrollBackward) {
+                            4.dp
+                        } else {
+                            0.dp
+                        }
+                    }
+                }
+
+                val appBarContainerColor by animateColorAsState(
+                    targetValue = MaterialTheme.colorScheme.surfaceColorAtElevation(elevation.value),
+                    animationSpec = spring(stiffness = Spring.StiffnessMediumLow)
+                )
+
                 SelectedUsersList(
                     contentPadding = PaddingValues(16.dp),
                     selectedUsers = selectedUsers,
                     autoScroll = true,
                     onUserRemoved = onUserDeselected,
+                    modifier = Modifier.background(appBarContainerColor)
                 )
             }
         },
         resultState = state,
         resultHandler = { users ->
-            LazyColumn {
+            LazyColumn(state = columnState) {
                 if (isMultiSelectionEnabled) {
-                    items(users) { searchResult ->
+                    itemsIndexed(users) { index, searchResult ->
                         SearchMultipleUsersResultItem(
                             modifier = Modifier.fillMaxWidth(),
                             searchResult = searchResult,
@@ -84,14 +116,20 @@ fun SearchUserBar(
                                 }
                             }
                         )
+                        if (index < users.lastIndex) {
+                            Divider()
+                        }
                     }
                 } else {
-                    items(users) { searchResult ->
+                    itemsIndexed(users) { index, searchResult ->
                         SearchSingleUserResultItem(
                             modifier = Modifier.fillMaxWidth(),
                             searchResult = searchResult,
                             onClick = { onUserSelected(searchResult.matrixUser) }
                         )
+                        if (index < users.lastIndex) {
+                            Divider()
+                        }
                     }
                 }
             }

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/configureroom/ConfigureRoomView.kt

@@ -130,6 +130,7 @@ fun ConfigureRoomView(
             )
             if (state.config.invites.isNotEmpty()) {
                 SelectedUsersList(
+                    modifier = Modifier.padding(bottom = 16.dp),
                     contentPadding = PaddingValues(horizontal = 24.dp),
                     selectedUsers = state.config.invites,
                     onUserRemoved = {
@@ -226,7 +227,7 @@ fun RoomNameWithAvatar(
         LabelledTextField(
             label = stringResource(R.string.screen_create_room_room_name_label),
             value = roomName,
-            placeholder = stringResource(R.string.screen_create_room_room_name_placeholder),
+            placeholder = stringResource(StringR.string.common_room_name_placeholder),
             singleLine = true,
             onValueChange = onRoomNameChanged,
         )
@@ -243,7 +244,7 @@ fun RoomTopic(
         modifier = modifier,
         label = stringResource(R.string.screen_create_room_topic_label),
         value = topic,
-        placeholder = stringResource(R.string.screen_create_room_topic_placeholder),
+        placeholder = stringResource(StringR.string.common_topic_placeholder),
         onValueChange = onTopicChanged,
         maxLines = 3,
     )

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt

@@ -26,14 +26,15 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
@@ -142,7 +143,11 @@ fun CreateRoomRootViewTopBar(
         },
         actions = {
             IconButton(onClick = onClosePressed) {
-                Icon(imageVector = Icons.Default.Close, contentDescription = stringResource(id = StringR.string.action_close))
+                Icon(
+                    imageVector = Icons.Default.Close,
+                    contentDescription = stringResource(id = StringR.string.action_close),
+                    tint = MaterialTheme.colorScheme.primary,
+                )
             }
         }
     )
@@ -157,7 +162,7 @@ fun CreateRoomActionButtonsList(
     Column(modifier = modifier) {
         CreateRoomActionButton(
             iconRes = DrawableR.drawable.ic_groups,
-            text = stringResource(id = StringR.string.action_create_a_room),
+            text = stringResource(id = R.string.screen_create_room_action_create_room),
             onClick = onNewRoomClicked,
         )
         CreateRoomActionButton(
@@ -185,11 +190,16 @@ fun CreateRoomActionButton(
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Icon(
-            modifier = Modifier.alpha(0.5f), // FIXME align on Design system theme (removing alpha should be fine)
+            modifier = Modifier.size(24.dp),
+            tint = MaterialTheme.colorScheme.secondary,
             resourceId = iconRes,
             contentDescription = null,
         )
-        Text(text = text)
+        Text(
+            text = text,
+            fontSize = 16.sp,
+            fontWeight = FontWeight.Normal
+        )
     }
 }
 

features/createroom/impl/src/main/res/values-cs/translations.xml

@@ -9,9 +9,7 @@
   <string name="screen_create_room_public_option_description">"Zprávy nejsou šifrované a může si je přečíst kdokoli. Šifrování můžete povolit později."</string>
   <string name="screen_create_room_public_option_title">"Veřejná místnost (kdokoli)"</string>
   <string name="screen_create_room_room_name_label">"Název místnosti"</string>
-  <string name="screen_create_room_room_name_placeholder">"např. Produktový sprint"</string>
   <string name="screen_create_room_topic_label">"Téma (nepovinné)"</string>
-  <string name="screen_create_room_topic_placeholder">"O čem je tato místnost?"</string>
   <string name="screen_start_chat_error_starting_chat">"Při pokusu o zahájení chatu došlo k chybě"</string>
   <string name="screen_create_room_title">"Vytvořit místnost"</string>
-</resources>
+</resources>

features/createroom/impl/src/main/res/values-de/translations.xml

@@ -9,9 +9,7 @@
   <string name="screen_create_room_public_option_description">"Nachrichten sind nicht verschlüsselt und jeder kann sie lesen. Du kannst die Verschlüsselung zu einem späteren Zeitpunkt aktivieren."</string>
   <string name="screen_create_room_public_option_title">"Öffentlicher Raum (jeder)"</string>
   <string name="screen_create_room_room_name_label">"Raumname"</string>
-  <string name="screen_create_room_room_name_placeholder">"z.B. Produkt-Sprint"</string>
   <string name="screen_create_room_topic_label">"Thema (optional)"</string>
-  <string name="screen_create_room_topic_placeholder">"Worum geht es in diesem Raum?"</string>
   <string name="screen_start_chat_error_starting_chat">"Beim Versuch, einen Chat zu starten, ist ein Fehler aufgetreten"</string>
   <string name="screen_create_room_title">"Raum erstellen"</string>
-</resources>
+</resources>

features/createroom/impl/src/main/res/values-fr/translations.xml

@@ -9,9 +9,7 @@
   <string name="screen_create_room_public_option_description">"Les messages ne sont pas chiffrés et n\'importe qui peut les lire. Vous pouvez activer le chiffrement ultérieurement."</string>
   <string name="screen_create_room_public_option_title">"Salle publique (n’importe qui)"</string>
   <string name="screen_create_room_room_name_label">"Nom de la salle"</string>
-  <string name="screen_create_room_room_name_placeholder">"Ex: Sprint Produit"</string>
   <string name="screen_create_room_topic_label">"Sujet (optionnel)"</string>
-  <string name="screen_create_room_topic_placeholder">"De quoi parle cette salle ?"</string>
   <string name="screen_start_chat_error_starting_chat">"Une erreur s\'est produite lors de la tentative de démarrage d\'une discussion"</string>
   <string name="screen_create_room_title">"Créer une salle"</string>
-</resources>
+</resources>

features/createroom/impl/src/main/res/values-ro/translations.xml

@@ -9,9 +9,7 @@
   <string name="screen_create_room_public_option_description">"Mesajele nu sunt criptate și oricine le poate citi. Puteți activa criptarea la o dată ulterioară."</string>
   <string name="screen_create_room_public_option_title">"Cameră publică (oricine)"</string>
   <string name="screen_create_room_room_name_label">"Numele camerei"</string>
-  <string name="screen_create_room_room_name_placeholder">"e.g. Mici și Cozonaci"</string>
   <string name="screen_create_room_topic_label">"Subiect (opțional)"</string>
-  <string name="screen_create_room_topic_placeholder">"Despre ce este această cameră?"</string>
   <string name="screen_start_chat_error_starting_chat">"A apărut o eroare la încercarea începerii conversației"</string>
   <string name="screen_create_room_title">"Creați o cameră"</string>
 </resources>

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

@@ -9,9 +9,7 @@
   <string name="screen_create_room_public_option_description">"Messages are not encrypted and anyone can read them. You can enable encryption at a later date."</string>
   <string name="screen_create_room_public_option_title">"Public room (anyone)"</string>
   <string name="screen_create_room_room_name_label">"Room name"</string>
-  <string name="screen_create_room_room_name_placeholder">"e.g. Product Sprint"</string>
   <string name="screen_create_room_topic_label">"Topic (optional)"</string>
-  <string name="screen_create_room_topic_placeholder">"What is this room about?"</string>
   <string name="screen_start_chat_error_starting_chat">"An error occurred when trying to start a chat"</string>
   <string name="screen_create_room_title">"Create a room"</string>
 </resources>

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/InviteListView.kt

@@ -24,7 +24,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -42,6 +42,7 @@ import io.element.android.libraries.designsystem.components.dialogs.Confirmation
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -81,6 +82,9 @@ fun InviteListView(
         ConfirmationDialog(
             content = stringResource(contentResource, state.declineConfirmationDialog.name),
             title = stringResource(titleResource),
+            submitText = stringResource(StringR.string.action_decline),
+            cancelText = stringResource(StringR.string.action_cancel),
+            emphasizeSubmitButton = true,
             onSubmitClicked = { state.eventSink(InviteListEvents.ConfirmDeclineInvite) },
             onDismiss = { state.eventSink(InviteListEvents.CancelDeclineInvite) }
         )
@@ -143,14 +147,18 @@ fun InviteListContent(
                     LazyColumn(
                         modifier = Modifier.weight(1f)
                     ) {
-                        items(
+                        itemsIndexed(
                             items = state.inviteList,
-                        ) { invite ->
+                        ) { index, invite ->
                             InviteSummaryRow(
                                 invite = invite,
                                 onAcceptClicked = { state.eventSink(InviteListEvents.AcceptInvite(invite)) },
                                 onDeclineClicked = { state.eventSink(InviteListEvents.DeclineInvite(invite)) },
                             )
+
+                            if (index != state.inviteList.lastIndex) {
+                                Divider()
+                            }
                         }
                     }
                 }

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/components/InviteSummaryRow.kt

@@ -17,13 +17,13 @@
 package io.element.android.features.invitelist.impl.components
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
@@ -31,23 +31,18 @@ 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.foundation.text.InlineTextContent
-import androidx.compose.foundation.text.appendInlineContent
 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.graphics.Color
-import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.Placeholder
-import androidx.compose.ui.text.PlaceholderVerticalAlign
+import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -64,8 +59,8 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.theme.noFontPadding
 import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator
-import kotlinx.collections.immutable.persistentMapOf
 import io.element.android.libraries.ui.strings.R as StringR
 
 private val minHeight = 72.dp
@@ -104,23 +99,27 @@ internal fun DefaultInviteSummaryRow(
         verticalAlignment = Alignment.Top
     ) {
         Avatar(
-            invite.roomAvatarData,
+            invite.roomAvatarData.copy(size = AvatarSize.Custom(52.dp)),
         )
 
         Column(
             modifier = Modifier
-                    .padding(start = 12.dp, end = 4.dp)
+                    .padding(start = 16.dp, end = 4.dp)
                     .alignByBaseline()
                     .weight(1f)
         ) {
+            val bonusPadding = if (invite.isNew) 12.dp else 0.dp
+
             // Name
             Text(
                 fontSize = 16.sp,
-                fontWeight = FontWeight.SemiBold,
+                fontWeight = FontWeight.Medium,
                 text = invite.roomName,
                 color = MaterialTheme.colorScheme.primary,
                 maxLines = 1,
-                overflow = TextOverflow.Ellipsis
+                overflow = TextOverflow.Ellipsis,
+                style = noFontPadding,
+                modifier = Modifier.padding(end = bonusPadding),
             )
 
             // ID or Alias
@@ -131,7 +130,8 @@ internal fun DefaultInviteSummaryRow(
                     text = it,
                     color = MaterialTheme.colorScheme.secondary,
                     maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.padding(end = bonusPadding),
                 )
             }
 
@@ -145,8 +145,8 @@ internal fun DefaultInviteSummaryRow(
                 OutlinedButton(
                     content = { Text(stringResource(StringR.string.action_decline), style = ElementTextStyles.Button) },
                     onClick = onDeclineClicked,
-                    modifier = Modifier.weight(1f),
-                    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 7.dp),
+                    modifier = Modifier.weight(1f).heightIn(max = 36.dp),
+                    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp),
                 )
 
                 Spacer(modifier = Modifier.width(12.dp))
@@ -154,8 +154,8 @@ internal fun DefaultInviteSummaryRow(
                 Button(
                     content = { Text(stringResource(StringR.string.action_accept), style = ElementTextStyles.Button) },
                     onClick = onAcceptClicked,
-                    modifier = Modifier.weight(1f),
-                    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 7.dp),
+                    modifier = Modifier.weight(1f).heightIn(max = 36.dp),
+                    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 0.dp),
                 )
             }
         }
@@ -173,45 +173,36 @@ internal fun DefaultInviteSummaryRow(
 
 @Composable
 private fun SenderRow(sender: InviteSender) {
-    Text(
-        text = buildAnnotatedString {
-            val placeholder = "$"
-            val text = stringResource(R.string.screen_invites_invited_you, placeholder)
-            val nameIndex = text.indexOf(placeholder)
-
-            // Text before the placeholder
-            append(text.take(nameIndex))
-
-            // Avatar and display name
-            appendInlineContent("avatar")
-            withStyle(SpanStyle(fontWeight = FontWeight.Bold, color = MaterialTheme.colorScheme.primary)) {
-                append(sender.displayName)
-            }
-
-            // Text after the placeholder
-            append(text.drop(nameIndex + placeholder.length))
-        },
-        color = MaterialTheme.colorScheme.secondary,
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
         modifier = Modifier.padding(top = 6.dp),
-        inlineContent = persistentMapOf(
-            "avatar" to InlineTextContent(
-                with(LocalDensity.current) {
-                    Placeholder(20.dp.toSp(), 20.dp.toSp(), PlaceholderVerticalAlign.Center)
-                }
-            ) {
-                Box(
-                        Modifier
-                                .fillMaxHeight()
-                                .padding(end = 4.dp)
-                ) {
-                    Avatar(
-                        avatarData = sender.avatarData.copy(size = AvatarSize.Custom(16.dp)),
-                        modifier = Modifier.align(Alignment.Center)
+    ) {
+        Avatar(
+            avatarData = sender.avatarData.copy(size = AvatarSize.Custom(16.dp)),
+        )
+        Text(
+            text = stringResource(R.string.screen_invites_invited_you, sender.displayName, sender.userId.value).let { text ->
+                val senderNameStart = LocalContext.current.getString(R.string.screen_invites_invited_you).indexOf("%1\$s")
+                AnnotatedString(
+                    text = text,
+                    spanStyles = listOf(
+                        AnnotatedString.Range(
+                            SpanStyle(
+                                fontWeight = FontWeight.Medium,
+                                color = MaterialTheme.colorScheme.primary
+                            ),
+                            start = senderNameStart,
+                            end = senderNameStart + sender.displayName.length
+                        )
                     )
-                }
-            }
+                )
+            },
+            style = noFontPadding,
+            color = MaterialTheme.colorScheme.secondary,
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Normal,
         )
-    )
+    }
 }
 
 @Preview

features/invitelist/impl/src/main/kotlin/io/element/android/features/invitelist/impl/model/InviteListInviteSummaryProvider.kt

@@ -24,7 +24,8 @@ open class InviteListInviteSummaryProvider : PreviewParameterProvider<InviteList
     override val values: Sequence<InviteListInviteSummary>
         get() = sequenceOf(
             aInviteListInviteSummary(),
-            aInviteListInviteSummary().copy(roomAlias = "#someroom:example.com"),
+            aInviteListInviteSummary().copy(roomAlias = "#someroom-with-a-long-alias:example.com"),
+            aInviteListInviteSummary().copy(roomAlias = "#someroom-with-a-long-alias:example.com", isNew = true),
             aInviteListInviteSummary().copy(roomName = "Alice", sender = null),
             aInviteListInviteSummary().copy(isNew = true)
         )
@@ -32,9 +33,9 @@ open class InviteListInviteSummaryProvider : PreviewParameterProvider<InviteList
 
 fun aInviteListInviteSummary() = InviteListInviteSummary(
     roomId = RoomId("!room1:example.com"),
-    roomName = "Some room",
+    roomName = "Some room with a long name that will truncate",
     sender = InviteSender(
-        userId = UserId("@alice:example.org"),
-        displayName = "Alice"
+        userId = UserId("@alice-with-a-long-mxid:example.org"),
+        displayName = "Alice with a long name"
     ),
 )

features/invitelist/impl/src/main/res/values-de/translations.xml

@@ -5,5 +5,4 @@
   <string name="screen_invites_decline_direct_chat_message">"Möchten Sie den Chat mit %1$s wirklich ablehnen?"</string>
   <string name="screen_invites_decline_direct_chat_title">"Chat ablehnen"</string>
   <string name="screen_invites_empty_list">"Keine Einladungen"</string>
-  <string name="screen_invites_invited_you">"%1$s hat dich eingeladen"</string>
-</resources>
+</resources>

features/invitelist/impl/src/main/res/values-es/translations.xml

@@ -1,4 +1,3 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
-  <string name="screen_invites_invited_you">"%1$s te invitó."</string>
-</resources>
+</resources>

features/invitelist/impl/src/main/res/values-fr/translations.xml

@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
   <string name="screen_invites_empty_list">"Aucune invitation"</string>
-  <string name="screen_invites_invited_you">"%1$s vous a invité."</string>
-</resources>
+</resources>

features/invitelist/impl/src/main/res/values-it/translations.xml

@@ -1,4 +1,3 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
-  <string name="screen_invites_invited_you">"%1$s ti ha invitato"</string>
-</resources>
+</resources>

features/invitelist/impl/src/main/res/values-ro/translations.xml

@@ -5,5 +5,4 @@
   <string name="screen_invites_decline_direct_chat_message">"Sigur doriți să refuzați conversațiile cu %1$s?"</string>
   <string name="screen_invites_decline_direct_chat_title">"Refuzați conversația"</string>
   <string name="screen_invites_empty_list">"Nicio invitație"</string>
-  <string name="screen_invites_invited_you">"%1$s v-a invitat"</string>
-</resources>
+</resources>

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

@@ -5,5 +5,5 @@
   <string name="screen_invites_decline_direct_chat_message">"Are you sure you want to decline to chat with %1$s?"</string>
   <string name="screen_invites_decline_direct_chat_title">"Decline chat"</string>
   <string name="screen_invites_empty_list">"No Invites"</string>
-  <string name="screen_invites_invited_you">"%1$s invited you"</string>
-</resources>
+  <string name="screen_invites_invited_you">"%1$s (%2$s) invited you"</string>
+</resources>

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

@@ -26,7 +26,7 @@ open class RoomDetailsEditStateProvider : PreviewParameterProvider<RoomDetailsEd
         get() = sequenceOf(
             aRoomDetailsEditState(),
             aRoomDetailsEditState().copy(roomTopic = ""),
-            aRoomDetailsEditState().copy(roomAvatarUrl = Uri.EMPTY),
+            aRoomDetailsEditState().copy(roomAvatarUrl = Uri.parse("example://uri")),
             aRoomDetailsEditState().copy(canChangeName = true, canChangeTopic = false, canChangeAvatar = true, saveButtonEnabled = false),
             aRoomDetailsEditState().copy(canChangeName = false, canChangeTopic = true, canChangeAvatar = false, saveButtonEnabled = false),
             aRoomDetailsEditState().copy(saveAction = Async.Loading()),

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

@@ -145,7 +145,7 @@ fun RoomDetailsEditView(
                 LabelledTextField(
                     label = stringResource(id = R.string.screen_room_details_room_name_label),
                     value = state.roomName,
-                    placeholder = stringResource(id = R.string.screen_room_details_room_name_placeholder),
+                    placeholder = stringResource(StringR.string.common_room_name_placeholder),
                     singleLine = true,
                     onValueChange = { state.eventSink(RoomDetailsEditEvents.UpdateRoomName(it)) },
                 )
@@ -160,9 +160,9 @@ fun RoomDetailsEditView(
 
             if (state.canChangeTopic) {
                 LabelledTextField(
-                    label = stringResource(id = StringR.string.common_topic),
+                    label = stringResource(StringR.string.common_topic),
                     value = state.roomTopic,
-                    placeholder = stringResource(id = R.string.screen_room_details_topic_placeholder),
+                    placeholder = stringResource(StringR.string.common_topic_placeholder),
                     maxLines = 10,
                     onValueChange = { state.eventSink(RoomDetailsEditEvents.UpdateRoomTopic(it)) },
                 )

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

@@ -24,7 +24,7 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 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.itemsIndexed
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -40,6 +40,7 @@ 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.Divider
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.SearchBar
 import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
@@ -181,7 +182,7 @@ private fun RoomInviteMembersSearchBar(
             )
 
             LazyColumn {
-                items(results) { invitableUser ->
+                itemsIndexed(results) { index, invitableUser ->
                     if (invitableUser.isUnresolved && !invitableUser.isAlreadyInvited && !invitableUser.isAlreadyJoined) {
                         CheckableUnresolvedUserRow(
                             checked = invitableUser.isSelected,
@@ -208,6 +209,10 @@ private fun RoomInviteMembersSearchBar(
                             modifier = Modifier.fillMaxWidth()
                         )
                     }
+
+                    if (index < results.lastIndex) {
+                        Divider()
+                    }
                 }
             }
         },

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

@@ -164,6 +164,7 @@ private fun LazyListScope.roomMemberListSection(
         Text(
             modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
             text = headerText(),
+            fontSize = 16.sp,
             style = ElementTextStyles.Regular.callout,
             color = MaterialTheme.colorScheme.secondary,
             textAlign = TextAlign.Start,

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

@@ -12,10 +12,9 @@
   <string name="screen_room_details_edition_error_title">"Unable to update room"</string>
   <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>
   <string name="screen_room_details_room_name_label">"Room name"</string>
-  <string name="screen_room_details_room_name_placeholder">"e.g. Product Sprint"</string>
   <string name="screen_room_details_share_room_title">"Share room"</string>
-  <string name="screen_room_details_topic_placeholder">"What is this room about?"</string>
   <string name="screen_room_details_updating_room">"Updating room…"</string>
   <string name="screen_room_member_list_pending_header_title">"Pending"</string>
   <string name="screen_room_member_list_room_members_header_title">"Room members"</string>
@@ -25,7 +24,6 @@
   <string name="screen_dm_details_unblock_alert_action">"Unblock"</string>
   <string name="screen_dm_details_unblock_alert_description">"On unblocking the user, you will be able to see all messages by them again."</string>
   <string name="screen_dm_details_unblock_user">"Unblock user"</string>
-  <string name="screen_room_details_invite_people_title">"Invite friends to Element"</string>
   <string name="screen_room_details_leave_room_title">"Leave room"</string>
   <string name="screen_room_details_people_title">"People"</string>
   <string name="screen_room_details_security_title">"Security"</string>

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt

@@ -29,10 +29,12 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 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.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
@@ -51,16 +53,19 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 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.Velocity
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import io.element.android.features.leaveroom.api.LeaveRoomView
 import io.element.android.features.networkmonitor.api.ui.ConnectivityIndicatorView
 import io.element.android.features.roomlist.impl.components.RoomListTopBar
@@ -72,12 +77,13 @@ import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Button
+import io.element.android.libraries.designsystem.theme.components.Divider
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.components.TextButton
+import io.element.android.libraries.designsystem.theme.noFontPadding
 import io.element.android.libraries.designsystem.theme.roomListUnreadIndicator
 import io.element.android.libraries.designsystem.utils.LogCompositions
 import io.element.android.libraries.matrix.api.core.RoomId
@@ -230,37 +236,48 @@ fun RoomListContent(
 
                     if (state.invitesState != InvitesState.NoInvites) {
                         item {
-                            Row(horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxSize()) {
-                                TextButton(
-                                    content = {
-                                        Text(stringResource(StringR.string.action_invites_list))
+                            Row(
+                                horizontalArrangement = Arrangement.End,
+                                verticalAlignment = Alignment.CenterVertically,
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .clickable(role = Role.Button, onClick = onInvitesClicked)
+                                    .heightIn(min = 48.dp),
+                            ) {
+                                Text(
+                                    text = stringResource(StringR.string.action_invites_list),
+                                    fontSize = 14.sp,
+                                    style = noFontPadding,
+                                )
 
-                                        if (state.invitesState == InvitesState.NewInvites) {
-                                            Spacer(Modifier.size(8.dp))
+                                if (state.invitesState == InvitesState.NewInvites) {
+                                    Spacer(Modifier.width(8.dp))
 
-                                            Box(
-                                                modifier = Modifier
-                                                    .size(12.dp)
-                                                    .clip(CircleShape)
-                                                    .background(MaterialTheme.roomListUnreadIndicator())
-                                            )
-                                        }
-                                    },
-                                    onClick = onInvitesClicked,
-                                )
+                                    Box(
+                                        modifier = Modifier
+                                            .size(12.dp)
+                                            .clip(CircleShape)
+                                            .background(MaterialTheme.roomListUnreadIndicator())
+                                    )
+                                }
+
+                                Spacer(Modifier.width(16.dp))
                             }
                         }
                     }
 
-                    items(
+                    itemsIndexed(
                         items = state.roomList,
-                        contentType = { room -> room.contentType() },
-                    ) { room ->
+                        contentType = { _, room -> room.contentType() },
+                    ) { index, room ->
                         RoomSummaryRow(
                             room = room,
                             onClick = ::onRoomClicked,
                             onLongClick = onRoomLongClicked,
                         )
+                        if (index != state.roomList.lastIndex) {
+                            Divider()
+                        }
                     }
                 }
             }

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