restore the single stretching tab indicator

app/src/main/kotlin/com/subtracks/ui/library/LibraryScreen.kt

@@ -618,40 +618,70 @@ private fun LibraryTabs(
     onOpenSettings: () -> Unit,
     artwork: ArtworkColors?,
 ) {
-    val labelHoldStart = 0.25f
+    val iconHoldStart = 0.25f
-    val labelFadeEnd = 0.65f
+    val iconFadeEnd = 0.65f
+    val indicatorStretch = 18.dp
+    val density = LocalDensity.current
+    val bounds = remember { mutableStateMapOf<Int, Rect>() }
     val page = pagerState.currentPage
     val fraction = pagerState.currentPageOffsetFraction
     val position = page + fraction
 
-    Row(
+    Box(
-        modifier = Modifier.fillMaxWidth().padding(start = 8.dp, end = 12.dp),
+        Modifier
-        verticalAlignment = Alignment.CenterVertically,
+            .fillMaxWidth()
-        horizontalArrangement = Arrangement.spacedBy(4.dp),
+            .padding(start = 8.dp, end = 12.dp),
     ) {
-        LibraryTab.entries.forEachIndexed { index, tab ->
+        bounds[page]?.let { current ->
-            TabButton(
+            val neighbour = bounds[if (fraction >= 0f) page + 1 else page - 1]
-                tab = tab,
+            val step = if (neighbour != null) abs(fraction) else 0f
-                artwork = artwork,
+            val left = current.left + ((neighbour?.left ?: current.left) - current.left) * step
-                progress =
+            val right = current.right + ((neighbour?.right ?: current.right) - current.right) * step
-                    ((labelFadeEnd - abs(position - index)) / (labelFadeEnd - labelHoldStart))
+            val stretch = with(density) { indicatorStretch.toPx() } * abs(fraction) / 2f
-                        .coerceIn(0f, 1f),
+            Box(
-                onClick = { onTabSelected(tab) },
+                modifier =
+                    Modifier
+                        .offset { IntOffset((left - stretch).roundToInt(), current.top.roundToInt()) }
+                        .width(with(density) { (right - left + stretch * 2f).toDp() })
+                        .height(with(density) { current.height.toDp() })
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(artwork?.scheme?.primary ?: MaterialTheme.colorScheme.onBackground),
             )
         }
-        Spacer(Modifier.weight(1f))
+
-        if (syncing) {
+        Row(
-            CircularProgressIndicator(
+            modifier = Modifier.fillMaxWidth(),
-                modifier = Modifier.padding(end = 4.dp).size(20.dp),
+            verticalAlignment = Alignment.CenterVertically,
-                strokeWidth = 2.dp,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
-            )
+        ) {
-        }
+            LibraryTab.entries.forEachIndexed { index, tab ->
-        IconButton(onClick = onOpenSettings) {
+                TabButton(
-            Icon(
+                    tab = tab,
-                imageVector = Icons.Rounded.Settings,
+                    artwork = artwork,
-                contentDescription = "Settings",
+                    progress =
-                tint = MaterialTheme.colorScheme.onBackground,
+                        ((iconFadeEnd - abs(position - index)) / (iconFadeEnd - iconHoldStart))
-            )
+                            .coerceIn(0f, 1f),
+                    onClick = { onTabSelected(tab) },
+                    modifier =
+                        Modifier.onGloballyPositioned { coordinates ->
+                            bounds[index] = coordinates.boundsInParent()
+                        },
+                )
+            }
+            Spacer(Modifier.weight(1f))
+            if (syncing) {
+                CircularProgressIndicator(
+                    modifier = Modifier.padding(end = 4.dp).size(20.dp),
+                    strokeWidth = 2.dp,
+                )
+            }
+            IconButton(onClick = onOpenSettings) {
+                Icon(
+                    imageVector = Icons.Rounded.Settings,
+                    contentDescription = "Settings",
+                    tint = MaterialTheme.colorScheme.onBackground,
+                )
+            }
         }
     }
 }
@@ -665,14 +695,11 @@ private fun TabButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val container = artwork?.scheme?.primary ?: MaterialTheme.colorScheme.onBackground
     val selectedContent = artwork?.scheme?.onPrimary ?: MaterialTheme.colorScheme.background
     val content = lerp(MaterialTheme.colorScheme.onBackground, selectedContent, progress)
     Row(
         modifier =
             modifier
-                .clip(RoundedCornerShape(8.dp))
-                .background(container.copy(alpha = progress))
                 .clickable(onClick = onClick)
                 .padding(start = 8.dp, end = 12.dp, top = 6.dp, bottom = 6.dp),
         verticalAlignment = Alignment.CenterVertically,