Modify main search bar

app/src/main/java/org/xtimms/tokusho/MainActivity.kt

@@ -4,11 +4,11 @@ import android.content.Intent
 import android.os.Bundle
 import android.util.Log
 import androidx.activity.ComponentActivity
-import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
@@ -18,21 +18,23 @@ import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.lazy.grid.LazyGridState
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.dp
@@ -46,7 +48,6 @@ import kotlinx.coroutines.launch
 import org.xtimms.tokusho.core.Navigation
 import org.xtimms.tokusho.core.components.BottomNavBar
 import org.xtimms.tokusho.core.components.TopAppBar
-import org.xtimms.tokusho.sections.list.LIST_DESTINATION
 import org.xtimms.tokusho.ui.theme.TokushoTheme
 import org.xtimms.tokusho.utils.lang.processLifecycleScope
 import javax.inject.Inject
@@ -119,16 +120,24 @@ fun MainView(
     var topBarHeightPx by remember { mutableFloatStateOf(0f) }
     val topBarOffsetY = remember { Animatable(0f) }
 
+    val scroll: LazyGridState = rememberLazyGridState()
+
     Scaffold(
         topBar = {
             if (isCompactScreen) {
+                val isScrolled by remember {
+                    derivedStateOf { scroll.firstVisibleItemScrollOffset > 0 }
+                }
+                val animatedBgAlpha by animateFloatAsState(
+                    if (isScrolled) 1f else 0f,
+                    label = "Top Bar Background",
+                )
                 TopAppBar(
                     navController = navController,
                     modifier = Modifier
-                        .padding(0.dp, 8.dp)
+                        .statusBarsPadding()
-                        .graphicsLayer {
+                        .padding(0.dp, 16.dp),
-                            translationY = topBarOffsetY.value
+                    backgroundAlphaProvider = { animatedBgAlpha },
-                        }
                 )
             }
         },
@@ -161,7 +170,8 @@ fun MainView(
                         bottom = systemBarsPadding.calculateBottomPadding()
                     ),
                     topBarHeightPx = topBarHeightPx,
-                    topBarOffsetY = topBarOffsetY
+                    topBarOffsetY = topBarOffsetY,
+                    listState = scroll
                 )
             }
         } else {
@@ -178,7 +188,8 @@ fun MainView(
                 ),
                 padding = padding,
                 topBarHeightPx = topBarHeightPx,
-                topBarOffsetY = topBarOffsetY
+                topBarOffsetY = topBarOffsetY,
+                listState = scroll
             )
         }
     }

app/src/main/java/org/xtimms/tokusho/core/Navigation.kt

@@ -7,6 +7,7 @@ import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.animation.core.Easing
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.IntOffset
@@ -36,6 +37,8 @@ import org.xtimms.tokusho.sections.settings.about.ABOUT_DESTINATION
 import org.xtimms.tokusho.sections.settings.about.AboutView
 import org.xtimms.tokusho.sections.settings.about.UPDATES_DESTINATION
 import org.xtimms.tokusho.sections.settings.about.UpdateView
+import org.xtimms.tokusho.sections.settings.advanced.ADVANCED_DESTINATION
+import org.xtimms.tokusho.sections.settings.advanced.AdvancedView
 import org.xtimms.tokusho.sections.settings.appearance.APPEARANCE_DESTINATION
 import org.xtimms.tokusho.sections.settings.appearance.AppearanceView
 import org.xtimms.tokusho.sections.settings.appearance.DARK_THEME_DESTINATION
@@ -63,6 +66,7 @@ fun Navigation(
     padding: PaddingValues,
     topBarHeightPx: Float,
     topBarOffsetY: Animatable<Float, AnimationVector1D>,
+    listState: LazyGridState,
 ) {
 
     val navigateBack: () -> Unit = { navController.popBackStack() }
@@ -124,7 +128,8 @@ fun Navigation(
                 },
                 padding = padding,
                 topBarHeightPx = topBarHeightPx,
-                topBarOffsetY = topBarOffsetY
+                topBarOffsetY = topBarOffsetY,
+                listState = listState
             )
         }
 

app/src/main/java/org/xtimms/tokusho/core/components/TopAppBar.kt

