From d7a552770f33a02ea5909d9082114df2d883de4b Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 13 Jun 2026 03:38:32 +0000 Subject: [PATCH] feat: modernize notify-tag chips in new post screens Replace the plain solid-color buttons used for Notify: mentions with Material3 InputChips that show each user's avatar and display name plus a remove (X) trailing icon, matching the modern contact-chip pattern. The add-user action now uses an AssistChip with a PersonAdd icon. Since the Notifying composable is shared, this updates the look across all new post screens (short notes, comments/replies, and polls). --- .../ui/note/creators/notify/Notifying.kt | 112 +++++++++--------- amethyst/src/main/res/values/strings.xml | 3 +- 2 files changed, 59 insertions(+), 56 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/creators/notify/Notifying.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/creators/notify/Notifying.kt index 00b361f211..da837a4b2c 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/creators/notify/Notifying.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/creators/notify/Notifying.kt @@ -23,27 +23,28 @@ package com.vitorpamplona.amethyst.ui.note.creators.notify import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow -import androidx.compose.material3.Button -import androidx.compose.material3.ButtonDefaults +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.widthIn +import androidx.compose.material3.AssistChip +import androidx.compose.material3.AssistChipDefaults +import androidx.compose.material3.InputChip +import androidx.compose.material3.InputChipDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.remember import androidx.compose.ui.Alignment.Companion.CenterVertically import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import com.vitorpamplona.amethyst.R +import com.vitorpamplona.amethyst.commons.icons.symbols.Icon +import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols import com.vitorpamplona.amethyst.model.User -import com.vitorpamplona.amethyst.service.relayClient.reqCommand.user.observeUserInfo -import com.vitorpamplona.amethyst.ui.components.CreateTextWithEmoji +import com.vitorpamplona.amethyst.ui.note.BaseUserPicture +import com.vitorpamplona.amethyst.ui.note.UsernameDisplay import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.stringRes -import com.vitorpamplona.amethyst.ui.theme.ButtonBorder -import com.vitorpamplona.amethyst.ui.theme.mediumImportanceLink +import com.vitorpamplona.amethyst.ui.theme.Size24dp import com.vitorpamplona.amethyst.ui.theme.placeholderText import kotlinx.collections.immutable.ImmutableList @@ -59,7 +60,10 @@ fun Notifying( ) { val mentions = baseMentions?.toSet() - FlowRow(horizontalArrangement = Arrangement.spacedBy(5.dp)) { + FlowRow( + horizontalArrangement = Arrangement.spacedBy(6.dp), + verticalArrangement = Arrangement.spacedBy(4.dp), + ) { if (!mentions.isNullOrEmpty() || showWhenEmpty) { Text( label ?: stringRes(R.string.reply_notify), @@ -68,60 +72,58 @@ fun Notifying( modifier = Modifier.align(CenterVertically), ) - mentions?.forEachIndexed { _, user -> - Button( - shape = ButtonBorder, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.mediumImportanceLink, - ), - onClick = { onClick(user) }, - ) { - DisplayUserNameWithDeleteMark(user, accountViewModel) - } + mentions?.forEach { user -> + NotifyUserChip(user, accountViewModel) { onClick(user) } } if (onAddUser != null) { - Button( - shape = ButtonBorder, - colors = - ButtonDefaults.buttonColors( - containerColor = MaterialTheme.colorScheme.mediumImportanceLink, - ), - onClick = onAddUser, - ) { - Text( - text = stringRes(R.string.notify_add_user), - color = Color.White, - textAlign = TextAlign.Center, - ) - } + AddUserChip(onAddUser) } } } } @Composable -private fun DisplayUserNameWithDeleteMark( +private fun NotifyUserChip( user: User, accountViewModel: AccountViewModel, + onRemove: () -> Unit, ) { - val innerUserState by observeUserInfo(user, accountViewModel) - - val meta = innerUserState - - if (meta != null) { - CreateTextWithEmoji( - text = remember(meta) { "✖ ${meta.info.bestName() ?: user.pubkeyDisplayHex()}" }, - tags = meta.tags, - color = Color.White, - textAlign = TextAlign.Center, - ) - } else { - Text( - text = remember(meta) { "✖ ${user.pubkeyDisplayHex()}" }, - color = Color.White, - textAlign = TextAlign.Center, - ) - } + InputChip( + selected = false, + onClick = onRemove, + label = { + UsernameDisplay( + user, + weight = Modifier.widthIn(max = 180.dp), + fontWeight = FontWeight.SemiBold, + accountViewModel = accountViewModel, + ) + }, + avatar = { + BaseUserPicture(user, Size24dp, accountViewModel) + }, + trailingIcon = { + Icon( + symbol = MaterialSymbols.Close, + contentDescription = stringRes(R.string.notify_remove_user), + modifier = Modifier.size(InputChipDefaults.IconSize), + ) + }, + ) +} + +@Composable +private fun AddUserChip(onAddUser: () -> Unit) { + AssistChip( + onClick = onAddUser, + label = { Text(text = stringRes(R.string.notify_add_user)) }, + leadingIcon = { + Icon( + symbol = MaterialSymbols.PersonAdd, + contentDescription = null, + modifier = Modifier.size(AssistChipDefaults.IconSize), + ) + }, + ) } diff --git a/amethyst/src/main/res/values/strings.xml b/amethyst/src/main/res/values/strings.xml index 4d0df7d88c..4a6e63b466 100644 --- a/amethyst/src/main/res/values/strings.xml +++ b/amethyst/src/main/res/values/strings.xml @@ -990,7 +990,8 @@ Replies to a private note always stay private Visible to No receivers yet: only you will be able to see this note. Add people to share it with. - + Add + Add + Remove user from notifications Search and add a user to notify is not a bookmark here Remove bookmark from list