Merge pull request #4923 from element-hq/feature/bma/spaceAvatar2

Iterate on avatar to be able to render Space avatar Part2

features/call/impl/src/main/kotlin/io/element/android/features/call/impl/ui/IncomingCallScreen.kt

@@ -39,6 +39,7 @@ import io.element.android.libraries.designsystem.background.OnboardingBackground
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
@@ -74,7 +75,8 @@ internal fun IncomingCallScreen(
                     name = notificationData.senderName,
                     url = notificationData.avatarUrl,
                     size = AvatarSize.IncomingCall,
-                )
+                ),
+                avatarType = AvatarType.User,
             )
             Spacer(modifier = Modifier.height(24.dp))
             Text(

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

@@ -40,6 +40,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
 import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
 import io.element.android.libraries.designsystem.components.async.AsyncActionView
 import io.element.android.libraries.designsystem.components.async.AsyncActionViewDefaults
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.list.ListItemContent
@@ -220,6 +221,7 @@ private fun RoomNameWithAvatar(
     ) {
         UnsavedAvatar(
             avatarUri = avatarUri,
+            avatarSize = AvatarSize.EditRoomDetails,
             avatarType = AvatarType.Room(),
             modifier = Modifier.clickable(onClick = onAvatarClick),
         )

features/ftue/impl/src/main/kotlin/io/element/android/features/ftue/impl/notifications/NotificationsOptInView.kt

@@ -38,6 +38,7 @@ import io.element.android.libraries.designsystem.components.PageTitle
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -149,6 +150,7 @@ private fun NotificationRow(
         ) {
             Avatar(
                 avatarData = AvatarData(id = avatarColorsId, name = avatarLetter, size = AvatarSize.NotificationsOptIn),
+                avatarType = AvatarType.User,
             )
             Column(Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(12.dp)) {
                 Box(

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/AvatarRow.kt

@@ -26,6 +26,7 @@ import androidx.compose.ui.unit.dp
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.toPx
@@ -36,6 +37,7 @@ import kotlinx.collections.immutable.toImmutableList
  * Draw a row of avatars (they must all have the same size), from start to end.
  * @param avatarDataList the avatars to render. Note: they will all be rendered, the caller may
  * want to limit the list size
+ * @param avatarType the type of avatars to render
  * @param modifier Jetpack Compose modifier
  * @param overlapRatio the overlap ration. When 0f, avatars will render without overlap, when 1f
  * only the first avatar will be visible
@@ -43,6 +45,7 @@ import kotlinx.collections.immutable.toImmutableList
 @Composable
 fun AvatarRow(
     avatarDataList: ImmutableList<AvatarData>,
+    avatarType: AvatarType,
     modifier: Modifier = Modifier,
     overlapRatio: Float = 0.5f,
 ) {
@@ -58,35 +61,36 @@ fun AvatarRow(
             .forEachIndexed { index, avatarData ->
                 Avatar(
                     modifier = Modifier
-                            .padding(start = avatarSize * (1 - overlapRatio) * (lastItemIndex - index))
+                        .padding(start = avatarSize * (1 - overlapRatio) * (lastItemIndex - index))
-                            .graphicsLayer {
+                        .graphicsLayer {
-                                compositingStrategy = CompositingStrategy.Offscreen
+                            compositingStrategy = CompositingStrategy.Offscreen
+                        }
+                        .drawWithContent {
+                            // Draw content and clear the pixels for the avatar on the left (right in RTL).
+                            drawContent()
+                            val xOffset = if (isRtl) {
+                                size.width - avatarSizePx * (overlapRatio - 0.5f)
+                            } else {
+                                0f + avatarSizePx * (overlapRatio - 0.5f)
                             }
-                            .drawWithContent {
+                            if (index < lastItemIndex) {
-                                // Draw content and clear the pixels for the avatar on the left (right in RTL).
+                                drawCircle(
-                                drawContent()
+                                    color = Color.Black,
-                                val xOffset = if (isRtl) {
+                                    center = Offset(
-                                    size.width - avatarSizePx * (overlapRatio - 0.5f)
+                                        x = xOffset,
-                                } else {
+                                        y = size.height / 2,
-                                    0f + avatarSizePx * (overlapRatio - 0.5f)
+                                    ),
-                                }
+                                    radius = avatarSizePx / 2,
-                                if (index < lastItemIndex) {
+                                    blendMode = BlendMode.Clear,
-                                    drawCircle(
+                                )
-                                            color = Color.Black,
-                                            center = Offset(
-                                                    x = xOffset,
-                                                    y = size.height / 2,
-                                            ),
-                                            radius = avatarSizePx / 2,
-                                            blendMode = BlendMode.Clear,
-                                    )
-                                }
                             }
-                            .size(size = avatarSize)
+                        }
-                            // Keep internal padding, it has the advantage to not reduce the size of the Avatar image,
+                        .size(size = avatarSize)
-                            // which is already small in our use case.
+                        // Keep internal padding, it has the advantage to not reduce the size of the Avatar image,
-                            .padding(2.dp),
+                        // which is already small in our use case.
+                        .padding(2.dp),
                     avatarData = avatarData,
+                    avatarType = avatarType,
                 )
             }
     }
@@ -122,6 +126,7 @@ private fun ContentToPreview(overlapRatio: Float) {
                 size = AvatarSize.RoomListItem,
             )
         }.toImmutableList(),
+        avatarType = AvatarType.User,
         overlapRatio = overlapRatio,
     )
 }

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt

@@ -39,6 +39,7 @@ import io.element.android.libraries.designsystem.components.async.AsyncIndicator
 import io.element.android.libraries.designsystem.components.async.rememberAsyncIndicatorState
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -195,7 +196,10 @@ private fun KnockRequestAvatarView(
     Box(modifier) {
         when (knockRequests.size) {
             0 -> Unit
-            1 -> Avatar(knockRequests.first().getAvatarData(AvatarSize.KnockRequestBanner))
+            1 -> Avatar(
+                avatarData = knockRequests.first().getAvatarData(AvatarSize.KnockRequestBanner),
+                avatarType = AvatarType.User,
+            )
             else -> KnockRequestAvatarListView(knockRequests)
         }
     }
@@ -214,6 +218,7 @@ private fun KnockRequestAvatarListView(
         .toImmutableList()
     AvatarRow(
         avatarDataList = avatars,
+        avatarType = AvatarType.User,
         modifier = modifier,
     )
 }

features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/list/KnockRequestsListView.kt

@@ -56,6 +56,7 @@ import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.async.AsyncActionView
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -318,7 +319,10 @@ private fun KnockRequestItem(
             .fillMaxWidth()
             .padding(horizontal = 16.dp, vertical = 12.dp)
     ) {
-        Avatar(knockRequest.getAvatarData(AvatarSize.KnockRequestItem))
+        Avatar(
+            avatarData = knockRequest.getAvatarData(AvatarSize.KnockRequestItem),
+            avatarType = AvatarType.User,
+        )
         Spacer(modifier = Modifier.width(16.dp))
         Column {
             // Name and date

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt

@@ -74,6 +74,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.utils.messagesummary.DefaultMessageSummaryFormatter
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -256,7 +257,12 @@ private fun MessageSummary(
     modifier: Modifier = Modifier,
 ) {
     val content: @Composable () -> Unit
-    val icon: @Composable () -> Unit = { Avatar(avatarData = event.senderAvatar.copy(size = AvatarSize.MessageActionSender)) }
+    val icon: @Composable () -> Unit = {
+        Avatar(
+            avatarData = event.senderAvatar.copy(size = AvatarSize.MessageActionSender),
+            avatarType = AvatarType.User,
+        )
+    }
     val contentStyle = ElementTheme.typography.fontBodyMdRegular.copy(color = ElementTheme.colors.textSecondary)
 
     @Composable

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemCallNotifyView.kt

@@ -33,6 +33,7 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.roomcall.api.RoomCallState
 import io.element.android.features.roomcall.api.RoomCallStateProvider
 import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.toDp
@@ -55,7 +56,10 @@ internal fun TimelineItemCallNotifyView(
         horizontalArrangement = Arrangement.spacedBy(12.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        Avatar(avatarData = event.senderAvatar)
+        Avatar(
+            avatarData = event.senderAvatar,
+            avatarType = AvatarType.User,
+        )
         Column(modifier = Modifier.weight(1f)) {
             Text(
                 text = event.safeSenderName,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -76,6 +76,7 @@ import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
 import io.element.android.libraries.designsystem.components.EqualWidthColumn
 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.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.swipe.SwipeableActionsState
@@ -441,6 +442,7 @@ private fun MessageSenderInformation(
                 .clip(CircleShape)
                 .clickable(onClick = onClick),
             avatarData = senderAvatar,
+            avatarType = AvatarType.User,
         )
         SenderName(
             modifier = Modifier

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/reactionsummary/ReactionSummaryView.kt

@@ -62,6 +62,7 @@ import io.element.android.features.messages.impl.timeline.model.AggregatedReacti
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.toDp
@@ -249,7 +250,10 @@ private fun SenderRow(
             .semantics(mergeDescendants = true) {},
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Avatar(avatarData)
+        Avatar(
+            avatarData = avatarData,
+            avatarType = AvatarType.User,
+        )
         Column(
             modifier = Modifier.padding(start = 12.dp),
         ) {

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/receipt/TimelineItemReadReceiptView.kt

@@ -37,6 +37,7 @@ import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.timeline.model.ReadReceiptData
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.avatar.getBestName
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -65,11 +66,11 @@ fun TimelineItemReadReceiptView(
                 ReadReceiptsAvatars(
                     receipts = state.receipts,
                     modifier = Modifier
-                            .clip(RoundedCornerShape(4.dp))
+                        .clip(RoundedCornerShape(4.dp))
-                            .clickable {
+                        .clickable {
-                                onReadReceiptsClick()
+                            onReadReceiptsClick()
-                            }
+                        }
-                            .padding(2.dp)
+                        .padding(2.dp)
                 )
             }
         }
@@ -112,9 +113,9 @@ private fun ReadReceiptsRow(
 ) {
     Row(
         modifier = modifier
-                .fillMaxWidth()
+            .fillMaxWidth()
-                .height(AvatarSize.TimelineReadReceipt.dp + 8.dp)
+            .height(AvatarSize.TimelineReadReceipt.dp + 8.dp)
-                .padding(horizontal = 18.dp),
+            .padding(horizontal = 18.dp),
         horizontalArrangement = Arrangement.End,
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -154,15 +155,16 @@ private fun ReadReceiptsAvatars(
                 .forEachIndexed { index, readReceiptData ->
                     Box(
                         modifier = Modifier
-                                .padding(end = (12.dp + avatarStrokeSize * 2) * index)
+                            .padding(end = (12.dp + avatarStrokeSize * 2) * index)
-                                .size(size = avatarSize + avatarStrokeSize * 2)
+                            .size(size = avatarSize + avatarStrokeSize * 2)
-                                .clip(CircleShape)
+                            .clip(CircleShape)
-                                .background(avatarStrokeColor)
+                            .background(avatarStrokeColor)
-                                .zIndex(index.toFloat()),
+                            .zIndex(index.toFloat()),
                         contentAlignment = Alignment.Center,
                     ) {
                         Avatar(
                             avatarData = readReceiptData.avatarData,
+                            avatarType = AvatarType.User,
                         )
                     }
                 }

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/user/editprofile/EditUserProfileStateProvider.kt

@@ -7,7 +7,9 @@
 
 package io.element.android.features.preferences.impl.user.editprofile
 
+import android.net.Uri
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.core.net.toUri
 import io.element.android.libraries.architecture.AsyncAction
 import io.element.android.libraries.matrix.api.core.UserId
 import io.element.android.libraries.permissions.api.aPermissionsState
@@ -17,14 +19,17 @@ open class EditUserProfileStateProvider : PreviewParameterProvider<EditUserProfi
     override val values: Sequence<EditUserProfileState>
         get() = sequenceOf(
             aEditUserProfileState(),
+            aEditUserProfileState(userAvatarUrl = "example://uri".toUri()),
             // Add other states here
         )
 }
 
-fun aEditUserProfileState() = EditUserProfileState(
+fun aEditUserProfileState(
+    userAvatarUrl: Uri? = null,
+) = EditUserProfileState(
     userId = UserId("@john.doe:matrix.org"),
     displayName = "John Doe",
-    userAvatarUrl = null,
+    userAvatarUrl = userAvatarUrl,
     avatarActions = persistentListOf(),
     saveAction = AsyncAction.Uninitialized,
     saveButtonEnabled = true,

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/rolesandpermissions/changeroles/ChangeRolesView.kt

@@ -50,6 +50,7 @@ import io.element.android.libraries.designsystem.components.async.rememberAsyncI
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
@@ -341,7 +342,10 @@ private fun MemberRow(
             .padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Avatar(avatarData)
+        Avatar(
+            avatarData = avatarData,
+            avatarType = AvatarType.User,
+        )
         Column(
             modifier = Modifier
                 .padding(start = 12.dp)

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

@@ -48,6 +48,7 @@ import io.element.android.libraries.designsystem.atomic.atoms.RedIndicatorAtom
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.avatarBloom
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -297,6 +298,7 @@ private fun NavigationIcon(
         Box {
             Avatar(
                 avatarData = avatarData,
+                avatarType = AvatarType.User,
                 contentDescription = stringResource(CommonStrings.common_settings),
             )
             if (showAvatarIndicator) {

features/roommembermoderation/impl/src/main/kotlin/io/element/android/features/roommembermoderation/impl/RoomMemberModerationView.kt

@@ -38,6 +38,7 @@ import io.element.android.libraries.designsystem.components.async.AsyncIndicator
 import io.element.android.libraries.designsystem.components.async.rememberAsyncIndicatorState
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.dialogs.TextFieldDialog
 import io.element.android.libraries.designsystem.components.list.ListItemContent
@@ -223,6 +224,7 @@ private fun RoomMemberActionsBottomSheet(
         ) {
             Avatar(
                 avatarData = user.getAvatarData(size = AvatarSize.RoomListManageUser),
+                avatarType = AvatarType.User,
                 modifier = Modifier
                         .padding(bottom = 28.dp)
                         .align(Alignment.CenterHorizontally)

features/userprofile/shared/src/main/kotlin/io/element/android/features/userprofile/shared/UserProfileHeaderSection.kt

@@ -30,6 +30,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.MatrixBadgeRow
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.modifiers.niceClickable
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -61,6 +62,7 @@ fun UserProfileHeaderSection(
     ) {
         Avatar(
             avatarData = AvatarData(userId.value, userName, avatarUrl, AvatarSize.UserHeader),
+            avatarType = AvatarType.User,
             modifier = Modifier
                 .clip(CircleShape)
                 .clickable(enabled = avatarUrl != null) { openAvatarPreview(avatarUrl!!) }

features/verifysession/impl/src/main/kotlin/io/element/android/features/verifysession/impl/ui/VerificationUserProfileContent.kt

@@ -25,6 +25,7 @@ import io.element.android.compound.theme.ElementTheme
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -50,10 +51,11 @@ fun VerificationUserProfileContent(
             .padding(12.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        Avatar(avatarData)
+        Avatar(
-
+            avatarData = avatarData,
+            avatarType = AvatarType.User,
+        )
         Spacer(modifier = Modifier.padding(12.dp))
-
         Column(verticalArrangement = Arrangement.spacedBy(2.dp)) {
             Text(text = displayName ?: userId.value, style = ElementTheme.typography.fontBodyLgMedium, color = ElementTheme.colors.textPrimary)
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMolecule.kt

@@ -27,6 +27,7 @@ import io.element.android.compound.theme.ElementTheme
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.avatar.anAvatarData
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -72,7 +73,10 @@ fun ComposerAlertMolecule(
                     horizontalArrangement = Arrangement.spacedBy(16.dp)
                 ) {
                     if (avatar != null) {
-                        Avatar(avatarData = avatar)
+                        Avatar(
+                            avatarData = avatar,
+                            avatarType = AvatarType.User,
+                        )
                     }
                     Text(
                         text = content,

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

@@ -94,6 +94,7 @@ import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -498,6 +499,7 @@ internal fun BloomPreview() {
                                     url = "aURL",
                                     size = AvatarSize.CurrentUserTopBar,
                                 ),
+                                avatarType = AvatarType.User,
                             )
                         },
                         actions = {

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

@@ -16,6 +16,9 @@ import androidx.compose.ui.tooling.preview.Preview
 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.internal.RoomAvatar
+import io.element.android.libraries.designsystem.components.avatar.internal.SpaceAvatar
+import io.element.android.libraries.designsystem.components.avatar.internal.UserAvatar
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -24,8 +27,8 @@ import io.element.android.libraries.designsystem.utils.CommonDrawables
 @Composable
 fun Avatar(
     avatarData: AvatarData,
+    avatarType: AvatarType,
     modifier: Modifier = Modifier,
-    avatarType: AvatarType = AvatarType.User,
     contentDescription: String? = null,
     // If not null, will be used instead of the size from avatarData
     forcedAvatarSize: Dp? = null,
@@ -38,6 +41,7 @@ fun Avatar(
             avatarType = avatarType,
             modifier = modifier,
             hideAvatarImage = hideImage,
+            forcedAvatarSize = forcedAvatarSize,
             contentDescription = contentDescription,
         )
         AvatarType.User -> UserAvatar(
@@ -52,33 +56,7 @@ fun Avatar(
             avatarType = avatarType,
             modifier = modifier,
             hideAvatarImage = hideImage,
-            contentDescription = contentDescription,
-        )
-    }
-}
-
-@Composable
-private fun UserAvatar(
-    avatarData: AvatarData,
-    modifier: Modifier = Modifier,
-    contentDescription: String? = null,
-    forcedAvatarSize: Dp? = null,
-    hideImage: Boolean = false,
-) {
-    if (avatarData.url.isNullOrBlank() || hideImage) {
-        InitialLetterAvatar(
-            avatarData = avatarData,
-            avatarType = AvatarType.User,
             forcedAvatarSize = forcedAvatarSize,
-            modifier = modifier,
-            contentDescription = contentDescription,
-        )
-    } else {
-        ImageAvatar(
-            avatarData = avatarData,
-            avatarType = AvatarType.User,
-            forcedAvatarSize = forcedAvatarSize,
-            modifier = modifier,
             contentDescription = contentDescription,
         )
     }
@@ -94,7 +72,10 @@ internal fun AvatarPreview(@PreviewParameter(AvatarDataProvider::class) avatarDa
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(16.dp)
         ) {
-            Avatar(avatarData)
+            Avatar(
+                avatarData = avatarData,
+                avatarType = AvatarType.User,
+            )
             Text(text = avatarData.size.name + " " + avatarData.size.dp)
         }
     }

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

@@ -11,7 +11,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 
 open class AvatarDataProvider : PreviewParameterProvider<AvatarData> {
     override val values: Sequence<AvatarData>
-        get() = AvatarSize.values()
+        get() = AvatarSize.entries
             .asSequence()
             .map {
                 sequenceOf(

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

@@ -11,12 +11,22 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
 
 @Composable
-fun AvatarType.avatarShape(): Shape {
+fun AvatarType.User.avatarShape() = CircleShape
+
+@Composable
+fun AvatarType.Room.avatarShape() = CircleShape
+
+@Composable
+fun AvatarType.Space.avatarShape(avatarSize: Dp) = RoundedCornerShape(avatarSize * 0.25f)
+
+@Composable
+fun AvatarType.avatarShape(avatarSize: Dp): Shape {
     return when (this) {
-        is AvatarType.Space -> RoundedCornerShape(cornerSize)
+        is AvatarType.Space -> avatarShape(avatarSize)
-        is AvatarType.Room,
+        is AvatarType.Room -> avatarShape()
-        AvatarType.User -> CircleShape
+        is AvatarType.User -> avatarShape()
     }
 }

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

@@ -8,7 +8,6 @@
 package io.element.android.libraries.designsystem.components.avatar
 
 import androidx.compose.runtime.Immutable
-import androidx.compose.ui.unit.Dp
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
 
@@ -22,7 +21,6 @@ sealed interface AvatarType {
     ) : AvatarType
 
     data class Space(
-        val cornerSize: Dp,
         val isTombstoned: Boolean = false,
     ) : AvatarType
 }

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

@@ -55,6 +55,7 @@ fun DmAvatars(
         // Draw user avatar and cut top end corner
         Avatar(
             avatarData = userAvatarData,
+            avatarType = AvatarType.User,
             modifier = Modifier
                 .align(Alignment.BottomStart)
                 .graphicsLayer {
@@ -85,6 +86,7 @@ fun DmAvatars(
         // Draw other user avatar
         Avatar(
             avatarData = otherUserAvatarData,
+            avatarType = AvatarType.User,
             modifier = Modifier
                 .align(Alignment.TopEnd)
                 .clip(CircleShape)

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

@@ -5,10 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
@@ -19,6 +20,10 @@ import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.anAvatarData
+import io.element.android.libraries.designsystem.components.avatar.avatarShape
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import kotlinx.collections.immutable.ImmutableList
@@ -33,8 +38,8 @@ private const val MAX_AVATAR_COUNT = 4
 @Composable
 internal fun AvatarCluster(
     avatars: ImmutableList<AvatarData>,
+    avatarType: AvatarType,
     modifier: Modifier = Modifier,
-    avatarType: AvatarType = AvatarType.User,
     hideAvatarImages: Boolean = false,
     contentDescription: String? = null,
 ) {
@@ -49,12 +54,13 @@ internal fun AvatarCluster(
             error("Unsupported number of avatars: 0")
         }
         1 -> {
-            Avatar(
+            InitialOrImageAvatar(
                 avatarData = limitedAvatars[0],
-                avatarType = avatarType,
+                hideAvatarImage = hideAvatarImages,
+                avatarShape = avatarType.avatarShape(limitedAvatars[0].size.dp),
+                forcedAvatarSize = null,
                 modifier = modifier,
                 contentDescription = contentDescription,
-                hideImage = hideAvatarImages
             )
         }
         else -> {
@@ -97,11 +103,13 @@ internal fun AvatarCluster(
                                 y = yOffset,
                             )
                     ) {
-                        Avatar(
+                        InitialOrImageAvatar(
                             avatarData = heroAvatar,
+                            hideAvatarImage = hideAvatarImages,
+                            avatarShape = avatarType.avatarShape(heroAvatarSize),
                             forcedAvatarSize = heroAvatarSize,
-                            avatarType = avatarType,
+                            modifier = Modifier,
-                            hideImage = hideAvatarImages,
+                            contentDescription = contentDescription,
                         )
                     }
                 }
@@ -113,13 +121,24 @@ internal fun AvatarCluster(
 @Preview(group = PreviewGroup.Avatars)
 @Composable
 internal fun AvatarClusterPreview() = ElementThemedPreview {
-    Row(
+    Column(
-        horizontalArrangement = Arrangement.spacedBy(8.dp)
+        verticalArrangement = Arrangement.spacedBy(8.dp),
     ) {
-        for (ngOfAvatars in 1..5) {
+        listOf(
-            AvatarCluster(
+            AvatarType.User,
-                avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(),
+            AvatarType.Room(),
-            )
+            AvatarType.Space(),
+        ).forEach { avatarType ->
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                for (ngOfAvatars in 1..5) {
+                    AvatarCluster(
+                        avatars = List(ngOfAvatars) { anAvatarData(it) }.toPersistentList(),
+                        avatarType = avatarType,
+                    )
+                }
+            }
         }
     }
 }

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

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
@@ -14,19 +14,21 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import coil3.compose.AsyncImagePainter
 import coil3.compose.SubcomposeAsyncImage
 import coil3.compose.SubcomposeAsyncImageContent
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import timber.log.Timber
 
 @Composable
 internal fun ImageAvatar(
     avatarData: AvatarData,
-    avatarType: AvatarType,
+    avatarShape: Shape,
     forcedAvatarSize: Dp?,
-    modifier: Modifier = Modifier.Companion,
+    modifier: Modifier = Modifier,
     contentDescription: String? = null,
 ) {
     val size = forcedAvatarSize ?: avatarData.size.dp
@@ -35,8 +37,8 @@ internal fun ImageAvatar(
         contentDescription = contentDescription,
         contentScale = ContentScale.Companion.Crop,
         modifier = modifier
-                .size(size)
+            .size(size)
-                .clip(avatarType.avatarShape())
+            .clip(avatarShape)
     ) {
         val collectedState by painter.state.collectAsState()
         when (val state = collectedState) {
@@ -50,14 +52,14 @@ internal fun ImageAvatar(
                 }
                 InitialLetterAvatar(
                     avatarData = avatarData,
-                    avatarType = avatarType,
+                    avatarShape = avatarShape,
                     forcedAvatarSize = forcedAvatarSize,
                     contentDescription = contentDescription,
                 )
             }
             else -> InitialLetterAvatar(
                 avatarData = avatarData,
-                avatarType = avatarType,
+                avatarShape = avatarShape,
                 forcedAvatarSize = forcedAvatarSize,
                 contentDescription = contentDescription,
             )

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

@@ -5,26 +5,28 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
 
 @Composable
 internal fun InitialLetterAvatar(
     avatarData: AvatarData,
-    avatarType: AvatarType,
+    avatarShape: Shape,
     forcedAvatarSize: Dp?,
     contentDescription: String?,
-    modifier: Modifier = Modifier.Companion,
+    modifier: Modifier = Modifier,
 ) {
     val avatarColors = AvatarColorsProvider.provide(avatarData.id)
     TextAvatar(
         text = avatarData.initialLetter,
         size = forcedAvatarSize ?: avatarData.size.dp,
-        avatarType = avatarType,
+        avatarShape = avatarShape,
         colors = avatarColors,
         contentDescription = contentDescription,
         modifier = modifier

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright 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.designsystem.components.avatar.internal
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+
+@Composable
+internal fun InitialOrImageAvatar(
+    avatarData: AvatarData,
+    hideAvatarImage: Boolean,
+    forcedAvatarSize: Dp?,
+    avatarShape: Shape,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    when {
+        avatarData.url.isNullOrBlank() || hideAvatarImage -> InitialLetterAvatar(
+            avatarData = avatarData,
+            avatarShape = avatarShape,
+            forcedAvatarSize = forcedAvatarSize,
+            modifier = modifier,
+            contentDescription = contentDescription,
+        )
+        else -> ImageAvatar(
+            avatarData = avatarData,
+            avatarShape = avatarShape,
+            forcedAvatarSize = forcedAvatarSize,
+            modifier = modifier,
+            contentDescription = contentDescription,
+        )
+    }
+}

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

@@ -5,10 +5,14 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.avatarShape
 
 @Composable
 internal fun RoomAvatar(
@@ -16,39 +20,33 @@ internal fun RoomAvatar(
     avatarType: AvatarType.Room,
     modifier: Modifier = Modifier,
     hideAvatarImage: Boolean = false,
+    forcedAvatarSize: Dp? = null,
     contentDescription: String? = null,
 ) {
     when {
         avatarType.isTombstoned -> {
             TombstonedRoomAvatar(
-                size = avatarData.size,
+                size = forcedAvatarSize ?: avatarData.size.dp,
                 modifier = modifier,
-                avatarType = avatarType,
+                avatarShape = avatarType.avatarShape(),
                 contentDescription = contentDescription
             )
         }
         avatarData.url != null || avatarType.heroes.isEmpty() -> {
-            if (avatarData.url.isNullOrBlank() || hideAvatarImage) {
+            InitialOrImageAvatar(
-                InitialLetterAvatar(
+                avatarData = avatarData,
-                    avatarData = avatarData,
+                hideAvatarImage = hideAvatarImage,
-                    avatarType = avatarType,
+                avatarShape = avatarType.avatarShape(),
-                    modifier = modifier,
+                forcedAvatarSize = forcedAvatarSize,
-                    contentDescription = contentDescription,
+                modifier = modifier,
-                    forcedAvatarSize = null,
+                contentDescription = contentDescription,
-                )
+            )
-            } else {
-                ImageAvatar(
-                    avatarData = avatarData,
-                    avatarType = avatarType,
-                    forcedAvatarSize = null,
-                    modifier = modifier,
-                    contentDescription = contentDescription,
-                )
-            }
         }
         else -> {
             AvatarCluster(
                 avatars = avatarType.heroes,
+                // Note: even for a room avatar, we use UserAvatarType here to display the avatar of heroes
+                avatarType = AvatarType.User,
                 modifier = modifier,
                 hideAvatarImages = hideAvatarImage,
                 contentDescription = contentDescription

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

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -13,37 +13,38 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.anAvatarData
+import io.element.android.libraries.designsystem.components.avatar.avatarShape
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 
 @Composable
-fun SpaceAvatar(
+internal fun SpaceAvatar(
     avatarData: AvatarData,
     avatarType: AvatarType.Space,
     modifier: Modifier = Modifier,
+    forcedAvatarSize: Dp? = null,
     hideAvatarImage: Boolean = false,
     contentDescription: String? = null,
 ) {
+    val size = forcedAvatarSize ?: avatarData.size.dp
     when {
         avatarType.isTombstoned -> TombstonedRoomAvatar(
-            size = avatarData.size,
+            size = size,
-            avatarType = avatarType,
+            avatarShape = avatarType.avatarShape(size),
             modifier = modifier,
             contentDescription = contentDescription,
         )
-        avatarData.url.isNullOrBlank() || hideAvatarImage -> InitialLetterAvatar(
+        else -> InitialOrImageAvatar(
             avatarData = avatarData,
-            avatarType = avatarType,
+            hideAvatarImage = hideAvatarImage,
-            modifier = modifier,
+            avatarShape = avatarType.avatarShape(size),
-            contentDescription = contentDescription,
+            forcedAvatarSize = forcedAvatarSize,
-            forcedAvatarSize = null,
-        )
-        else -> ImageAvatar(
-            avatarData = avatarData,
-            avatarType = avatarType,
-            forcedAvatarSize = null,
             modifier = modifier,
             contentDescription = contentDescription,
         )
@@ -62,12 +63,11 @@ internal fun SpaceAvatarPreview() =
         ) {
             SpaceAvatar(
                 avatarData = anAvatarData(),
-                avatarType = AvatarType.Space(cornerSize = 16.dp),
+                avatarType = AvatarType.Space(),
             )
             SpaceAvatar(
                 avatarData = anAvatarData(),
                 avatarType = AvatarType.Space(
-                    cornerSize = 16.dp,
                     isTombstoned = true,
                 ),
             )

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

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -17,6 +17,7 @@ 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.Shape
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.tooling.preview.Preview
@@ -25,6 +26,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.element.android.compound.theme.AvatarColors
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.avatarShape
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.text.toSp
@@ -36,13 +39,13 @@ internal fun TextAvatar(
     size: Dp,
     colors: AvatarColors,
     contentDescription: String?,
-    avatarType: AvatarType,
+    avatarShape: Shape,
     modifier: Modifier = Modifier,
 ) {
     Box(
         modifier
             .size(size)
-            .clip(avatarType.avatarShape())
+            .clip(avatarShape)
             .background(color = colors.background)
     ) {
         val fontSize = size.toSp() / 2
@@ -74,7 +77,7 @@ internal fun TextAvatarPreview() = ElementPreview {
         listOf(
             AvatarType.User,
             AvatarType.Room(),
-            AvatarType.Space(8.dp),
+            AvatarType.Space(),
         ).forEach { avatarType ->
             TextAvatar(
                 text = "AB",
@@ -83,7 +86,7 @@ internal fun TextAvatarPreview() = ElementPreview {
                     background = ElementTheme.colors.bgSubtlePrimary,
                     foreground = ElementTheme.colors.iconPrimary,
                 ),
-                avatarType = avatarType,
+                avatarShape = avatarType.avatarShape(40.dp),
                 contentDescription = null,
             )
         }

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

@@ -5,11 +5,15 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.AvatarColors
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -17,20 +21,20 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
 
 @Composable
 internal fun TombstonedRoomAvatar(
-    size: AvatarSize,
+    size: Dp,
-    avatarType: AvatarType,
+    avatarShape: Shape,
     modifier: Modifier = Modifier,
     contentDescription: String? = null,
 ) {
     TextAvatar(
         text = "!",
-        size = size.dp,
+        size = size,
         colors = AvatarColors(
             background = ElementTheme.colors.bgSubtlePrimary,
             foreground = ElementTheme.colors.iconTertiary
         ),
         modifier = modifier,
-        avatarType = avatarType,
+        avatarShape = avatarShape,
         contentDescription = contentDescription,
     )
 }
@@ -39,8 +43,8 @@ internal fun TombstonedRoomAvatar(
 @Composable
 internal fun TombstonedRoomAvatarPreview() = ElementPreview {
     TombstonedRoomAvatar(
-        size = AvatarSize.RoomListItem,
+        size = 52.dp,
-        avatarType = AvatarType.Room(),
+        avatarShape = CircleShape,
         contentDescription = null,
     )
 }

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright 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.designsystem.components.avatar.internal
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.avatarShape
+
+@Composable
+internal fun UserAvatar(
+    avatarData: AvatarData,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    forcedAvatarSize: Dp? = null,
+    hideImage: Boolean = false,
+) {
+    InitialOrImageAvatar(
+        avatarData = avatarData,
+        hideAvatarImage = hideImage,
+        avatarShape = AvatarType.User.avatarShape(),
+        modifier = modifier,
+        contentDescription = contentDescription,
+        forcedAvatarSize = forcedAvatarSize,
+    )
+}

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

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-package io.element.android.libraries.designsystem.components.avatar
+package io.element.android.libraries.designsystem.components.avatar.internal
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -16,6 +16,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.avatarColors
+import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.components.avatar.anAvatarData
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -33,7 +36,10 @@ internal fun UserAvatarColorsPreview() = ElementPreview {
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 // Note: it's OK, since the hash of "0" is 0, the hash of "1" is 1, etc.
-                Avatar(anAvatarData(id = "$it"))
+                Avatar(
+                    avatarData = anAvatarData(id = "$it"),
+                    avatarType = AvatarType.User,
+                )
                 Text(text = "Color index $it")
             }
         }

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

@@ -25,6 +25,7 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -62,6 +63,7 @@ fun CreateDmConfirmationBottomSheet(
             Spacer(modifier = Modifier.height(24.dp))
             Avatar(
                 avatarData = matrixUser.getAvatarData(AvatarSize.DmCreationConfirmation),
+                avatarType = AvatarType.User,
             )
             Spacer(modifier = Modifier.height(16.dp))
             Text(

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

@@ -13,7 +13,6 @@ 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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
@@ -61,7 +60,6 @@ fun EditableAvatarView(
         val a11yAvatar = stringResource(CommonStrings.a11y_avatar)
         Box(
             modifier = Modifier
-                .size(avatarSize.dp)
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
                     onClick = onAvatarClick,
@@ -75,16 +73,20 @@ fun EditableAvatarView(
             when (avatarUrl?.scheme) {
                 null, "mxc" -> {
                     Avatar(
-                        avatarData = AvatarData(matrixId, displayName, avatarUrl?.toString(), size = avatarSize),
+                        avatarData = AvatarData(
+                            id = matrixId,
+                            name = displayName,
+                            url = avatarUrl?.toString(),
+                            size = avatarSize,
+                        ),
                         avatarType = avatarType,
-                        modifier = Modifier.fillMaxSize(),
                     )
                 }
                 else -> {
                     UnsavedAvatar(
                         avatarUri = avatarUrl,
+                        avatarSize = avatarSize,
                         avatarType = avatarType,
-                        modifier = Modifier.fillMaxSize(),
                     )
                 }
             }

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

@@ -18,6 +18,7 @@ import io.element.android.compound.theme.ElementTheme
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -35,7 +36,11 @@ fun InviteSenderView(
         modifier = modifier,
     ) {
         Box(modifier = Modifier.padding(vertical = 2.dp)) {
-            Avatar(avatarData = inviteSender.avatarData, hideImage = hideAvatarImage)
+            Avatar(
+                avatarData = inviteSender.avatarData,
+                avatarType = AvatarType.User,
+                hideImage = hideAvatarImage,
+            )
         }
         Text(
             text = inviteSender.annotatedString(),

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

@@ -23,6 +23,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -65,6 +66,7 @@ private fun MatrixUserHeaderContent(
             modifier = Modifier
                 .padding(vertical = 12.dp),
             avatarData = matrixUser.getAvatarData(size = AvatarSize.UserPreference),
+            avatarType = AvatarType.User,
         )
         Spacer(modifier = Modifier.width(16.dp))
         Column(

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

@@ -30,6 +30,7 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Icon
@@ -54,7 +55,10 @@ fun SelectedUser(
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Avatar(matrixUser.getAvatarData(size = AvatarSize.SelectedUser))
+            Avatar(
+                avatarData = matrixUser.getAvatarData(size = AvatarSize.SelectedUser),
+                avatarType = AvatarType.User,
+            )
             Text(
                 modifier = Modifier.clipToBounds(),
                 text = matrixUser.getBestName(),

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

@@ -27,6 +27,7 @@ import io.element.android.compound.tokens.generated.CompoundIcons
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -46,7 +47,10 @@ fun UnresolvedUserRow(
             .padding(start = 16.dp, top = 8.dp, end = 16.dp, bottom = 8.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Avatar(avatarData)
+        Avatar(
+            avatarData = avatarData,
+            avatarType = AvatarType.User,
+        )
         Column(
             modifier = Modifier
                 .padding(start = 12.dp),

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

@@ -28,6 +28,7 @@ import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import coil3.request.ImageRequest
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.avatar.avatarShape
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -43,12 +44,13 @@ import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
 @Composable
 fun UnsavedAvatar(
     avatarUri: Uri?,
+    avatarSize: AvatarSize,
     avatarType: AvatarType,
     modifier: Modifier = Modifier,
 ) {
     val commonModifier = modifier
-        .size(70.dp)
+        .size(avatarSize.dp)
-        .clip(avatarType.avatarShape())
+        .clip(avatarType.avatarShape(avatarSize.dp))
 
     if (avatarUri != null) {
         val context = LocalContext.current
@@ -69,7 +71,7 @@ fun UnsavedAvatar(
                 contentDescription = null,
                 modifier = Modifier
                     .align(Alignment.Center)
-                    .size(40.dp),
+                    .size(avatarSize.dp * 4 / 7),
                 tint = ElementTheme.colors.iconSecondary,
             )
         }
@@ -83,9 +85,9 @@ internal fun UnsavedAvatarPreview() = ElementPreview {
         modifier = Modifier.padding(8.dp),
         horizontalArrangement = Arrangement.spacedBy(8.dp),
     ) {
-        UnsavedAvatar(null, AvatarType.User)
+        UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.User)
-        UnsavedAvatar(Uri.EMPTY, AvatarType.User)
+        UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.User)
-        UnsavedAvatar(null, AvatarType.Space(8.dp))
+        UnsavedAvatar(null, AvatarSize.EditRoomDetails, AvatarType.Space())
-        UnsavedAvatar(Uri.EMPTY, AvatarType.Space(8.dp))
+        UnsavedAvatar(Uri.EMPTY, AvatarSize.EditRoomDetails, AvatarType.Space())
     }
 }

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

@@ -21,6 +21,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 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.AvatarType
 import io.element.android.libraries.designsystem.theme.components.Text
 
 @Composable
@@ -38,7 +39,10 @@ internal fun UserRow(
             .padding(start = 16.dp, top = 4.dp, end = 16.dp, bottom = 4.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Avatar(avatarData)
+        Avatar(
+            avatarData = avatarData,
+            avatarType = AvatarType.User,
+        )
         Column(
             modifier = Modifier
                 .padding(start = 12.dp)

libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/details/MediaDetailsBottomSheet.kt

@@ -29,6 +29,7 @@ import io.element.android.libraries.designsystem.colors.AvatarColorsProvider
 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.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -139,12 +140,13 @@ private fun SenderRow(
     ) {
         val id = mediaInfo.senderId?.value ?: "@Alice:domain"
         Avatar(
-            AvatarData(
+            avatarData = AvatarData(
                 id = id,
                 name = mediaInfo.senderName,
                 url = mediaInfo.senderAvatar,
                 size = AvatarSize.MediaSender,
-            )
+            ),
+            avatarType = AvatarType.User,
         )
         Column(
             modifier = Modifier

tests/uitests/src/test/snapshots/images/features.preferences.impl.user.editprofile_EditUserProfileView_Day_1_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:69fdae3edcd02635868f209a2c1ff21ce807ffb4c6d44dcf89fb0f54e1b9c1f3
+size 68396

tests/uitests/src/test/snapshots/images/features.preferences.impl.user.editprofile_EditUserProfileView_Night_1_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6da7fb8d713d5d8255593f2007edf068870dbd05225fe2c0562d197a1739b876
+size 67313

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_AvatarCluster_Avatars_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c7a7b64a83f68670c0c38eac2782ad5121fe18638c6a21f3b868d0cb4820c7c
+size 59391

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_SpaceAvatar_Avatars_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57545d6b9690b892859f7bf2d2aa92d3fdc1a3ae7b4849e39cf6df10bb0dbbb4
+size 8719

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar.internal_TextAvatar_Avatars_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:def7dc550efea75745153ad0cf71c7d92905205549965ba1f192ee3612cec9c4
+size 8041

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_AvatarCluster_Avatars_en.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c6afcae51ee69dcdb9dbf60c8f72e55b9b07e4feb72dfba0a40ffeebed6ab681
-size 25730

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_SpaceAvatar_Avatars_en.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d61143149a23cbb1549ee11b1ad00fd4eee16d173407bc847bde91c39cd1b5bc
-size 9178

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_TextAvatar_Avatars_en.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0b632082558328aa485712b8684016a84a9d1eaba7f96cd92b47d364e6c9169f
-size 7981

tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_UnsavedAvatar_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e20e9a7264a6784fbaf6525e73a07318abd27bcf025541b880fd27ac0cca4ba4
+oid sha256:82c54bb785e7c2c301109f25b59e527193e1c786fdfda1252b82702c685cfd7d
-size 69466
+size 68516

tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_UnsavedAvatar_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:991318dc36c1e6b86a753241638c36adafb896f852f4d5d0e15dd251fa025311
+oid sha256:ca5be5bfe66000d7730a9405ffb2992644f638fb58b28ac3f647c0c242ed8c4d
-size 68974
+size 68007