Tweak Settings UI

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

@@ -2,15 +2,19 @@ package it.vfsfitvnm.vimusic.ui.screens.settings
 
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import it.vfsfitvnm.vimusic.LocalPlayerAwarePaddingValues
 import it.vfsfitvnm.vimusic.enums.ColorPaletteMode
 import it.vfsfitvnm.vimusic.enums.ColorPaletteName
@@ -70,7 +74,15 @@ fun AppearanceSettings() {
         EnumValueSelectorSettingsEntry(
             title = "Thumbnail roundness",
             selectedValue = thumbnailRoundness,
-            onValueSelected = { thumbnailRoundness = it }
+            onValueSelected = { thumbnailRoundness = it },
+            trailingContent = {
+                Spacer(
+                    modifier = Modifier
+                        .border(width = 1.dp, color = colorPalette.accent,  shape = thumbnailRoundness.shape())
+                        .background(color = colorPalette.background1, shape = thumbnailRoundness.shape())
+                        .size(36.dp)
+                )
+            }
         )
 
         SettingsGroupSpacer()

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

@@ -69,9 +69,7 @@ fun CacheSettings() {
             EnumValueSelectorSettingsEntry(
                 title = "Max size",
                 selectedValue = coilDiskCacheMaxSize,
-                onValueSelected = {
+                onValueSelected = { coilDiskCacheMaxSize = it }
-                    coilDiskCacheMaxSize = it
-                }
             )
         }
 
@@ -100,9 +98,7 @@ fun CacheSettings() {
             EnumValueSelectorSettingsEntry(
                 title = "Max size",
                 selectedValue = exoPlayerDiskCacheMaxSize,
-                onValueSelected = {
+                onValueSelected = { exoPlayerDiskCacheMaxSize = it }
-                    exoPlayerDiskCacheMaxSize = it
-                }
             )
         }
     }

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

@@ -72,7 +72,8 @@ inline fun <reified T : Enum<T>> EnumValueSelectorSettingsEntry(
     crossinline onValueSelected: (T) -> Unit,
     modifier: Modifier = Modifier,
     isEnabled: Boolean = true,
-    crossinline valueText: (T) -> String = Enum<T>::name
+    crossinline valueText: (T) -> String = Enum<T>::name,
+    noinline trailingContent: (@Composable () -> Unit)? = null
 ) {
     ValueSelectorSettingsEntry(
         title = title,
@@ -81,7 +82,8 @@ inline fun <reified T : Enum<T>> EnumValueSelectorSettingsEntry(
         onValueSelected = onValueSelected,
         modifier = modifier,
         isEnabled = isEnabled,
-        valueText = valueText
+        valueText = valueText,
+        trailingContent = trailingContent,
     )
 }
 
@@ -93,7 +95,8 @@ inline fun <T> ValueSelectorSettingsEntry(
     crossinline onValueSelected: (T) -> Unit,
     modifier: Modifier = Modifier,
     isEnabled: Boolean = true,
-    crossinline valueText: (T) -> String = { it.toString() }
+    crossinline valueText: (T) -> String = { it.toString() },
+    noinline trailingContent: (@Composable () -> Unit)? = null
 ) {
     var isShowingDialog by remember {
         mutableStateOf(false)
@@ -101,9 +104,7 @@ inline fun <T> ValueSelectorSettingsEntry(
 
     if (isShowingDialog) {
         ValueSelectorDialog(
-            onDismiss = {
+            onDismiss = { isShowingDialog = false },
-                isShowingDialog = false
-            },
             title = title,
             selectedValue = selectedValue,
             values = values,
@@ -117,9 +118,8 @@ inline fun <T> ValueSelectorSettingsEntry(
         text = valueText(selectedValue),
         modifier = modifier,
         isEnabled = isEnabled,
-        onClick = {
+        onClick = { isShowingDialog = true },
-            isShowingDialog = true
+        trailingContent = trailingContent
-        }
     )
 }
 
@@ -131,6 +131,25 @@ fun SwitchSettingEntry(
     onCheckedChange: (Boolean) -> Unit,
     modifier: Modifier = Modifier,
     isEnabled: Boolean = true
+) {
+    SettingsEntry(
+        title = title,
+        text = text,
+        isEnabled = isEnabled,
+        onClick = { onCheckedChange(!isChecked) },
+        trailingContent = { Switch(isChecked = isChecked) },
+        modifier = modifier
+    )
+}
+
+@Composable
+fun SettingsEntry(
+    title: String,
+    text: String,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    isEnabled: Boolean = true,
+    trailingContent: (@Composable () -> Unit)? = null
 ) {
     val (colorPalette, typography) = LocalAppearance.current
 
@@ -138,13 +157,12 @@ fun SwitchSettingEntry(
         horizontalArrangement = Arrangement.spacedBy(16.dp),
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
-            .clickable(enabled = isEnabled) { onCheckedChange(!isChecked) }
+            .clickable(enabled = isEnabled, onClick = onClick)
             .alpha(if (isEnabled) 1f else 0.5f)
             .padding(start = 16.dp)
             .padding(all = 16.dp)
             .fillMaxWidth()
     ) {
-
         Column(
             modifier = Modifier
                 .weight(1f)
@@ -160,37 +178,7 @@ fun SwitchSettingEntry(
             )
         }
 
-        Switch(isChecked = isChecked)
+        trailingContent?.invoke()
-    }
-}
-
-@Composable
-fun SettingsEntry(
-    title: String,
-    text: String,
-    modifier: Modifier = Modifier,
-    onClick: () -> Unit,
-    isEnabled: Boolean = true
-) {
-    val (colorPalette, typography) = LocalAppearance.current
-
-    Column(
-        modifier = modifier
-            .clickable(enabled = isEnabled, onClick = onClick)
-            .alpha(if (isEnabled) 1f else 0.5f)
-            .padding(start = 16.dp)
-            .padding(all = 16.dp)
-            .fillMaxWidth()
-    ) {
-        BasicText(
-            text = title,
-            style = typography.xs.semiBold.copy(color = colorPalette.text),
-        )
-
-        BasicText(
-            text = text,
-            style = typography.xs.semiBold.copy(color = colorPalette.textSecondary),
-        )
     }
 }