Settings UI update.

- Reorder items
- Minor UI update
- Improve the previews of the Composable
- Merge manage account and manage devices
- Add missing tests

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

@@ -8,6 +8,7 @@
 
 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.Row
 import androidx.compose.foundation.layout.Spacer
@@ -34,51 +35,34 @@ import io.element.android.libraries.matrix.ui.model.getBestName
 
 @Composable
 fun MatrixUserHeader(
-    matrixUser: MatrixUser?,
-    modifier: Modifier = Modifier,
-    // TODO handle click on this item, to let the user be able to update their profile.
-    // onClick: () -> Unit,
-) {
-    if (matrixUser == null) {
-        MatrixUserHeaderPlaceholder(modifier = modifier)
-    } else {
-        MatrixUserHeaderContent(
-            matrixUser = matrixUser,
-            modifier = modifier,
-            // onClick = onClick
-        )
-    }
-}
-
-@Composable
-private fun MatrixUserHeaderContent(
     matrixUser: MatrixUser,
     modifier: Modifier = Modifier,
-    // onClick: () -> Unit,
 ) {
     Row(
         modifier = modifier
-            // .clickable(onClick = onClick)
             .fillMaxWidth()
-            .padding(horizontal = 16.dp),
-        verticalAlignment = Alignment.CenterVertically
+            .padding(horizontal = 16.dp, vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
     ) {
         Avatar(
             modifier = Modifier
-                .padding(vertical = 12.dp),
+                .padding(vertical = 7.dp),
             avatarData = matrixUser.getAvatarData(size = AvatarSize.UserPreference),
             avatarType = AvatarType.User,
         )
-        Spacer(modifier = Modifier.width(16.dp))
+        Spacer(modifier = Modifier.width(13.dp))
         Column(
-            modifier = Modifier.weight(1f)
+            modifier = Modifier
+                .weight(1f)
+                .padding(vertical = 8.dp),
+            verticalArrangement = Arrangement.spacedBy(2.dp)
         ) {
             // Name
             Text(
                 modifier = Modifier.clipToBounds(),
                 text = matrixUser.getBestName(),
                 maxLines = 1,
-                style = ElementTheme.typography.fontHeadingSmMedium,
+                style = ElementTheme.typography.fontHeadingMdRegular,
                 overflow = TextOverflow.Ellipsis,
                 color = ElementTheme.colors.textPrimary,
             )

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

@@ -1,64 +0,0 @@
-/*
- * Copyright (c) 2025 Element Creations Ltd.
- * Copyright 2023-2025 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
- * Please see LICENSE files in the repository root for full details.
- */
-
-package io.element.android.libraries.matrix.ui.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-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.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.libraries.designsystem.atomic.atoms.PlaceholderAtom
-import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.placeholderBackground
-
-@Composable
-fun MatrixUserHeaderPlaceholder(
-    modifier: Modifier = Modifier,
-) {
-    Row(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Box(
-            modifier = Modifier
-                .padding(vertical = 12.dp)
-                .size(AvatarSize.UserPreference.dp)
-                .background(color = ElementTheme.colors.placeholderBackground, shape = CircleShape)
-        )
-        Spacer(modifier = Modifier.width(16.dp))
-        Column(
-            modifier = Modifier.weight(1f)
-        ) {
-            PlaceholderAtom(width = 80.dp, height = 7.dp)
-            Spacer(modifier = Modifier.height(16.dp))
-            PlaceholderAtom(width = 180.dp, height = 6.dp)
-        }
-    }
-}
-
-@PreviewsDayNight
-@Composable
-internal fun MatrixUserHeaderPlaceholderPreview() = ElementPreview {
-    MatrixUserHeaderPlaceholder()
-}

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

@@ -20,15 +20,6 @@ open class MatrixUserProvider : PreviewParameterProvider<MatrixUser> {
         )
 }
 
-open class MatrixUserWithNullProvider : PreviewParameterProvider<MatrixUser?> {
-    override val values: Sequence<MatrixUser?>
-        get() = sequenceOf(
-            aMatrixUser(),
-            aMatrixUser(displayName = null),
-            null,
-        )
-}
-
 open class MatrixUserWithAvatarProvider : PreviewParameterProvider<MatrixUser?> {
     override val values: Sequence<MatrixUser?>
         get() = sequenceOf(

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

@@ -11,6 +11,8 @@ package io.element.android.libraries.matrix.ui.components
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -23,12 +25,14 @@ fun MatrixUserRow(
     matrixUser: MatrixUser,
     modifier: Modifier = Modifier,
     avatarSize: AvatarSize = AvatarSize.UserListItem,
+    verticalSpaceWidth: Dp = 12.dp,
     trailingContent: @Composable (() -> Unit)? = null,
 ) = UserRow(
     avatarData = matrixUser.getAvatarData(avatarSize),
     name = matrixUser.getBestName(),
     subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value,
     modifier = modifier,
+    verticalSpaceWidth = verticalSpaceWidth,
     trailingContent = trailingContent,
 )
 

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

@@ -10,13 +10,16 @@ package io.element.android.libraries.matrix.ui.components
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.components.avatar.Avatar
@@ -31,22 +34,22 @@ internal fun UserRow(
     subtext: String?,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    verticalSpaceWidth: Dp = 12.dp,
     trailingContent: @Composable (() -> Unit)? = null,
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(start = 16.dp, top = 12.dp, end = 16.dp, bottom = 12.dp),
+            .padding(horizontal = 16.dp, vertical = 12.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         Avatar(
             avatarData = avatarData,
             avatarType = AvatarType.User,
         )
+        Spacer(modifier = Modifier.width(verticalSpaceWidth))
         Column(
-            modifier = Modifier
-                .padding(start = 12.dp)
-                .weight(1f),
+            modifier = Modifier.weight(1f),
         ) {
             // Name
             Text(