keep the mini player off the nav bar and restore full saturation

app/src/main/kotlin/com/subtracks/ui/playback/MiniPlayer.kt

@@ -1,15 +1,19 @@
 package com.subtracks.ui.playback
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.basicMarquee
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Pause
@@ -34,7 +38,6 @@ import com.subtracks.playback.PlaybackState
 import com.subtracks.ui.components.CoverArt
 import com.subtracks.ui.theme.ArtworkColors
 import com.subtracks.ui.theme.ArtworkTheme
-import com.subtracks.ui.theme.toHsl
 
 @Composable
 fun MiniPlayer(
@@ -48,77 +51,79 @@ fun MiniPlayer(
 ) {
     val item = state.item ?: return
     ArtworkTheme(artwork) {
-        Surface(
+        Column(modifier.fillMaxWidth()) {
-            color =
+            Surface(
-                artwork?.let {
+                color =
-                    val (hue, saturation, lightness) = lerp(it.scheme.surfaceContainerHigh, it.gradientHigh, 0.5f).toHsl()
+                    artwork?.let { lerp(it.scheme.surfaceContainerHigh, it.gradientHigh, 0.5f) }
-                    Color.hsl(hue, saturation * 0.8f, lightness)
+                        ?: MaterialTheme.colorScheme.surfaceContainerHigh,
-                } ?: MaterialTheme.colorScheme.surfaceContainerHigh,
+                contentColor = MaterialTheme.colorScheme.onSurface,
-            contentColor = MaterialTheme.colorScheme.onSurface,
-            modifier =
-                modifier.fillMaxWidth().clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    indication = null,
-                    onClick = onExpand,
-                ),
-        ) {
-            Row(
                 modifier =
-                    Modifier
+                    Modifier.fillMaxWidth().clickable(
-                        .fillMaxWidth()
+                        interactionSource = remember { MutableInteractionSource() },
-                        .navigationBarsPadding()
+                        indication = null,
-                        .padding(start = 12.dp, end = 4.dp, top = 12.dp, bottom = 12.dp),
+                        onClick = onExpand,
-                verticalAlignment = Alignment.CenterVertically,
+                    ),
-                horizontalArrangement = Arrangement.spacedBy(12.dp),
             ) {
-                CoverArt(
+                Row(
-                    ref = coverArt,
+                    modifier =
-                    name = item.title,
+                        Modifier
-                    modifier = Modifier.size(56.dp).clip(RoundedCornerShape(6.dp)),
+                            .fillMaxWidth()
-                )
+                            .padding(start = 12.dp, end = 4.dp, top = 12.dp, bottom = 12.dp),
-                Column(Modifier.weight(1f)) {
+                    verticalAlignment = Alignment.CenterVertically,
-                    Text(
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
-                        text = item.title,
+                ) {
-                        style = MaterialTheme.typography.bodyMedium,
+                    CoverArt(
-                        color = MaterialTheme.colorScheme.onSurface,
+                        ref = coverArt,
-                        maxLines = 1,
+                        name = item.title,
-                        modifier = Modifier.basicMarquee(),
+                        modifier = Modifier.size(56.dp).clip(RoundedCornerShape(6.dp)),
                     )
-                    Text(
+                    Column(Modifier.weight(1f)) {
-                        text = listOfNotNull(item.artist, item.album).joinToString(" • "),
+                        Text(
-                        style = MaterialTheme.typography.bodySmall,
+                            text = item.title,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                            style = MaterialTheme.typography.bodyMedium,
-                        maxLines = 1,
+                            color = MaterialTheme.colorScheme.onSurface,
-                        modifier = Modifier.basicMarquee(),
+                            maxLines = 1,
-                    )
+                            modifier = Modifier.basicMarquee(),
-                }
+                        )
-                Row(verticalAlignment = Alignment.CenterVertically) {
+                        Text(
-                    IconButton(onClick = onPlayPause, modifier = Modifier.size(56.dp)) {
+                            text = listOfNotNull(item.artist, item.album).joinToString(" • "),
-                        if (state.isBuffering && state.isPlaying) {
+                            style = MaterialTheme.typography.bodySmall,
-                            CircularProgressIndicator(
+                            color = MaterialTheme.colorScheme.onSurfaceVariant,
-                                color = MaterialTheme.colorScheme.onSurface,
+                            maxLines = 1,
-                                strokeWidth = 3.dp,
+                            modifier = Modifier.basicMarquee(),
-                                modifier = Modifier.size(28.dp),
+                        )
-                            )
+                    }
-                        } else {
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        IconButton(onClick = onPlayPause, modifier = Modifier.size(56.dp)) {
+                            if (state.isBuffering && state.isPlaying) {
+                                CircularProgressIndicator(
+                                    color = MaterialTheme.colorScheme.onSurface,
+                                    strokeWidth = 3.dp,
+                                    modifier = Modifier.size(28.dp),
+                                )
+                            } else {
+                                Icon(
+                                    imageVector = if (state.isPlaying) Icons.Rounded.Pause else Icons.Rounded.PlayArrow,
+                                    contentDescription = if (state.isPlaying) "Pause" else "Play",
+                                    tint = MaterialTheme.colorScheme.onSurface,
+                                    modifier = Modifier.size(42.dp),
+                                )
+                            }
+                        }
+                        IconButton(onClick = onNext, enabled = state.hasNext, modifier = Modifier.size(56.dp)) {
                             Icon(
-                                imageVector = if (state.isPlaying) Icons.Rounded.Pause else Icons.Rounded.PlayArrow,
+                                imageVector = Icons.Rounded.SkipNext,
-                                contentDescription = if (state.isPlaying) "Pause" else "Play",
+                                contentDescription = "Next",
                                 tint = MaterialTheme.colorScheme.onSurface,
                                 modifier = Modifier.size(42.dp),
                             )
                         }
                     }
-                    IconButton(onClick = onNext, enabled = state.hasNext, modifier = Modifier.size(56.dp)) {
-                        Icon(
-                            imageVector = Icons.Rounded.SkipNext,
-                            contentDescription = "Next",
-                            tint = MaterialTheme.colorScheme.onSurface,
-                            modifier = Modifier.size(42.dp),
-                        )
-                    }
                 }
             }
+            Spacer(
+                Modifier.fillMaxWidth().windowInsetsBottomHeight(WindowInsets.navigationBars).background(Color.Black),
+            )
         }
     }
 }