refactor(tv): replace custom season tab implementation with TabRow for improved UI consistency

refactor(tv): improve focus management and clean up unused focus requesters
fix(tv): focus segment skip button
2026-07-24 03:36:51 +00:00 · 2026-05-01 13:06:01 +02:00 · 2026-05-01 12:54:44 +02:00 · 2026-05-01 12:29:01 +02:00 · 2026-05-01 11:44:14 +02:00 · 2026-05-01 11:36:03 +02:00
17 changed files with 133 additions and 145 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -12,6 +12,14 @@ Follow these instructions before making changes:

 ---

+## Ui principles
+* Ui design should align with the material ui 3 design system
+* For new components check https://m3.material.io/components if there is an available solution for the problem.
+* Using Box components are a red flag and should be only used when there is no other option.
+* When styling components check the material ui 3 site first and use it for the decision https://m3.material.io/styles
+
+---
+
 ## Repository Expectations

 * Always use the currently used syntax in the codebase. Include examples for any naming you introduce.
--- a/app-tv/src/main/java/hu/bbara/purefin/ui/screen/player/TvPlayerScreen.kt
+++ b/app-tv/src/main/java/hu/bbara/purefin/ui/screen/player/TvPlayerScreen.kt
@@ -42,6 +42,7 @@ import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onPreviewKeyEvent
 import androidx.compose.ui.input.key.type
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
@@ -85,9 +86,13 @@ fun TvPlayerScreen(
    val controlsAutoHideBlocked = isPlaylistExpanded || trackPanelType != null

    val context = LocalContext.current
-    LaunchedEffect(Unit) {
-        viewModel.setControlsAutoHideDelay(TV_CONTROLS_AUTO_HIDE_MS)
-    }
+    val focusManager = LocalFocusManager.current
+    val rootFocusRequester = remember { FocusRequester() }
+    val controlsFocusRequester = remember { FocusRequester() }
+    val qualityButtonFocusRequester = remember { FocusRequester() }
+    val audioButtonFocusRequester = remember { FocusRequester() }
+    val subtitlesButtonFocusRequester = remember { FocusRequester() }
+    val skipButtonFocusRequester = remember { FocusRequester() }
    LaunchedEffect(uiState.isPlaying) {
        val activity = context as? Activity
        if (uiState.isPlaying) {
@@ -115,12 +120,6 @@ fun TvPlayerScreen(
        )
    }

-    val hiddenControlFocusRequester = remember { FocusRequester() }
-    val controlsFocusRequester = remember { FocusRequester() }
-    val qualityButtonFocusRequester = remember { FocusRequester() }
-    val audioButtonFocusRequester = remember { FocusRequester() }
-    val subtitlesButtonFocusRequester = remember { FocusRequester() }
-    val skipButtonFocusRequester = remember { FocusRequester() }
    val expandPlaylist: () -> Unit = {
        if (!isPlaylistExpanded) {
            isPlaylistExpanded = true
@@ -181,16 +180,20 @@ fun TvPlayerScreen(
        }
    }

-    LaunchedEffect(controlsVisible, controlsAutoHideBlocked) {
+    LaunchedEffect(
+        controlsVisible,
+        controlsAutoHideBlocked,
+        uiState.activeSkippableSegmentEndMs
+    ) {
        if (controlsAutoHideBlocked) return@LaunchedEffect
        if (controlsVisible) {
            controlsFocusRequester.requestFocus()
        } else {
-            uiState.activeSkippableSegmentEndMs?.let {
+            if (uiState.activeSkippableSegmentEndMs != null) {
                skipButtonFocusRequester.requestFocus()
                return@LaunchedEffect
            }
-            hiddenControlFocusRequester.requestFocus()
+            focusManager.clearFocus()
        }
    }

@@ -239,7 +242,7 @@ fun TvPlayerScreen(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
-            .focusRequester(hiddenControlFocusRequester)
+            .focusRequester(rootFocusRequester)
            .onPreviewKeyEvent { event ->
                handleTvPlayerRootKeyEvent(
                    event = event,
@@ -254,6 +257,8 @@ fun TvPlayerScreen(
                    onResumePlaybackWithoutShowingControls = resumePlaybackWithoutShowingControls,
                    onSeekRelative = seekByWithoutShowingControls,
                    onShowControls = showTvControls,
+                    onSkipSegment = skipSegmentAndShowControls,
+                    hasSkippableSegment = uiState.activeSkippableSegmentEndMs != null,
                    onTogglePlayPause = togglePlayPauseAndShowControls
                )
            }
@@ -385,6 +390,8 @@ internal fun handleTvPlayerRootKeyEvent(
    onResumePlaybackWithoutShowingControls: () -> Unit,
    onSeekRelative: (Long) -> Unit,
    onShowControls: () -> Unit,
+    onSkipSegment: () -> Unit = {},
+    hasSkippableSegment: Boolean = false,
    onTogglePlayPause: () -> Unit
 ): Boolean {
    if (event.type != KeyEventType.KeyDown) return false
@@ -428,7 +435,9 @@ internal fun handleTvPlayerRootKeyEvent(
            }

            Key.DirectionCenter, Key.Enter -> {
-                if (isPlaying) {
+                if (hasSkippableSegment) {
+                    onSkipSegment()
+                } else if (isPlaying) {
                    onPausePlaybackWithoutShowingControls()
                } else {
                    onResumePlaybackWithoutShowingControls()
--- a/app-tv/src/main/java/hu/bbara/purefin/ui/screen/series/TvSeriesScreen.kt
+++ b/app-tv/src/main/java/hu/bbara/purefin/ui/screen/series/TvSeriesScreen.kt
@@ -94,7 +94,7 @@ internal fun TvSeriesScreenContent(
                    series = series,
                    modifier = Modifier.fillMaxWidth()
                )
-                Spacer(modifier = Modifier.height(18.dp))
+                Spacer(modifier = Modifier.height(16.dp))
                TvSeasonTabs(
                    seasons = series.seasons,
                    selectedSeason = selectedSeason,
@@ -103,7 +103,7 @@ internal fun TvSeriesScreenContent(
                    onSelect = { selectedSeason = it },
                    modifier = Modifier.fillMaxWidth()
                )
-                Spacer(modifier = Modifier.height(4.dp))
+                Spacer(modifier = Modifier.height(16.dp))
                TvEpisodeCarousel(
                    episodes = selectedSeason.episodes,
                    onPlayEpisode = { onPlayEpisode(it.id) },
--- a/app-tv/src/main/java/hu/bbara/purefin/ui/screen/series/components/TvSeriesComponents.kt
+++ b/app-tv/src/main/java/hu/bbara/purefin/ui/screen/series/components/TvSeriesComponents.kt
@@ -6,12 +6,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.LocalBringIntoViewSpec
-import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
@@ -20,10 +18,10 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.PlayCircle
@@ -44,7 +42,6 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
@@ -52,6 +49,9 @@ 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.sp
+import androidx.tv.material3.Tab
+import androidx.tv.material3.TabDefaults
+import androidx.tv.material3.TabRow
 import hu.bbara.purefin.image.ArtworkKind
 import hu.bbara.purefin.image.ImageUrlBuilder
 import hu.bbara.purefin.model.CastMember
@@ -64,6 +64,7 @@ import hu.bbara.purefin.ui.common.image.PurefinAsyncImage
 import hu.bbara.purefin.ui.common.media.MediaMetadataFlowRow
 import hu.bbara.purefin.ui.screen.home.components.TvHomeRowBringIntoViewSpec
 import java.util.UUID
+import androidx.tv.material3.Text as TvText

 internal const val SeriesFirstSeasonTabTag = "series-first-season-tab"
 internal const val SeriesNextUpEpisodeCardTag = "series-next-up-episode-card"
@@ -84,17 +85,21 @@ internal fun TvSeasonTabs(
    firstItemTestTag: String? = null,
    onSelect: (Season) -> Unit
 ) {
-    Row(
+    val selectedSeasonIndex = seasons.indexOf(selectedSeason).coerceAtLeast(0)
+
+    TabRow(
+        selectedTabIndex = selectedSeasonIndex,
        modifier = modifier
            .fillMaxWidth()
-            .horizontalScroll(rememberScrollState()),
-        horizontalArrangement = Arrangement.spacedBy(20.dp)
+            .wrapContentWidth(Alignment.Start),
+        contentColor = MaterialTheme.colorScheme.onSurface
    ) {
        seasons.forEachIndexed { index, season ->
-            TvSeasonTab(
-                name = season.name,
-                isSelected = season == selectedSeason,
-                onSelect = { onSelect(season) },
+            Tab(
+                selected = index == selectedSeasonIndex,
+                onFocus = { onSelect(season) },
+                onClick = { onSelect(season) },
+                colors = TabDefaults.underlinedIndicatorTabColors(),
                modifier = Modifier
                    .then(
                        if (index == 0 && firstItemFocusRequester != null) {
@@ -110,45 +115,22 @@ internal fun TvSeasonTabs(
                            Modifier
                        }
                    )
-            )
-        }
-    }
-}
-
-@Composable
-private fun TvSeasonTab(
-    name: String,
-    isSelected: Boolean,
-    onSelect: () -> Unit,
-    modifier: Modifier = Modifier
-) {
-    val scheme = MaterialTheme.colorScheme
-    val mutedStrong = scheme.onSurfaceVariant.copy(alpha = 0.7f)
-    var isFocused by remember { mutableStateOf(false) }
-    val color = if (isSelected || isFocused) scheme.primary else mutedStrong
-    val underlineColor = if (isSelected || isFocused) scheme.primary else Color.Transparent
-    val underlineHeight = if (isFocused) 3.dp else 2.dp
-
-    Column(
-        modifier = modifier
-            .padding(bottom = 8.dp)
-            .onFocusChanged { isFocused = it.isFocused }
-            .clickable { onSelect() }
            ) {
-        Text(
-            text = name,
-            color = color,
+                TvText(
+                    text = season.name,
                    fontSize = 13.sp,
-            fontWeight = if (isSelected || isFocused) FontWeight.Bold else FontWeight.Medium
-        )
-        Spacer(modifier = Modifier.height(8.dp))
-        Box(
-            modifier = Modifier
-                .height(underlineHeight)
-                .width(52.dp)
-                .background(underlineColor)
+                    fontWeight = if (index == selectedSeasonIndex) {
+                        FontWeight.Bold
+                    } else {
+                        FontWeight.Medium
+                    },
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
                )
            }
+        }
+    }
 }

@OptIn(ExperimentalFoundationApi::class)
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/episode/components/EpisodeComponents.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/episode/components/EpisodeComponents.kt
@@ -142,15 +142,15 @@ internal fun EpisodeDetails(
            )
            VerticalDivider(
                color = MaterialTheme.colorScheme.secondary,
-                thickness = 4.dp,
+                thickness = 2.dp,
                modifier = Modifier
                    .height(48.dp)
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            )
            Row() {
                MediaActionButton(
-                    backgroundColor = MaterialTheme.colorScheme.secondary,
-                    iconColor = MaterialTheme.colorScheme.onSecondary,
+                    backgroundColor = MaterialTheme.colorScheme.surface,
+                    iconColor = MaterialTheme.colorScheme.onSurface,
                    icon = when (downloadState) {
                        is DownloadState.NotDownloaded -> Icons.Outlined.Download
                        is DownloadState.Downloading -> Icons.Outlined.Close
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/HomeEmptyState.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/HomeEmptyState.kt
@@ -10,11 +10,12 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Collections
 import androidx.compose.material.icons.outlined.Refresh
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -31,9 +32,9 @@ fun HomeEmptyState(
 ) {
    val scheme = MaterialTheme.colorScheme

-    Surface(
+    Card(
        shape = RoundedCornerShape(30.dp),
-        color = scheme.surfaceContainerLow,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainerLow),
        modifier = modifier.padding(horizontal = 16.dp)
    ) {
        Column(
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/HomeTopBar.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/HomeTopBar.kt
@@ -38,10 +38,11 @@ fun HomeTopBar(
            IconButton(
                onClick = onSearchClick,
                colors = IconButtonColors(
-                    containerColor = scheme.secondary,
-                    contentColor = scheme.onSecondary,
-                    disabledContainerColor = scheme.secondary,
-                    disabledContentColor = scheme.onSecondary),
+                    containerColor = scheme.surface,
+                    contentColor = scheme.onSurface,
+                    disabledContainerColor = scheme.surface,
+                    disabledContentColor = scheme.onSurface
+                ),
                modifier = Modifier.size(50.dp),
            ) {
                Icon(
@@ -54,10 +55,11 @@ fun HomeTopBar(
            IconButton(
                onClick = { isProfileMenuExpanded = true },
                colors = IconButtonColors(
-                    containerColor = scheme.secondary,
-                    contentColor = scheme.onSecondary,
-                    disabledContainerColor = scheme.secondary,
-                    disabledContentColor = scheme.onSecondary),
+                    containerColor = scheme.surface,
+                    contentColor = scheme.onSurface,
+                    disabledContainerColor = scheme.surface,
+                    disabledContentColor = scheme.onSurface
+                ),
                modifier = Modifier
                    .size(50.dp)
                    .clip(CircleShape),
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/continuewatching/ContinueWatchingCard.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/continuewatching/ContinueWatchingCard.kt
@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.continuewatching

 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,8 +10,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -35,16 +35,13 @@ internal fun ContinueWatchingCard(
 ) {
    val scheme = MaterialTheme.colorScheme

-    Surface(
+    Card(
+        onClick = { onMediaSelected(item) },
        shape = RoundedCornerShape(26.dp),
-        color = scheme.surfaceContainer,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainer),
        modifier = modifier.width(280.dp)
    ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable { onMediaSelected(item) }
-        ) {
+        Column(modifier = Modifier.fillMaxWidth()) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
@@ -93,7 +90,7 @@ internal fun ContinueWatchingCard(
                Text(
                    text = item.secondaryText,
                    style = MaterialTheme.typography.bodySmall,
-                    color = scheme.onSurface,
+                    color = scheme.onSurfaceVariant,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/featured/SuggestionCard.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/featured/SuggestionCard.kt
@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.featured

 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,13 +10,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
@@ -37,13 +36,12 @@ internal fun SuggestionCard(
    val scheme = MaterialTheme.colorScheme
    val description = item.description.trim()

-    Surface(
-        color = scheme.surfaceContainerLow,
+    ElevatedCard(
+        onClick = onClick,
+        colors = CardDefaults.elevatedCardColors(containerColor = scheme.surfaceContainerLow),
+        elevation = CardDefaults.elevatedCardElevation(defaultElevation = 1.dp),
        shape = RoundedCornerShape(30.dp),
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(RoundedCornerShape(30.dp))
-            .clickable(onClick = onClick)
+        modifier = modifier.fillMaxWidth()
    ) {
        Box(
            modifier = Modifier
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/library/HomeBrowseCard.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/library/HomeBrowseCard.kt
@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.library

 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -12,8 +11,9 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -37,16 +37,13 @@ internal fun HomeBrowseCard(
 ) {
    val scheme = MaterialTheme.colorScheme

-    Surface(
+    Card(
+        onClick = { onMediaSelected(uiModel) },
        shape = RoundedCornerShape(12.dp),
-        color = scheme.surfaceContainer,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainer),
        modifier = modifier.width(188.dp)
    ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable { onMediaSelected(uiModel) }
-        ) {
+        Column(modifier = Modifier.fillMaxWidth()) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
@@ -75,7 +72,7 @@ internal fun HomeBrowseCard(
                }
            }
            Spacer(modifier = Modifier.height(10.dp))
-            Column(modifier = modifier.padding(12.dp)) {
+            Column(modifier = Modifier.padding(12.dp)) {
                Text(
                    text = uiModel.primaryText,
                    style = MaterialTheme.typography.bodyLarge,
@@ -87,7 +84,7 @@ internal fun HomeBrowseCard(
                Text(
                    text = uiModel.secondaryText,
                    style = MaterialTheme.typography.bodySmall,
-                    color = scheme.onSurface,
+                    color = scheme.onSurfaceVariant,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/nextup/NextUpCard.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/home/components/nextup/NextUpCard.kt
@@ -1,7 +1,6 @@
 package hu.bbara.purefin.ui.screen.home.components.nextup

 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,8 +10,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -33,16 +33,13 @@ internal fun NextUpCard(
 ) {
    val scheme = MaterialTheme.colorScheme

-    Surface(
+    Card(
+        onClick = { onMediaSelected(uiModel) },
        shape = RoundedCornerShape(24.dp),
-        color = scheme.surfaceContainer,
+        colors = CardDefaults.cardColors(containerColor = scheme.surfaceContainer),
        modifier = modifier.width(256.dp)
    ) {
-        Column(
-            modifier = Modifier
-                .fillMaxWidth()
-                .clickable { onMediaSelected(uiModel) }
-        ) {
+        Column(modifier = Modifier.fillMaxWidth()) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
@@ -83,7 +80,7 @@ internal fun NextUpCard(
                Text(
                    text = uiModel.secondaryText,
                    style = MaterialTheme.typography.bodySmall,
-                    color = scheme.onSurface,
+                    color = scheme.onSurfaceVariant,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/library/components/LibraryTopBar.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/library/components/LibraryTopBar.kt
@@ -22,10 +22,11 @@ fun LibraryTopBar(
        IconButton(
            onClick = onSearchClick,
            colors = IconButtonColors(
-                containerColor = scheme.secondary,
-                contentColor = scheme.onSecondary,
-                disabledContainerColor = scheme.secondary,
-                disabledContentColor = scheme.onSecondary),
+                containerColor = scheme.surface,
+                contentColor = scheme.onSurface,
+                disabledContainerColor = scheme.surface,
+                disabledContentColor = scheme.onSurface
+            ),
            modifier = Modifier.size(50.dp),
        ) {
            Icon(
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/movie/components/MovieComponents.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/movie/components/MovieComponents.kt
@@ -45,7 +45,6 @@ internal fun MovieTopBar(
    onBack: () -> Unit,
    modifier: Modifier = Modifier
 ) {
-    val scheme = MaterialTheme.colorScheme
    Row(
        modifier = modifier
            .fillMaxWidth()
@@ -107,8 +106,8 @@ internal fun MovieDetails(
            )
            Row() {
                MediaActionButton(
-                    backgroundColor = MaterialTheme.colorScheme.secondary,
-                    iconColor = MaterialTheme.colorScheme.onSecondary,
+                    backgroundColor = MaterialTheme.colorScheme.surface,
+                    iconColor = MaterialTheme.colorScheme.onSurface,
                    icon = when (downloadState) {
                        is DownloadState.NotDownloaded -> Icons.Outlined.Download
                        is DownloadState.Downloading -> Icons.Outlined.Close
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/series/SeriesScreen.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/series/SeriesScreen.kt
@@ -103,7 +103,6 @@ private fun SeriesScreenInternal(
    modifier: Modifier = Modifier,
 ) {
    val scheme = MaterialTheme.colorScheme
-    val textMutedStrong = scheme.onSurfaceVariant.copy(alpha = 0.7f)

    fun getDefaultSeason() : Season {
        for (season in series.seasons) {
@@ -162,7 +161,7 @@ private fun SeriesScreenInternal(
                Spacer(modifier = Modifier.height(24.dp))
                MediaSynopsis(
                    synopsis = series.synopsis,
-                    bodyColor = textMutedStrong,
+                    bodyColor = scheme.onSurface,
                    bodyFontSize = 13.sp,
                    bodyLineHeight = null,
                    titleSpacing = 8.dp
--- a/app/src/main/java/hu/bbara/purefin/ui/screen/series/components/SeriesComponents.kt
+++ b/app/src/main/java/hu/bbara/purefin/ui/screen/series/components/SeriesComponents.kt
@@ -151,15 +151,15 @@ internal fun SeriesActionButtons(
            Spacer(modifier = Modifier.width(12.dp))
        }
        MediaActionButton(
-            backgroundColor = MaterialTheme.colorScheme.secondary,
-            iconColor = MaterialTheme.colorScheme.onSecondary,
+            backgroundColor = MaterialTheme.colorScheme.surface,
+            iconColor = MaterialTheme.colorScheme.onSurface,
            icon = Icons.Outlined.Add,
            height = 48.dp
        )
        Spacer(modifier = Modifier.width(12.dp))
        MediaActionButton(
-            backgroundColor = scheme.secondary,
-            iconColor = scheme.onSecondary,
+            backgroundColor = MaterialTheme.colorScheme.surface,
+            iconColor = MaterialTheme.colorScheme.onSurface,
            icon = when {
                seriesDownloadState is DownloadState.Downloading -> Icons.Outlined.Close
                seriesDownloadState is DownloadState.Downloaded -> Icons.Outlined.DownloadDone
--- a/core-ui/src/main/java/hu/bbara/purefin/ui/common/button/CircularIconButton.kt
+++ b/core-ui/src/main/java/hu/bbara/purefin/ui/common/button/CircularIconButton.kt
@@ -2,21 +2,18 @@ package hu.bbara.purefin.ui.common.button

 import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
@@ -51,7 +48,13 @@ internal fun CircularIconButton(
        label = "background"
    )

-    Box(
+    FilledIconButton(
+        onClick = onClick,
+        colors = IconButtonDefaults.filledIconButtonColors(
+            containerColor = backgroundColor,
+            contentColor = iconColor
+        ),
+        shape = CircleShape,
        modifier = modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .size(size)
@@ -60,16 +63,11 @@ internal fun CircularIconButton(
                color = borderColor,
                shape = CircleShape
            )
-            .clip(CircleShape)
-            .background(backgroundColor)
            .onFocusChanged { isFocused = it.isFocused || it.hasFocus }
-            .clickable { onClick() },
-        contentAlignment = Alignment.Center
    ) {
        Icon(
            imageVector = icon,
-            contentDescription = contentDescription,
-            tint = iconColor
+            contentDescription = contentDescription
        )
    }
 }
--- a/core-ui/src/main/java/hu/bbara/purefin/ui/common/button/MediaActionButton.kt
+++ b/core-ui/src/main/java/hu/bbara/purefin/ui/common/button/MediaActionButton.kt
@@ -23,8 +23,8 @@ fun MediaActionButton(
    CircularIconButton(
        icon = icon,
        contentDescription = null,
-        containerColor = backgroundColor.copy(alpha = 0.6f),
-        focusedBackgroundColor = focusedBackgroundColor ?: backgroundColor.copy(alpha = 0.6f),
+        containerColor = backgroundColor,
+        focusedBackgroundColor = focusedBackgroundColor ?: backgroundColor,
        iconColor = iconColor,
        size = height,
        onClick = onClick,
Author	SHA1	Message	Date
Barnabas Balogh	6341510cc2	refactor(tv): replace custom season tab implementation with TabRow for improved UI consistency	2026-05-01 13:06:01 +02:00
Barnabas Balogh	2ff6fe997e	refactor(tv): improve focus management and clean up unused focus requesters	2026-05-01 12:54:44 +02:00
Barnabas Balogh	7401f986c6	fix(tv): focus segment skip button	2026-05-01 12:29:01 +02:00
Barnabas Balogh	93070ba23f	refactor: update IconButton colors in the top bars for improved UI consistency	2026-05-01 11:44:14 +02:00
Barnabas Balogh	56c4991467	refactor: update MediaActionButton styles for improved consistency	2026-05-01 11:36:03 +02:00
Barnabas Balogh	7c38d22717	refactor: replace Surface with Card components for improved UI consistency	2026-05-01 10:40:45 +02:00
Barnabas Balogh	9f480659ec	docs: add UI principles and guidelines for component design	2026-05-01 10:34:19 +02:00