Tweak badges UI

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/Badge.kt

@@ -0,0 +1,22 @@
+package it.vfsfitvnm.vimusic.ui.components
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+fun Modifier.badge(color: Color, isDisplayed: Boolean = true, radius: Dp = 4.dp) =
+    if (isDisplayed) {
+        drawWithContent {
+            drawContent()
+            drawCircle(
+                color = color,
+                center = Offset(x = size.width, y = 0.dp.toPx()),
+                radius = radius.toPx()
+            )
+        }
+    } else {
+        this
+    }

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/HomeScreen.kt

@@ -37,12 +37,9 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -62,6 +59,7 @@ import it.vfsfitvnm.vimusic.models.Playlist
 import it.vfsfitvnm.vimusic.models.SearchQuery
 import it.vfsfitvnm.vimusic.query
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
+import it.vfsfitvnm.vimusic.ui.components.badge
 import it.vfsfitvnm.vimusic.ui.components.themed.DropDownSection
 import it.vfsfitvnm.vimusic.ui.components.themed.DropDownSectionSpacer
 import it.vfsfitvnm.vimusic.ui.components.themed.DropDownTextItem
@@ -77,7 +75,6 @@ import it.vfsfitvnm.vimusic.ui.views.SongItem
 import it.vfsfitvnm.vimusic.utils.asMediaItem
 import it.vfsfitvnm.vimusic.utils.center
 import it.vfsfitvnm.vimusic.utils.color
-import it.vfsfitvnm.vimusic.utils.drawCircle
 import it.vfsfitvnm.vimusic.utils.forcePlayAtIndex
 import it.vfsfitvnm.vimusic.utils.forcePlayFromBeginning
 import it.vfsfitvnm.vimusic.utils.isFirstLaunchKey
@@ -220,26 +217,7 @@ fun HomeScreen() {
                             modifier = Modifier
                                 .clickable { settingsRoute() }
                                 .padding(horizontal = 16.dp, vertical = 8.dp)
-                                .run {
+                                .badge(color = colorPalette.red, isDisplayed = isFirstLaunch)
-                                    if (isFirstLaunch) {
-                                        drawBehind {
-                                            drawCircle(
-                                                color = colorPalette.accent,
-                                                center = Offset(
-                                                    x = size.width,
-                                                    y = 0.dp.toPx()
-                                                ),
-                                                radius = 4.dp.toPx(),
-                                                shadow = Shadow(
-                                                    color = colorPalette.accent,
-                                                    blurRadius = 4.dp.toPx()
-                                                )
-                                            )
-                                        }
-                                    } else {
-                                        this
-                                    }
-                                }
                                 .size(24.dp)
                         )
 

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/SettingsScreen.kt

@@ -12,7 +12,6 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.geometry.center
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -20,6 +19,7 @@ import it.vfsfitvnm.route.*
 import it.vfsfitvnm.vimusic.LocalPlayerAwarePaddingValues
 import it.vfsfitvnm.vimusic.R
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
+import it.vfsfitvnm.vimusic.ui.components.badge
 import it.vfsfitvnm.vimusic.ui.components.themed.Switch
 import it.vfsfitvnm.vimusic.ui.components.themed.ValueSelectorDialog
 import it.vfsfitvnm.vimusic.ui.screens.settings.*
@@ -134,6 +134,7 @@ fun SettingsScreen() {
                             modifier = Modifier
                                 .background(color = color, shape = CircleShape)
                                 .size(36.dp)
+                                .badge(color = colorPalette.red, isDisplayed = withAlert)
                         ) {
                             Image(
                                 painter = painterResource(icon),
@@ -160,23 +161,6 @@ fun SettingsScreen() {
                                 maxLines = 2
                             )
                         }
-
-                        if (withAlert) {
-                            Canvas(
-                                modifier = Modifier
-                                    .size(8.dp)
-                            ) {
-                                drawCircle(
-                                    color = colorPalette.accent,
-                                    center = size.center.copy(x = size.width),
-                                    radius = 4.dp.toPx(),
-                                    shadow = Shadow(
-                                        color = colorPalette.accent,
-                                        blurRadius = 4.dp.toPx()
-                                    )
-                                )
-                            }
-                        }
                     }
                 }