From 2ad6ca5f22de3c65f8ec2566f0c64860f132fa32 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Fri, 22 Aug 2025 14:38:32 +0200
Subject: [PATCH] Add SpaceHeaderView.

---
 .../components/avatar/AvatarSize.kt           |   1 +
 .../matrix/ui/components/SpaceHeaderView.kt   | 108 ++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceHeaderView.kt

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 c22505b08e..91d52cfc84 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,5 +65,6 @@ enum class AvatarSize(val dp: Dp) {
     UserVerification(52.dp),
 
     OrganizationHeader(64.dp),
+    SpaceHeader(64.dp),
     SpaceMember(24.dp),
 }
diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceHeaderView.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceHeaderView.kt
new file mode 100644
index 0000000000..ab33b6f637
--- /dev/null
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SpaceHeaderView.kt
@@ -0,0 +1,108 @@
+/*
+ * 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.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
+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.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
+import io.element.android.libraries.matrix.api.room.join.JoinRule
+import io.element.android.libraries.matrix.api.user.MatrixUser
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+
+/**
+ * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2429&m=dev
+ */
+@Composable
+fun SpaceHeaderView(
+    avatarData: AvatarData,
+    name: String,
+    topic: String,
+    joinRule: JoinRule,
+    heroes: ImmutableList<MatrixUser>,
+    numberOfMembers: Long,
+    numberOfRooms: Int,
+    modifier: Modifier = Modifier,
+    topicMaxLines: Int = Int.MAX_VALUE,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(top = 32.dp, bottom = 24.dp, start = 16.dp, end = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Avatar(
+            avatarData = avatarData,
+            avatarType = AvatarType.Space(false),
+        )
+        Text(
+            text = name,
+            style = ElementTheme.typography.fontHeadingLgBold,
+            color = ElementTheme.colors.textPrimary,
+            textAlign = TextAlign.Center,
+        )
+        SpaceInfoRow(
+            joinRule = joinRule,
+            numberOfRooms = numberOfRooms,
+        )
+        SpaceMembersView(
+            heroes = heroes,
+            numberOfMembers = numberOfMembers,
+            modifier = Modifier.padding(horizontal = 32.dp),
+        )
+        Text(
+            text = topic,
+            style = ElementTheme.typography.fontBodyMdRegular,
+            color = ElementTheme.colors.textPrimary,
+            textAlign = TextAlign.Center,
+            maxLines = topicMaxLines,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun SpaceHeaderViewPreview() = ElementPreview {
+    SpaceHeaderView(
+        avatarData = anAvatarData(
+            url = "anUrl",
+            size = AvatarSize.SpaceHeader,
+        ),
+        name = "Space name",
+        topic = "Space topic: " + LoremIpsum(40).values.first(),
+        topicMaxLines = 2,
+        joinRule = JoinRule.Public,
+        heroes = persistentListOf(
+            aMatrixUser(id = "@1:d", displayName = "Alice", avatarUrl = "aUrl"),
+            aMatrixUser(id = "@2:d", displayName = "Bob"),
+            aMatrixUser(id = "@3:d", displayName = "Charlie", avatarUrl = "aUrl"),
+            aMatrixUser(id = "@4:d", displayName = "Dave"),
+        ),
+        numberOfMembers = 999,
+        numberOfRooms = 10,
+    )
+}