refactor(ui)!: update NodeItem display with new components (#3273)

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>

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

@@ -17,24 +17,33 @@
 
 package com.geeksville.mesh.ui.common.components
 
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import com.geeksville.mesh.ui.common.preview.NodePreviewParameterProvider
 import org.meshtastic.core.database.model.Node
 import org.meshtastic.core.strings.R
-import org.meshtastic.core.ui.component.NodeSignalQuality
+import org.meshtastic.core.ui.component.Rssi
+import org.meshtastic.core.ui.component.Snr
+import org.meshtastic.core.ui.component.determineSignalQuality
 import org.meshtastic.core.ui.theme.AppTheme
 
 const val MAX_VALID_SNR = 100F
 const val MAX_VALID_RSSI = 0
 
+@Suppress("LongMethod")
 @Composable
 fun SignalInfo(modifier: Modifier = Modifier, node: Node, isThisNode: Boolean) {
     val text =
@@ -60,19 +69,42 @@ fun SignalInfo(modifier: Modifier = Modifier, node: Node, isThisNode: Boolean) {
             }
                 .joinToString(" ")
         }
-    Column {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
         if (text.isNotEmpty()) {
-            Text(
-                modifier = modifier,
-                text = text,
-                color = MaterialTheme.colorScheme.onSurface,
-                fontSize = MaterialTheme.typography.bodySmall.fontSize,
-            )
+            Text(text = text, color = MaterialTheme.colorScheme.onSurface, style = MaterialTheme.typography.labelSmall)
         }
         /* We only know the Signal Quality from direct nodes aka 0 hop. */
         if (node.hopsAway <= 0) {
             if (node.snr < MAX_VALID_SNR && node.rssi < MAX_VALID_RSSI) {
-                NodeSignalQuality(node.snr, node.rssi)
+                val quality = determineSignalQuality(node.snr, node.rssi)
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                ) {
+                    Snr(node.snr)
+                    Rssi(node.rssi)
+                }
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                ) {
+                    Icon(
+                        modifier = Modifier.size(20.dp),
+                        imageVector = quality.imageVector,
+                        contentDescription = stringResource(R.string.signal_quality),
+                        tint = quality.color.invoke(),
+                    )
+                    Text(
+                        text = "${stringResource(R.string.signal)} ${stringResource(quality.nameRes)}",
+                        style = MaterialTheme.typography.labelSmall,
+                        color = MaterialTheme.colorScheme.onSurface,
+                        maxLines = 1,
+                    )
+                }
             }
         }
     }

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

