android/ui: apply exit node selector design feedback

Updates tailscale/corp#18202

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

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

@@ -3,6 +3,7 @@
 
 package com.tailscale.ipn.ui.view
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -31,7 +32,7 @@ import com.tailscale.ipn.ui.viewModel.ExitNodePickerViewModel
 import com.tailscale.ipn.ui.viewModel.ExitNodePickerViewModelFactory
 import com.tailscale.ipn.ui.viewModel.selected
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 fun ExitNodePicker(
     nav: ExitNodePickerNav,
@@ -46,7 +47,11 @@ fun ExitNodePicker(
       val anyActive = model.anyActive.collectAsState()
 
       LazyColumn(modifier = Modifier.padding(innerPadding)) {
-        item("allowLANAccessToggle") { SettingRow(model.allowLANAccessSetting) }
+        stickyHeader {
+          RunAsExitNodeItem(nav = nav, viewModel = model)
+          Lists.ItemDivider()
+          SettingRow(model.allowLANAccessSetting)
+        }
 
         item(key = "none") {
           Lists.SectionDivider()
@@ -60,7 +65,7 @@ fun ExitNodePicker(
               ))
         }
 
-        item { Lists.SectionDivider() }
+        item { Lists.ItemDivider() }
 
         itemsWithDividers(tailnetExitNodes, key = { it.id!! }) { node -> ExitNodeItem(model, node) }
 
@@ -71,11 +76,6 @@ fun ExitNodePicker(
             MullvadItem(nav, mullvadExitNodeCount, mullvadExitNodesByCountryCode.selected)
           }
         }
-
-        item(key = "runExitNode") {
-          Lists.SectionDivider()
-          RunAsExitNodeItem(nav = nav, viewModel = model)
-        }
       }
     }
   }
@@ -124,7 +124,7 @@ fun MullvadItem(nav: ExitNodePickerNav, count: Int, selected: Boolean) {
         },
         supportingContent = {
           Text(
-              "$count ${stringResource(R.string.nodes_available)}",
+              "$count ${stringResource(R.string.exit_nodes_available)}",
               style = MaterialTheme.typography.bodyMedium)
         },
         trailingContent = {
@@ -145,7 +145,7 @@ fun RunAsExitNodeItem(nav: ExitNodePickerNav, viewModel: ExitNodePickerViewModel
         headlineContent = {
           Text(
               stringResource(id = R.string.run_as_exit_node),
-              style = MaterialTheme.typography.titleMedium)
+              style = MaterialTheme.typography.bodyMedium)
         },
         trailingContent = {
           if (isRunningExitNode) {

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

@@ -122,7 +122,12 @@ private fun SwitchRow(setting: Setting) {
   val swVal = setting.isOn?.collectAsState()?.value ?: false
   ListItem(
       modifier = Modifier.clickable { if (enabled) setting.onClick() },
-      headlineContent = { Text(setting.title ?: stringResource(setting.titleRes)) },
+      headlineContent = {
+        Text(
+            setting.title ?: stringResource(setting.titleRes),
+            style = MaterialTheme.typography.bodyMedium,
+        )
+      },
       trailingContent = {
         TintedSwitch(checked = swVal, onCheckedChange = setting.onToggle, enabled = enabled)
       })

android/src/main/java/com/tailscale/ipn/ui/viewModel/ExitNodePickerViewModel.kt

@@ -83,7 +83,7 @@ class ExitNodePickerViewModel(private val nav: ExitNodePickerNav) : IpnViewModel
                       .map {
                         ExitNode(
                             id = it.StableID,
-                            label = it.Name,
+                            label = it.ComputedName,
                             online = it.Online ?: false,
                             selected = it.StableID == exitNodeId,
                             mullvad = it.Name.endsWith(".mullvad.ts.net."),
@@ -131,7 +131,7 @@ class ExitNodePickerViewModel(private val nav: ExitNodePickerNav) : IpnViewModel
                             .sortedBy { it.city.lowercase() }
                       }
               mullvadExitNodesByCountryCode.set(mullvadExitNodes)
-              mullvadExitNodeCount.set(mullvadExitNodes.size)
+              mullvadExitNodeCount.set(allMullvadExitNodes.size)
 
               val bestAvailableByCountry =
                   mullvadExitNodes.mapValues { (_, nodes) ->

android/src/main/res/values/strings.xml

@@ -137,7 +137,7 @@
     <string name="this_device_is_using_the_system_dns_resolver">This device is using the system DNS resolver.</string>
     <string name="not_using_tailscale_dns">Not Using Tailscale DNS</string>
     <string name="allow_lan_access">Allow LAN Access</string>
-    <string name="nodes_available">nodes available</string>
+    <string name="exit_nodes_available">exit nodes available</string>
     <string name="cities_available">cities available</string>
 
     <!-- Strings for MDM Settings Manifest (app_restrictions.xml) -->