fix: attachment menu — vertical glass panel with round colored icons

Replaced the horizontal circle buttons with a vertical GlassSurface
panel. Each row has a 40dp round tinted icon + label, matching the
app's glass design system. Slides up above the input with animation.
This commit is contained in:
Bruno Deanoz 2026-06-21 18:53:33 +02:00
parent e1480fbb57
commit 5fbeded849

View file

@ -479,56 +479,40 @@ fun AttachmentMenu(
val accent = LocalKaizenAccent.current
val isDark = isSystemInDarkTheme()
Row(
modifier = modifier.fillMaxWidth().padding(horizontal = 32.dp, vertical = 8.dp),
horizontalArrangement = Arrangement.SpaceEvenly,
GlassSurface(
modifier = modifier.padding(horizontal = 12.dp),
shape = KaizenShapes.lg,
tintAlpha = GlassTiers.card(isDark),
shadowStack = KaizenShadows.level2,
cornerRadius = 24.dp,
) {
AttachOption(
icon = Icons.Rounded.CameraAlt,
label = stringResource(R.string.attach_camera),
tint = accent.primary,
bg = accent.primary.copy(alpha = if (isDark) 0.15f else 0.10f),
onClick = onCamera,
)
AttachOption(
icon = Icons.Rounded.Image,
label = stringResource(R.string.attach_gallery),
tint = Color(0xFF6366F1),
bg = Color(0xFF6366F1).copy(alpha = if (isDark) 0.15f else 0.10f),
onClick = onGallery,
)
AttachOption(
icon = Icons.AutoMirrored.Rounded.InsertDriveFile,
label = stringResource(R.string.attach_file),
tint = Color(0xFF10B981),
bg = Color(0xFF10B981).copy(alpha = if (isDark) 0.15f else 0.10f),
onClick = onFile,
)
Column(Modifier.fillMaxWidth().padding(8.dp)) {
AttachRow(Icons.Rounded.CameraAlt, stringResource(R.string.attach_camera), accent.primary, isDark, onCamera)
AttachRow(Icons.Rounded.Image, stringResource(R.string.attach_gallery), Color(0xFF6366F1), isDark, onGallery)
AttachRow(Icons.AutoMirrored.Rounded.InsertDriveFile, stringResource(R.string.attach_file), Color(0xFF10B981), isDark, onFile)
}
}
}
@Composable
private fun AttachOption(
icon: ImageVector,
label: String,
tint: Color,
bg: Color,
onClick: () -> Unit,
) {
private fun AttachRow(icon: ImageVector, label: String, tint: Color, isDark: Boolean, onClick: () -> Unit) {
val cs = MaterialTheme.colorScheme
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Box(
Row(
Modifier
.size(56.dp)
.clip(KaizenShapes.circle)
.background(bg)
.clickable(onClick = onClick),
.fillMaxWidth()
.clip(KaizenShapes.md)
.clickable(onClick = onClick)
.padding(horizontal = 12.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Box(
Modifier.size(40.dp).clip(KaizenShapes.circle).background(tint.copy(alpha = if (isDark) 0.15f else 0.10f)),
contentAlignment = Alignment.Center,
) {
Icon(icon, null, tint = tint, modifier = Modifier.size(24.dp))
Icon(icon, null, tint = tint, modifier = Modifier.size(20.dp))
}
Spacer(Modifier.height(6.dp))
Text(label, color = cs.onSurfaceVariant, fontSize = 12.sp, fontWeight = FontWeight.Medium)
Spacer(Modifier.width(14.dp))
Text(label, color = cs.onBackground, fontSize = 15.sp, fontWeight = FontWeight.Medium)
}
}