diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/core/ui/NuvioShelfComponents.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/core/ui/NuvioShelfComponents.kt index 4761d20d8..4a0bd01af 100644 --- a/composeApp/src/commonMain/kotlin/com/nuvio/app/core/ui/NuvioShelfComponents.kt +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/core/ui/NuvioShelfComponents.kt @@ -37,6 +37,11 @@ enum class NuvioPosterShape { Landscape, } +enum class NuvioViewAllPillSize { + Default, + Compact, +} + @Composable fun NuvioShelfSection( title: String, @@ -45,6 +50,7 @@ fun NuvioShelfSection( headerHorizontalPadding: Dp = 0.dp, rowContentPadding: PaddingValues = PaddingValues(0.dp), onViewAllClick: (() -> Unit)? = null, + viewAllPillSize: NuvioViewAllPillSize = NuvioViewAllPillSize.Default, key: ((T) -> Any)? = null, itemContent: @Composable (T) -> Unit, ) { @@ -56,6 +62,7 @@ fun NuvioShelfSection( title = title, modifier = Modifier.padding(horizontal = headerHorizontalPadding), onViewAllClick = onViewAllClick, + viewAllPillSize = viewAllPillSize, ) LazyRow( contentPadding = rowContentPadding, @@ -145,6 +152,7 @@ private fun NuvioShelfSectionHeader( title: String, modifier: Modifier = Modifier, onViewAllClick: (() -> Unit)? = null, + viewAllPillSize: NuvioViewAllPillSize = NuvioViewAllPillSize.Default, ) { Row( modifier = modifier.fillMaxWidth(), @@ -174,6 +182,7 @@ private fun NuvioShelfSectionHeader( } NuvioViewAllPill( onClick = onViewAllClick, + size = viewAllPillSize, ) } } @@ -181,7 +190,17 @@ private fun NuvioShelfSectionHeader( @Composable private fun NuvioViewAllPill( onClick: (() -> Unit)?, + size: NuvioViewAllPillSize, ) { + val horizontalPadding = if (size == NuvioViewAllPillSize.Compact) 12.dp else 18.dp + val verticalPadding = if (size == NuvioViewAllPillSize.Compact) 9.dp else 14.dp + val textStyle = if (size == NuvioViewAllPillSize.Compact) { + MaterialTheme.typography.labelLarge + } else { + MaterialTheme.typography.titleMedium + } + val iconSpacing = if (size == NuvioViewAllPillSize.Compact) 2.dp else 4.dp + Row( modifier = Modifier .background( @@ -189,19 +208,20 @@ private fun NuvioViewAllPill( shape = RoundedCornerShape(20.dp), ) .then(if (onClick != null) Modifier.clickable(onClick = onClick) else Modifier) - .padding(horizontal = 18.dp, vertical = 14.dp), - horizontalArrangement = Arrangement.spacedBy(4.dp), + .padding(horizontal = horizontalPadding, vertical = verticalPadding), + horizontalArrangement = Arrangement.spacedBy(iconSpacing), verticalAlignment = Alignment.CenterVertically, ) { Text( text = "View All", - style = MaterialTheme.typography.titleMedium, + style = textStyle, color = MaterialTheme.colorScheme.onSurface, ) Icon( imageVector = Icons.AutoMirrored.Rounded.KeyboardArrowRight, contentDescription = null, tint = MaterialTheme.colorScheme.onSurfaceVariant, + modifier = Modifier.height(if (size == NuvioViewAllPillSize.Compact) 16.dp else 20.dp), ) } } diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeCatalogSection.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeCatalogSection.kt index c5c92fb4d..4908a2dbc 100644 --- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeCatalogSection.kt +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeCatalogSection.kt @@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.nuvio.app.core.ui.NuvioShelfSection +import com.nuvio.app.core.ui.NuvioViewAllPillSize import com.nuvio.app.features.home.HomeCatalogSection import com.nuvio.app.features.home.MetaPreview @@ -21,6 +22,7 @@ fun HomeCatalogRowSection( headerHorizontalPadding = 16.dp, rowContentPadding = androidx.compose.foundation.layout.PaddingValues(horizontal = 16.dp), onViewAllClick = onViewAllClick, + viewAllPillSize = NuvioViewAllPillSize.Compact, key = { item -> item.id }, ) { item -> HomePosterCard(