revert the now playing destination; drop the NavHost while the overlay is up

- restore the now playing overlay (the destination had too much moving during the
  transition); while the overlay is open, omit the NavHost so it has no back callback
  to steal the back from the overlay's BackHandler
- first disc header gets a little top padding (16dp), the rest keep 40dp
- keep the fab glyph container 28dp so the filter dot aligns as before

app/src/main/kotlin/com/subtracks/ui/AppRoot.kt

@@ -5,7 +5,6 @@ import androidx.activity.compose.BackHandler
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animate
 import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
@@ -92,8 +91,10 @@ class RootViewModel(
 
 private const val NAVIGATION_DURATION_MS = 260
 private const val OVERLAY_DURATION_MS = 200
+private const val EXPAND_FADE = 0.1f
 private const val FLING_VELOCITY = 1000f
 private const val MINI_PLAYER_ANIM_MS = 200
+private const val SCRIM_FADE_START = 0.85f
 
 private object Routes {
     const val LIBRARY = "library"
@@ -102,7 +103,6 @@ private object Routes {
     const val ALBUM_DETAIL = "album/{albumId}?coverArt={coverArt}"
     const val ARTIST_DETAIL = "artist/{artistId}?coverArt={coverArt}"
     const val PLAYLIST_DETAIL = "playlist/{playlistId}"
-    const val NOW_PLAYING = "now-playing"
 
     fun album(
         id: String,
@@ -140,16 +140,39 @@ private fun MainNavigation() {
     val playbackController = koinInject<PlaybackController>()
     val playback by playbackController.state.collectAsStateWithLifecycle()
     var showingQueue by rememberSaveable { mutableStateOf(false) }
+    var nowPlayingOpen by rememberSaveable { mutableStateOf(false) }
+    var nowPlayingProgress by remember { mutableFloatStateOf(0f) }
+    var miniPlayerTopPx by remember { mutableFloatStateOf(0f) }
+    var settleJob by remember { mutableStateOf<Job?>(null) }
+    val scope = rememberCoroutineScope()
+
+    fun settleNowPlaying(open: Boolean) {
+        if (open) nowPlayingOpen = true
+        settleJob?.cancel()
+        settleJob =
+            scope.launch {
+                animate(nowPlayingProgress, if (open) 1f else 0f, animationSpec = tween(OVERLAY_DURATION_MS)) { value, _ ->
+                    nowPlayingProgress = value
+                }
+                if (!open) nowPlayingOpen = false
+            }
+    }
     LaunchedEffect(Unit) { playbackController.connect() }
+    LaunchedEffect(Unit) { if (nowPlayingOpen) nowPlayingProgress = 1f }
 
     val playerVisible = playback.item != null
-    val onNowPlaying = currentRoute == Routes.NOW_PLAYING
+    LaunchedEffect(playerVisible) {
-    val scrimAlpha by animateFloatAsState(if (onNowPlaying) 1f else 0f, tween(NAVIGATION_DURATION_MS), label = "scrim")
+        if (!playerVisible) {
+            settleJob?.cancel()
+            nowPlayingOpen = false
+            nowPlayingProgress = 0f
+        }
+    }
     val density = LocalDensity.current
     val navBarInset = with(density) { WindowInsets.navigationBars.getBottom(this).toDp() }
     val statusBarInset = with(density) { WindowInsets.statusBars.getTop(this).toDp() }
     val keyboardUp = WindowInsets.imeAnimationTarget.getBottom(density) > 0
-    val showMiniPlayer = playerVisible && !keyboardUp && !onNowPlaying
+    val showMiniPlayer = playerVisible && !keyboardUp
     val bottomInset by animateDpAsState(
         targetValue = if (showMiniPlayer) 0.dp else navBarInset,
         animationSpec = tween(MINI_PLAYER_ANIM_MS),
@@ -160,11 +183,15 @@ private fun MainNavigation() {
     ArtworkTheme(artwork) {
         Box(Modifier.fillMaxSize()) {
             Column(Modifier.fillMaxSize().imePadding()) {
+                Box(Modifier.weight(1f)) {
+                    // The now playing overlay covers this, and while it is up we drop the NavHost so
+                    // it cannot steal the back from the overlay's BackHandler.
+                    if (!nowPlayingOpen) {
                         NavHost(
                             navController = navController,
                             modifier =
                                 Modifier
-                            .weight(1f)
+                                    .fillMaxSize()
                                     .then(
                                         if (playerVisible) {
                                             Modifier.consumeWindowInsets(WindowInsets.navigationBars)
@@ -263,36 +290,6 @@ private fun MainNavigation() {
                                     onBack = { navController.popBackStack() },
                                 )
                             }
-                    composable(
-                        route = Routes.NOW_PLAYING,
-                        enterTransition = {
-                            slideInVertically(initialOffsetY = { it }, animationSpec = tween(NAVIGATION_DURATION_MS))
-                        },
-                        exitTransition = {
-                            slideOutVertically(targetOffsetY = { it }, animationSpec = tween(NAVIGATION_DURATION_MS))
-                        },
-                        popEnterTransition = {
-                            slideInVertically(initialOffsetY = { it }, animationSpec = tween(NAVIGATION_DURATION_MS))
-                        },
-                        popExitTransition = {
-                            slideOutVertically(targetOffsetY = { it }, animationSpec = tween(NAVIGATION_DURATION_MS))
-                        },
-                    ) {
-                        Box(
-                            modifier =
-                                Modifier
-                                    .fillMaxSize()
-                                    .draggable(
-                                        orientation = Orientation.Vertical,
-                                        state = rememberDraggableState { },
-                                        onDragStopped = { velocity -> if (velocity > FLING_VELOCITY) navController.popBackStack() },
-                                    ),
-                        ) {
-                            NowPlayingRoute(
-                                onBack = { navController.popBackStack() },
-                                onQueue = { showingQueue = true },
-                                modifier = Modifier.fillMaxSize(),
-                            )
                         }
                     }
                 }
@@ -307,28 +304,65 @@ private fun MainNavigation() {
                         state = playback,
                         coverArt = miniArt,
                         artwork = artwork,
-                        onExpand = { navController.navigate(Routes.NOW_PLAYING) },
+                        onExpand = { settleNowPlaying(true) },
                         onPlayPause = playbackController::togglePlayPause,
                         onNext = playbackController::next,
                         progressInset = tabBarVisible,
-                        onExpandRelease = { velocity -> if (velocity < -FLING_VELOCITY) navController.navigate(Routes.NOW_PLAYING) },
+                        onExpandDrag = { dragUpPx ->
+                            nowPlayingOpen = true
+                            settleJob?.cancel()
+                            if (miniPlayerTopPx > 0f) {
+                                nowPlayingProgress = (dragUpPx / miniPlayerTopPx).coerceIn(0f, 1f)
+                            }
+                        },
+                        onExpandRelease = { velocity -> settleNowPlaying(nowPlayingProgress > 0.05f || velocity < -FLING_VELOCITY) },
+                        modifier = Modifier.onGloballyPositioned { miniPlayerTopPx = it.positionInRoot().y },
                     )
                 }
             }
 
+            if (nowPlayingOpen) {
+                Box(
+                    modifier =
+                        Modifier
+                            .fillMaxSize()
+                            .graphicsLayer {
+                                translationY = (1f - nowPlayingProgress) * miniPlayerTopPx
+                                alpha = (nowPlayingProgress / EXPAND_FADE).coerceAtMost(1f)
+                            }.draggable(
+                                orientation = Orientation.Vertical,
+                                state =
+                                    rememberDraggableState { delta ->
+                                        settleJob?.cancel()
+                                        if (miniPlayerTopPx > 0f) {
+                                            nowPlayingProgress = (nowPlayingProgress - delta / miniPlayerTopPx).coerceIn(0f, 1f)
+                                        }
+                                    },
+                                onDragStopped = { velocity -> settleNowPlaying(nowPlayingProgress > 0.9f && velocity < FLING_VELOCITY) },
+                            ),
+                ) {
+                    NowPlayingRoute(
+                        onBack = { settleNowPlaying(false) },
+                        onQueue = { showingQueue = true },
+                        modifier = Modifier.fillMaxSize(),
+                    )
+                }
+
                 Box(
                     modifier =
                         Modifier
                             .align(Alignment.TopCenter)
                             .fillMaxWidth()
                             .height(statusBarInset + 8.dp)
-                        .graphicsLayer { alpha = scrimAlpha }
+                            .graphicsLayer {
-                        .background(
+                                alpha = ((nowPlayingProgress - SCRIM_FADE_START) / (1f - SCRIM_FADE_START)).coerceIn(0f, 1f)
+                            }.background(
                                 Brush.verticalGradient(
                                     listOf(Color.Black.copy(alpha = 0.55f), Color.Transparent),
                                 ),
                             ),
                 )
+            }
 
             AnimatedVisibility(
                 visible = showingQueue,
@@ -344,4 +378,7 @@ private fun MainNavigation() {
     }
 
     BackHandler(enabled = showingQueue) { showingQueue = false }
+    BackHandler(enabled = nowPlayingOpen && !showingQueue) {
+        settleNowPlaying(false)
+    }
 }

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

@@ -153,7 +153,7 @@ private fun DiscHeader(
 ) {
     Row(
         verticalAlignment = Alignment.CenterVertically,
-        modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = if (first) 0.dp else 40.dp, bottom = 4.dp),
+        modifier = Modifier.padding(start = 16.dp, end = 16.dp, top = if (first) 16.dp else 40.dp, bottom = 4.dp),
     ) {
         Icon(
             imageVector = Icons.Outlined.FiberSmartRecord,

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

@@ -482,7 +482,7 @@ fun LibraryScreen(
                 elevation = FloatingActionButtonDefaults.elevation(defaultElevation = 12.dp),
                 modifier = Modifier.align(Alignment.BottomEnd).padding(end = 16.dp, bottom = tabBarHeight + 16.dp),
             ) {
-                Box {
+                Box(Modifier.size(28.dp), contentAlignment = Alignment.Center) {
                     ListOptionsGlyph(
                         modifier =
                             Modifier