More tweaks

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

android/src/main/java/com/tailscale/ipn/ui/model/TailCfg.kt

@@ -105,11 +105,13 @@ class Tailcfg {
     fun connectedColor(nm: Netmap.NetworkMap?) =
         if (connectedOrSelfNode(nm)) MaterialTheme.colorScheme.on else MaterialTheme.colorScheme.off
 
+    val nameWithoutTrailingDot = Name.trimEnd('.')
+
     val displayAddresses: List<DisplayAddress>
       get() {
         var addresses = mutableListOf<DisplayAddress>()
+        addresses.add(DisplayAddress(NameWithoutTrailingDot))
         Addresses?.let { addresses.addAll(it.map { addr -> DisplayAddress(addr) }) }
-        addresses.add(DisplayAddress(Name))
         return addresses
       }
 

android/src/main/java/com/tailscale/ipn/ui/theme/Theme.kt

@@ -44,7 +44,8 @@ fun AppTheme(useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable
   val systemUiController = rememberSystemUiController()
 
   DisposableEffect(systemUiController, useDarkTheme) {
-    systemUiController.setSystemBarsColor(color = colors.surfaceContainer)
+    systemUiController.setStatusBarColor(color = colors.surfaceContainer)
+    systemUiController.setNavigationBarColor(color = Color.Black)
     onDispose {}
   }
 
@@ -117,7 +118,7 @@ val ColorScheme.onSuccessContainer: Color
   get() = Color(0xFF0E4B3B) // green-600
 
 val ColorScheme.on: Color
-  get() = Color(0xFF84D996) // green-100
+  get() = Color(0xFF1CA672) // green-300
 
 val ColorScheme.off: Color
   get() = Color(0xFFD9D6D5) // gray-300

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

@@ -35,7 +35,6 @@ 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
 ) =
@@ -43,9 +42,7 @@ 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 (forceLeading && it == 0 ||
+          if (forceLeading && it == 0 || it > 0 && it < items.size) {
-              forceTrailing && it == items.size ||
-              it > 0 && it < items.size) {
             Lists.ItemDivider()
           }
           itemContent(items[it])
@@ -55,7 +52,6 @@ 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)
+) = itemsWithDividers(items.toList(), key, forceLeading, contentType, itemContent)

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

@@ -45,7 +45,7 @@ class PeerCategorizer {
               if (it.user?.ID == me?.ID) {
                 ""
               } else {
-                it.user?.DisplayName ?: "Unknown User"
+                it.user?.DisplayName?.lowercase() ?: "unknown user"
               }
             }
   }

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

@@ -68,6 +68,7 @@ import com.tailscale.ipn.ui.theme.listItem
 import com.tailscale.ipn.ui.theme.primaryListItem
 import com.tailscale.ipn.ui.theme.secondaryButton
 import com.tailscale.ipn.ui.theme.surfaceContainerListItem
+import com.tailscale.ipn.ui.util.Lists
 import com.tailscale.ipn.ui.util.LoadingIndicator
 import com.tailscale.ipn.ui.util.PeerSet
 import com.tailscale.ipn.ui.util.flag
