Update for you top app bar

Change-Id: I95c8082198e1d1068e9ef674b005d7999e1b4542

core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/component/TopAppBar.kt

@@ -25,6 +25,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarColors
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -40,6 +42,7 @@ fun NiaTopAppBar(
     actionIcon: ImageVector,
     actionIconContentDescription: String?,
     modifier: Modifier = Modifier,
+    colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
     onNavigationClick: () -> Unit = {},
     onActionClick: () -> Unit = {}
 ) {
@@ -63,6 +66,7 @@ fun NiaTopAppBar(
                 )
             }
         },
+        colors = colors,
         modifier = modifier
     )
 }

feature-foryou/src/main/java/com/google/samples/apps/nowinandroid/feature/foryou/ForYouScreen.kt

@@ -22,11 +22,13 @@ import androidx.annotation.IntRange
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.consumedWindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
@@ -53,8 +55,10 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.material3.windowsizeclass.WindowSizeClass
 import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
@@ -63,6 +67,7 @@ import androidx.compose.runtime.collectAsState
 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.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
@@ -114,6 +119,7 @@ fun ForYouRoute(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
 @Composable
 fun ForYouScreen(
     windowSizeClass: WindowSizeClass,
@@ -126,29 +132,8 @@ fun ForYouScreen(
     modifier: Modifier = Modifier,
 ) {
     NiaGradientBackground {
-        // TODO: Replace with `LazyVerticalGrid` when blocking bugs are fixed:
-        //       https://issuetracker.google.com/issues/230514914
-        //       https://issuetracker.google.com/issues/231320714
-        BoxWithConstraints(
-            modifier = modifier
-        ) {
-            val numberOfColumns = when (windowSizeClass.widthSizeClass) {
-                WindowWidthSizeClass.Compact, WindowWidthSizeClass.Medium -> 1
-                else -> floor(maxWidth / 300.dp).toInt().coerceAtLeast(1)
-            }
-
-            LazyColumn(modifier = Modifier.fillMaxSize()) {
-                item {
-                    Spacer(
-                        // TODO: Replace with windowInsetsTopHeight after
-                        //       https://issuetracker.google.com/issues/230383055
-                        Modifier.windowInsetsPadding(
-                            WindowInsets.safeDrawing.only(WindowInsetsSides.Top)
-                        )
-                    )
-                }
-
-                item {
+        Scaffold(
+            topBar = {
                 NiaTopAppBar(
                     titleRes = R.string.top_app_bar_title,
                     navigationIcon = Icons.Filled.Search,
@@ -159,9 +144,32 @@ fun ForYouScreen(
                     actionIconContentDescription = stringResource(
                         id = R.string.top_app_bar_navigation_button_content_desc
                     ),
+                    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                        containerColor = Color.Transparent
+                    ),
+                    modifier = Modifier.windowInsetsPadding(
+                        WindowInsets.safeDrawing.only(WindowInsetsSides.Top)
                     )
+                )
+            },
+            containerColor = Color.Transparent
+        ) { innerPadding ->
+            // TODO: Replace with `LazyVerticalGrid` when blocking bugs are fixed:
+            //       https://issuetracker.google.com/issues/230514914
+            //       https://issuetracker.google.com/issues/231320714
+            BoxWithConstraints(
+                modifier = modifier
+                    .padding(innerPadding)
+                    .consumedWindowInsets(innerPadding)
+            ) {
+                val numberOfColumns = when (windowSizeClass.widthSizeClass) {
+                    WindowWidthSizeClass.Compact, WindowWidthSizeClass.Medium -> 1
+                    else -> floor(maxWidth / 300.dp).toInt().coerceAtLeast(1)
                 }
 
+                LazyColumn(
+                    modifier = Modifier.fillMaxSize(),
+                ) {
                     InterestsSelection(
                         interestsSelectionState = interestsSelectionState,
                         showLoadingUIIfLoading = true,
@@ -192,6 +200,7 @@ fun ForYouScreen(
                 }
             }
         }
+    }
 }
 
 /**