diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt index 58fbe74674..c22505b08e 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt @@ -65,4 +65,5 @@ enum class AvatarSize(val dp: Dp) { UserVerification(52.dp), OrganizationHeader(64.dp), + SpaceMember(24.dp), } diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceMembersView.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceMembersView.kt new file mode 100644 index 0000000000..01e5bf6418 --- /dev/null +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceMembersView.kt @@ -0,0 +1,107 @@ +/* + * 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.matrix.ui.components + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +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.molecules.MembersCountMolecule +import io.element.android.libraries.designsystem.components.avatar.AvatarData +import io.element.android.libraries.designsystem.components.avatar.AvatarRow +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 +import io.element.android.libraries.designsystem.utils.CommonDrawables +import io.element.android.libraries.matrix.api.user.MatrixUser +import io.element.android.libraries.matrix.ui.model.getAvatarData +import kotlinx.collections.immutable.ImmutableList +import kotlinx.collections.immutable.persistentListOf +import kotlinx.collections.immutable.toImmutableList + +/** + * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3729-605&m=dev + */ +@Composable +fun SpaceMembersView( + heroes: ImmutableList, + numberOfMembers: Long, + modifier: Modifier = Modifier, +) { + if (heroes.isEmpty()) { + MembersCountMolecule( + memberCount = numberOfMembers, + modifier = modifier, + ) + } else { + SpaceMembersWithAvatar( + heroes = heroes + .take(3) + .map { + it.getAvatarData(AvatarSize.SpaceMember) + } + .toImmutableList(), + numberOfMembers = numberOfMembers, + modifier = modifier, + ) + } +} + +@Composable +private fun SpaceMembersWithAvatar( + heroes: ImmutableList, + numberOfMembers: Long, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier, + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(4.dp), + ) { + AvatarRow( + avatarDataList = heroes, + avatarType = AvatarType.User, + lastOnTop = true, + ) + Text( + text = "$numberOfMembers", + style = ElementTheme.typography.fontBodyMdRegular, + color = ElementTheme.colors.textSecondary, + ) + } +} + +@Composable +@PreviewsDayNight +internal fun SpaceMembersViewNoHeroesPreview() = ElementPreview { + SpaceMembersView( + heroes = persistentListOf(), + numberOfMembers = 123, + ) +} + +@Composable +@PreviewsDayNight +internal fun SpaceMembersViewPreview() = ElementPreview( + drawableFallbackForImages = CommonDrawables.sample_avatar, +) { + SpaceMembersView( + heroes = persistentListOf( + aMatrixUser(id = "1", displayName = "Alice", avatarUrl = "aUrl"), + aMatrixUser(id = "2", displayName = "Bob"), + aMatrixUser(id = "3", displayName = "Charlie", avatarUrl = "aUrl"), + aMatrixUser(id = "4", displayName = "Dave"), + ), + numberOfMembers = 123, + ) +}