From 3a2dc46ff0b42d42f93b0dd7267d526e7bb8b30a Mon Sep 17 00:00:00 2001
From: arkon <eugcheung94@gmail.com>
Date: Sun, 12 Feb 2023 17:22:34 -0500
Subject: [PATCH] Replace Local and In Library badge text with icons

Fixes #5725
---
 .../presentation/browse/BrowseBadges.kt       |  8 +--
 .../kanade/presentation/components/Badges.kt  | 51 +++++++++++++++++++
 .../library/components/LibraryBadges.kt       | 24 +++++++--
 3 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt b/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt
index 3c7ab0c278..b3df79442d 100644
--- a/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt
+++ b/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt
@@ -1,13 +1,15 @@
 package eu.kanade.presentation.browse
 
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.CollectionsBookmark
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.res.stringResource
 import eu.kanade.presentation.components.Badge
-import eu.kanade.tachiyomi.R
 
 @Composable
 fun InLibraryBadge(enabled: Boolean) {
     if (enabled) {
-        Badge(text = stringResource(R.string.in_library))
+        Badge(
+            imageVector = Icons.Outlined.CollectionsBookmark,
+        )
     }
 }
diff --git a/app/src/main/java/eu/kanade/presentation/components/Badges.kt b/app/src/main/java/eu/kanade/presentation/components/Badges.kt
index b118b2baed..60533b79ae 100644
--- a/app/src/main/java/eu/kanade/presentation/components/Badges.kt
+++ b/app/src/main/java/eu/kanade/presentation/components/Badges.kt
@@ -4,6 +4,9 @@ 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.foundation.text.InlineTextContent
+import androidx.compose.foundation.text.appendInlineContent
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -12,6 +15,10 @@ 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.graphics.vector.ImageVector
+import androidx.compose.ui.text.Placeholder
+import androidx.compose.ui.text.PlaceholderVerticalAlign
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 
@@ -45,3 +52,47 @@ fun Badge(
         style = MaterialTheme.typography.bodySmall,
     )
 }
+
+@Composable
+fun Badge(
+    imageVector: ImageVector,
+    color: Color = MaterialTheme.colorScheme.secondary,
+    iconColor: Color = MaterialTheme.colorScheme.onSecondary,
+    shape: Shape = RectangleShape,
+) {
+    val iconContentPlaceholder = "[icon]"
+    val text = buildAnnotatedString {
+        appendInlineContent(iconContentPlaceholder)
+    }
+    val inlineContent = mapOf(
+        Pair(
+            iconContentPlaceholder,
+            InlineTextContent(
+                Placeholder(
+                    width = MaterialTheme.typography.bodySmall.fontSize,
+                    height = MaterialTheme.typography.bodySmall.fontSize,
+                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center,
+                ),
+            ) {
+                Icon(
+                    imageVector = imageVector,
+                    tint = iconColor,
+                    contentDescription = null,
+                )
+            },
+        ),
+    )
+
+    Text(
+        text = text,
+        inlineContent = inlineContent,
+        modifier = Modifier
+            .clip(shape)
+            .background(color)
+            .padding(horizontal = 3.dp, vertical = 1.dp),
+        color = iconColor,
+        fontWeight = FontWeight.Medium,
+        maxLines = 1,
+        style = MaterialTheme.typography.bodySmall,
+    )
+}
diff --git a/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt b/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt
index 30e611cd92..cf9ee2d9f8 100644
--- a/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt
+++ b/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt
@@ -1,10 +1,13 @@
 package eu.kanade.presentation.library.components
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Folder
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.res.stringResource
 import eu.kanade.presentation.components.Badge
-import eu.kanade.tachiyomi.R
+import eu.kanade.presentation.theme.TachiyomiTheme
+import eu.kanade.presentation.util.ThemePreviews
 
 @Composable
 fun DownloadsBadge(count: Long) {
@@ -31,9 +34,9 @@ fun LanguageBadge(
 ) {
     if (isLocal) {
         Badge(
-            text = stringResource(R.string.label_local),
+            imageVector = Icons.Outlined.Folder,
             color = MaterialTheme.colorScheme.tertiary,
-            textColor = MaterialTheme.colorScheme.onTertiary,
+            iconColor = MaterialTheme.colorScheme.onTertiary,
         )
     } else if (sourceLanguage.isNotEmpty()) {
         Badge(
@@ -43,3 +46,16 @@ fun LanguageBadge(
         )
     }
 }
+
+@ThemePreviews
+@Composable
+private fun BadgePreview() {
+    TachiyomiTheme {
+        Column {
+            DownloadsBadge(count = 10)
+            UnreadBadge(count = 10)
+            LanguageBadge(isLocal = true, sourceLanguage = "EN")
+            LanguageBadge(isLocal = false, sourceLanguage = "EN")
+        }
+    }
+}