Merge pull request #5451 from element-hq/feature/bma/spaceAnnoucement

Space annoucement

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/BetaLabel.kt

@@ -0,0 +1,49 @@
+/*
+ * 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.atomic.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+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
+
+@Composable
+fun BetaLabel(
+    modifier: Modifier = Modifier,
+) {
+    val shape = RoundedCornerShape(size = 6.dp)
+    Text(
+        modifier = modifier
+            .border(
+                width = 1.dp,
+                color = ElementTheme.colors.borderInfoSubtle,
+                shape = shape,
+            )
+            .background(
+                color = ElementTheme.colors.bgInfoSubtle,
+                shape = shape,
+            )
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+        text = "BETA",
+        style = ElementTheme.typography.fontBodySmMedium,
+        color = ElementTheme.colors.textInfoPrimary,
+    )
+}
+
+@PreviewsDayNight
+@Composable
+internal fun BetaLabelPreview() = ElementPreview {
+    BetaLabel()
+}

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

@@ -7,7 +7,9 @@
 
 package io.element.android.libraries.designsystem.atomic.molecules
 
+import androidx.compose.foundation.layout.Arrangement
 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
@@ -20,6 +22,7 @@ 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.atomic.atoms.BetaLabel
 import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -32,6 +35,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
  * @param subTitle the subtitle to display
  * @param iconStyle the style of the [BigIcon] to display
  * @param modifier the modifier to apply to this layout
+ * @param showBetaLabel whether to show a "BETA" label next to the title
  */
 @Composable
 fun IconTitleSubtitleMolecule(
@@ -39,6 +43,7 @@ fun IconTitleSubtitleMolecule(
     subTitle: String?,
     iconStyle: BigIcon.Style,
     modifier: Modifier = Modifier,
+    showBetaLabel: Boolean = false,
 ) {
     Column(modifier) {
         BigIcon(
@@ -46,17 +51,25 @@ fun IconTitleSubtitleMolecule(
             style = iconStyle,
         )
         Spacer(modifier = Modifier.height(16.dp))
-        Text(
-            text = title,
-            modifier = Modifier
-                .fillMaxWidth()
-                .semantics {
-                    heading()
-                },
-            textAlign = TextAlign.Center,
-            style = ElementTheme.typography.fontHeadingMdBold,
-            color = ElementTheme.colors.textPrimary,
-        )
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterHorizontally)
+        ) {
+            Text(
+                text = title,
+                modifier = Modifier
+                    .semantics {
+                        heading()
+                    },
+                textAlign = TextAlign.Center,
+                style = ElementTheme.typography.fontHeadingMdBold,
+                color = ElementTheme.colors.textPrimary,
+            )
+            if (showBetaLabel) {
+                BetaLabel()
+            }
+        }
         if (subTitle != null) {
             Spacer(Modifier.height(8.dp))
             Text(

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

@@ -53,11 +53,13 @@ object BigIcon {
          * @param vectorIcon the [ImageVector] to display
          * @param contentDescription the content description of the icon, if any. It defaults to `null`
          * @param useCriticalTint whether the icon and background should be rendered using critical tint
+         * @param usePrimaryTint whether the icon should be rendered using primary tint
          */
         data class Default(
             val vectorIcon: ImageVector,
             val contentDescription: String? = null,
             val useCriticalTint: Boolean = false,
+            val usePrimaryTint: Boolean = false,
         ) : Style
 
         /**
@@ -143,6 +145,8 @@ object BigIcon {
                 val iconTint = when (style) {
                     is Style.Default -> if (style.useCriticalTint) {
                         ElementTheme.colors.iconCriticalPrimary
+                    } else if (style.usePrimaryTint) {
+                        ElementTheme.colors.iconPrimary
                     } else {
                         ElementTheme.colors.iconSecondary
                     }

libraries/matrix/test/src/main/kotlin/io/element/android/libraries/matrix/test/TestData.kt

@@ -26,6 +26,7 @@ const val A_PASSWORD = "password"
 const val A_PASSPHRASE = "passphrase"
 const val A_SECRET = "secret"
 const val AN_APPLICATION_NAME = "AppName"
+const val AN_APPLICATION_NAME_DESKTOP = "AppNameDesktop"
 
 val A_USER_ID = UserId("@alice:server.org")
 val A_USER_ID_2 = UserId("@bob:server.org")