Improve badges to better match Tachi

presentation/src/commonMain/kotlin/ca/gosyer/jui/ui/library/components/LibraryMangaBadges.kt

@@ -6,23 +6,22 @@
 
 package ca.gosyer.jui.ui.library.components
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.text.toUpperCase
 import androidx.compose.ui.unit.dp
 import ca.gosyer.jui.domain.manga.model.Manga
 import ca.gosyer.jui.domain.source.model.Source
 import ca.gosyer.jui.i18n.MR
+import ca.gosyer.jui.uicore.components.Badge
+import ca.gosyer.jui.uicore.components.BadgeGroup
 import ca.gosyer.jui.uicore.resources.stringResource
 import ca.gosyer.jui.uicore.theme.extraColors
 
@@ -35,37 +34,22 @@ fun LibraryMangaBadges(
     showLanguage: Boolean,
     showLocal: Boolean
 ) {
-    val unread = manga.unreadCount
+    val unread = manga.unreadCount?.takeIf { showUnread && it > 0 }
-    val downloaded = manga.downloadCount
+    val downloaded = manga.downloadCount?.takeIf { showDownloaded && it > 0 }
-    val isLocal = manga.sourceId == Source.LOCAL_SOURCE_ID
+    val isLocal = (manga.sourceId == Source.LOCAL_SOURCE_ID).takeIf { showLocal } ?: false
+    val language = manga.source?.lang?.takeIf { showLanguage }?.toUpperCase(Locale.current)
 
     Row(modifier then Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
-        if ((unread != null && unread > 0) || (downloaded != null && downloaded > 0) || isLocal) {
+        if (unread != null || downloaded != null || isLocal) {
-            Row(modifier = Modifier.clip(MaterialTheme.shapes.medium)) {
+            BadgeGroup {
-                if (showLocal && isLocal) {
+                if (downloaded != null) {
-                    Text(
+                    Badge(text = downloaded.toString())
-                        text = stringResource(MR.strings.local_badge),
-                        modifier = Modifier.background(MaterialTheme.colors.secondary).then(BadgesInnerPadding),
-                        style = MaterialTheme.typography.caption,
-                        color = MaterialTheme.colors.onSecondary
-                    )
                 }
-                if (showUnread && unread != null && unread > 0) {
+                if (unread != null) {
-                    Text(
+                    Badge(
                         text = unread.toString(),
-                        modifier = Modifier.background(MaterialTheme.extraColors.tertiary).then(BadgesInnerPadding),
+                        color = MaterialTheme.extraColors.tertiary,
-                        style = MaterialTheme.typography.caption,
+                        textColor = MaterialTheme.extraColors.onTertiary
-                        color = MaterialTheme.extraColors.onTertiary
-                    )
-                }
-                if (showDownloaded && downloaded != null && downloaded > 0) {
-                    Text(
-                        text = downloaded.toString(),
-                        modifier = Modifier.background(MaterialTheme.colors.secondary).then(
-                            BadgesInnerPadding
-                        ),
-                        style = MaterialTheme.typography.caption,
-                        color = MaterialTheme.colors.onSecondary
                     )
                 }
             }
@@ -73,16 +57,10 @@ fun LibraryMangaBadges(
             Spacer(Modifier)
         }
 
-        val lang = manga.source?.lang
+        if (isLocal) {
-        if (showLanguage && lang != null) {
+            Badge(text = stringResource(MR.strings.local_badge))
-            Row(modifier = Modifier.clip(MaterialTheme.shapes.medium)) {
+        } else if (language != null) {
-                Text(
+            Badge(text = language)
-                    text = lang.toUpperCase(Locale.current),
-                    modifier = Modifier.background(MaterialTheme.colors.secondary).then(BadgesInnerPadding),
-                    style = MaterialTheme.typography.caption,
-                    color = MaterialTheme.colors.onSecondary
-                )
-            }
         }
     }
 }

ui-core/src/commonMain/kotlin/ca/gosyer/jui/uicore/components/Badges.kt

@@ -0,0 +1,47 @@
+package ca.gosyer.jui.uicore.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun BadgeGroup(
+    modifier: Modifier = Modifier,
+    shape: Shape = MaterialTheme.shapes.small,
+    content: @Composable RowScope.() -> Unit,
+) {
+    Row(modifier = modifier.clip(shape)) {
+        content()
+    }
+}
+
+@Composable
+fun Badge(
+    text: String,
+    color: Color = MaterialTheme.colors.secondary,
+    textColor: Color = MaterialTheme.colors.onSecondary,
+    shape: Shape = RectangleShape,
+) {
+    Text(
+        text = text,
+        modifier = Modifier
+            .clip(shape)
+            .background(color)
+            .padding(horizontal = 3.dp, vertical = 1.dp),
+        color = textColor,
+        fontWeight = FontWeight.Medium,
+        maxLines = 1,
+        style = MaterialTheme.typography.caption,
+    )
+}