Change TopBar.kt to use LargeTopAppBar (#2900)

This squashed commit from the PR originally contains the following commits:
* Change TopBar.kt to use LargeTopAppBar

* `PreferenceScaffold`: Change scroll behavior
Change scroll behavior to use `enterAlwaysScrollBehavior()` instead of `exitUntilCollapsedScrollBehavior()` to fix returning to expanded state issues.

* `TopBar`: Remove custom text weight & fix variable
Remove custom weight on Text() and return topBarSize variable to old value (since it is used in PreferenceSearchScaffold)

build.gradle

@@ -323,7 +323,7 @@ dependencies {
     implementation "androidx.compose.foundation:foundation:$compose_version"
     implementation "androidx.compose.material:material-icons-extended:$compose_version"
     implementation "androidx.compose.material:material:$compose_version"
-    implementation "androidx.compose.material3:material3:1.0.0-alpha14"
+    implementation "androidx.compose.material3:material3:1.0.0-beta01"
     implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
     implementation "androidx.compose.compiler:compiler:$compose_compiler_version"
     implementation "androidx.constraintlayout:constraintlayout:2.1.4"

lawnchair/src/app/lawnchair/ui/preferences/HiddenAppsPreferences.kt

@@ -52,7 +52,6 @@ fun HiddenAppsPreferences() {
     val state = rememberLazyListState()
     PreferenceScaffold(
         label = pageTitle,
-        floating = rememberFloatingState(state),
     ) {
         Crossfade(targetState = optionalApps.isPresent) { present ->
             if (present) {

lawnchair/src/app/lawnchair/ui/preferences/PickAppForGesture.kt

@@ -40,7 +40,6 @@ fun PickAppForGesture() {
 
     PreferenceScaffold(
         label = stringResource(id = R.string.pick_app_for_gesture),
-        floating = rememberFloatingState(state),
     ) {
         Crossfade(targetState = optionalApps.isPresent) { present ->
             if (present) {

lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceLayout.kt

@@ -45,7 +45,6 @@ fun PreferenceLayout(
 ) {
     PreferenceScaffold(
         backArrowVisible = backArrowVisible,
-        floating = rememberFloatingState(scrollState),
         label = label,
         actions = actions,
         bottomBar = bottomBar,
@@ -71,7 +70,6 @@ fun PreferenceLayoutLazyColumn(
 ) {
     PreferenceScaffold(
         backArrowVisible = backArrowVisible,
-        floating = rememberFloatingState(state),
         label = label,
         actions = actions,
     ) {
@@ -83,15 +81,3 @@ fun PreferenceLayoutLazyColumn(
         )
     }
 }
-
-@Composable
-fun rememberFloatingState(state: ScrollState?) =
-    remember(state) {
-        if (state != null) derivedStateOf { state.value > 0 } else mutableStateOf(false)
-    }
-
-@Composable
-fun rememberFloatingState(state: LazyListState) =
-    remember(state) {
-        derivedStateOf { state.firstVisibleItemIndex > 0 || state.firstVisibleItemScrollOffset > 0 }
-    }

lawnchair/src/app/lawnchair/ui/preferences/components/PreferenceScaffold.kt

@@ -1,3 +1,20 @@
+
+/*
+ * Copyright 2022, Lawnchair
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 package app.lawnchair.ui.preferences.components
 
 import androidx.compose.foundation.layout.*
@@ -5,30 +22,35 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.material3.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import com.android.quickstep.SysUINavigationMode
 import com.google.accompanist.insets.ui.Scaffold
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun PreferenceScaffold(
     backArrowVisible: Boolean = true,
-    floating: State<Boolean> = remember { mutableStateOf(false) },
     label: String,
     actions: @Composable RowScope.() -> Unit = {},
     bottomBar: @Composable () -> Unit = { BottomSpacer() },
     content: @Composable (PaddingValues) -> Unit
 ) {
+    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
     Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         topBar = {
             TopBar(
                 backArrowVisible = backArrowVisible,
-                floating = floating.value,
                 label = label,
                 actions = actions,
+                scrollBehavior = scrollBehavior
             )
         },
         bottomBar = bottomBar,
-        contentPadding = WindowInsets.systemBars.only(WindowInsetsSides.Horizontal).asPaddingValues()
+        contentPadding = WindowInsets.systemBars.only(WindowInsetsSides.Horizontal).asPaddingValues(),
     ) {
         content(it)
     }

lawnchair/src/app/lawnchair/ui/preferences/components/TopBar.kt

@@ -16,6 +16,7 @@
 
 package app.lawnchair.ui.preferences.components
 
+import androidx.compose.animation.core.FastOutLinearInEasing
 import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
@@ -27,65 +28,72 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun TopBar(
     backArrowVisible: Boolean,
-    floating: Boolean,
+    scrollBehavior: TopAppBarScrollBehavior? = null,
     label: String,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
     val backDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher
-    val scrollFraction = if (floating) 1f else 0f
+ 
+    val containerColor: Color = MaterialTheme.colorScheme.surface
+    val scrolledContainerColor: Color = MaterialTheme.colorScheme.surfaceColorAtElevation(3.0.dp)
 
-    val colors = TopAppBarDefaults.smallTopAppBarColors()
-    val appBarContainerColor by colors.containerColor(scrollFraction)
-    val navigationIconContentColor = colors.navigationIconContentColor(scrollFraction)
-    val titleContentColor = colors.titleContentColor(scrollFraction)
-    val actionIconContentColor = colors.actionIconContentColor(scrollFraction)
+    fun containerColor(colorTransitionFraction: Float): Color {
+        return lerp(
+            containerColor,
+            scrolledContainerColor,
+            FastOutLinearInEasing.transform(colorTransitionFraction)
+        )
+    }
 
-    Surface(color = appBarContainerColor) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
+    val backgroundColor = containerColor(scrollBehavior?.state?.overlappedFraction ?: 0f)
+
+    val foregroundColors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+        containerColor = Color.Transparent,
+        scrolledContainerColor = Color.Transparent
+    )
+
+    Surface (
+        color = backgroundColor
+    ) {
+        LargeTopAppBar(
             modifier = Modifier
                 .statusBarsPadding()
                 .fillMaxWidth()
-                .height(topBarSize)
                 .padding(horizontal = 4.dp),
-        ) {
-            if (backArrowVisible) {
-                CompositionLocalProvider(LocalContentColor provides navigationIconContentColor.value) {
-                    ClickableIcon(
-                        imageVector = backIcon(),
-                        onClick = { backDispatcher?.onBackPressed() },
-                    )
-                }
-            }
-            Text(
-                text = label,
-                style = MaterialTheme.typography.titleLarge,
-                color = titleContentColor.value,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-                modifier = Modifier
-                    .padding(horizontal = if (backArrowVisible) 4.dp else 12.dp)
-                    .weight(weight = 1f),
-            )
-            CompositionLocalProvider(LocalContentColor provides actionIconContentColor.value) {
-                Row(
-                    modifier = Modifier.fillMaxHeight(),
-                    horizontalArrangement = Arrangement.End,
-                    verticalAlignment = Alignment.CenterVertically,
-                    content = actions,
+            title = {
+                Text(
+                    text = label,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
                 )
-            }
-        }
-    }
+            },
+            actions = actions,
+            navigationIcon = {
+                if (backArrowVisible) {
+                        ClickableIcon(
+                            imageVector = backIcon(),
+                            onClick = { backDispatcher?.onBackPressed() },
+                        )
+                } else {
+                    null
+                }
+            },
+            scrollBehavior = scrollBehavior,
+            colors = foregroundColors
+        )
+   }
 }
 
 @Composable

lawnchair/src/app/lawnchair/ui/preferences/components/colorpreference/pickers/CustomColorPicker.kt

@@ -189,6 +189,7 @@ fun CustomColorPicker(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun HexColorPicker(
     modifier: Modifier = Modifier,