@@ -174,8 +174,8 @@ internal fun MessageItem(
                         if (!message.fromLocal) {
                             if (message.hopsAway == 0) {
                                 Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
-                                    Snr(message.snr, fontSize = MaterialTheme.typography.labelSmall.fontSize)
-                                    Rssi(message.rssi, fontSize = MaterialTheme.typography.labelSmall.fontSize)
+                                    Snr(message.snr)
+                                    Rssi(message.rssi)
                                 }
                             } else {
                                 Text(

app/src/main/java/com/geeksville/mesh/ui/metrics/DeviceMetrics.kt

@@ -70,7 +70,7 @@ import com.geeksville.mesh.util.GraphUtil
 import com.geeksville.mesh.util.GraphUtil.createPath
 import com.geeksville.mesh.util.GraphUtil.plotPoint
 import org.meshtastic.core.strings.R
-import org.meshtastic.core.ui.component.BatteryInfo
+import org.meshtastic.core.ui.component.MaterialBatteryInfo
 import org.meshtastic.core.ui.component.OptionLabel
 import org.meshtastic.core.ui.component.SlidingSelector
 import org.meshtastic.core.ui.theme.AppTheme
@@ -319,7 +319,7 @@ private fun DeviceMetricsCard(telemetry: Telemetry) {
                             fontSize = MaterialTheme.typography.labelLarge.fontSize,
                         )
 
-                        BatteryInfo(batteryLevel = deviceMetrics.batteryLevel, voltage = deviceMetrics.voltage)
+                        MaterialBatteryInfo(level = deviceMetrics.batteryLevel, voltage = deviceMetrics.voltage)
                     }
 
                     Spacer(modifier = Modifier.height(4.dp))

app/src/main/java/com/geeksville/mesh/ui/node/NodeScreen.kt

@@ -18,7 +18,6 @@
 package com.geeksville.mesh.ui.node
 
 import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
@@ -55,7 +54,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -73,7 +71,7 @@ import org.meshtastic.core.strings.R
 import org.meshtastic.core.ui.component.rememberTimeTickWithLifecycle
 import org.meshtastic.core.ui.theme.StatusColors.StatusRed
 
-@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3ExpressiveApi::class)
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Suppress("LongMethod", "CyclomaticComplexMethod")
 @Composable
 fun NodeScreen(nodesViewModel: NodesViewModel = hiltViewModel(), navigateToNodeDetails: (Int) -> Unit) {
@@ -172,11 +170,12 @@ fun NodeScreen(nodesViewModel: NodesViewModel = hiltViewModel(), navigateToNodeD
                         onConfirmRemove = { nodesViewModel.removeNode(it.num) },
                     )
 
+                    var expanded by remember { mutableStateOf(false) }
+
                     Box(modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) {
-                        var showContextMenu by remember { mutableStateOf(false) }
                         val longClick =
                             if (node.num != ourNode?.num) {
-                                { showContextMenu = true }
+                                { expanded = true }
                             } else {
                                 null
                             }
@@ -193,14 +192,16 @@ fun NodeScreen(nodesViewModel: NodesViewModel = hiltViewModel(), navigateToNodeD
                             isConnected = connectionState.isConnected(),
                         )
                         val isThisNode = remember(node) { ourNode?.num == node.num }
-                        ContextMenu(
-                            expanded = !isThisNode && showContextMenu,
-                            node = node,
-                            onClickFavorite = { displayFavoriteDialog = true },
-                            onClickIgnore = { displayIgnoreDialog = true },
-                            onClickRemove = { displayRemoveDialog = true },
-                            onDismiss = { showContextMenu = false },
-                        )
+                        if (!isThisNode) {
+                            ContextMenu(
+                                expanded = expanded,
+                                node = node,
+                                onClickFavorite = { displayFavoriteDialog = true },
+                                onClickIgnore = { displayIgnoreDialog = true },
+                                onClickRemove = { displayRemoveDialog = true },
+                                onDismiss = { expanded = false },
+                            )
+                        }
                     }
                 }
                 item { Spacer(modifier = Modifier.height(88.dp)) }
@@ -218,7 +219,7 @@ private fun ContextMenu(
     onClickRemove: (Node) -> Unit,
     onDismiss: () -> Unit,
 ) {
-    DropdownMenu(expanded = expanded, onDismissRequest = onDismiss, offset = DpOffset(x = 0.dp, y = 8.dp)) {
+    DropdownMenu(expanded = expanded, onDismissRequest = onDismiss) {
         val isFavorite = node.isFavorite
         val isIgnored = node.isIgnored
 

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

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2025 Meshtastic LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.geeksville.mesh.ui.node.components
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.SocialDistance
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import org.meshtastic.core.strings.R
+import org.meshtastic.core.ui.theme.AppTheme
+
+@Composable
+fun DistanceInfo(distance: String, modifier: Modifier = Modifier) {
+    IconInfo(
+        modifier = modifier,
+        icon = Icons.Rounded.SocialDistance,
+        contentDescription = stringResource(R.string.distance),
+        text = distance,
+    )
+}
+
+@PreviewLightDark
+@Composable
+private fun DistanceInfoPreview() {
+    AppTheme { DistanceInfo(distance = "423 mi.") }
+}

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

@@ -18,24 +18,30 @@
 package com.geeksville.mesh.ui.node.components
 
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.geeksville.mesh.ConfigProtos.Config.DisplayConfig.DisplayUnits
 import org.meshtastic.core.model.util.metersIn
 import org.meshtastic.core.model.util.toString
+import org.meshtastic.core.strings.R
+import org.meshtastic.core.ui.icon.Elevation
+import org.meshtastic.core.ui.icon.MeshtasticIcons
 
 @Composable
-fun ElevationInfo(modifier: Modifier = Modifier, altitude: Int, system: DisplayUnits, suffix: String) {
-    val annotatedString = buildAnnotatedString {
-        append(altitude.metersIn(system).toString(system))
-        MaterialTheme.typography.labelSmall.toSpanStyle().let { style -> withStyle(style) { append(" $suffix") } }
-    }
-
-    Text(modifier = modifier, fontSize = MaterialTheme.typography.labelLarge.fontSize, text = annotatedString)
+fun ElevationInfo(
+    modifier: Modifier = Modifier,
+    altitude: Int,
+    system: DisplayUnits,
+    suffix: String = stringResource(R.string.elevation_suffix),
+) {
+    IconInfo(
+        modifier = modifier,
+        icon = MeshtasticIcons.Elevation,
+        contentDescription = stringResource(R.string.altitude),
+        text = altitude.metersIn(system).toString(system) + " " + suffix,
+    )
 }
 
 @Composable

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

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2025 Meshtastic LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.geeksville.mesh.ui.node.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.meshtastic.core.ui.icon.Elevation
+import org.meshtastic.core.ui.icon.MeshtasticIcons
+
+private const val SIZE_ICON = 20
+
+@Composable
+fun IconInfo(
+    icon: ImageVector,
+    contentDescription: String,
+    modifier: Modifier = Modifier,
+    text: String? = null,
+    content: @Composable () -> Unit = {},
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(2.dp),
+    ) {
+        Icon(
+            modifier = Modifier.size(SIZE_ICON.dp),
+            imageVector = icon,
+            contentDescription = contentDescription,
+            tint = MaterialTheme.colorScheme.onSurface,
+        )
+        text?.let {
+            Text(text = it, style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.onSurface)
+        }
+        content()
+    }
+}
+
+@Composable
+@Preview
+private fun IconInfoPreview() {
+    MaterialTheme {
+        IconInfo(icon = MeshtasticIcons.Elevation, contentDescription = "Elevation", content = { Text(text = "100") })
+    }
+}

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

@@ -17,37 +17,24 @@
 
 package com.geeksville.mesh.ui.node.components
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.unit.dp
 import com.geeksville.mesh.R
 import org.meshtastic.core.model.util.formatAgo
 import org.meshtastic.core.ui.theme.AppTheme
 
 @Composable
 fun LastHeardInfo(modifier: Modifier = Modifier, lastHeard: Int, currentTimeMillis: Long) {
-    Row(
+    IconInfo(
         modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(2.dp),
-    ) {
-        Icon(
-            modifier = Modifier.height(18.dp),
-            imageVector = ImageVector.vectorResource(id = R.drawable.ic_antenna_24),
-            contentDescription = null,
-        )
-        Text(text = formatAgo(lastHeard, currentTimeMillis), fontSize = MaterialTheme.typography.labelLarge.fontSize)
-    }
+        icon = ImageVector.vectorResource(id = R.drawable.ic_antenna_24),
+        contentDescription = stringResource(org.meshtastic.core.strings.R.string.node_sort_last_heard),
+        text = formatAgo(lastHeard, currentTimeMillis),
+    )
 }
 
 @PreviewLightDark

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

@@ -17,7 +17,9 @@
 
 package com.geeksville.mesh.ui.node.components
 
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -42,34 +44,52 @@ import com.geeksville.mesh.TelemetryProtos
 import org.meshtastic.core.database.model.Node
 
 @Composable
-fun NodeChip(modifier: Modifier = Modifier, node: Node, onClick: (Node) -> Unit = {}) {
+fun NodeChip(
+    modifier: Modifier = Modifier,
+    node: Node,
+    onClick: (Node) -> Unit = {},
+    onLongClick: (() -> Unit)? = {},
+    interactionSource: MutableInteractionSource? = null,
+) {
     val isIgnored = node.isIgnored
     val (textColor, nodeColor) = node.colors
-    val inputChipInteractionSource = remember { MutableInteractionSource() }
-    ElevatedAssistChip(
-        modifier =
-        modifier.width(IntrinsicSize.Min).defaultMinSize(minWidth = 72.dp).semantics {
-            contentDescription = node.user.shortName.ifEmpty { "Node" }
-        },
-        elevation = AssistChipDefaults.elevatedAssistChipElevation(),
-        colors =
-        AssistChipDefaults.elevatedAssistChipColors(
-            containerColor = Color(nodeColor),
-            labelColor = Color(textColor),
-        ),
-        label = {
-            Text(
-                modifier = Modifier.fillMaxWidth(),
-                text = node.user.shortName.ifEmpty { "???" },
-                fontSize = MaterialTheme.typography.labelLarge.fontSize,
-                textDecoration = TextDecoration.LineThrough.takeIf { isIgnored },
-                textAlign = TextAlign.Center,
-                maxLines = 1,
-            )
-        },
-        onClick = { onClick(node) },
-        interactionSource = inputChipInteractionSource,
-    )
+    val inputChipInteractionSource = interactionSource ?: remember { MutableInteractionSource() }
+    Box(modifier = modifier) {
+        ElevatedAssistChip(
+            modifier =
+            Modifier.width(IntrinsicSize.Min).defaultMinSize(minWidth = 72.dp).semantics {
+                contentDescription = node.user.shortName.ifEmpty { "Node" }
+            },
+            elevation = AssistChipDefaults.elevatedAssistChipElevation(),
+            colors =
+            AssistChipDefaults.elevatedAssistChipColors(
+                containerColor = Color(nodeColor),
+                labelColor = Color(textColor),
+            ),
+            label = {
+                Text(
+                    modifier = Modifier.fillMaxWidth(),
+                    text = node.user.shortName.ifEmpty { "???" },
+                    fontSize = MaterialTheme.typography.labelLarge.fontSize,
+                    textDecoration = TextDecoration.LineThrough.takeIf { isIgnored },
+                    textAlign = TextAlign.Center,
+                    maxLines = 1,
+                )
+            },
+            onClick = {},
+            interactionSource = inputChipInteractionSource,
+        )
+        Box(
+            modifier =
+            Modifier.matchParentSize()
+                .combinedClickable(
+                    onLongClick = onLongClick,
+                    onClick = { onClick(node) },
+                    interactionSource = inputChipInteractionSource,
+                    indication = null,
+                ),
+        )
+    }
 }
 
 @Suppress("MagicNumber")

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

@@ -19,8 +19,10 @@ package com.geeksville.mesh.ui.node.components
 
 import android.content.res.Configuration
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.defaultMinSize
@@ -28,14 +30,15 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -53,9 +56,10 @@ import org.meshtastic.core.database.model.Node
 import org.meshtastic.core.database.model.isUnmessageableRole
 import org.meshtastic.core.model.util.toDistanceString
 import org.meshtastic.core.strings.R
-import org.meshtastic.core.ui.component.BatteryInfo
+import org.meshtastic.core.ui.component.MaterialBatteryInfo
 import org.meshtastic.core.ui.theme.AppTheme
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Suppress("LongMethod", "CyclomaticComplexMethod")
 @Composable
 fun NodeItem(
@@ -77,13 +81,7 @@ fun NodeItem(
     val distance =
         remember(thisNode, thatNode) { thisNode?.distance(thatNode)?.takeIf { it > 0 }?.toDistanceString(system) }
 
-    val style =
-        if (thatNode.isUnknownUser) {
-            LocalTextStyle.current.copy(fontStyle = FontStyle.Italic)
-        } else {
-            LocalTextStyle.current
-        }
-
+    var contentColor = MaterialTheme.colorScheme.onSurface
     val cardColors =
         if (isThisNode) {
             thisNode?.colors?.second
@@ -92,10 +90,17 @@ fun NodeItem(
         }
             ?.let {
                 val containerColor = Color(it).copy(alpha = 0.2f)
-                CardDefaults.cardColors()
-                    .copy(containerColor = containerColor, contentColor = contentColorFor(containerColor))
+                contentColor = contentColorFor(containerColor)
+                CardDefaults.cardColors().copy(containerColor = containerColor, contentColor = contentColor)
             } ?: (CardDefaults.cardColors())
 
+    val style =
+        if (thatNode.isUnknownUser) {
+            LocalTextStyle.current.copy(fontStyle = FontStyle.Italic)
+        } else {
+            LocalTextStyle.current
+        }
+
     val unmessageable =
         remember(thatNode) {
             when {
@@ -104,13 +109,23 @@ fun NodeItem(
             }
         }
 
-    Card(modifier = modifier.fillMaxWidth().defaultMinSize(minHeight = 80.dp), colors = cardColors) {
-        Column(
-            modifier =
-            Modifier.combinedClickable(onClick = onClick, onLongClick = onLongClick).fillMaxWidth().padding(8.dp),
-        ) {
+    val interactionSource = remember { MutableInteractionSource() }
+    Card(
+        modifier =
+        modifier
+            .combinedClickable(onClick = onClick, onLongClick = onLongClick, interactionSource = interactionSource)
+            .fillMaxWidth()
+            .defaultMinSize(minHeight = 80.dp),
+        colors = cardColors,
+    ) {
+        Column(modifier = Modifier.fillMaxWidth().padding(8.dp)) {
             Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
-                NodeChip(node = thatNode)
+                NodeChip(
+                    node = thatNode,
+                    onClick = { onClick() },
+                    onLongClick = onLongClick,
+                    interactionSource = interactionSource,
+                )
 
                 NodeKeyStatusIcon(
                     hasPKC = thatNode.hasPKC,
@@ -121,7 +136,10 @@ fun NodeItem(
                 Text(
                     modifier = Modifier.weight(1f),
                     text = longName,
-                    style = style,
+                    style =
+                    MaterialTheme.typography.titleMediumEmphasized.copy(
+                        color = MaterialTheme.colorScheme.onSurface,
+                    ),
                     textDecoration = TextDecoration.LineThrough.takeIf { isIgnored },
                     softWrap = true,
                 )
@@ -133,45 +151,79 @@ fun NodeItem(
                     isConnected = isConnected,
                 )
             }
-            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
-                if (distance != null) {
-                    Text(text = distance, fontSize = MaterialTheme.typography.labelLarge.fontSize)
-                } else {
-                    Spacer(modifier = Modifier.width(16.dp))
-                }
-                BatteryInfo(batteryLevel = thatNode.batteryLevel, voltage = thatNode.voltage)
-            }
-            Spacer(modifier = Modifier.height(4.dp))
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.SpaceBetween,
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                SignalInfo(node = thatNode, isThisNode = isThisNode)
-                thatNode.validPosition?.let { position ->
-                    val satCount = position.satsInView
-                    if (satCount > 0) {
-                        SatelliteCountInfo(satCount = satCount)
+                MaterialBatteryInfo(level = thatNode.batteryLevel, voltage = thatNode.voltage)
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    if (distance != null) {
+                        DistanceInfo(distance = distance)
+                    }
+                    thatNode.validPosition?.let { position ->
+                        ElevationInfo(
+                            altitude = position.altitude,
+                            system = system,
+                            suffix = stringResource(id = R.string.elevation_suffix),
+                        )
+                        val satCount = position.satsInView
+                        if (satCount > 0) {
+                            SatelliteCountInfo(satCount = satCount)
+                        }
                     }
                 }
             }
             Spacer(modifier = Modifier.height(4.dp))
-            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
-                val telemetryString = thatNode.getTelemetryString(tempInFahrenheit)
-                if (telemetryString.isNotEmpty()) {
-                    Text(
-                        text = telemetryString,
-                        color = MaterialTheme.colorScheme.onSurface,
-                        fontSize = MaterialTheme.typography.labelLarge.fontSize,
-                    )
+            FlowRow(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                itemVerticalAlignment = Alignment.CenterVertically,
+            ) {
+                SignalInfo(node = thatNode, isThisNode = isThisNode)
+            }
+            val telemetryStrings = thatNode.getTelemetryStrings(tempInFahrenheit)
+
+            if (telemetryStrings.isNotEmpty()) {
+                Spacer(modifier = Modifier.height(2.dp))
+                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+                    telemetryStrings.forEach { telemetryString ->
+                        Text(
+                            text = telemetryString,
+                            color = MaterialTheme.colorScheme.onSurface,
+                            style = MaterialTheme.typography.bodySmall,
+                        )
+                    }
                 }
             }
+            Spacer(modifier = Modifier.height(2.dp))
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                val labelStyle =
+                    if (thatNode.isUnknownUser) {
+                        MaterialTheme.typography.labelSmall.copy(
+                            fontStyle = FontStyle.Italic,
+                            color = MaterialTheme.colorScheme.onSurface,
+                        )
+                    } else {
+                        MaterialTheme.typography.labelSmall.copy(color = MaterialTheme.colorScheme.onSurface)
+                    }
+                Text(text = thatNode.user.hwModel.name, style = labelStyle)
+                Text(text = thatNode.user.role.name, style = labelStyle)
+                Text(text = thatNode.user.id.ifEmpty { "???" }, style = labelStyle)
+            }
         }
     }
 }
 
 @Composable
-@Preview(showBackground = false)
+@Preview(showBackground = false, uiMode = Configuration.UI_MODE_NIGHT_YES)
 fun NodeInfoSimplePreview() {
     AppTheme {
         val thisNode = NodePreviewParameterProvider().values.first()
@@ -185,23 +237,12 @@ fun NodeInfoSimplePreview() {
 fun NodeInfoPreview(@PreviewParameter(NodePreviewParameterProvider::class) thatNode: Node) {
     AppTheme {
         val thisNode = NodePreviewParameterProvider().values.first()
-        Column {
-            Text(text = "Details Collapsed", color = MaterialTheme.colorScheme.onBackground)
-            NodeItem(
-                thisNode = thisNode,
-                thatNode = thatNode,
-                distanceUnits = 1,
-                tempInFahrenheit = true,
-                currentTimeMillis = System.currentTimeMillis(),
-            )
-            Text(text = "Details Shown", color = MaterialTheme.colorScheme.onBackground)
-            NodeItem(
-                thisNode = thisNode,
-                thatNode = thatNode,
-                distanceUnits = 1,
-                tempInFahrenheit = true,
-                currentTimeMillis = System.currentTimeMillis(),
-            )
-        }
+        NodeItem(
+            thisNode = thisNode,
+            thatNode = thatNode,
+            distanceUnits = 1,
+            tempInFahrenheit = true,
+            currentTimeMillis = System.currentTimeMillis(),
+        )
     }
 }

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

@@ -31,6 +31,7 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.PlainTooltip
 import androidx.compose.material3.Text
+import androidx.compose.material3.TooltipAnchorPosition
 import androidx.compose.material3.TooltipBox
 import androidx.compose.material3.TooltipDefaults
 import androidx.compose.material3.rememberTooltipState
@@ -51,7 +52,7 @@ fun NodeStatusIcons(isThisNode: Boolean, isUnmessageable: Boolean, isFavorite: B
     Row(modifier = Modifier.padding(4.dp)) {
         if (isThisNode) {
             TooltipBox(
-                positionProvider = TooltipDefaults.rememberTooltipPositionProvider(),
+                positionProvider = TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
                 tooltip = {
                     PlainTooltip {
                         Text(

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

@@ -17,40 +17,22 @@
 
 package com.geeksville.mesh.ui.node.components
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.twotone.SatelliteAlt
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.unit.dp
 import org.meshtastic.core.ui.theme.AppTheme
 
 @Composable
 fun SatelliteCountInfo(modifier: Modifier = Modifier, satCount: Int) {
-    Row(
+    IconInfo(
         modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(4.dp),
-    ) {
-        Icon(
-            modifier = Modifier.size(18.dp),
-            imageVector = Icons.TwoTone.SatelliteAlt,
-            contentDescription = null,
-            tint = MaterialTheme.colorScheme.onSurface,
-        )
-        Text(
-            text = "$satCount",
-            fontSize = MaterialTheme.typography.labelLarge.fontSize,
-            color = MaterialTheme.colorScheme.onSurface,
-        )
-    }
+        icon = Icons.TwoTone.SatelliteAlt,
+        contentDescription = stringResource(org.meshtastic.core.strings.R.string.sats),
+        text = "$satCount",
+    )
 }
 
 @PreviewLightDark