Fix `NodeChip` click handling (#3278)

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

@@ -17,19 +17,18 @@
 
 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
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material3.AssistChipDefaults
-import androidx.compose.material3.ElevatedAssistChip
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.contentDescription
@@ -44,51 +43,36 @@ import com.geeksville.mesh.TelemetryProtos
 import org.meshtastic.core.database.model.Node
 
 @Composable
-fun NodeChip(
-    modifier: Modifier = Modifier,
-    node: Node,
-    onClick: (Node) -> Unit = {},
-    onLongClick: (() -> Unit)? = {},
-    interactionSource: MutableInteractionSource? = null,
-) {
-    val isIgnored = node.isIgnored
+fun NodeChip(modifier: Modifier = Modifier, node: Node, onClick: ((Node) -> Unit)? = null) {
     val (textColor, nodeColor) = node.colors
-    val inputChipInteractionSource = interactionSource ?: remember { MutableInteractionSource() }
-    Box(modifier = modifier) {
-        ElevatedAssistChip(
+    val colors = CardDefaults.cardColors(containerColor = Color(nodeColor), contentColor = Color(textColor))
+
+    val content: @Composable () -> Unit = {
+        Box(
             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 = {
+            Modifier.width(IntrinsicSize.Min)
+                .defaultMinSize(minWidth = 72.dp, minHeight = 32.dp)
+                .padding(horizontal = 8.dp)
+                .semantics { contentDescription = node.user.shortName.ifEmpty { "Node" } },
+            contentAlignment = Alignment.Center,
+        ) {
             Text(
                 modifier = Modifier.fillMaxWidth(),
                 text = node.user.shortName.ifEmpty { "???" },
                 fontSize = MaterialTheme.typography.labelLarge.fontSize,
-                    textDecoration = TextDecoration.LineThrough.takeIf { isIgnored },
+                textDecoration = TextDecoration.LineThrough.takeIf { node.isIgnored },
                 textAlign = TextAlign.Center,
                 maxLines = 1,
             )
-            },
-            onClick = {},
-            interactionSource = inputChipInteractionSource,
-        )
-        Box(
-            modifier =
-            Modifier.matchParentSize()
-                .combinedClickable(
-                    onLongClick = onLongClick,
-                    onClick = { onClick(node) },
-                    interactionSource = inputChipInteractionSource,
-                    indication = null,
-                ),
-        )
+        }
+    }
+
+    if (onClick == null) {
+        Card(modifier = modifier, shape = MaterialTheme.shapes.small, colors = colors) { content() }
+    } else {
+        Card(modifier = modifier, shape = MaterialTheme.shapes.small, colors = colors, onClick = { onClick(node) }) {
+            content()
+        }
     }
 }
 

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

@@ -19,7 +19,6 @@ 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
@@ -109,23 +108,13 @@ fun NodeItem(
             }
         }
 
-    val interactionSource = remember { MutableInteractionSource() }
-    Card(
+    Card(modifier = modifier.fillMaxWidth().defaultMinSize(minHeight = 80.dp), colors = cardColors) {
+        Column(
             modifier =
-        modifier
-            .combinedClickable(onClick = onClick, onLongClick = onLongClick, interactionSource = interactionSource)
-            .fillMaxWidth()
-            .defaultMinSize(minHeight = 80.dp),
-        colors = cardColors,
+            Modifier.combinedClickable(onClick = onClick, onLongClick = onLongClick).fillMaxWidth().padding(8.dp),
         ) {
-        Column(modifier = Modifier.fillMaxWidth().padding(8.dp)) {
             Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
-                NodeChip(
-                    node = thatNode,
-                    onClick = { onClick() },
-                    onLongClick = onLongClick,
-                    interactionSource = interactionSource,
-                )
+                NodeChip(node = thatNode)
 
                 NodeKeyStatusIcon(
                     hasPKC = thatNode.hasPKC,
@@ -151,6 +140,9 @@ fun NodeItem(
                     isConnected = isConnected,
                 )
             }
+
+            Spacer(modifier = Modifier.height(4.dp))
+
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.SpaceBetween,