refactor: base preference with horizontal layout and summary

app/src/main/java/com/geeksville/mesh/ui/components/DropDownPreference.kt

@@ -27,6 +27,7 @@ fun <T> DropDownPreference(
     selectedItem: T,
     onItemSelected: (T) -> Unit,
     modifier: Modifier = Modifier,
+    summary: String? = null,
 ) {
     var dropDownExpanded by remember { mutableStateOf(value = false) }
 
@@ -39,7 +40,8 @@ fun <T> DropDownPreference(
         enabled = enabled,
         trailingIcon = if (dropDownExpanded) Icons.TwoTone.KeyboardArrowUp
         else Icons.TwoTone.KeyboardArrowDown,
-        )
+        summary = summary,
+    )
 
     Box {
         DropdownMenu(
@@ -76,6 +78,7 @@ fun <T> DropDownPreference(
 private fun DropDownPreferencePreview() {
     DropDownPreference(
         title = "Settings",
+        summary = "Lorem ipsum dolor sit amet",
         enabled = true,
         items = listOf("TEST1" to "text1", "TEST2" to "text2"),
         selectedItem = "TEST2",

app/src/main/java/com/geeksville/mesh/ui/components/RegularPreference.kt

@@ -1,12 +1,14 @@
 package com.geeksville.mesh.ui.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material.ContentAlpha
+import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -26,6 +28,7 @@ fun RegularPreference(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    summary: String? = null,
     trailingIcon: ImageVector? = null,
 ) {
     RegularPreference(
@@ -34,6 +37,7 @@ fun RegularPreference(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
+        summary = summary,
         trailingIcon = trailingIcon,
     )
 }
@@ -45,41 +49,63 @@ fun RegularPreference(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    summary: String? = null,
     trailingIcon: ImageVector? = null,
 ) {
-    Row(
+    Column(
         modifier = modifier
             .fillMaxWidth()
-            .clickable(
-                enabled = enabled,
-                onClick = onClick,
-            )
+            .clickable(enabled = enabled, onClick = onClick)
             .padding(all = 16.dp),
-        verticalAlignment = Alignment.CenterVertically
     ) {
-        Column {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
             Text(
                 text = title,
-                style = MaterialTheme.typography.body2,
-                color = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) else MaterialTheme.colors.onSurface.copy(
-                    alpha = ContentAlpha.medium
-                ),
+                modifier = Modifier.weight(1f),
+                style = MaterialTheme.typography.body1,
+                color = if (enabled) {
+                    Color.Unspecified
+                } else {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
+                },
             )
 
             Text(
                 text = subtitle,
                 style = MaterialTheme.typography.body1,
-                color = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) else Color.Unspecified,
+                color = if (enabled) {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
+                } else {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
+                },
+            )
+            if (trailingIcon != null) Icon(
+                trailingIcon, "trailingIcon",
+                modifier = modifier
+                    .padding(start = 8.dp)
+                    .wrapContentWidth(Alignment.End),
+                tint = if (enabled) {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
+                } else {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
+                },
+            )
+        }
+        if (summary != null) {
+            Divider(modifier = Modifier.padding(vertical = 8.dp))
+            Text(
+                text = summary,
+                style = MaterialTheme.typography.body2,
+                color = if (enabled) {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium)
+                } else {
+                    MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
+                },
             )
         }
-        if (trailingIcon != null) Icon(
-            trailingIcon, "trailingIcon",
-            modifier = modifier
-                .fillMaxWidth()
-                .wrapContentWidth(Alignment.End),
-            tint = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled)
-            else MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium),
-        )
     }
 }
 
@@ -88,7 +114,7 @@ fun RegularPreference(
 private fun RegularPreferencePreview() {
     RegularPreference(
         title = "Advanced settings",
-        subtitle = AnnotatedString(text = "Lorem ipsum dolor sit amet"),
+        subtitle = "Text2",
         onClick = { },
     )
 }

app/src/main/java/com/geeksville/mesh/ui/components/SwitchPreference.kt

@@ -38,7 +38,7 @@ fun SwitchPreference(
     ) {
         Text(
             text = title,
-            style = MaterialTheme.typography.body2,
+            style = MaterialTheme.typography.body1,
             color = if (!enabled) MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled) else Color.Unspecified,
         )
         Switch(