android/ui: updated MDM settings screen to material design

Updates #cleanup

Signed-off-by: Percy Wegmann <percy@tailscale.com>

android/src/main/java/com/tailscale/ipn/ui/util/Lists.kt

@@ -29,6 +29,8 @@ object Lists {
 inline fun <T> LazyListScope.itemsWithDividers(
     items: List<T>,
     noinline key: ((item: T) -> Any)? = null,
+    forceLeading: Boolean = false,
+    forceTrailing: Boolean = false,
     crossinline contentType: (item: T) -> Any? = { _ -> null },
     crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit
 ) =
@@ -36,8 +38,19 @@ inline fun <T> LazyListScope.itemsWithDividers(
         count = items.size,
         key = if (key != null) { index: Int -> key(items[index]) } else null,
         contentType = { index -> contentType(items[index]) }) {
-          if (it > 0 && it < items.size) {
+          if (forceLeading && it == 0 ||
+              forceTrailing && it == items.size - 1 ||
+              it > 0 && it < items.size) {
             Lists.ItemDivider()
           }
           itemContent(items[it])
         }
+
+inline fun <T> LazyListScope.itemsWithDividers(
+    items: Array<T>,
+    noinline key: ((item: T) -> Any)? = null,
+    forceLeading: Boolean = false,
+    forceTrailing: Boolean = false,
+    crossinline contentType: (item: T) -> Any? = { _ -> null },
+    crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit
+) = itemsWithDividers(items.toList(), key, forceLeading, forceTrailing, contentType, itemContent)

android/src/main/java/com/tailscale/ipn/ui/view/MDMSettingsDebugView.kt

@@ -3,14 +3,10 @@
 
 package com.tailscale.ipn.ui.view
 
-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.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -26,7 +22,7 @@ import com.tailscale.ipn.mdm.BooleanSetting
 import com.tailscale.ipn.mdm.ShowHideSetting
 import com.tailscale.ipn.mdm.StringArraySetting
 import com.tailscale.ipn.mdm.StringSetting
-import com.tailscale.ipn.ui.util.defaultPaddingModifier
+import com.tailscale.ipn.ui.util.itemsWithDividers
 import com.tailscale.ipn.ui.viewModel.IpnViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -36,35 +32,37 @@ fun MDMSettingsDebugView(nav: BackNavigation, model: IpnViewModel = viewModel())
     ->
     val mdmSettings = IpnViewModel.mdmSettings.collectAsState().value
     LazyColumn(modifier = Modifier.padding(innerPadding)) {
-      items(enumValues<BooleanSetting>()) { booleanSetting ->
+      itemsWithDividers(enumValues<BooleanSetting>()) { booleanSetting ->
         MDMSettingView(
             title = booleanSetting.localizedTitle,
             caption = booleanSetting.key,
             valueDescription = mdmSettings.get(booleanSetting).toString())
       }
 
-      items(enumValues<StringSetting>()) { stringSetting ->
+      itemsWithDividers(enumValues<StringSetting>(), forceLeading = true) { stringSetting ->
         MDMSettingView(
             title = stringSetting.localizedTitle,
             caption = stringSetting.key,
             valueDescription = mdmSettings.get(stringSetting).toString())
       }
 
-      items(enumValues<ShowHideSetting>()) { showHideSetting ->
+      itemsWithDividers(enumValues<ShowHideSetting>(), forceLeading = true) { showHideSetting ->
         MDMSettingView(
             title = showHideSetting.localizedTitle,
             caption = showHideSetting.key,
             valueDescription = mdmSettings.get(showHideSetting).toString())
       }
 
-      items(enumValues<AlwaysNeverUserDecidesSetting>()) { anuSetting ->
+      itemsWithDividers(enumValues<AlwaysNeverUserDecidesSetting>(), forceLeading = true) {
+          anuSetting ->
         MDMSettingView(
             title = anuSetting.localizedTitle,
             caption = anuSetting.key,
             valueDescription = mdmSettings.get(anuSetting).toString())
       }
 
-      items(enumValues<StringArraySetting>()) { stringArraySetting ->
+      itemsWithDividers(enumValues<StringArraySetting>(), forceLeading = true) { stringArraySetting
+        ->
         MDMSettingView(
             title = stringArraySetting.localizedTitle,
             caption = stringArraySetting.key,
@@ -76,23 +74,21 @@ fun MDMSettingsDebugView(nav: BackNavigation, model: IpnViewModel = viewModel())
 
 @Composable
 fun MDMSettingView(title: String, caption: String, valueDescription: String) {
-  Row(
+  ListItem(
-      horizontalArrangement = Arrangement.SpaceBetween,
+      headlineContent = { Text(title, maxLines = 3) },
-      modifier = defaultPaddingModifier().fillMaxWidth()) {
+      supportingContent = {
-        Column {
+        Text(
-          Text(title, maxLines = 3)
+            caption,
-          Text(
+            fontSize = MaterialTheme.typography.labelSmall.fontSize,
-              caption,
+            color = MaterialTheme.colorScheme.tertiary,
-              fontSize = MaterialTheme.typography.labelSmall.fontSize,
+            fontFamily = FontFamily.Monospace)
-              color = MaterialTheme.colorScheme.tertiary,
+      },
-              fontFamily = FontFamily.Monospace)
+      trailingContent = {
-        }
-
         Text(
             valueDescription,
             color = MaterialTheme.colorScheme.secondary,
             fontFamily = FontFamily.Monospace,
             maxLines = 1,
             fontWeight = FontWeight.SemiBold)
-      }
+      })
 }