ImportScreen: replace fade with bottom edge shadow

24dp shadow strip on the bottom edge of the scroll area when more
content is below. Disappears when scrolled to bottom. Matches how
Material dialogs and macOS sheets indicate overflow.
This commit is contained in:
Kyle Bolen
2026-07-28 05:33:17 +00:00
parent 9c489306f4
commit 8306aa2729

View File

@@ -46,11 +46,27 @@ fun ImportScreen(state: AppState) {
HorizontalDivider()
// ── Scrollable body with bottom fade ────────────────────────────────
// ── Scrollable body with bottom shadow indicator ─────────────────────
val scrollState = rememberScrollState()
val showFade by remember { derivedStateOf { scrollState.value < scrollState.maxValue } }
val showShadow by remember { derivedStateOf { scrollState.value < scrollState.maxValue } }
Box(modifier = Modifier.weight(1f)) {
Box(
modifier = Modifier
.weight(1f)
.then(
if (showShadow) Modifier.drawWithContent {
drawContent()
// Thin shadow strip along the bottom edge
drawRect(
brush = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.10f)),
startY = size.height - 24.dp.toPx(),
endY = size.height,
)
)
} else Modifier
)
) {
Column(
modifier = Modifier
.fillMaxSize()
@@ -142,26 +158,6 @@ fun ImportScreen(state: AppState) {
// Extra bottom padding so last item isn't flush against the button
Spacer(Modifier.height(8.dp))
} // end scroll Column
// Fade gradient — visible when not scrolled to bottom
if (showFade) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.align(Alignment.BottomCenter)
.drawWithContent {
drawContent()
drawRect(
brush = Brush.verticalGradient(
colors = listOf(Color.Transparent, Color.White),
startY = 0f,
endY = size.height,
)
)
}
)
}
} // end Box
// ── Pinned bottom button ─────────────────────────────────────────────