design fixes tabs

design fixes tabs

app/src/main/kotlin/org/mjdev/tvapp/base/ui/components/complex/Tabs.kt

@@ -9,6 +9,7 @@
 package org.mjdev.tvapp.base.ui.components.complex
 
 import android.annotation.SuppressLint
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -27,6 +28,7 @@ import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Tab
 import androidx.tv.material3.TabDefaults
 import androidx.tv.material3.TabRow
+import androidx.tv.material3.TabRowDefaults
 import org.mjdev.tvapp.base.annotations.TvPreview
 import org.mjdev.tvapp.base.interfaces.ItemWithTitle
 import org.mjdev.tvapp.base.ui.components.text.TextAny
@@ -43,11 +45,23 @@ fun <T> Tabs(
     activeContentColor: Color = Color.Black,
     selectedContentColor: Color = Color.White,
     focusedContentColor: Color = Color.White,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     onItemClick: (index: Int) -> Unit = {}
 ) {
 
     val selectedTabIndex = remember { mutableIntStateOf(0) }
 
+    val colors = TabDefaults.pillIndicatorTabColors(
+        activeContentColor = activeContentColor,
+        contentColor = activeContentColor,
+        selectedContentColor = activeContentColor,
+        focusedContentColor = focusedContentColor,
+        focusedSelectedContentColor = focusedContentColor,
+        disabledActiveContentColor = activeContentColor.copy(alpha = 0.4f),
+        disabledContentColor = activeContentColor.copy(alpha = 0.4f),
+        disabledSelectedContentColor = selectedContentColor,
+    )
+
     TabRow(
         modifier = modifier.fillMaxWidth(),
         selectedTabIndex = selectedTabIndex.value,
@@ -55,29 +69,27 @@ fun <T> Tabs(
         separator = {
             Spacer(modifier = Modifier.width(itemsSpacing))
         },
+        indicator = { tabPositions ->
+            tabPositions.getOrNull(selectedTabIndex.value)?.let { tab ->
+                TabRowDefaults.PillIndicator(
+                    currentTabPosition = tab,
+                    activeColor = activeContentColor,
+                    inactiveColor = activeContentColor.copy(alpha = 0.4f)
+                )
+            }
+        },
     ) {
 
         items.forEachIndexed { index, tab ->
 
-            val selected = index == selectedTabIndex.value
-            val colors = TabDefaults.pillIndicatorTabColors(
-                activeContentColor = activeContentColor,
-                contentColor = activeContentColor,
-                selectedContentColor = activeContentColor,
-                focusedContentColor = focusedContentColor,
-                focusedSelectedContentColor = focusedContentColor,
-                disabledActiveContentColor = activeContentColor,
-                disabledContentColor = activeContentColor,
-                disabledSelectedContentColor = selectedContentColor,
-            )
-
             Tab(
                 modifier = Modifier,
                 colors = colors,
-                selected = selected,
+                selected = index == selectedTabIndex.value,
                 onFocus = {
                     selectedTabIndex.value = index
                 },
+                interactionSource = interactionSource
             ) {
 
                 FocusableBox(
@@ -88,10 +100,10 @@ fun <T> Tabs(
                 ) {
 
                     TextAny(
-                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp),
+                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
                         text = if (tab is ItemWithTitle) tab.title else tab.toString(),
                         fontSize = fontSize,
-                        color = if (selected) Color.Black else Color.White,
+                        color = Color.White,
                         fontWeight = FontWeight.Bold
                     )