Add Scaffold and TopAppBar to catalog app

app-ui-catalog/build.gradle.kts

@@ -16,4 +16,5 @@ dependencies {
     implementation(projects.core.ui.compose.designsystem)
 
     implementation(libs.androidx.compose.material)
+    implementation(libs.androidx.compose.material.icons.extended)
 }

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/CatalogContent.kt

@@ -1,15 +1,16 @@
 package app.k9mail.ui.catalog.ui
 
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import app.k9mail.core.ui.compose.common.DevicePreviews
-import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline4
+import app.k9mail.core.ui.compose.designsystem.template.Scaffold
 import app.k9mail.core.ui.compose.theme.K9Theme
-import app.k9mail.core.ui.compose.theme.MainTheme
 import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
 import app.k9mail.ui.catalog.items.moleculeItems
 import app.k9mail.ui.catalog.ui.CatalogContract.State
@@ -23,9 +24,7 @@ import app.k9mail.ui.catalog.ui.atom.items.selectionControlItems
 import app.k9mail.ui.catalog.ui.atom.items.textFieldItems
 import app.k9mail.ui.catalog.ui.atom.items.typographyItems
 import app.k9mail.ui.catalog.ui.common.PagedContent
-import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding
-import app.k9mail.ui.catalog.ui.common.theme.ThemeSelector
-import app.k9mail.ui.catalog.ui.common.theme.ThemeVariantSelector
+import app.k9mail.ui.catalog.ui.common.ThemeTopAppBar
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
 
@@ -38,33 +37,22 @@ fun CatalogContent(
     contentPadding: PaddingValues,
     modifier: Modifier = Modifier,
 ) {
-    Column(
-        modifier = modifier.padding(contentPadding),
+    val contentPadding = WindowInsets.systemBars.asPaddingValues()
+
+    Scaffold(
+        modifier = Modifier
+            .padding(top = contentPadding.calculateTopPadding())
+            .then(modifier),
+        topBar = { toggleDrawer ->
+            ThemeTopAppBar(
+                onNavigationClick = toggleDrawer,
+                theme = state.theme,
+                themeVariant = state.themeVariant,
+                onThemeClick = onThemeChanged,
+                onThemeVariantClick = onThemeVariantChanged,
+            )
+        },
     ) {
-        TextHeadline4(
-            text = "Thunderbird Catalog",
-            modifier = Modifier
-                .padding(
-                    start = MainTheme.spacings.double,
-                    top = MainTheme.spacings.default,
-                    end = MainTheme.spacings.double,
-                )
-                .fillMaxWidth(),
-        )
-        ThemeSelector(
-            theme = state.theme,
-            modifier = Modifier
-                .fillMaxWidth()
-                .itemDefaultPadding(),
-            onThemeChangeClick = onThemeChanged,
-        )
-        ThemeVariantSelector(
-            themeVariant = state.themeVariant,
-            modifier = Modifier
-                .fillMaxWidth()
-                .itemDefaultPadding(),
-            onThemeVariantChange = onThemeVariantChanged,
-        )
         PagedContent(
             pages = pages,
             initialPage = "Typography",

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/CatalogContract.kt

@@ -11,9 +11,11 @@ interface CatalogContract {
         THUNDERBIRD("Thunderbird"),
     }
 
-    enum class ThemeVariant {
-        LIGHT,
-        DARK,
+    enum class ThemeVariant(
+        val displayName: String,
+    ) {
+        LIGHT("Light"),
+        DARK("Dark"),
     }
 
     interface ViewModel : UnidirectionalViewModel<State, Event, Nothing>

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -56,7 +57,9 @@ fun <T> PagedContent(
             HorizontalPager(
                 pageCount = pages.size,
                 state = pagerState,
-                modifier = Modifier.fillMaxSize(),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(bottom = MainTheme.sizes.topBarHeight),
             ) { page ->
                 LazyVerticalGrid(
                     columns = GridCells.Adaptive(300.dp),

app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/ThemeTopAppBar.kt

@@ -0,0 +1,49 @@
+package app.k9mail.ui.catalog.ui.common
+
+import androidx.compose.material.icons.filled.DarkMode
+import androidx.compose.material.icons.filled.LightMode
+import androidx.compose.material.icons.filled.ShuffleOn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonIcon
+import app.k9mail.core.ui.compose.designsystem.organism.TopAppBar
+import app.k9mail.core.ui.compose.theme.Icons
+import app.k9mail.ui.catalog.ui.CatalogContract.Theme
+import app.k9mail.ui.catalog.ui.CatalogContract.ThemeVariant
+import androidx.compose.material.icons.Icons as MaterialIcons
+
+@Composable
+fun ThemeTopAppBar(
+    onNavigationClick: () -> Unit,
+    theme: Theme,
+    themeVariant: ThemeVariant,
+    onThemeClick: () -> Unit,
+    onThemeVariantClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    TopAppBar(
+        title = "${theme.displayName} Catalog",
+        navigationIcon = {
+            ButtonIcon(
+                onClick = onNavigationClick,
+                imageVector = Icons.Outlined.menu,
+            )
+        },
+        actions = {
+            ButtonIcon(
+                onClick = onThemeClick,
+                imageVector = MaterialIcons.Filled.ShuffleOn,
+                contentDescription = "${theme.displayName} Theme",
+            )
+            ButtonIcon(
+                onClick = onThemeVariantClick,
+                imageVector = when (themeVariant) {
+                    ThemeVariant.LIGHT -> MaterialIcons.Filled.DarkMode
+                    ThemeVariant.DARK -> MaterialIcons.Filled.LightMode
+                },
+                contentDescription = "${theme.displayName} Theme Variant",
+            )
+        },
+        modifier = modifier,
+    )
+}