Preference: Add badge to the icon preference.

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

@@ -57,6 +57,7 @@ fun PreferenceText(
     icon: ImageVector? = null,
     @DrawableRes iconResourceId: Int? = null,
     showIconAreaIfNoIcon: Boolean = false,
+    showIconBadge: Boolean = false,
     tintColor: Color? = null,
     onClick: () -> Unit = {},
 ) {
@@ -73,6 +74,7 @@ fun PreferenceText(
         PreferenceIcon(
             icon = icon,
             iconResourceId = iconResourceId,
+            showIconBadge = showIconBadge,
             enabled = enabled,
             isVisible = showIconAreaIfNoIcon,
             tintColor = tintColor ?: enabled.toSecondaryEnabledColor(),

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

@@ -17,17 +17,20 @@
 package io.element.android.libraries.designsystem.components.preferences.components
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.atomic.atoms.RedIndicatorAtom
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Icon
@@ -38,20 +41,30 @@ fun PreferenceIcon(
     modifier: Modifier = Modifier,
     icon: ImageVector? = null,
     @DrawableRes iconResourceId: Int? = null,
+    showIconBadge: Boolean = false,
     tintColor: Color? = null,
     enabled: Boolean = true,
     isVisible: Boolean = true,
 ) {
     if (icon != null || iconResourceId != null) {
+        Box(modifier = modifier) {
             Icon(
                 imageVector = icon,
                 resourceId = iconResourceId,
                 contentDescription = "",
                 tint = tintColor ?: enabled.toSecondaryEnabledColor(),
-            modifier = modifier
+                modifier = Modifier
                     .padding(end = 16.dp)
                     .size(24.dp),
             )
+            if (showIconBadge) {
+                RedIndicatorAtom(
+                    modifier = Modifier
+                        .align(Alignment.TopEnd)
+                        .padding(end = 16.dp)
+                )
+            }
+        }
     } else if (isVisible) {
         Spacer(modifier = modifier.width(40.dp))
     }
@@ -60,9 +73,19 @@ fun PreferenceIcon(
 @Preview(group = PreviewGroup.Preferences)
 @Composable
 internal fun PreferenceIconPreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) =
-    ElementThemedPreview { ContentToPreview(content) }
+    ElementThemedPreview {
+        PreferenceIcon(
+            icon = content,
+            showIconBadge = false,
+        )
+    }
 
+@Preview(group = PreviewGroup.Preferences)
 @Composable
-private fun ContentToPreview(content: ImageVector?) {
+internal fun PreferenceIconWithBadgePreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) =
-    PreferenceIcon(icon = content)
+    ElementThemedPreview {
-}
+        PreferenceIcon(
+            icon = content,
+            showIconBadge = true,
+        )
+    }