Fix #3542 Conversations list item layout. (#3553)

Signed-off-by: Artemii Vishnevskii <temaa.mann@gmail.com>
2026-01-12 01:27:50 -05:00 · 2025-10-30 22:54:52 +01:00
parent 5838e205f3
commit 75c262f94d
1 changed files with 132 additions and 92 deletions
--- a/app/src/main/java/com/geeksville/mesh/ui/contact/ContactItem.kt
+++ b/app/src/main/java/com/geeksville/mesh/ui/contact/ContactItem.kt
@@ -22,10 +22,13 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 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.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -72,88 +75,118 @@ fun ContactItem(
            .combinedClickable(onClick = onClick, onLongClick = onLongClick)
            .background(color = if (selected) Color.Gray else MaterialTheme.colorScheme.background)
            .fillMaxWidth()
-            .padding(horizontal = 8.dp, vertical = 6.dp)
+            .padding(horizontal = 8.dp, vertical = 4.dp)
            .semantics { contentDescription = shortName },
        shape = RoundedCornerShape(12.dp),
    ) {
-        val colors =
-            if (contact.nodeColors != null) {
-                AssistChipDefaults.assistChipColors(
-                    labelColor = Color(contact.nodeColors.first),
-                    containerColor = Color(contact.nodeColors.second),
-                )
-            } else {
-                AssistChipDefaults.assistChipColors()
-            }
+        Column(modifier = Modifier.fillMaxWidth().padding(8.dp)) {
+            ContactHeader(contact = contact, channels = channels, onNodeChipClick = onNodeChipClick)

-        Row(modifier = Modifier.fillMaxWidth().padding(8.dp), verticalAlignment = Alignment.CenterVertically) {
-            AssistChip(
-                onClick = onNodeChipClick,
-                modifier = Modifier.padding(end = 8.dp).width(72.dp).semantics { contentDescription = shortName },
-                label = {
-                    Text(
-                        text = shortName,
-                        modifier = Modifier.fillMaxWidth(),
-                        fontSize = MaterialTheme.typography.labelLarge.fontSize,
-                        fontWeight = FontWeight.Normal,
-                        textAlign = TextAlign.Center,
-                    )
-                },
-                colors = colors,
+            ChatMetadata(modifier = Modifier.padding(top = 4.dp), contact = contact)
+        }
+    }
+}
+
+@Composable
+private fun ContactHeader(
+    contact: Contact,
+    channels: AppOnlyProtos.ChannelSet?,
+    modifier: Modifier = Modifier,
+    onNodeChipClick: () -> Unit = {},
+) {
+    val colors =
+        if (contact.nodeColors != null) {
+            AssistChipDefaults.assistChipColors(
+                labelColor = Color(contact.nodeColors.first),
+                containerColor = Color(contact.nodeColors.second),
            )
-            Column(modifier = Modifier.weight(1f)) {
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    verticalAlignment = Alignment.CenterVertically,
-                    horizontalArrangement = Arrangement.spacedBy(8.dp),
-                ) {
-                    // Show unlock icon for broadcast with default PSK
-                    val isBroadcast =
-                        contact.contactKey.getOrNull(1) == '^' ||
-                            contact.contactKey.endsWith("^all") ||
-                            contact.contactKey.endsWith("^broadcast")
-                    if (isBroadcast && channels != null) {
-                        val channelIndex = contact.contactKey[0].digitToIntOrNull()
-                        channelIndex?.let { index -> SecurityIcon(channels, index) }
-                    }
+        } else {
+            AssistChipDefaults.assistChipColors()
+        }

-                    Text(text = longName)
-                    Spacer(modifier = Modifier.weight(1f))
-                    Text(
-                        text = lastMessageTime.orEmpty(),
-                        color = MaterialTheme.colorScheme.onSurface,
-                        fontSize = MaterialTheme.typography.labelLarge.fontSize,
-                        modifier = Modifier.width(80.dp),
-                    )
+    Row(modifier = modifier.padding(0.dp), verticalAlignment = Alignment.CenterVertically) {
+        AssistChip(
+            onClick = onNodeChipClick,
+            modifier =
+            Modifier.width(IntrinsicSize.Min).height(32.dp).semantics { contentDescription = contact.shortName },
+            label = {
+                Text(
+                    text = contact.shortName,
+                    modifier = Modifier.fillMaxWidth(),
+                    style = MaterialTheme.typography.labelLarge,
+                    textAlign = TextAlign.Center,
+                )
+            },
+            colors = colors,
+        )
+
+        // Show unlock icon for broadcast with default PSK
+        val isBroadcast = with(contact.contactKey) { getOrNull(1) == '^' || endsWith("^all") || endsWith("^broadcast") }
+
+        if (isBroadcast && channels != null) {
+            val channelIndex = contact.contactKey[0].digitToIntOrNull()
+            channelIndex?.let { index -> SecurityIcon(channels, index) }
+        }
+
+        Text(
+            modifier = Modifier.padding(start = 8.dp).weight(1f),
+            style = MaterialTheme.typography.bodyLarge,
+            fontWeight = FontWeight.Medium,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            text = contact.longName,
+        )
+        Text(
+            text = contact.lastMessageTime.orEmpty(),
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            style = MaterialTheme.typography.labelSmall,
+            modifier = Modifier,
+        )
+    }
+}
+
+private const val UNREAD_MESSAGE_LIMIT = 99
+
+@Composable
+private fun ChatMetadata(contact: Contact, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Text(
+            text = contact.lastMessageText.orEmpty(),
+            modifier = Modifier.weight(1f),
+            style = MaterialTheme.typography.bodyMedium,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 2,
+        )
+        AnimatedVisibility(visible = contact.isMuted) {
+            Icon(
+                modifier = Modifier.padding(start = 4.dp).size(20.dp),
+                imageVector = Icons.AutoMirrored.TwoTone.VolumeOff,
+                contentDescription = null,
+            )
+        }
+        AnimatedVisibility(modifier = Modifier.padding(start = 4.dp), visible = contact.unreadCount > 0) {
+            val text =
+                if (contact.unreadCount > UNREAD_MESSAGE_LIMIT) {
+                    "$UNREAD_MESSAGE_LIMIT+"
+                } else {
+                    contact.unreadCount.toString()
                }
-                Row(
-                    modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
-                    horizontalArrangement = Arrangement.SpaceBetween,
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Text(
-                        text = lastMessageText.orEmpty(),
-                        modifier = Modifier.weight(1f),
-                        color = MaterialTheme.colorScheme.onSurface,
-                        fontSize = MaterialTheme.typography.labelLarge.fontSize,
-                        overflow = TextOverflow.Ellipsis,
-                        maxLines = 2,
-                    )
-                    AnimatedVisibility(visible = isMuted) {
-                        Icon(imageVector = Icons.AutoMirrored.TwoTone.VolumeOff, contentDescription = null)
-                    }
-                    AnimatedVisibility(visible = unreadCount > 0) {
-                        Text(
-                            text = unreadCount.toString(),
-                            modifier =
-                            Modifier.background(MaterialTheme.colorScheme.primary, shape = CircleShape)
-                                .padding(horizontal = 6.dp, vertical = 3.dp),
-                            color = MaterialTheme.colorScheme.onPrimary,
-                            style = MaterialTheme.typography.bodySmall,
-                        )
-                    }
-                }
-            }
+
+            Text(
+                text = text,
+                modifier =
+                Modifier.background(MaterialTheme.colorScheme.primary, shape = CircleShape)
+                    .defaultMinSize(minWidth = 20.dp)
+                    .padding(horizontal = 6.dp, vertical = 2.dp),
+                textAlign = TextAlign.Center,
+                color = MaterialTheme.colorScheme.onPrimary,
+                style = MaterialTheme.typography.labelSmall,
+                maxLines = 1,
+            )
        }
    }
 }