@@ -341,7 +342,10 @@ fun PeerList(
           var first = true
           peerList.value.forEach { peerSet ->
             if (!first) {
-              item(key = "spacer_${peerSet.user?.DisplayName}") { Spacer(Modifier.height(24.dp)) }
+              item(key = "spacer_${peerSet.user?.DisplayName}") {
+                Lists.ItemDivider()
+                Spacer(Modifier.height(24.dp))
+              }
             }
             first = false
 

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

@@ -6,54 +6,65 @@ package com.tailscale.ipn.ui.view
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.tailscale.ipn.R
+import com.tailscale.ipn.ui.theme.listItem
+import com.tailscale.ipn.ui.theme.surfaceContainerListItem
+import com.tailscale.ipn.ui.theme.topAppBar
 import com.tailscale.ipn.ui.theme.ts_color_light_blue
-import com.tailscale.ipn.ui.util.settingsRowModifier
+import com.tailscale.ipn.ui.util.Lists
+import com.tailscale.ipn.ui.util.itemsWithDividers
 import com.tailscale.ipn.ui.viewModel.PeerDetailsViewModel
 import com.tailscale.ipn.ui.viewModel.PeerDetailsViewModelFactory
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun PeerDetails(
     nav: BackNavigation,
     nodeId: String,
     model: PeerDetailsViewModel =
         viewModel(factory = PeerDetailsViewModelFactory(nodeId, LocalContext.current.filesDir))
-) {
-  Scaffold(topBar = { Header(title = R.string.peer_details, onBack = nav.onBack) }) { innerPadding
-    ->
-    Column(
-        modifier =
-            Modifier.fillMaxWidth()
-                .padding(innerPadding)
-                .padding(horizontal = 16.dp)
-                .padding(top = 22.dp),
 ) {
   model.netmap.collectAsState().value?.let { netmap ->
     model.node.collectAsState().value?.let { node ->
-          Text(text = node.displayName, style = MaterialTheme.typography.titleLarge)
+      Scaffold(
+          topBar = {
+            TopAppBar(
+                title = {
+                  ListItem(
+                      colors = MaterialTheme.colorScheme.surfaceContainerListItem,
+                      headlineContent = {
+                        Text(
+                            text = node.displayName,
+                            style = MaterialTheme.typography.titleMedium.copy(lineHeight = 20.sp))
+                      },
+                      supportingContent = {
                         Row(verticalAlignment = Alignment.CenterVertically) {
                           Box(
                               modifier =
@@ -64,23 +75,40 @@ fun PeerDetails(
                           Spacer(modifier = Modifier.size(8.dp))
                           Text(
                               text = stringResource(id = node.connectedStrRes(netmap)),
-                style = MaterialTheme.typography.bodyMedium)
+                              style = MaterialTheme.typography.bodyMedium.copy(lineHeight = 20.sp))
-          }
+                        }
-          Column(modifier = Modifier.fillMaxHeight()) {
+                      },
+                  )
+                },
+                colors = MaterialTheme.colorScheme.topAppBar,
+                navigationIcon = { BackArrow(action = { nav.onBack() }) },
+            )
+          }) { innerPadding ->
+            LazyColumn(
+                modifier = Modifier.padding(innerPadding),
+            ) {
+              item(key = "tailscaleAddresses") {
+                Box(
+                    modifier =
+                        Modifier.fillMaxWidth()
+                            .background(
+                                color = MaterialTheme.colorScheme.surface,
+                                shape = RectangleShape)) {
                       Text(
-                text = stringResource(id = R.string.addresses_section),
+                          modifier = Modifier.padding(start = 16.dp, top = 16.dp),
-                style = MaterialTheme.typography.titleMedium)
+                          text = stringResource(R.string.tailscale_addresses),
+                          style = MaterialTheme.typography.titleSmall,
+                          color = MaterialTheme.colorScheme.onSurfaceVariant)
+                    }
+              }
 
-            Column(modifier = settingsRowModifier()) {
+              itemsWithDividers(node.displayAddresses, key = { it.address }) {
-              node.displayAddresses.forEach {
                 AddressRow(address = it.address, type = it.typeString)
               }
-            }
 
-            Spacer(modifier = Modifier.size(16.dp))
+              item(key = "infoDivider") { Lists.SectionDivider() }
 
-            Column(modifier = settingsRowModifier()) {
+              itemsWithDividers(node.info, key = { "info_${it.titleRes}" }) {
-              node.info.forEach {
                 ValueRow(title = stringResource(id = it.titleRes), value = it.value.getString())
               }
             }
@@ -88,37 +116,26 @@ fun PeerDetails(
     }
   }
 }
-  }
-}
 
 @Composable
 fun AddressRow(address: String, type: String) {
   val localClipboardManager = LocalClipboardManager.current
 
-  Row(
+  ListItem(
-      verticalAlignment = Alignment.CenterVertically,
+      modifier = Modifier.clickable { localClipboardManager.setText(AnnotatedString(address)) },
-      modifier =
+      colors = MaterialTheme.colorScheme.listItem,
-          Modifier.padding(horizontal = 8.dp, vertical = 8.dp)
+      headlineContent = { Text(text = address) },
-              .clickable(onClick = { localClipboardManager.setText(AnnotatedString(address)) })) {
+      supportingContent = { Text(text = type) },
-        Column {
+      trailingContent = {
-          Text(text = address)
+        // TODO: there is some overlap with other uses of clipboard, DRY
-          Text(text = type, fontSize = MaterialTheme.typography.labelLarge.fontSize)
+        Icon(painter = painterResource(id = R.drawable.clipboard), null, tint = ts_color_light_blue)
-        }
+      })
-        Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) {
-          Icon(
-              painter = painterResource(id = R.drawable.clipboard),
-              null,
-              tint = ts_color_light_blue)
-        }
-      }
 }
 
 @Composable
 fun ValueRow(title: String, value: String) {
-  Row(modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp).fillMaxWidth()) {
+  ListItem(
-    Text(text = title)
+      colors = MaterialTheme.colorScheme.listItem,
-    Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.CenterEnd) {
+      headlineContent = { Text(text = title) },
-      Text(text = value)
+      supportingContent = { Text(text = value) })
-    }
-  }
 }

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

@@ -52,10 +52,9 @@
     <string name="login_to_join_your_tailnet">Log in to join your tailnet and connect your devices.</string>
 
     <!-- Strings for peer details -->
-    <string name="addresses_section"></string>
     <string name="os">OS</string>
-    <string name="key_expiry">Key Expiry</string>
+    <string name="key_expiry">Key expiry</string>
-    <string name="peer_details">Tailscale Addresses</string>
+    <string name="tailscale_addresses">Tailscale addresses</string>
 
     <!-- Strings for MDM settings -->
     <string name="current_mdm_settings">Current MDM Settings</string>