From fc5a078f730679bc2f8a8dee6e9e28b1af82cc8b Mon Sep 17 00:00:00 2001
From: tapframe <85391825+tapframe@users.noreply.github.com>
Date: Wed, 1 Apr 2026 19:01:37 +0530
Subject: [PATCH] feat(catalog): Update CatalogScreen to use BoxWithConstraints
 and dynamic column count for grid layout

---
 .../app/features/catalog/CatalogScreen.kt     | 93 +++++++++++--------
 1 file changed, 54 insertions(+), 39 deletions(-)

diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/catalog/CatalogScreen.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/catalog/CatalogScreen.kt
index acdf2cb59..3f401e250 100644
--- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/catalog/CatalogScreen.kt
+++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/catalog/CatalogScreen.kt
@@ -3,6 +3,7 @@ package com.nuvio.app.features.catalog
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
@@ -35,6 +36,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -91,54 +93,58 @@ fun CatalogScreen(
             }
     }
 
-    Box(
+    BoxWithConstraints(
         modifier = modifier
             .fillMaxSize()
             .background(MaterialTheme.colorScheme.background),
     ) {
-        LazyVerticalGrid(
-            columns = GridCells.Fixed(3),
-            state = gridState,
-            modifier = Modifier.fillMaxSize(),
-            contentPadding = PaddingValues(
-                start = 16.dp,
-                top = with(androidx.compose.ui.platform.LocalDensity.current) { headerHeightPx.toDp() } + 12.dp,
-                end = 16.dp,
-                bottom = nuvioPlatformExtraBottomPadding + 28.dp,
-            ),
-            horizontalArrangement = Arrangement.spacedBy(12.dp),
-            verticalArrangement = Arrangement.spacedBy(18.dp),
-        ) {
-            if (uiState.items.isEmpty() && uiState.isLoading) {
-                items(9) { CatalogSkeletonTile() }
-            } else if (uiState.items.isEmpty()) {
-                item(span = { GridItemSpan(maxLineSpan) }) {
-                    CatalogEmptyState(errorMessage = uiState.errorMessage)
-                }
-            } else {
-                items(
-                    items = uiState.items,
-                    key = { item -> item.stableKey() },
-                ) { item ->
-                    CatalogPosterTile(
-                        item = item,
-                        onClick = onPosterClick?.let { { it(item) } },
-                    )
-                }
-                if (uiState.isLoading) {
+        val columns = remember(maxWidth) { catalogGridColumnsForWidth(maxWidth) }
+
+        Box(modifier = Modifier.fillMaxSize()) {
+            LazyVerticalGrid(
+                columns = GridCells.Fixed(columns),
+                state = gridState,
+                modifier = Modifier.fillMaxSize(),
+                contentPadding = PaddingValues(
+                    start = 16.dp,
+                    top = with(androidx.compose.ui.platform.LocalDensity.current) { headerHeightPx.toDp() } + 12.dp,
+                    end = 16.dp,
+                    bottom = nuvioPlatformExtraBottomPadding + 28.dp,
+                ),
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+                verticalArrangement = Arrangement.spacedBy(18.dp),
+            ) {
+                if (uiState.items.isEmpty() && uiState.isLoading) {
+                    items(columns * 3) { CatalogSkeletonTile() }
+                } else if (uiState.items.isEmpty()) {
                     item(span = { GridItemSpan(maxLineSpan) }) {
-                        CatalogLoadingFooter()
+                        CatalogEmptyState(errorMessage = uiState.errorMessage)
+                    }
+                } else {
+                    items(
+                        items = uiState.items,
+                        key = { item -> item.stableKey() },
+                    ) { item ->
+                        CatalogPosterTile(
+                            item = item,
+                            onClick = onPosterClick?.let { { it(item) } },
+                        )
+                    }
+                    if (uiState.isLoading) {
+                        item(span = { GridItemSpan(maxLineSpan) }) {
+                            CatalogLoadingFooter()
+                        }
                     }
                 }
             }
-        }
 
-        CatalogHeader(
-            title = title,
-            subtitle = subtitle,
-            modifier = Modifier.onSizeChanged { headerHeightPx = it.height },
-            onBack = onBack,
-        )
+            CatalogHeader(
+                title = title,
+                subtitle = subtitle,
+                modifier = Modifier.onSizeChanged { headerHeightPx = it.height },
+                onBack = onBack,
+            )
+        }
     }
 }
 
@@ -288,3 +294,12 @@ private fun PosterShape.catalogAspectRatio(): Float =
         PosterShape.Square -> 1f
         PosterShape.Landscape -> 1.2f
     }
+
+private fun catalogGridColumnsForWidth(screenWidth: Dp): Int =
+    when {
+        screenWidth >= 1400.dp -> 7
+        screenWidth >= 1200.dp -> 6
+        screenWidth >= 1000.dp -> 5
+        screenWidth >= 840.dp -> 4
+        else -> 3
+    }