Add space header.

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

@@ -0,0 +1,73 @@
+/*
+ * 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.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.components.BigIcon
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.ui.strings.CommonStrings
+
+/**
+ * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=3643-2048
+ */
+@Composable
+fun SpaceHeaderRootView(
+    numberOfSpaces: Int,
+    numberOfRooms: Int,
+    modifier: Modifier = Modifier,
+) {
+    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)
+    ) {
+        BigIcon(
+            style = BigIcon.Style.Default(CompoundIcons.WorkspaceSolid())
+        )
+        Text(
+            text = stringResource(CommonStrings.screen_space_list_title),
+            style = ElementTheme.typography.fontHeadingLgBold,
+            color = ElementTheme.colors.textPrimary,
+            textAlign = TextAlign.Center,
+        )
+        SpaceInfoRow(
+            leftText = numberOfSpaces(numberOfSpaces),
+            rightText = numberOfRooms(numberOfRooms),
+        )
+        Text(
+            text = stringResource(CommonStrings.screen_space_list_description),
+            style = ElementTheme.typography.fontBodyMdRegular,
+            color = ElementTheme.colors.textPrimary,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun SpaceHeaderRootViewPreview() = ElementPreview {
+    SpaceHeaderRootView(
+        numberOfSpaces = 3,
+        numberOfRooms = 10,
+    )
+}

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

@@ -38,11 +38,11 @@ import kotlinx.collections.immutable.persistentListOf
 @Composable
 fun SpaceHeaderView(
     avatarData: AvatarData,
-    name: String,
-    topic: String,
-    joinRule: JoinRule,
+    name: String?,
+    topic: String?,
+    joinRule: JoinRule?,
     heroes: ImmutableList<MatrixUser>,
-    numberOfMembers: Long,
+    numberOfMembers: Int,
     numberOfRooms: Int,
     modifier: Modifier = Modifier,
     topicMaxLines: Int = Int.MAX_VALUE,
@@ -58,29 +58,34 @@ fun SpaceHeaderView(
             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,
-        )
+        name?.let {
+            Text(
+                text = name,
+                style = ElementTheme.typography.fontHeadingLgBold,
+                color = ElementTheme.colors.textPrimary,
+                textAlign = TextAlign.Center,
+            )
+        }
+        if (joinRule != null)
+            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,
-        )
+        topic?.let {
+            Text(
+                text = topic,
+                style = ElementTheme.typography.fontBodyMdRegular,
+                color = ElementTheme.colors.textPrimary,
+                textAlign = TextAlign.Center,
+                maxLines = topicMaxLines,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
     }
 }
 

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

@@ -35,7 +35,7 @@ import kotlinx.collections.immutable.toImmutableList
 @Composable
 fun SpaceMembersView(
     heroes: ImmutableList<MatrixUser>,
-    numberOfMembers: Long,
+    numberOfMembers: Int,
     modifier: Modifier = Modifier,
 ) {
     if (heroes.isEmpty()) {
@@ -60,7 +60,7 @@ fun SpaceMembersView(
 @Composable
 private fun SpaceMembersWithAvatar(
     heroes: ImmutableList<AvatarData>,
-    numberOfMembers: Long,
+    numberOfMembers: Int,
     modifier: Modifier = Modifier,
 ) {
     Row(