Feature/add navigation rail catalog home layout

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/CatalogListContent.kt

@@ -14,6 +14,7 @@ import dev.marlonlom.apps.cappajv.features.catalog_list.screens.CompactTableTopC
 import dev.marlonlom.apps.cappajv.features.catalog_list.screens.DefaultPortraitCatalogListScreen
 import dev.marlonlom.apps.cappajv.features.catalog_list.screens.LandscapeCompactCatalogListScreen
 import dev.marlonlom.apps.cappajv.features.catalog_list.screens.LandscapeTwoPaneCatalogListScreen
+import dev.marlonlom.apps.cappajv.features.catalog_list.screens.TableTopCatalogListScreen
 import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
 import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
 import dev.marlonlom.apps.cappajv.ui.main.scaffold.ScaffoldContentType
@@ -46,6 +47,19 @@ fun CatalogListContent(
 ) {
   when {
 
+    appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal)
+      .and(appState.isCompactHeight) -> {
+      LandscapeCompactCatalogListScreen(
+        appState = appState,
+        catalogItemsListState = catalogItemsListState,
+        catalogItems = catalogItems,
+        categories = categories,
+        selectedCategory = selectedCategory,
+        onSelectedCategoryChanged = onSelectedCategoryChanged,
+        onCatalogItemSelected = onCatalogItemSelected,
+      )
+    }
+
     appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal)
       .and(listOf(NavigationType.EXPANDED_NAV, NavigationType.NAVIGATION_RAIL).contains(appState.navigationType)) -> {
       LandscapeTwoPaneCatalogListScreen(
@@ -72,8 +86,10 @@ fun CatalogListContent(
       )
     }
 
-    appState.isLandscape.and(appState.devicePosture == DevicePosture.Normal).and(appState.isCompactHeight) -> {
-      LandscapeCompactCatalogListScreen(
+    (appState.devicePosture is DevicePosture.Separating.TableTop)
+      .and(appState.isCompactWidth.not())
+      .and(appState.isLandscape.not()) -> {
+      TableTopCatalogListScreen(
         appState = appState,
         catalogItemsListState = catalogItemsListState,
         catalogItems = catalogItems,

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/parts/CatalogListHeadline.kt

@@ -24,6 +24,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import dev.marlonlom.apps.cappajv.R
+import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
 import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
 import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType
 
@@ -42,11 +43,17 @@ fun CatalogListHeadline(
 ) {
 
   val rowPaddingValues = when {
+    appState.isLandscape.not().and(appState.devicePosture is DevicePosture.Separating)
+      .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> PaddingValues(vertical = 20.dp)
+
     appState.isCompactHeight -> PaddingValues(vertical = 20.dp)
     else -> PaddingValues(top = 40.dp, bottom = 20.dp)
   }
 
   val headlineTextStyle = when {
+    appState.isLandscape.not().and(appState.devicePosture is DevicePosture.Separating)
+      .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall
+
     appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> MaterialTheme.typography.headlineSmall
     else -> MaterialTheme.typography.headlineLarge
   }

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/screens/TableTopCatalogListScreen.kt

@@ -0,0 +1,100 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_list.screens
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeContentPadding
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItemTuple
+import dev.marlonlom.apps.cappajv.features.catalog_list.parts.CatalogListHeadline
+import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogCategoriesChipGroup
+import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogListBanner
+import dev.marlonlom.apps.cappajv.features.catalog_list.slots.CatalogListTuplesSlot
+import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
+import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
+
+
+/**
+ * TableTop catalog list screen composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param catalogItemsListState Catalog items lazy list state.
+ * @param catalogItems Catalog items list.
+ * @param categories Categories list.
+ * @param selectedCategory Selected category name.
+ * @param onSelectedCategoryChanged Action for category selected.
+ * @param onCatalogItemSelected Action for catalog item selected.
+ * @param modifier Modifier for this composable.
+ */
+@ExperimentalLayoutApi
+@ExperimentalFoundationApi
+@Composable
+fun TableTopCatalogListScreen(
+  appState: CappajvAppState,
+  catalogItemsListState: LazyListState,
+  catalogItems: List<CatalogItemTuple>,
+  categories: List<String>,
+  selectedCategory: String,
+  onSelectedCategoryChanged: (String) -> Unit,
+  onCatalogItemSelected: (Long) -> Unit,
+  modifier: Modifier = Modifier,
+) {
+  val hingeRatio = (appState.devicePosture as DevicePosture.Separating.TableTop).hingeRatio
+
+  Column(
+    modifier = modifier.fillMaxWidth(),
+  ) {
+    Row(
+      modifier = modifier.fillMaxHeight(hingeRatio),
+      horizontalArrangement = Arrangement.spacedBy(20.dp)
+    ) {
+      Column(modifier = modifier.fillMaxWidth(0.45f)) {
+        CatalogListHeadline(appState)
+        CatalogListBanner(appState)
+        CatalogCategoriesChipGroup(
+          categories = categories,
+          selectedCategory = selectedCategory,
+          onCategoryChipSelected = { onSelectedCategoryChanged(it) },
+        )
+      }
+      Column(modifier = modifier.safeContentPadding()) {
+        CatalogListTuplesSlot(
+          appState = appState,
+          catalogItemsListState = catalogItemsListState,
+          catalogTuples = catalogItems,
+          onCatalogItemTupleClicked = onCatalogItemSelected,
+        )
+      }
+    }
+    Row(
+      modifier = modifier
+        .fillMaxSize()
+        .padding(top = 30.dp)
+        .safeContentPadding()
+        .background(
+          MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.25f)
+        ),
+    ) {
+
+    }
+  }
+}

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_list/slots/CatalogListBanner.kt

@@ -38,6 +38,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.lerp
 import dev.marlonlom.apps.cappajv.R
+import dev.marlonlom.apps.cappajv.ui.layout.DevicePosture
 import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
 import dev.marlonlom.apps.cappajv.ui.navigation.NavigationType
 import kotlinx.coroutines.delay
@@ -77,6 +78,10 @@ fun CatalogListBanner(
   }
 
   val horizontalPagerHeight = when {
+    appState.isLandscape.not()
+      .and(appState.devicePosture is DevicePosture.Separating)
+      .and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp
+
     appState.isLandscape.and(appState.navigationType == NavigationType.NAVIGATION_RAIL) -> 100.dp
     appState.isLandscape -> 120.dp
     else -> 160.dp