From 93e05e9d9f2c09d4c9df12889b0115f6ab0a9f89 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Tue, 3 Oct 2023 13:44:06 +0200
Subject: [PATCH] Preference: Add badge to the icon preference.

---
 .../components/preferences/PreferenceText.kt  |  2 +
 .../preferences/components/PreferenceIcon.kt  | 49 ++++++++++++++-----
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
index d4bc627802..e0b8ea7926 100644
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceText.kt
+++ b/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(),
diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/components/PreferenceIcon.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/components/PreferenceIcon.kt
index d1c1281ee9..c29b46f3c3 100644
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/components/PreferenceIcon.kt
+++ b/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) {
-        Icon(
-            imageVector = icon,
-            resourceId = iconResourceId,
-            contentDescription = "",
-            tint = tintColor ?: enabled.toSecondaryEnabledColor(),
-            modifier = modifier
-                .padding(end = 16.dp)
-                .size(24.dp),
-        )
+        Box(modifier = modifier) {
+            Icon(
+                imageVector = icon,
+                resourceId = iconResourceId,
+                contentDescription = "",
+                tint = tintColor ?: enabled.toSecondaryEnabledColor(),
+                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?) {
-    PreferenceIcon(icon = content)
-}
+internal fun PreferenceIconWithBadgePreview(@PreviewParameter(ImageVectorProvider::class) content: ImageVector?) =
+    ElementThemedPreview {
+        PreferenceIcon(
+            icon = content,
+            showIconBadge = true,
+        )
+    }