Improve Changelog: Better bullet points, paddings, support special colour headers

app/src/main/java/com/aliucord/manager/ui/components/Changelog.kt

@@ -1,7 +1,9 @@
 package com.aliucord.manager.ui.components
 
 import android.annotation.SuppressLint
+import android.util.Log
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.padding
@@ -11,6 +13,7 @@ import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
@@ -20,11 +23,15 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import com.aliucord.manager.R
+import com.aliucord.manager.ui.theme.discordBrand
+import com.aliucord.manager.ui.theme.discordGreen
+import com.aliucord.manager.ui.theme.discordRed
 import com.aliucord.manager.utils.Plugin
 import java.util.regex.Pattern
 
 private val hyperLinkPattern = Pattern.compile("\\[(.+?)]\\((.+?\\))")
-
+@Suppress("RegExpRedundantEscape") // It is very much not redundant and causes a crash lol
+private val headerStylePattern = Pattern.compile("\\{(improved|added|fixed)( marginTop)?\\}")
 @SuppressLint("ComposableNaming") // Can't use MaterialTheme without Composable, but this is not a component
 @Composable
 private fun AnnotatedString.Builder.hyperlink(content: String) {
@@ -48,22 +55,24 @@ private fun AnnotatedString.Builder.hyperlink(content: String) {
     if (idx < content.length) append(content.substring(idx))
 }
 
-const val bulletPoint = '•'
+const val bulletPoint = "● "
 @Composable
 fun Changelog(plugin: Plugin, showDialog: MutableState<Boolean>) {
-    Column(modifier = Modifier
+    Column(
-        .background(MaterialTheme.colors.surface)
+        modifier = Modifier
-        .fillMaxHeight(0.9f)
+            .background(MaterialTheme.colors.surface)
-        .padding(16.dp)
+            .fillMaxHeight(0.9f)
+            .padding(16.dp),
+        verticalArrangement = Arrangement.SpaceBetween
     ) {
         Text(
-            stringResource(R.string.changelog, plugin.manifest.name),
+            plugin.manifest.name,
-            style = MaterialTheme.typography.h4
+            style = MaterialTheme.typography.h5
         )
-        Divider(color = MaterialTheme.colors.primary)
+        Divider(color = MaterialTheme.colors.primary, modifier = Modifier.padding(top = 8.dp))
         LazyColumn(
             modifier = Modifier
-                .padding(top = 16.dp, bottom = 16.dp)
+                .padding(top = 8.dp, bottom = 16.dp)
                 .fillMaxHeight(0.92f)
         ) {
             items(plugin.manifest.changelog!!.lines()) {
@@ -74,7 +83,8 @@ fun Changelog(plugin: Plugin, showDialog: MutableState<Boolean>) {
                             do {
                                 line = line.substring(1);
                             } while (line.startsWith("#"))
-                            Text(line.trimStart(), style = MaterialTheme.typography.h6)
+
+                            Text(line.trimStart(), fontWeight = FontWeight.Bold, modifier = Modifier.padding(top = 16.dp, bottom = 6.dp))
                         }
                         '*' -> {
                             LinkText(
@@ -83,15 +93,36 @@ fun Changelog(plugin: Plugin, showDialog: MutableState<Boolean>) {
                                         append(bulletPoint)
                                     }
                                     hyperlink(line.substring(1))
-                                }
+                                },
+                                Modifier.padding(bottom = 2.dp)
                             )
                         }
                         else -> {
-                            LinkText(
+                            when {
-                                buildAnnotatedString {
+                                line.endsWith("marginTop}") -> {
-                                    hyperlink(line)
+                                    val color = headerStylePattern.matcher(line).run {
+                                        val category = if (find()) {
+                                            line = this.replaceFirst("")
+                                            group(1)
+                                        } else null
+                                        when (category) {
+                                            "improved" -> discordBrand
+                                            "added" -> discordGreen
+                                            "fixed" -> discordRed
+                                            else -> MaterialTheme.colors.onSurface
+                                        }
+                                    }
+                                    Text(line, fontWeight = FontWeight.Bold, color = color, modifier = Modifier.padding(top = 16.dp, bottom = 6.dp))
                                 }
-                            )
+                                line.all { c -> c == '=' } -> {} // Discord ignores =======
+                                else -> {
+                                    LinkText(
+                                        buildAnnotatedString {
+                                            hyperlink(line)
+                                        }
+                                    )
+                                }
+                            }
                         }
                     }
                 }
@@ -101,10 +132,11 @@ fun Changelog(plugin: Plugin, showDialog: MutableState<Boolean>) {
             Text(stringResource(R.string.close))
         }
     }
+
 }
 
 @Composable
-private fun LinkText(annotatedString: AnnotatedString) {
+private fun LinkText(annotatedString: AnnotatedString, modifier: Modifier = Modifier) {
     val urlHandler = LocalUriHandler.current
     ClickableText(
         text = annotatedString,
@@ -113,6 +145,7 @@ private fun LinkText(annotatedString: AnnotatedString) {
             annotatedString.getStringAnnotations(offset, offset).firstOrNull()?.let {
                 urlHandler.openUri(it.item)
             }
-        }
+        },
+        modifier = Modifier
     )
 }

app/src/main/java/com/aliucord/manager/ui/theme/Color.kt

@@ -12,4 +12,9 @@ val darkBackground = Color(0xff2e2e2e)
 val primaryColor = Color(0xff00c853)
 val primaryColorLight = Color(0xff5efc82)
 val primaryColorDark = Color(0xff009624)
-val errorColor = Color(0xffed4245)
+
+val discordBrand = Color(0xff5865F2)
+val discordGreen = Color(0xff57F287)
+val discordRed = Color(0xffED4245)
+
+val errorColor = discordRed

app/src/main/res/values/strings.xml

@@ -19,7 +19,6 @@
     <string name="view_plugin_changelog">View changelog for %1$s</string>
     <string name="delete_plugin_body">Are you sure you want to delete this plugin? This action cannot be undone.</string>
     <string name="delete">Delete</string>
-    <string name="changelog">%1$s Changelog</string>
     <string name="close">Close</string>
     <string name="support_server">Support Server</string>
     <string name="back">Back</string>