Add PreferenceCategory

ui/src/main/java/de/mm20/launcher2/ui/component/preferences/Preference.kt

@@ -9,7 +9,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
-import de.mm20.launcher2.ui.ktx.conditional
 
 @Composable
 fun Preference(
@@ -23,10 +22,7 @@ fun Preference(
     CompositionLocalProvider(
         LocalContentAlpha provides if (enabled) ContentAlpha.high else ContentAlpha.disabled
     ) {
-        Surface(
+
-            modifier = Modifier.fillMaxWidth(),
-            elevation = 0.dp
-        ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
@@ -68,5 +64,4 @@ fun Preference(
             }
         }
     }
-    }
 }

ui/src/main/java/de/mm20/launcher2/ui/component/preferences/PreferenceCategory.kt

@@ -0,0 +1,40 @@
+package de.mm20.launcher2.ui.component.preferences
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+
+@Composable
+fun PreferenceCategory(
+    title: String? = null,
+    content: @Composable () -> Unit
+) {
+    Surface(
+        elevation = 2.dp,
+        modifier = Modifier.padding(bottom = 4.dp)
+    ) {
+        Column {
+            if (title != null) {
+                Row(
+                    modifier = Modifier
+                        .padding(start = 16.dp, top = 16.dp, end = 16.dp)
+                ) {
+                    Text(
+                        modifier = Modifier.padding(start = 56.dp),
+                        text = title,
+                        style = MaterialTheme.typography.subtitle2,
+                        color = MaterialTheme.colors.primary
+                    )
+                }
+            }
+            content()
+        }
+    }
+}

ui/src/main/java/de/mm20/launcher2/ui/screens/settings/SettingsMainScreen.kt

@@ -6,62 +6,58 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import de.mm20.launcher2.ui.R
 import de.mm20.launcher2.ui.component.preferences.Preference
+import de.mm20.launcher2.ui.component.preferences.PreferenceCategory
 import de.mm20.launcher2.ui.component.preferences.PreferenceScreen
 import de.mm20.launcher2.ui.icons.NotificationBadge
+import de.mm20.launcher2.ui.locals.LocalNavController
 
 @Composable
 fun SettingsMainScreen() {
+    val navController = LocalNavController.current
     PreferenceScreen(
         title = stringResource(id = R.string.title_activity_settings)
     ) {
         item {
+            PreferenceCategory {
                 Preference(
                     icon = Icons.Rounded.Palette,
                     title = stringResource(id = R.string.preference_screen_appearance),
                     summary = stringResource(id = R.string.preference_screen_appearance_summary)
                 )
-        }
-        item {
                 Preference(
                     icon = Icons.Rounded.Search,
                     title = stringResource(id = R.string.preference_screen_search),
                     summary = stringResource(id = R.string.preference_screen_search_summary)
                 )
-        }
-        item {
                 Preference(
                     icon = Icons.Rounded.NotificationBadge,
                     title = stringResource(id = R.string.preference_screen_badges),
                     summary = stringResource(id = R.string.preference_screen_badges_summary)
                 )
-        }
-        item {
                 Preference(
                     icon = Icons.Rounded.LightMode,
                     title = stringResource(id = R.string.preference_screen_weather),
                     summary = stringResource(id = R.string.preference_screen_weather_summary)
                 )
-        }
-        item {
                 Preference(
                     icon = Icons.Rounded.Today,
                     title = stringResource(id = R.string.preference_screen_calendar),
                     summary = stringResource(id = R.string.preference_screen_calendar_summary)
                 )
-        }
-        item {
                 Preference(
                     icon = Icons.Rounded.AccountBox,
                     title = stringResource(id = R.string.preference_screen_services),
                     summary = stringResource(id = R.string.preference_screen_services_summary)
                 )
-        }
-        item {
                 Preference(
                     icon = Icons.Rounded.Info,
                     title = stringResource(id = R.string.preference_screen_about),
-                summary = stringResource(id = R.string.preference_screen_about_summary)
+                    summary = stringResource(id = R.string.preference_screen_about_summary),
+                    onClick = {
+                        navController?.navigate("settings/about")
+                    }
                 )
             }
         }
+    }
 }