From 9c489306f4783d083c46b58d653878928cdcea08 Mon Sep 17 00:00:00 2001
From: Kyle Bolen <kbolen@amazon.com>
Date: Tue, 28 Jul 2026 05:31:39 +0000
Subject: [PATCH] ImportScreen: fade gradient indicates more content below

derivedStateOf tracks scrollState.value < maxValue. When not at
bottom, a 48dp white-to-transparent gradient overlays the bottom
of the scroll area. Disappears when fully scrolled.
---
 .../bolenpad/photophetch/ui/ImportScreen.kt   | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/main/kotlin/com/bolenpad/photophetch/ui/ImportScreen.kt b/src/main/kotlin/com/bolenpad/photophetch/ui/ImportScreen.kt
index 2d6a455..396ca4d 100644
--- a/src/main/kotlin/com/bolenpad/photophetch/ui/ImportScreen.kt
+++ b/src/main/kotlin/com/bolenpad/photophetch/ui/ImportScreen.kt
@@ -9,6 +9,9 @@ import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.bolenpad.photophetch.util.StagingPath
@@ -43,14 +46,18 @@ fun ImportScreen(state: AppState) {
 
         HorizontalDivider()
 
-        // ── Scrollable body ──────────────────────────────────────────────────
-        Column(
-            modifier = Modifier
-                .weight(1f)
-                .verticalScroll(rememberScrollState())
-                .padding(horizontal = 32.dp, vertical = 20.dp),
-            verticalArrangement = Arrangement.spacedBy(20.dp),
-        ) {
+        // ── Scrollable body with bottom fade ────────────────────────────────
+        val scrollState = rememberScrollState()
+        val showFade by remember { derivedStateOf { scrollState.value < scrollState.maxValue } }
+
+        Box(modifier = Modifier.weight(1f)) {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .verticalScroll(scrollState)
+                    .padding(horizontal = 32.dp, vertical = 20.dp),
+                verticalArrangement = Arrangement.spacedBy(20.dp),
+            ) {
             // Summary card
             Card {
                 Column(
@@ -134,7 +141,28 @@ 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 ─────────────────────────────────────────────
         HorizontalDivider()