@@ -161,21 +194,28 @@ fun ContactItem(
@PreviewLightDark
@Composable
 private fun ContactItemPreview() {
-    AppTheme {
-        ContactItem(
-            contact =
-            Contact(
-                contactKey = "0^all",
-                shortName = stringResource(R.string.some_username),
-                longName = stringResource(R.string.unknown_username),
-                lastMessageTime = "3 minutes ago",
-                lastMessageText = stringResource(R.string.sample_message),
-                unreadCount = 2,
-                messageCount = 10,
-                isMuted = true,
-                isUnmessageable = false,
-            ),
-            selected = false,
+    val sampleContact =
+        Contact(
+            contactKey = "0^all",
+            shortName = stringResource(R.string.some_username),
+            longName = stringResource(R.string.unknown_username),
+            lastMessageTime = "Mon",
+            lastMessageText = stringResource(R.string.sample_message),
+            unreadCount = 2,
+            messageCount = 10,
+            isMuted = true,
+            isUnmessageable = false,
        )
-    }
+
+    val contactsList =
+        listOf(
+            sampleContact,
+            sampleContact.copy(
+                shortName = "0",
+                longName = "A very long contact name that should be truncated.",
+                lastMessageTime = "15 minutes ago",
+            ),
+        )
+
+    AppTheme { Column { contactsList.forEach { contact -> ContactItem(contact = contact, selected = false) } } }
 }