@@ -1,13 +1,13 @@
 package org.xtimms.tokusho.core.components
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.RssFeed
@@ -50,8 +50,10 @@ import org.xtimms.tokusho.ui.theme.TokushoTheme
 fun TopAppBar(
     navController: NavController,
     modifier: Modifier = Modifier,
+    backgroundAlphaProvider: () -> Float,
 ) {
     val navBackStackEntry by navController.currentBackStackEntryAsState()
+
     val isVisible by remember {
         derivedStateOf {
             when (navBackStackEntry?.destination?.route) {
@@ -69,10 +71,15 @@ fun TopAppBar(
         exit = materialSharedAxisXOut(targetOffsetX = { -(it * initialOffset).toInt() })
     ) {
         Row(
-            modifier = modifier
+            modifier = Modifier
-                .statusBarsPadding()
                 .fillMaxWidth()
-                .padding(start = 16.dp, end = 16.dp),
+                .background(
+                    MaterialTheme.colorScheme
+                        .surfaceColorAtElevation(3.dp)
+                        .copy(
+                            alpha = backgroundAlphaProvider()
+                        )
+                ),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(8.dp),
         ) {
@@ -80,14 +87,15 @@ fun TopAppBar(
                 onClick = { navController.navigate(SEARCH_DESTINATION) },
                 modifier = modifier
                     .weight(1f)
-                    .height(56.dp),
+                    .height(56.dp)
+                    .padding(start = 16.dp),
                 shape = RoundedCornerShape(50),
                 colors = CardDefaults.cardColors(
                     containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(6.dp)
                 ),
             ) {
                 Row(
-                    modifier = modifier
+                    modifier = Modifier
                         .padding(horizontal = 16.dp)
                         .fillMaxHeight(),
                     horizontalArrangement = Arrangement.spacedBy(16.dp),
@@ -106,11 +114,11 @@ fun TopAppBar(
                 }
             }
             Row(
-                modifier = modifier,
+                modifier = modifier.padding(end = 16.dp),
             ) {
                 IconButton(
                     onClick = { },
-                    modifier = modifier.padding(0.dp),
+                    modifier = Modifier.padding(0.dp),
                 ) {
                     Icon(
                         Icons.Outlined.RssFeed,
@@ -120,7 +128,7 @@ fun TopAppBar(
                 }
                 IconButton(
                     onClick = { navController.navigate(SETTINGS_DESTINATION) },
-                    modifier = modifier.padding(0.dp),
+                    modifier = Modifier.padding(0.dp),
                 ) {
                     Icon(
                         Icons.Outlined.Settings,

app/src/main/java/org/xtimms/tokusho/sections/explore/ExploreView.kt

@@ -12,10 +12,9 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.foundation.lazy.grid.rememberLazyGridState
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Bookmarks
 import androidx.compose.material.icons.outlined.Download
@@ -34,7 +33,6 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import androidx.navigation.NavController
 import coil.ImageLoader
 import org.koitharu.kotatsu.parsers.model.MangaSource
 import org.xtimms.tokusho.R
@@ -43,7 +41,6 @@ import org.xtimms.tokusho.core.components.ExploreButton
 import org.xtimms.tokusho.core.components.SourceItem
 import org.xtimms.tokusho.core.components.icons.Dice
 import org.xtimms.tokusho.core.parser.favicon.faviconUri
-import org.xtimms.tokusho.sections.list.LIST_DESTINATION
 import org.xtimms.tokusho.utils.system.toast
 
 const val EXPLORE_DESTINATION = "explore"
@@ -54,6 +51,7 @@ fun ExploreView(
     navigateToSource: (MangaSource) -> Unit,
     topBarHeightPx: Float,
     topBarOffsetY: Animatable<Float, AnimationVector1D>,
+    listState: LazyGridState,
     padding: PaddingValues,
 ) {
     val viewModel: ExploreViewModel = hiltViewModel()
@@ -66,6 +64,7 @@ fun ExploreView(
         event = viewModel,
         topBarHeightPx = topBarHeightPx,
         topBarOffsetY = topBarOffsetY,
+        listState = listState,
         padding = padding
     )
 }
@@ -79,14 +78,13 @@ fun ExploreViewContent(
     nestedScrollConnection: NestedScrollConnection? = null,
     topBarHeightPx: Float = 0f,
     topBarOffsetY: Animatable<Float, AnimationVector1D> = Animatable(0f),
+    listState: LazyGridState,
     padding: PaddingValues = PaddingValues(),
 ) {
 
     val context = LocalContext.current
     val layoutDirection = LocalLayoutDirection.current
 
-    val scrollState = rememberScrollState()
-
     if (uiState.message != null) {
         LaunchedEffect(uiState.message) {
             context.toast(uiState.message)
@@ -100,7 +98,6 @@ fun ExploreViewContent(
             .fillMaxSize(),
         contentAlignment = Alignment.TopCenter
     ) {
-        val listState = rememberLazyGridState()
         val listModifier = Modifier
             .fillMaxWidth()
             .align(Alignment.TopStart)
@@ -110,7 +107,7 @@ fun ExploreViewContent(
                 else Modifier
             )
         LazyVerticalGrid(
-            columns = GridCells.Adaptive(minSize = 72.dp),
+            columns = GridCells.Adaptive(minSize = 90.dp),
             modifier = listModifier
                 .collapsable(
                     state = listState,
@@ -120,7 +117,7 @@ fun ExploreViewContent(
             state = listState,
             contentPadding = PaddingValues(
                 start = padding.calculateStartPadding(layoutDirection) + 8.dp,
-                top = padding.calculateTopPadding(),
+                top = padding.calculateTopPadding() + 8.dp,
                 end = padding.calculateEndPadding(layoutDirection) + 8.dp,
                 bottom = padding.calculateBottomPadding()
             ),