From 7649c7f94dded662d81dcb466d4bf18c69a00a76 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 19:41:18 +0000 Subject: [PATCH] feat(messages): use PolicyCard selection cards for NIP-29/Concord display modes Replace the radio-row inline/grouped pickers with the same bordered PolicyCard selection cards the Relay Authentication "When to authenticate" picker uses: an accent-colored icon + label + description, a check when selected, and an 8dp stack. Inline uses the list icon, grouped uses the folder icon (both already in the Material Symbols subset). Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_016RbzL9cZk1h88kE7ErgjG5 --- .../settings/MessagesSettingsScreen.kt | 87 +++++++------------ 1 file changed, 29 insertions(+), 58 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/MessagesSettingsScreen.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/MessagesSettingsScreen.kt index 6e8f71c51c..4a11f83af0 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/MessagesSettingsScreen.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/MessagesSettingsScreen.kt @@ -23,24 +23,21 @@ package com.vitorpamplona.amethyst.ui.screen.loggedIn.settings import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.RadioButton import androidx.compose.material3.Scaffold import androidx.compose.material3.Switch import androidx.compose.material3.SwitchDefaults @@ -56,6 +53,7 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.vitorpamplona.amethyst.R +import com.vitorpamplona.amethyst.commons.icons.symbols.MaterialSymbols import com.vitorpamplona.amethyst.commons.model.chats.ChatFeedType import com.vitorpamplona.amethyst.commons.model.concord.ConcordViewMode import com.vitorpamplona.amethyst.commons.model.nip29RelayGroups.RelayGroupViewMode @@ -64,6 +62,7 @@ import com.vitorpamplona.amethyst.ui.navigation.navs.INav import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel import com.vitorpamplona.amethyst.ui.screen.loggedIn.mockAccountViewModel +import com.vitorpamplona.amethyst.ui.screen.loggedIn.napplets.PolicyCard import com.vitorpamplona.amethyst.ui.stringRes import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonRow @@ -168,18 +167,20 @@ fun MessagesSettingsScreen( SectionHeader(title = stringRes(R.string.relay_group_view_mode_title)) } item { - ViewModeCard { - ViewModeOption( - title = stringRes(R.string.relay_group_view_inline), - description = stringRes(R.string.relay_group_view_inline_desc), + ViewModeCards { + PolicyCard( selected = mode == RelayGroupViewMode.INLINE, - onSelect = { accountViewModel.account.settings.updateRelayGroupViewMode(RelayGroupViewMode.INLINE) }, + symbol = MaterialSymbols.AutoMirrored.ViewList, + label = stringRes(R.string.relay_group_view_inline), + description = stringRes(R.string.relay_group_view_inline_desc), + onClick = { accountViewModel.account.settings.updateRelayGroupViewMode(RelayGroupViewMode.INLINE) }, ) - ViewModeOption( - title = stringRes(R.string.relay_group_view_grouped), - description = stringRes(R.string.relay_group_view_grouped_desc), + PolicyCard( selected = mode == RelayGroupViewMode.GROUPED, - onSelect = { accountViewModel.account.settings.updateRelayGroupViewMode(RelayGroupViewMode.GROUPED) }, + symbol = MaterialSymbols.Folder, + label = stringRes(R.string.relay_group_view_grouped), + description = stringRes(R.string.relay_group_view_grouped_desc), + onClick = { accountViewModel.account.settings.updateRelayGroupViewMode(RelayGroupViewMode.GROUPED) }, ) } } @@ -190,18 +191,20 @@ fun MessagesSettingsScreen( SectionHeader(title = stringRes(R.string.concord_view_mode_title)) } item { - ViewModeCard { - ViewModeOption( - title = stringRes(R.string.concord_view_inline), - description = stringRes(R.string.concord_view_inline_desc), + ViewModeCards { + PolicyCard( selected = concordMode == ConcordViewMode.INLINE, - onSelect = { accountViewModel.account.settings.updateConcordViewMode(ConcordViewMode.INLINE) }, + symbol = MaterialSymbols.AutoMirrored.ViewList, + label = stringRes(R.string.concord_view_inline), + description = stringRes(R.string.concord_view_inline_desc), + onClick = { accountViewModel.account.settings.updateConcordViewMode(ConcordViewMode.INLINE) }, ) - ViewModeOption( - title = stringRes(R.string.concord_view_grouped), - description = stringRes(R.string.concord_view_grouped_desc), + PolicyCard( selected = concordMode == ConcordViewMode.GROUPED, - onSelect = { accountViewModel.account.settings.updateConcordViewMode(ConcordViewMode.GROUPED) }, + symbol = MaterialSymbols.Folder, + label = stringRes(R.string.concord_view_grouped), + description = stringRes(R.string.concord_view_grouped_desc), + onClick = { accountViewModel.account.settings.updateConcordViewMode(ConcordViewMode.GROUPED) }, ) } } @@ -300,41 +303,9 @@ private fun ChatTypeToggleRow( } } +/** Stacks the bordered selection cards (one per mode) with the same spacing the Relay Authentication + * "When to authenticate" picker uses. */ @Composable -private fun ViewModeCard(content: @Composable () -> Unit) { - Card( - modifier = Modifier.fillMaxWidth(), - shape = RoundedCornerShape(20.dp), - colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.35f)), - ) { - Column(Modifier.padding(vertical = 4.dp)) { content() } - } -} - -@Composable -private fun ViewModeOption( - title: String, - description: String, - selected: Boolean, - onSelect: () -> Unit, -) { - Row( - modifier = - Modifier - .fillMaxWidth() - .selectable(selected = selected, onClick = onSelect) - .padding(horizontal = 16.dp, vertical = 12.dp), - verticalAlignment = Alignment.CenterVertically, - ) { - RadioButton(selected = selected, onClick = onSelect) - Spacer(Modifier.width(12.dp)) - Column { - Text(text = title, fontWeight = FontWeight.SemiBold) - Text( - text = description, - style = MaterialTheme.typography.bodySmall, - color = MaterialTheme.colorScheme.onSurfaceVariant, - ) - } - } +private fun ViewModeCards(content: @Composable () -> Unit) { + Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { content() } }