From cd221d5de120f8c6544d375ead4737ee2dfd0187 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 25 Jul 2026 02:57:56 +0000 Subject: [PATCH] feat: cap Messages room-label chips at ~half the row, unify Concord chip color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The type/label chips that sit beside a room name on the Messages screen — the NIP-28 "Public Chat" pill (HeaderPill), the NIP-29 relay-host chip (RelayNameChip), and the Concord community chip (ConcordCommunityPill) — could grow with a long relay URL or community name and crowd the room name out. Cap each at ChatLabelMaxWidth (140.dp, ~half a phone row) via widthIn(max); the room name stays weighted so it keeps whatever the capped chip doesn't take, and each chip's label truncates with a middle ellipsis (TextOverflow.MiddleEllipsis) so the informative head and tail both survive. RelayNameChip switches from a plain end ellipsis; ConcordCommunityPill drops its char-count truncation (maxChars) for width-based truncation. Also give the Concord chip the NIP-29 chip's highlighted look — secondaryContainer background / onSecondaryContainer content (a gray on the dark theme) — so both "which server/community does this room belong to" chips read the same. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01KQ9Cz2QjLMvemzVyJS1f5V --- .../concord/ConcordCommunityPill.kt | 30 +++++++++---------- .../chats/rooms/ChatroomHeaderCompose.kt | 7 +++-- .../vitorpamplona/amethyst/ui/theme/Shape.kt | 8 +++++ 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/publicChannels/concord/ConcordCommunityPill.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/publicChannels/concord/ConcordCommunityPill.kt index 4fa775cc6f..91e60aa4ef 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/publicChannels/concord/ConcordCommunityPill.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/publicChannels/concord/ConcordCommunityPill.kt @@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface @@ -36,27 +37,26 @@ import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp import com.vitorpamplona.amethyst.commons.icons.symbols.Icon import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols -import com.vitorpamplona.amethyst.ui.theme.placeholderText +import com.vitorpamplona.amethyst.ui.theme.ChatLabelMaxWidth /** - * A tappable chip naming the Concord community a message belongs to. Deliberately **muted** — the same - * faint wash the note-header markers use — because the community's logo is now the row avatar, so the - * name only needs to read as tappable metadata, not compete with it. (The NIP-29 relay-host chip stays - * highlighted; a relay group has no avatar of its own.) Shared by the Messages row and the Notifications - * feed so a Concord message reads the same wherever it surfaces; the name is hard-capped so a long title - * can't crowd the row. + * A tappable chip naming the Concord community a message belongs to. Wears the same highlighted wash as + * the NIP-29 relay-host chip ([secondaryContainer] — a gray on the dark theme) so every "which server / + * community does this room belong to" chip reads the same across the Messages screen. Shared by the + * Messages row and the Notifications feed so a Concord message reads the same wherever it surfaces; the + * width is capped at [ChatLabelMaxWidth] with a middle ellipsis so a long community name is truncated + * instead of crowding the room name out. */ @Composable fun ConcordCommunityPill( communityName: String, onClick: () -> Unit, - maxChars: Int = 20, ) { Surface( shape = RoundedCornerShape(6.dp), - color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.07f), - contentColor = MaterialTheme.colorScheme.placeholderText, - modifier = Modifier.clickable(onClick = onClick), + color = MaterialTheme.colorScheme.secondaryContainer, + contentColor = MaterialTheme.colorScheme.onSecondaryContainer, + modifier = Modifier.widthIn(max = ChatLabelMaxWidth).clickable(onClick = onClick), ) { Row( verticalAlignment = Alignment.CenterVertically, @@ -66,15 +66,15 @@ fun ConcordCommunityPill( Icon( symbol = MaterialSymbols.Group, contentDescription = null, - tint = MaterialTheme.colorScheme.placeholderText, + tint = MaterialTheme.colorScheme.onSecondaryContainer, modifier = Modifier.size(11.dp), ) Text( - text = if (communityName.length > maxChars) communityName.take(maxChars).trimEnd() + "…" else communityName, + text = communityName, style = MaterialTheme.typography.labelSmall, - color = MaterialTheme.colorScheme.placeholderText, + color = MaterialTheme.colorScheme.onSecondaryContainer, maxLines = 1, - overflow = TextOverflow.Ellipsis, + overflow = TextOverflow.MiddleEllipsis, ) } } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/rooms/ChatroomHeaderCompose.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/rooms/ChatroomHeaderCompose.kt index b37d890c34..05ab71f7d3 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/rooms/ChatroomHeaderCompose.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/chats/rooms/ChatroomHeaderCompose.kt @@ -29,6 +29,7 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem @@ -102,6 +103,7 @@ import com.vitorpamplona.amethyst.ui.screen.loggedIn.chats.rooms.dal.ConcordServ import com.vitorpamplona.amethyst.ui.screen.loggedIn.chats.rooms.dal.RelayGroupServerRoomNote import com.vitorpamplona.amethyst.ui.stringRes import com.vitorpamplona.amethyst.ui.theme.AccountPictureModifier +import com.vitorpamplona.amethyst.ui.theme.ChatLabelMaxWidth import com.vitorpamplona.amethyst.ui.theme.Height4dpModifier import com.vitorpamplona.amethyst.ui.theme.Size15Modifier import com.vitorpamplona.amethyst.ui.theme.Size55dp @@ -683,7 +685,7 @@ private fun RelayNameChip( Surface( shape = RoundedCornerShape(6.dp), color = MaterialTheme.colorScheme.secondaryContainer, - modifier = Modifier.clickable(onClick = onClick), + modifier = Modifier.widthIn(max = ChatLabelMaxWidth).clickable(onClick = onClick), ) { Row( verticalAlignment = Alignment.CenterVertically, @@ -701,7 +703,7 @@ private fun RelayNameChip( style = MaterialTheme.typography.labelSmall, color = MaterialTheme.colorScheme.onSecondaryContainer, maxLines = 1, - overflow = TextOverflow.Ellipsis, + overflow = TextOverflow.MiddleEllipsis, ) } } @@ -733,6 +735,7 @@ private fun ChannelTitleWithLabelInfo( HeaderPill( symbol = labelIcon, text = stringRes(id = label), + modifier = Modifier.widthIn(max = ChatLabelMaxWidth), ) } } diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt index f7543a0a1a..ffca10a088 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt @@ -133,6 +133,14 @@ val Size100dp = 100.dp val Size110dp = 110.dp val Size165dp = 165.dp +/** + * Max width for a type/label chip sitting beside a room name on a Messages-list row (the NIP-28 + * "Public Chat" pill, the NIP-29 relay-host chip, the Concord community chip, ...). Roughly half a + * phone row so a long relay URL or community name is truncated (middle ellipsis) instead of crowding + * the room name out — the name is weighted and keeps whatever the capped chip doesn't take. + */ +val ChatLabelMaxWidth = 140.dp + val StdEndPadding = Modifier.padding(end = 10.dp) val HalfEndPadding = Modifier.padding(end = 5.dp) val HalfStartPadding = Modifier.padding(start = 5.dp)