put the tabs and settings in their own opaque rounded containers over a transparent header

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

@@ -76,10 +76,14 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.ClipOp
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
@@ -390,10 +394,7 @@ fun LibraryScreen(
                     .fillMaxWidth()
                     .align(Alignment.TopStart)
                     .onSizeChanged { headerHeightPx = it.height.toFloat() }
-                    .background(
+                    .padding(top = statusBarTop + 2.dp, bottom = 2.dp),
-                        (artwork?.let(::playerSurfaceColor) ?: MaterialTheme.colorScheme.background)
-                            .copy(alpha = HEADER_ALPHA),
-                    ).padding(top = statusBarTop + 2.dp, bottom = 2.dp),
         ) {
             LibraryTabs(
                 pagerState = pagerState,
@@ -592,7 +593,6 @@ private fun ListOptionsSheet(
 }
 
 private val FAB_CLEARANCE = 80.dp
-private const val HEADER_ALPHA = 0.72f
 private val SEARCH_BAR_CLEARANCE = 80.dp
 
 @Composable
@@ -666,25 +666,36 @@ private fun LibraryTabs(
     val indicatorLeft = current?.let { it.left + ((neighbour?.left ?: it.left) - it.left) * step - leftExtra }
     val indicatorRight = current?.let { it.right + ((neighbour?.right ?: it.right) - it.right) * step + rightExtra }
 
+    val headerColor = artwork?.let(::playerSurfaceColor) ?: MaterialTheme.colorScheme.background
+    val indicatorColor = artwork?.scheme?.primary ?: MaterialTheme.colorScheme.onBackground
+
     Box(
         Modifier
             .fillMaxWidth()
             .padding(start = 8.dp, end = 12.dp),
     ) {
-        if (current != null && indicatorLeft != null && indicatorRight != null) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
             Box(
                 modifier =
                     Modifier
-                        .offset { IntOffset(indicatorLeft.roundToInt(), current.top.roundToInt()) }
-                        .width(with(density) { (indicatorRight - indicatorLeft).toDp() })
-                        .height(with(density) { current.height.toDp() })
                         .clip(RoundedCornerShape(8.dp))
-                        .background(artwork?.scheme?.primary ?: MaterialTheme.colorScheme.onBackground),
+                        .background(headerColor)
+                        .drawBehind {
+                            if (current != null && indicatorLeft != null && indicatorRight != null) {
+                                drawRoundRect(
+                                    color = indicatorColor,
+                                    topLeft = Offset(indicatorLeft, current.top),
+                                    size = Size(indicatorRight - indicatorLeft, current.height),
+                                    cornerRadius = CornerRadius(8.dp.toPx()),
                                 )
                             }
-
+                        },
+            ) {
                 Row(
-            modifier = Modifier.fillMaxWidth(),
                     verticalAlignment = Alignment.CenterVertically,
                     horizontalArrangement = Arrangement.spacedBy(4.dp),
                 ) {
@@ -707,6 +718,8 @@ private fun LibraryTabs(
                                 },
                         )
                     }
+                }
+            }
             Spacer(Modifier.weight(1f))
             if (syncing) {
                 CircularProgressIndicator(
@@ -714,6 +727,12 @@ private fun LibraryTabs(
                     strokeWidth = 2.dp,
                 )
             }
+            Box(
+                modifier =
+                    Modifier
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(headerColor),
+            ) {
                 IconButton(onClick = onOpenSettings) {
                     Icon(
                         imageVector = Icons.Rounded.Settings,
@@ -723,6 +742,7 @@ private fun LibraryTabs(
                 }
             }
         }
+    }
 }
 
 @OptIn(ExperimentalMaterial3Api::class)