UI: update tab layout

Author: InfinityLoop1308

android/src/main/kotlin/project/pipepipe/app/ui/component/ResponsiveTabs.kt

@@ -3,6 +3,7 @@ package project.pipepipe.app.ui.component
 import android.annotation.SuppressLint
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.material3.Tab
@@ -12,13 +13,16 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.rememberTextMeasurer
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.launch
+import project.pipepipe.app.ui.theme.onCustomTopBarColor
 
 
 @SuppressLint("UnusedBoxWithConstraintsScope")
@@ -27,6 +31,8 @@ fun ResponsiveTabs(
     titles: List<String>,
     selectedIndex: Int,
     modifier: Modifier = Modifier,
+    icons: List<ImageVector>? = null,
+    containerColor: Color = MaterialTheme.colorScheme.surface,
     onTabSelected: (Int) -> Unit,
 ) {
     if (titles.isEmpty()) return
@@ -39,20 +45,28 @@ fun ResponsiveTabs(
         val textStyle = MaterialTheme.typography.labelLarge.copy(
             fontSize = 14.sp
         )
-        val tabWidthsPx = remember(titles) {
-            titles.map { title ->
-                val textLayout = textMeasurer.measure(
-                    text = AnnotatedString(title),
-                    style = textStyle
-                )
-                val horizontalPaddingPx = with(density) { 32.dp.roundToPx() }
-                textLayout.size.width + horizontalPaddingPx
+        val tabWidthsPx = remember(titles, icons) {
+            titles.mapIndexed { index, title ->
+                val hasIcon = icons != null && index < icons.size
+                val textLayout = if (title.isNotEmpty()) {
+                    textMeasurer.measure(
+                        text = AnnotatedString(title),
+                        style = textStyle
+                    )
+                } else null
+
+                val textWidth = textLayout?.size?.width ?: 0
+                val iconWidth = if (hasIcon) with(density) { 24.dp.roundToPx() } else 0
+                val horizontalPaddingPx = with(density) { 24.dp.roundToPx() }
+
+                textWidth + iconWidth + horizontalPaddingPx
             }
         }
 
-        val totalTabsWidthPx = tabWidthsPx.sum()
+        val maxTabWidthPx = tabWidthsPx.maxOrNull() ?: 0
+        val requiredWidthForFixedTabRow = maxTabWidthPx * titles.size
         val containerWidthPx = constraints.maxWidth
-        val shouldScroll = totalTabsWidthPx > containerWidthPx
+        val shouldScroll = requiredWidthForFixedTabRow > containerWidthPx
 
         val tabContent: @Composable () -> Unit = {
             titles.forEachIndexed { index, title ->
@@ -63,15 +77,27 @@ fun ResponsiveTabs(
                             onTabSelected(index)
                         }
                     },
-                    modifier = Modifier.height(44.dp)
-                ) {
-                    Text(
-                        text = title,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        style = MaterialTheme.typography.labelLarge
-                    )
-                }
+                    modifier = Modifier.height(44.dp),
+                    icon = if (icons != null && index < icons.size) {
+                        {
+                            Icon(
+                                imageVector = icons[index],
+                                contentDescription = title.ifEmpty { null },
+                                tint = onCustomTopBarColor()
+                            )
+                        }
+                    } else null,
+                    text = if (title.isNotEmpty()) {
+                        {
+                            Text(
+                                text = title,
+                                maxLines = 1,
+                                overflow = TextOverflow.Ellipsis,
+                                style = MaterialTheme.typography.labelLarge
+                            )
+                        }
+                    } else null
+                )
             }
         }
 
@@ -80,12 +106,14 @@ fun ResponsiveTabs(
                 selectedTabIndex = selectedIndex,
                 modifier = modifier,
                 edgePadding = 0.dp,
+                containerColor = containerColor,
                 tabs = tabContent
             )
         } else {
             TabRow(
                 selectedTabIndex = selectedIndex,
                 modifier = modifier,
+                containerColor = containerColor,
                 tabs = tabContent
             )
         }

android/src/main/kotlin/project/pipepipe/app/ui/screens/TabNavigationScreen.kt

@@ -7,28 +7,27 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.*
-import androidx.core.view.GravityCompat
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.view.GravityCompat
 import androidx.navigation.NavController
 import dev.icerock.moko.resources.compose.stringResource
 import kotlinx.coroutines.launch
 import kotlinx.serialization.json.Json
 import kotlinx.serialization.json.JsonArray
 import kotlinx.serialization.json.JsonObject
-import kotlinx.serialization.json.jsonObject
 import kotlinx.serialization.json.jsonPrimitive
 import project.pipepipe.app.LocalDrawerLayout
 import project.pipepipe.app.MR
 import project.pipepipe.app.SharedContext
 import project.pipepipe.app.helper.MainScreenTabDefaults
 import project.pipepipe.app.helper.MainScreenTabHelper
+import project.pipepipe.app.ui.component.ResponsiveTabs
 import project.pipepipe.app.ui.screens.playlistdetail.PlaylistDetailScreen
 import project.pipepipe.app.ui.theme.customTopBarColor
 import project.pipepipe.app.ui.theme.onCustomTopBarColor
@@ -129,28 +128,15 @@ fun TabNavigationScreen(navController: NavController) {
             }
         }
 
-        TabRow(
-            selectedTabIndex = pagerState.currentPage,
+        ResponsiveTabs(
+            titles = List(tabConfigs.size) { "" },
+            selectedIndex = pagerState.currentPage,
             modifier = Modifier.fillMaxWidth(),
+            icons = tabConfigs.map { MainScreenTabHelper.getTabIcon(it) },
             containerColor = customTopBarColor()
-        ) {
-            tabConfigs.forEachIndexed { index, route ->
-                Tab(
-                    selected = pagerState.currentPage == index,
-                    onClick = {
-                        scope.launch {
-                            pagerState.animateScrollToPage(index)
-                        }
-                    },
-                    icon = {
-                        Icon(
-                            imageVector = MainScreenTabHelper.getTabIcon(route),
-                            contentDescription = MainScreenTabHelper.getTabDisplayName(route),
-                            modifier = Modifier.size(22.dp),
-                            tint = onCustomTopBarColor()
-                        )
-                    }
-                )
+        ) { index ->
+            scope.launch {
+                pagerState.animateScrollToPage(index)
             }
         }