feat(search): Add dynamic column count for discover content based on screen width

This commit is contained in:
tapframe 2026-04-01 18:38:53 +05:30
parent b8f7ebdc4b
commit 0fed9edc18
2 changed files with 49 additions and 18 deletions

View file

@ -51,6 +51,7 @@ import com.nuvio.app.features.watching.application.WatchingState
internal fun LazyListScope.discoverContent(
state: DiscoverUiState,
columns: Int,
onTypeSelected: (String) -> Unit,
onCatalogSelected: (String) -> Unit,
onGenreSelected: (String?) -> Unit,
@ -87,7 +88,10 @@ internal fun LazyListScope.discoverContent(
when {
state.isLoading && state.items.isEmpty() -> {
items(2) {
DiscoverSkeletonRow(modifier = Modifier.padding(horizontal = 16.dp))
DiscoverSkeletonRow(
columns = columns,
modifier = Modifier.padding(horizontal = 16.dp),
)
}
}
@ -102,9 +106,10 @@ internal fun LazyListScope.discoverContent(
}
else -> {
items(state.items.chunked(3)) { rowItems ->
items(state.items.chunked(columns)) { rowItems ->
DiscoverGridRow(
items = rowItems,
columns = columns,
modifier = Modifier.padding(horizontal = 16.dp),
watchedKeys = watchedKeys,
onPosterClick = onPosterClick,
@ -234,6 +239,7 @@ private fun DiscoverDropdownChip(
@Composable
private fun DiscoverGridRow(
items: List<MetaPreview>,
columns: Int,
modifier: Modifier = Modifier,
watchedKeys: Set<String> = emptySet(),
onPosterClick: ((MetaPreview) -> Unit)? = null,
@ -256,7 +262,7 @@ private fun DiscoverGridRow(
onLongClick = onPosterLongClick?.let { { it(item) } },
)
}
repeat(3 - items.size) {
repeat(columns - items.size) {
Spacer(modifier = Modifier.weight(1f))
}
}
@ -321,12 +327,15 @@ private fun DiscoverPosterTile(
}
@Composable
private fun DiscoverSkeletonRow(modifier: Modifier = Modifier) {
private fun DiscoverSkeletonRow(
columns: Int,
modifier: Modifier = Modifier,
) {
Row(
modifier = modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(12.dp),
) {
repeat(3) {
repeat(columns) {
Box(
modifier = Modifier
.weight(1f)

View file

@ -4,6 +4,7 @@ import androidx.compose.foundation.clickable
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.Row
import androidx.compose.foundation.layout.Spacer
@ -32,6 +33,7 @@ import androidx.compose.runtime.snapshotFlow
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
@ -145,13 +147,22 @@ fun SearchScreen(
SearchHistoryRepository.recordSearch(normalizedQuery)
}
NuvioScreen(
horizontalPadding = 0.dp,
listState = listState,
BoxWithConstraints(
modifier = modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.background),
) {
val discoverColumns = remember(maxWidth) {
discoverColumnCountForWidth(maxWidth)
}
NuvioScreen(
horizontalPadding = 0.dp,
listState = listState,
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.background),
) {
stickyHeader {
androidx.compose.foundation.layout.Column(
modifier = Modifier
@ -184,16 +195,17 @@ fun SearchScreen(
)
}
}
discoverContent(
state = discoverUiState,
onTypeSelected = SearchRepository::selectDiscoverType,
onCatalogSelected = SearchRepository::selectDiscoverCatalog,
onGenreSelected = SearchRepository::selectDiscoverGenre,
watchedKeys = watchedUiState.watchedKeys,
onPosterClick = onPosterClick,
onPosterLongClick = onPosterLongClick,
)
} else {
discoverContent(
state = discoverUiState,
columns = discoverColumns,
onTypeSelected = SearchRepository::selectDiscoverType,
onCatalogSelected = SearchRepository::selectDiscoverCatalog,
onGenreSelected = SearchRepository::selectDiscoverGenre,
watchedKeys = watchedUiState.watchedKeys,
onPosterClick = onPosterClick,
onPosterLongClick = onPosterLongClick,
)
} else {
when {
uiState.isLoading && uiState.sections.isEmpty() -> {
items(2) {
@ -228,6 +240,16 @@ fun SearchScreen(
}
}
}
}
private fun discoverColumnCountForWidth(screenWidth: Dp): Int =
when {
screenWidth >= 1400.dp -> 7
screenWidth >= 1200.dp -> 6
screenWidth >= 1000.dp -> 5
screenWidth >= 840.dp -> 4
else -> 3
}
@Composable
private fun SearchEmptyStateCard(