feat: redesign settings screen

app/build.gradle.kts

@@ -24,12 +24,10 @@ android {
     buildTypes {
         debug {
             applicationIdSuffix = ".debug"
-            versionCode = providers.gradleProperty("purefinDebugVersionCode").get().toInt()
             versionNameSuffix = "-debug"
             manifestPlaceholders["updateManifestUrl"] = "https://apks.t.bbara.hu/apps/purefin-app-debug/update.json"
         }
         release {
-            versionCode = providers.gradleProperty("purefinReleaseVersionCode").get().toInt()
             // Enables code-related app optimization.
             isMinifyEnabled = true
 
@@ -51,6 +49,19 @@ android {
     }
 }
 
+androidComponents {
+    onVariants(selector().withBuildType("debug")) { variant ->
+        variant.outputs.forEach { output ->
+            output.versionCode.set(providers.gradleProperty("purefinDebugVersionCode").map { it.toInt() })
+        }
+    }
+    onVariants(selector().withBuildType("release")) { variant ->
+        variant.outputs.forEach { output ->
+            output.versionCode.set(providers.gradleProperty("purefinReleaseVersionCode").map { it.toInt() })
+        }
+    }
+}
+
 kotlin {
     compilerOptions {
         jvmTarget.set(JvmTarget.JVM_11)

app/src/main/java/hu/bbara/purefin/ui/screen/settings/SettingsScreen.kt

@@ -1,12 +1,18 @@
 package hu.bbara.purefin.ui.screen.settings
 
-import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.ArrowBack
-import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
@@ -61,30 +67,52 @@ fun SettingsScreen(
         }
     ) { innerPadding ->
         LazyColumn(
-            verticalArrangement = Arrangement.spacedBy(8.dp),
+            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),
             modifier = Modifier
                 .fillMaxSize()
                 .padding(innerPadding)
         ) {
-            settingGroups.forEach { group ->
+            settingGroups.forEachIndexed { groupIndex, group ->
                 group.title?.let { title ->
-                    item {
+                    item(key = "${groupIndex}-title") {
                         Text(
                             text = title,
-                            style = MaterialTheme.typography.titleMedium,
+                            style = MaterialTheme.typography.titleSmall,
                             color = MaterialTheme.colorScheme.primary,
-                            modifier = Modifier.padding(horizontal = 24.dp, vertical = 8.dp)
+                            modifier = Modifier.padding(
+                                start = 16.dp,
+                                top = 8.dp,
+                                end = 16.dp,
+                                bottom = 4.dp
+                            )
                         )
                     }
                 }
 
-                group.options.forEach { option ->
+                itemsIndexed(
-                    item(key = option.key) {
+                    items = group.options,
+                    key = { _, option -> option.key }
+                ) { index, option ->
+                    Card(
+                        colors = CardDefaults.cardColors(
+                            containerColor = MaterialTheme.colorScheme.surface
+                        ),
+                        shape = groupedSettingItemShape(
+                            index = index,
+                            itemCount = group.options.size
+                        ),
+                        modifier = Modifier.fillMaxWidth()
+                    ) {
                         SettingOptionItem(
                             option = option,
                             viewModel = viewModel
                         )
-                        HorizontalDivider()
+                    }
+                }
+
+                if (groupIndex < settingGroups.lastIndex) {
+                    item(key = "${groupIndex}-spacer") {
+                        Spacer(modifier = Modifier.height(16.dp))
                     }
                 }
             }
@@ -92,6 +120,31 @@ fun SettingsScreen(
     }
 }
 
+private fun groupedSettingItemShape(
+    index: Int,
+    itemCount: Int
+): RoundedCornerShape {
+    val cornerRadius = 12.dp
+    return when {
+        itemCount == 1 -> RoundedCornerShape(cornerRadius)
+        index == 0 -> RoundedCornerShape(
+            topStart = cornerRadius,
+            topEnd = cornerRadius,
+            bottomStart = 0.dp,
+            bottomEnd = 0.dp
+        )
+
+        index == itemCount - 1 -> RoundedCornerShape(
+            topStart = 0.dp,
+            topEnd = 0.dp,
+            bottomStart = cornerRadius,
+            bottomEnd = cornerRadius
+        )
+
+        else -> RoundedCornerShape(0.dp)
+    }
+}
+
 @Composable
 private fun SettingOptionItem(
     option: SettingOption<*>,

app/src/main/java/hu/bbara/purefin/ui/screen/settings/components/BooleanSettingItem.kt

@@ -1,19 +1,22 @@
 package hu.bbara.purefin.ui.screen.settings.components
 
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.selection.toggleable
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.Role
 
 @Composable
 fun BooleanSettingItem(
     title: String,
     value: Boolean,
     onValueChange: (Boolean) -> Unit,
-    modifier: Modifier = Modifier.Companion
+    modifier: Modifier = Modifier
 ) {
     ListItem(
         headlineContent = {
@@ -25,9 +28,14 @@ fun BooleanSettingItem(
         trailingContent = {
             Switch(
                 checked = value,
-                onCheckedChange = onValueChange
+                onCheckedChange = null
             )
         },
-        modifier = modifier.clickable { onValueChange(!value) }
+        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
+        modifier = modifier.toggleable(
+            value = value,
+            role = Role.Switch,
+            onValueChange = onValueChange
+        )
     )
 }

app/src/main/java/hu/bbara/purefin/ui/screen/settings/components/DropdownSettingItem.kt

@@ -23,7 +23,7 @@ fun <T> DropdownSettingItem(
     value: T,
     options: List<T>,
     onValueChange: (T) -> Unit,
-    modifier: Modifier = Modifier.Companion
+    modifier: Modifier = Modifier
 ) {
     var expanded by remember { mutableStateOf(false) }
 
@@ -32,7 +32,7 @@ fun <T> DropdownSettingItem(
         onExpandedChange = { expanded = it },
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 24.dp, vertical = 16.dp)
+            .padding(horizontal = 16.dp, vertical = 12.dp)
     ) {
         OutlinedTextField(
             value = value.toString(),

app/src/main/java/hu/bbara/purefin/ui/screen/settings/components/RangeSettingItem.kt

@@ -22,7 +22,7 @@ fun RangeSettingItem(
     value: Double,
     valueRange: ClosedFloatingPointRange<Double>,
     onValueChange: (Double) -> Unit,
-    modifier: Modifier = Modifier.Companion
+    modifier: Modifier = Modifier
 ) {
     var sliderValue by remember(value) { mutableStateOf(value.toFloat()) }
 
@@ -30,14 +30,14 @@ fun RangeSettingItem(
         verticalArrangement = Arrangement.spacedBy(8.dp),
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 24.dp, vertical = 16.dp)
+            .padding(horizontal = 16.dp, vertical = 12.dp)
     ) {
         Text(
             text = title,
             style = MaterialTheme.typography.bodyLarge
         )
         Text(
-            text = String.Companion.format(Locale.US, "%.1f", sliderValue),
+            text = String.format(Locale.US, "%.1f", sliderValue),
             style = MaterialTheme.typography.bodyMedium,
             color = MaterialTheme.colorScheme.onSurfaceVariant
         )
@@ -46,7 +46,7 @@ fun RangeSettingItem(
             onValueChange = { sliderValue = it },
             onValueChangeFinished = { onValueChange(sliderValue.toDouble()) },
             valueRange = valueRange.start.toFloat()..valueRange.endInclusive.toFloat(),
-            modifier = Modifier.Companion.fillMaxWidth()
+            modifier = Modifier.fillMaxWidth()
         )
     }
 }

app/src/main/java/hu/bbara/purefin/ui/screen/settings/components/ReadOnlySettingItem.kt

@@ -1,16 +1,18 @@
 package hu.bbara.purefin.ui.screen.settings.components
 
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 
 @Composable
 fun ReadOnlySettingItem(
     title: String,
     value: String,
-    modifier: Modifier = Modifier.Companion
+    modifier: Modifier = Modifier
 ) {
     ListItem(
         headlineContent = {
@@ -19,13 +21,14 @@ fun ReadOnlySettingItem(
                 style = MaterialTheme.typography.bodyLarge
             )
         },
-        trailingContent = {
+        supportingContent = {
             Text(
                 text = value,
                 style = MaterialTheme.typography.bodyMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant
             )
         },
+        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
         modifier = modifier
     )
 }

app/src/main/java/hu/bbara/purefin/ui/screen/settings/components/StringSettingItem.kt

@@ -15,7 +15,7 @@ fun StringSettingItem(
     title: String,
     value: String,
     onValueChange: (String) -> Unit,
-    modifier: Modifier = Modifier.Companion
+    modifier: Modifier = Modifier
 ) {
     OutlinedTextField(
         value = value,
@@ -23,10 +23,10 @@ fun StringSettingItem(
         label = { Text(title) },
         singleLine = true,
         keyboardOptions = KeyboardOptions(
-            capitalization = KeyboardCapitalization.Companion.Words
+            capitalization = KeyboardCapitalization.Words
         ),
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 24.dp, vertical = 16.dp)
+            .padding(horizontal = 16.dp, vertical = 12.dp)
     )
 }

app/src/main/java/hu/bbara/purefin/ui/screen/settings/components/VoidSettingItem.kt

@@ -2,16 +2,18 @@ package hu.bbara.purefin.ui.screen.settings.components
 
 import androidx.compose.foundation.clickable
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 
 @Composable
 fun VoidSettingItem(
     title: String,
     onClick: () -> Unit,
-    modifier: Modifier = Modifier.Companion
+    modifier: Modifier = Modifier
 ) {
     ListItem(
         headlineContent = {
@@ -20,6 +22,7 @@ fun VoidSettingItem(
                 style = MaterialTheme.typography.bodyLarge
             )
         },
+        colors = ListItemDefaults.colors(containerColor = Color.Transparent),
         modifier = modifier.clickable(onClick = onClick)
     )
 }