krypto/kaizen-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve message action buttons — larger, visible, subtle background

Browse source 
Buttons: 30dp→34dp with squircle shape (KaizenShapes.sm), subtle tinted
background (dark: white 4%, light: black 2.5%), icons 16→17dp. Tint alpha
raised from 0.35→0.50 (copy/regenerate/volume) and 0.6→0.70 (delete) so
buttons are actually visible in both light and dark mode. Spacing 2→4dp
between buttons, top padding 4→6dp.
This commit is contained in:
Bruno Deanoz 2026-06-23 01:02:07 +02:00
parent 10ece6d72f
commit 0ade063b34
1 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/src/main/java/dev/kaizen/app/chat/ChatComponents.kt
View file

@ -395,12 +395,12 @@ fun MessageRow(
} }
if (!message.streaming) { if (!message.streaming) {
Row( Row(
Modifier.padding(top = 4.dp, end = 4.dp), Modifier.padding(top = 6.dp, end = 4.dp),
horizontalArrangement = Arrangement.spacedBy(2.dp), horizontalArrangement = Arrangement.spacedBy(4.dp),
) { ) {
MessageActionButton( MessageActionButton(
icon = if (copied) KaizenIcons.Check else KaizenIcons.Copy, icon = if (copied) KaizenIcons.Check else KaizenIcons.Copy,
tint = if (copied) Color(0xFF10B981) else cs.onSurfaceVariant.copy(alpha = 0.35f), tint = if (copied) Color(0xFF10B981) else cs.onSurfaceVariant.copy(alpha = 0.50f),
) { ) {
haptics.tick() haptics.tick()
copied = true copied = true
@ -411,7 +411,7 @@ fun MessageRow(
} }
} }
onDelete?.let { del -> onDelete?.let { del ->
MessageActionButton(KaizenIcons.Trash, Color(0xFFEF4444).copy(alpha = 0.6f)) { MessageActionButton(KaizenIcons.Trash, Color(0xFFEF4444).copy(alpha = 0.70f)) {
haptics.tick(); del(message.wireId) haptics.tick(); del(message.wireId)
} }
} }
@ -448,12 +448,12 @@ fun MessageRow(
} }
if (!message.streaming && !message.thinking && message.content.isNotBlank()) { if (!message.streaming && !message.thinking && message.content.isNotBlank()) {
Row( Row(
Modifier.padding(start = 38.dp, top = 4.dp), Modifier.padding(start = 38.dp, top = 6.dp),
horizontalArrangement = Arrangement.spacedBy(2.dp), horizontalArrangement = Arrangement.spacedBy(4.dp),
) { ) {
MessageActionButton( MessageActionButton(
icon = if (copied) KaizenIcons.Check else KaizenIcons.Copy, icon = if (copied) KaizenIcons.Check else KaizenIcons.Copy,
tint = if (copied) Color(0xFF10B981) else cs.onSurfaceVariant.copy(alpha = 0.35f), tint = if (copied) Color(0xFF10B981) else cs.onSurfaceVariant.copy(alpha = 0.50f),
) { ) {
haptics.tick() haptics.tick()
copied = true copied = true
@ -466,18 +466,18 @@ fun MessageRow(
onReadAloud?.let { readAloud -> onReadAloud?.let { readAloud ->
MessageActionButton( MessageActionButton(
icon = KaizenIcons.Volume2, icon = KaizenIcons.Volume2,
tint = if (isPlayingTts) accent.primary else cs.onSurfaceVariant.copy(alpha = 0.35f), tint = if (isPlayingTts) accent.primary else cs.onSurfaceVariant.copy(alpha = 0.50f),
) { ) {
haptics.tick(); readAloud(message.content) haptics.tick(); readAloud(message.content)
} }
} }
onRegenerate?.let { regen -> onRegenerate?.let { regen ->
MessageActionButton(KaizenIcons.RefreshCw, cs.onSurfaceVariant.copy(alpha = 0.35f)) { MessageActionButton(KaizenIcons.RefreshCw, cs.onSurfaceVariant.copy(alpha = 0.50f)) {
haptics.tick(); regen(message.wireId) haptics.tick(); regen(message.wireId)
} }
} }
onDelete?.let { del -> onDelete?.let { del ->
MessageActionButton(KaizenIcons.Trash, Color(0xFFEF4444).copy(alpha = 0.6f)) { MessageActionButton(KaizenIcons.Trash, Color(0xFFEF4444).copy(alpha = 0.70f)) {
haptics.tick(); del(message.wireId) haptics.tick(); del(message.wireId)
} }
} }
@ -489,14 +489,16 @@ fun MessageRow(
@Composable @Composable
private fun MessageActionButton(icon: ImageVector, tint: Color, onClick: () -> Unit) { private fun MessageActionButton(icon: ImageVector, tint: Color, onClick: () -> Unit) {
val isDark = isSystemInDarkTheme()
Box( Box(
Modifier Modifier
.size(30.dp) .size(34.dp)
.clip(KaizenShapes.circle) .clip(KaizenShapes.sm)
.background(if (isDark) Color(0x0AFFFFFF) else Color(0x06000000))
.clickable(onClick = onClick), .clickable(onClick = onClick),
contentAlignment = Alignment.Center, contentAlignment = Alignment.Center,
) { ) {
Icon(icon, null, tint = tint, modifier = Modifier.size(16.dp)) Icon(icon, null, tint = tint, modifier = Modifier.size(17.dp))
} }
} }