feat: protect status bar when scrolling

Author: heddxh

app/src/main/kotlin/day/vitayuzu/neodb/ui/component/StatusBarProtection.kt

@@ -0,0 +1,45 @@
+package day.vitayuzu.neodb.ui.component
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.gestures.ScrollableState
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+
+/**
+ * Add translucent background under status bar when scrolling.
+ * See: https://developer.android.com/develop/ui/compose/system/system-bars
+ */
+@Suppress("ktlint:compose:modifier-missing-check")
+@Composable
+fun StatusBarProtection(
+    scrollState: ScrollableState,
+    color: Color = MaterialTheme.colorScheme.surfaceContainerLow,
+) {
+    AnimatedVisibility(scrollState.canScrollBackward) {
+        val height = WindowInsets.statusBars.getTop(LocalDensity.current).toFloat()
+        Canvas(Modifier.fillMaxSize()) {
+            val gradient = Brush.verticalGradient(
+                colors = listOf(
+                    color.copy(alpha = 1f),
+                    color.copy(alpha = .8f),
+                    Color.Transparent,
+                ),
+                startY = 0f,
+                endY = height,
+            )
+            drawRect(
+                brush = gradient,
+                size = Size(size.width, height),
+            )
+        }
+    }
+}

app/src/main/kotlin/day/vitayuzu/neodb/ui/page/detail/DetailPage.kt

@@ -25,6 +25,7 @@ import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowForward
 import androidx.compose.material.icons.filled.Add
@@ -72,6 +73,7 @@ import day.vitayuzu.neodb.ui.component.SharedEntryCardKey
 import day.vitayuzu.neodb.ui.component.SharedFab
 import day.vitayuzu.neodb.ui.component.SharedFabKey
 import day.vitayuzu.neodb.ui.component.StarsWithScores
+import day.vitayuzu.neodb.ui.component.StatusBarProtection
 import day.vitayuzu.neodb.ui.component.UserMarkCard
 import day.vitayuzu.neodb.ui.model.Detail
 import day.vitayuzu.neodb.ui.model.Mark
@@ -212,7 +214,9 @@ private fun DetailContent(
     isShowingAll: Boolean = false,
     showMore: () -> Unit = {},
 ) {
+    val lazyListState = rememberLazyListState()
     LazyColumn(
+        state = lazyListState,
         modifier = modifier
             .fillMaxSize()
             .padding(horizontal = 16.dp)
@@ -284,6 +288,8 @@ private fun DetailContent(
             }
         }
     }
+
+    StatusBarProtection(lazyListState)
 }
 
 @Composable

app/src/main/kotlin/day/vitayuzu/neodb/ui/page/home/HomeScreen.kt

@@ -36,6 +36,7 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import coil3.compose.AsyncImage
 import day.vitayuzu.neodb.ui.component.SharedSearchFab
+import day.vitayuzu.neodb.ui.component.StatusBarProtection
 import day.vitayuzu.neodb.ui.model.Entry
 import day.vitayuzu.neodb.util.AppNavigator
 import day.vitayuzu.neodb.util.EntryType
@@ -50,23 +51,27 @@ fun HomeScreen(
     sharedBottomBar: @Composable () -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
-    LocalNavigator.current
+
+    val scrollState = rememberScrollState()
 
     // TODO: show fetched data immediately
     Scaffold(
         modifier = modifier,
         bottomBar = sharedBottomBar,
         floatingActionButton = { SharedSearchFab() },
-    ) {
+    ) { padding ->
         PullToRefreshBox(
             isRefreshing = uiState.isLoading,
             onRefresh = { viewModel.updateTrending() },
-            modifier = Modifier.padding(it).consumeWindowInsets(it),
         ) {
             Column(
                 // PullToRefresh relies on child scroll event to detect scroll gestures,
                 // so make sure child composable has enough height.
-                modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .verticalScroll(scrollState)
+                    .padding(padding)
+                    .consumeWindowInsets(padding),
                 verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.Top),
             ) {
                 // Book
@@ -102,6 +107,8 @@ fun HomeScreen(
             }
         }
     }
+
+    StatusBarProtection(scrollState)
 }
 
 @OptIn(ExperimentalSharedTransitionApi::class)

app/src/main/kotlin/day/vitayuzu/neodb/ui/page/search/SearchPage.kt

@@ -4,13 +4,14 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.input.TextFieldLineLimits
 import androidx.compose.foundation.text.input.TextFieldState
@@ -45,6 +46,7 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import day.vitayuzu.neodb.R
 import day.vitayuzu.neodb.ui.component.EntryMarkCard
 import day.vitayuzu.neodb.ui.component.EntryTypeFilterChipsRow
+import day.vitayuzu.neodb.ui.component.StatusBarProtection
 import day.vitayuzu.neodb.ui.model.Entry
 import day.vitayuzu.neodb.util.BASE_URL
 import day.vitayuzu.neodb.util.EntryType
@@ -64,7 +66,7 @@ fun SearchPage(modifier: Modifier = Modifier, viewModel: SearchViewModel = hiltV
             enter = scaleIn(),
             exit = scaleOut() + fadeOut(),
         ),
-    ) {
+    ) { padding ->
         val textFieldState = rememberTextFieldState()
 
         // Perform search request
@@ -75,14 +77,15 @@ fun SearchPage(modifier: Modifier = Modifier, viewModel: SearchViewModel = hiltV
                 .collectLatest { viewModel.onSearch(it.toString()) }
         }
 
-        Box(Modifier.padding(it).consumeWindowInsets(it).fillMaxSize()) {
+        Box(Modifier.fillMaxSize()) {
             if (viewModel.isSearching) {
                 LoadingIndicator(
                     Modifier.align(Alignment.Center).size(128.dp),
                 )
             }
             SearchPageContent(
-                state = textFieldState,
+                windowInsetsPadding = padding,
+                textFieldState = textFieldState,
                 instanceName = viewModel.instanceName,
                 result = viewModel.searchResult.toList(),
             )
@@ -95,19 +98,23 @@ data object SearchPageKey
 @Composable
 private fun SearchPageContent(
     modifier: Modifier = Modifier,
-    state: TextFieldState = rememberTextFieldState(),
+    windowInsetsPadding: PaddingValues = PaddingValues(),
+    textFieldState: TextFieldState = rememberTextFieldState(),
     instanceName: String = BASE_URL,
     result: List<Entry> = emptyList(),
 ) {
     val selectedEntryTypes = rememberSaveable { mutableStateSetOf<EntryType>() }
+    val lazyListState = rememberLazyListState()
 
     LazyColumn(
         modifier = modifier,
+        state = lazyListState,
         horizontalAlignment = Alignment.CenterHorizontally,
+        contentPadding = windowInsetsPadding,
     ) {
         item {
             SearchBarInputField(
-                state = state,
+                state = textFieldState,
                 instanceName = instanceName,
                 modifier = Modifier
                     .fillMaxWidth()
@@ -135,6 +142,8 @@ private fun SearchPageContent(
             EntryMarkCard(entry = it, mark = null)
         }
     }
+
+    StatusBarProtection(lazyListState)
 }
 
 @Composable