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

fix: gradient scrims on top/bottom floating bars, increase ModelPill opacity

Browse source 
Content was bleeding through the floating top bar (model pill + menu)
and bottom dock (mode pills + input) because they had no background.
Added vertical gradient scrims to both areas and bumped ModelPill
surface alpha from 0.7 to 0.92.
This commit is contained in:
Bruno Deanoz 2026-06-21 17:33:43 +02:00
parent 320ea855fd
commit 5804b337d9
2 changed files with 53 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
app/src/main/java/dev/kaizen/app/chat/ChatScreen.kt
View file

@ -427,37 +427,51 @@ fun ChatScreen(
}
// 2. Floating Top Menu Button
Row(
val scrimColor = MaterialTheme.colorScheme.background
Box(
modifier = Modifier
.align(Alignment.TopStart)
.statusBarsPadding()
.padding(start = 16.dp, top = 10.dp, end = 16.dp),
verticalAlignment = Alignment.CenterVertically,
) {
GlassSurface(
shape = KaizenShapes.circle,
tintAlpha = GlassTiers.pill(isSystemInDarkTheme()),
shadowStack = KaizenShadows.level2,
cornerRadius = 22.dp,
modifier = Modifier
.size(44.dp)
.clickable { haptics.tick(); scope.launch { drawerState.open() } },
) {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Icon(
imageVector = Icons.Rounded.Menu,
contentDescription = context.getString(R.string.chat_open_menu),
tint = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.size(20.dp)
.fillMaxWidth()
.background(
Brush.verticalGradient(
colorStops = arrayOf(
0f to scrimColor,
0.7f to scrimColor.copy(alpha = 0.55f),
1f to Color.Transparent,
),
)
)
.statusBarsPadding()
) {
Row(
modifier = Modifier.padding(start = 16.dp, top = 10.dp, end = 16.dp, bottom = 20.dp),
verticalAlignment = Alignment.CenterVertically,
) {
GlassSurface(
shape = KaizenShapes.circle,
tintAlpha = GlassTiers.pill(isSystemInDarkTheme()),
shadowStack = KaizenShadows.level2,
cornerRadius = 22.dp,
modifier = Modifier
.size(44.dp)
.clickable { haptics.tick(); scope.launch { drawerState.open() } },
) {
Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Icon(
imageVector = Icons.Rounded.Menu,
contentDescription = context.getString(R.string.chat_open_menu),
tint = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.size(20.dp)
)
}
}
Spacer(Modifier.width(8.dp))
ModelPill(
label = modelDisplayName(session.config?.model ?: "", models),
onClick = { haptics.tick(); showModelSheet = true },
modifier = Modifier.weight(1f, fill = false),
)
}
Spacer(Modifier.width(8.dp))
ModelPill(
label = modelDisplayName(session.config?.model ?: "", models),
onClick = { haptics.tick(); showModelSheet = true },
modifier = Modifier.weight(1f, fill = false),
)
}
// Error banner when initial data load fails
@ -485,9 +499,20 @@ fun ChatScreen(
Column(
modifier = Modifier
.align(Alignment.BottomCenter)
.background(
Brush.verticalGradient(
colorStops = arrayOf(
0f to Color.Transparent,
0.35f to scrimColor.copy(alpha = 0.6f),
0.7f to scrimColor.copy(alpha = 0.92f),
1f to scrimColor,
),
)
)
.navigationBarsPadding()
.then(if (isTablet) Modifier.widthIn(max = 720.dp) else Modifier)
) {
Spacer(Modifier.height(24.dp))
ModePillsRow(selected = selectedMode, onSelect = { selectedMode = it; haptics.tick() })
Spacer(Modifier.height(10.dp))
ChatInput(
@ -499,7 +524,7 @@ fun ChatScreen(
onAddClick = { filePicker.launch("*/*") },
onRemoveFile = { id -> pendingFiles.removeAll { it.id == id } },
)
Spacer(Modifier.height(16.dp)) // Completely clears keyboard edges on all screens
Spacer(Modifier.height(16.dp))
}
// Model picker (bottom sheet), opened by the top pill

2
app/src/main/java/dev/kaizen/app/chat/ModelSheet.kt
View file

@ -35,7 +35,7 @@ fun ModelPill(label: String, onClick: () -> Unit, modifier: Modifier = Modifier)
Row(
modifier = modifier
.clip(KaizenShapes.xl)
.background(cs.surface.copy(alpha = 0.7f))
.background(cs.surface.copy(alpha = 0.92f))
.border(1.dp, cs.onSurface.copy(alpha = 0.08f), KaizenShapes.xl)
.clickable { onClick() }
.padding(start = 14.dp, end = 8.dp, top = 9.dp, bottom = 9.dp),