docs: improve formatting and clarity in the documentation

- Add new desktop and iOS screenshots under assets/screenshots, named by screen, theme and form factor, and optimized with pngquant + oxipng
- Add feature graphics under assets/feature-graphics: Play Store feature graphic, README hero and mobile strip, and phone/desktop store shots
- Use them in the README, Flathub metainfo (plain screenshots) and F-Droid metadata (phone screenshots + featureGraphic)
- Replace the Steam library hero with one made from the new UI
- Remove the old desktop and mobile screenshots

README.md

@@ -2,7 +2,8 @@
   <img width="600" src="assets/branding/spotube_banner.png" alt="Spotube Logo">
 
 A cross-platform extensible open-source music streaming platform.<br>
-Bring your own music metadata/playlist/audio-source with plugins created by community or by yourself. A small step towards the decentralized music streaming era!
+Bring your own music metadata/playlist/audio-source with plugins created by community or by
+yourself. A small step towards the decentralized music streaming era!
 
 <a href="https://spotube.cc"><img alt="Visit the website" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/documentation/website_vector.svg"></a>
 <a href="https://discord.gg/uJ94vxB6vg"><img alt="Discord Server" height="56" src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/cozy/social/discord-plural_vector.svg"></a>
@@ -16,17 +17,16 @@ Bring your own music metadata/playlist/audio-source with plugins created by comm
 
 ---
 
-![Spotube Desktop](assets/branding/spotube-screenshot.png)
+![Spotube Desktop](assets/feature-graphics/readme-hero.png)
+![Spotube Mobile](assets/feature-graphics/readme-mobile.png)
 
-![Spotube Mobile](assets/branding/mobile-screenshots/combined.jpg)
-
-</div>
+****</div>
 
 ## 🌃 Features
 
 - 🧩 Plugin powered, supports any platform or custom music service through plugins.
 - 🗺️ Community driven plugins for popular platforms or create your own.
-- ⬇️ Freely downloadable tracks with tagged metadata.
+- ⬇️ Freely downloadable tracks with tagged **metadata**.
 - 🖥️ 📱 Cross-platform support.
 - 🪶 Small size & less data usage.
 - 🕒 Time synced lyrics regardless of the plugin support.
@@ -41,132 +41,183 @@ Download Spotube from the Official Website: https://spotube.cc
 
 ### 🔄 Nightly Builds
 
-Grab the latest nightly builds of Spotube [from the Offical Website](https://spotube.cc/downloads/nightly).
-
-## 🕳️ Building from source
+Grab the latest nightly builds of
+Spotube [from the Offical Website](https://spotube.cc/downloads/nightly).
 
+<details>
+<summary>
+<h3 style="display: inline;">🕳️ Building from source [Click to expand]</h3>
+</summary>
+<hr/>
 <a href="https://github.com/team-spotube/spotube/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/KRTirtho/spotube/spotube-release-binary.yml?+label=Build%20Status"></a>
 
-Spotube is a Kotlin Multiplatform + Compose Multiplatform app. The desktop app is built with the [Nucleus](https://nucleusframework.dev) Gradle plugin and released as a **GraalVM native image**: an ahead-of-time compiled binary that needs no JVM installed.
+Spotube is a Compose Multiplatform app.
 
-### Prerequisites
+### 1. Prerequisites
 
-- **JDK 21** to run Gradle. The Gradle daemon JDK and the GraalVM toolchain are provisioned automatically.
-- **Rust** (`rustup` + `cargo`). The `composeApp` Rust library is built through [Gobley](https://gobley.dev).
+- **JDK 21** to run Gradle (the Gradle daemon JDK and GraalVM are provisioned automatically).
+- **Rust** (`rustup` + `cargo`), for the `composeApp` library built
+  through [Gobley](https://gobley.dev).
 - **Android SDK**, only for Android builds.
-- **Unpublished dependency.** One dependency isn't on Maven Central yet. Clone it and run `./gradlew publishToMavenLocal` in it:
-  - [kdroidFilter/ComposeNativeWebview](https://github.com/kdroidFilter/ComposeNativeWebview), at the commit pinned in [`spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml) (`COMPOSE_WEBVIEW_COMMIT`)
-- **Linux runtime libraries** (needed to run the app, including `:composeApp:run`). The `.deb`/`.rpm` install these as dependencies from your distro. For a source build, install them yourself, **including VLC**. Only the `.AppImage` is self-contained (it bundles VLC, GTK 3 and WebKitGTK, and uses just the host's glibc, graphics, X11 and sound libraries):
+- **[ComposeNativeWebview](https://github.com/kdroidFilter/ComposeNativeWebview)**, which isn't on
+  Maven Central yet. Clone it at the commit pinned as `COMPOSE_WEBVIEW_COMMIT` in [
+  `spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml) and run
+  `./gradlew publishToMavenLocal` in it.
+- **Linux only: runtime libraries, including VLC.** Needed to run the app, including
+  `:composeApp:run`:
 
-  | Distro | Command |
-  |---|---|
-  | Debian/Ubuntu | `sudo apt-get install libvlc5 vlc-plugin-base libwebkit2gtk-4.1-0 libgtk-3-0 libasound2 libgl1 libxtst6 libxi6 libxrender1` |
-  | Fedora | `sudo dnf install vlc-libs webkit2gtk4.1 gtk3 alsa-lib mesa-libGL libXtst libXi libXrender`. `vlc-libs` is only in [RPM Fusion](https://rpmfusion.org/Configuration), so enable it first. |
-  | Arch / CachyOS / Manjaro | `sudo pacman -S vlc webkit2gtk-4.1 gtk3 alsa-lib libglvnd libxtst libxi libxrender` |
-  | openSUSE | `sudo zypper install libvlc5 libwebkit2gtk-4_1-0 libgtk-3-0 libasound2 Mesa-libGL1 libXtst6 libXi6 libXrender1` (for wide codec support, switch to the [Packman](https://en.opensuse.org/Additional_package_repositories#Packman) repo's VLC) |
+  | Distro                   | Command                                                                                                                                                          |
+  | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+  | Debian/Ubuntu            | `sudo apt-get install libvlc5 vlc-plugin-base libwebkit2gtk-4.1-0 libgtk-3-0 libasound2 libgl1 libxtst6 libxi6 libxrender1`                                      |
+  | Fedora                   | `sudo dnf install vlc-libs webkit2gtk4.1 gtk3 alsa-lib mesa-libGL libXtst libXi libXrender` (`vlc-libs` needs [RPM Fusion](https://rpmfusion.org/Configuration)) |
+  | Arch / CachyOS / Manjaro | `sudo pacman -S vlc webkit2gtk-4.1 gtk3 alsa-lib libglvnd libxtst libxi libxrender`                                                                              |
+  | openSUSE                 | `sudo zypper install libvlc5 libwebkit2gtk-4_1-0 libgtk-3-0 libasound2 Mesa-libGL1 libXtst6 libXi6 libXrender1`                                                  |
 
-  Arch-based distros and openSUSE have no native package here. Use the `.AppImage`. The `.rpm` is built with Fedora package names, so it won't resolve on openSUSE.
+  On Ubuntu 24.04+/Debian 13, `libgtk-3-0` and `libasound2` are `libgtk-3-0t64` and `libasound2t64`;
+  apt resolves this itself.
 
-  On Ubuntu 24.04+/Debian 13 `libgtk-3-0` and `libasound2` are named `libgtk-3-0t64` and `libasound2t64`; apt resolves this automatically.
-
-Always use the Gradle wrapper (`./gradlew`, or `gradlew.bat` on Windows).
-
-### Development
+### 2. Run in development
 
+Desktop (JVM), fastest edit/run loop
 ```bash
-./gradlew :composeApp:run                    # desktop (JVM), fastest edit/run loop
-./gradlew :composeApp:assembleStableDebug    # Android debug APK (or assembleNightlyDebug)
+./gradlew :composeApp:run
 ```
 
-Development builds stay fast. The release-only optimizations (the Rust release profile with LTO and symbol stripping, the native image, native-library pruning) are only applied when you build something to ship. See [Production vs development builds](#production-vs-development-builds).
+Android debug APK
+```bash
+./gradlew :composeApp:assembleStableDebug
+```
+> Use `./gradlew :composeApp:assembleNightlyDebug` for the nightly channel.
 
-### Building the desktop app (GraalVM native image)
+Development builds stay fast: the release-only optimizations below are skipped.
 
-#### Native toolchain
+### 3. Build the desktop app
 
-[Nucleus downloads and caches GraalVM CE](https://nucleusframework.dev/en/docs/performance/graalvm/) under `~/.gradle/nucleus/graalvm` on the first native build. Set `GRAALVM_HOME` to use your own GraalVM instead. Each OS also needs a native C toolchain:
+A native build takes **about 10 minutes**, uses **every CPU core** and peaks at **~15 GB of RAM**.
+It only happens for the tasks below, never for `run`.
 
-| OS | Requirements |
-|---|---|
-| Linux | `gcc`, `zlib` headers, `patchelf`; plus `rpm` for `.rpm` packages, `fuse` for `.AppImage`, and, for the AppImage's bundled libraries, `zstd` (plus `ar`/`tar` and `readelf`, from binutils). Debian/Ubuntu: `sudo apt-get install build-essential zlib1g-dev patchelf rpm fuse zstd`. Fedora: `sudo dnf install gcc zlib-devel patchelf rpm-build fuse zstd` (also install the [Linux runtime libraries](#prerequisites) to run what you build) |
-| macOS | Xcode Command Line Tools (`xcode-select --install`) |
-| Windows | Visual Studio Build Tools with the "Desktop development with C++" workload. Build from an "x64 Native Tools" prompt if `native-image` can't find MSVC. |
+**Native toolchain** (Nucleus downloads GraalVM CE on the first build; set `GRAALVM_HOME` to use
+your own):
 
-A native build is a whole-program compile. It takes **about 10 minutes**, uses **every CPU core**, and peaks at roughly **15 GB of RAM** (it gets slower, not broken, with less). That only happens for the native tasks below, never for `run`.
+| OS      | Requirements                                                                                                                                                                                                                                                    |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Linux   | `gcc`, `zlib` headers, `patchelf`; `rpm` for `.rpm`, `fuse` + `zstd` for `.AppImage`. <br/>Debian/Ubuntu: `sudo apt-get install build-essential zlib1g-dev patchelf rpm fuse zstd`. <br/>Fedora: `sudo dnf install gcc zlib-devel patchelf rpm-build fuse zstd` |
+| macOS   | Xcode Command Line Tools (`xcode-select --install`)                                                                                                                                                                                                             |
+| Windows | Visual Studio Build Tools with "Desktop development with C++" (use an "x64 Native Tools" prompt if `native-image` can't find MSVC)                                                                                                                              |
 
-#### Build and run
+**Build and run the app folder:**
 
 ```bash
-# App folder: binary + its native libs, in composeApp/build/compose/binaries/main/graalvm-app/
 ./gradlew :composeApp:createGraalvmNativeDistributable
+```
+> Output folder: composeApp/build/compose/binaries/main/graalvm-app/
 
-# Run that folder's binary directly
-./composeApp/build/compose/binaries/main/graalvm-app/org.spotube.spotube/spotube
-
-# Or build and launch in one step
+Build and launch in one step
+```bash
 ./gradlew :composeApp:runGraalvmNativeDistributable
 ```
 
-Keep the `spotube` binary next to the `.so`/`.dll`/`lib/` files it was built with; it loads them from its own folder.
+Keep the `spotube` binary next to the libraries it was built with; it loads them from its own
+folder.
 
-#### Installers
+**Installers** (each OS builds only its own):
 
-Each OS can only build its own installers:
+| OS               | Command                                                                 |
+| ---------------- | ----------------------------------------------------------------------- |
+| Linux            | `./gradlew :composeApp:packageGraalvmDeb :composeApp:packageGraalvmRpm` |
+| Linux (AppImage) | `./gradlew :composeApp:packageGraalvmAppImage -PappImage=true`          |
+| Windows          | `./gradlew :composeApp:packageGraalvmExe` (or `packageGraalvmMsi`)      |
+| macOS            | `./gradlew :composeApp:packageGraalvmDmg`                               |
+> Output folder: `composeApp/build/compose/binaries/main/graalvm-<format>`
 
-| OS | Command | Output |
-|---|---|---|
-| Linux | `./gradlew :composeApp:packageGraalvmDeb :composeApp:packageGraalvmRpm`, then `./gradlew :composeApp:packageGraalvmAppImage -PappImage=true` | `composeApp/build/compose/binaries/main/graalvm-{deb,rpm,appimage}/` |
-| Windows | `./gradlew :composeApp:packageGraalvmExe` (or `packageGraalvmMsi`) | `composeApp/build/compose/binaries/main/graalvm-exe/` |
-| macOS | `./gradlew :composeApp:packageGraalvmDmg` | `composeApp/build/compose/binaries/main/graalvm-dmg/` |
+> [!Tip]
+> Add `-Pnightly=true` for the nightly channel (separate icons and name).
 
-Add `-Pnightly=true` for the nightly channel (separate icons and name).
+<details>
+<summary>How the Linux AppImage bundle works</summary>
 
-The `.deb` and `.rpm` use your distro's shared libraries and declare them as dependencies, so the package manager installs them (on Fedora, `vlc-libs` needs RPM Fusion enabled). The `.AppImage` is the self-contained one: it bundles VLC, GTK 3 and WebKitGTK (see [What the AppImage bundles](#what-the-appimage-bundles)).
+- [`DownloadLinuxGtkBundleTask`](buildSrc/src/main/kotlin/org/spotube/gradle/DownloadLinuxGtkBundleTask.kt)
+  downloads the Ubuntu 24.04 packages (audio-only VLC via
+  [vlcj-bundler](https://github.com/team-spotube/vlcj-bundler-gradle-plugin), GTK 3, WebKitGTK 4.1,
+  glib-networking), keeps only what GTK/WebKit reach and relocates the libraries with `patchelf`.
+  Needs `ar`, `tar`, `zstd`, `readelf`, `patchelf`.
+- WebKitGTK has its helper-process path compiled in, so
+  [`AppImageEnvironment`](composeApp/src/jvmMain/kotlin/org/spotube/spotube/core/appimage/AppImageEnvironment.kt)
+  patches it to a relative path and moves to that directory at startup. It also sets
+  `GIO_EXTRA_MODULES` and `WEBKIT_DISABLE_DMABUF_RENDERER=1` (the bundled WebKitGTK 2.44 never
+  paints against a newer host Mesa).
+- `main()` must call `GraalVmInitializer.initialize()` first: the VLC loader and the environment
+  setup read `compose.application.resources.dir`.
 
-#### What the AppImage bundles
+</details>
 
-Build it with `./gradlew :composeApp:packageGraalvmAppImage -PappImage=true`. Without `-PappImage=true` nothing is bundled and the app uses the system libraries, which is what the `.deb`/`.rpm` and `:composeApp:run` do.
+### 4. Native build breaks, JVM works
 
-The bundle follows the [AppImage exclude list](https://github.com/AppImageCommunity/pkg2appimage/blob/master/excludelist) and what Tauri apps ship. It carries VLC (audio-only, from the [vlcj-bundler](https://github.com/team-spotube/vlcj-bundler-gradle-plugin) plugin's `bundleVlc` option), GTK 3, WebKitGTK 4.1, GLib/GIO, pango/cairo and their dependencies, plus glib-networking for HTTPS in the webview. It leaves the host's glibc, `libstdc++`, `libz`, GL/EGL/DRM, X11/xcb, ALSA, fontconfig/freetype/harfbuzz and the Wayland libraries alone, so the host's graphics, display and sound stack is used. Everything is taken from the Ubuntu 24.04 archive, so the AppImage needs glibc 2.38 or newer.
+A native image is a closed world: everything reached through reflection, JNI or JNA (vlcj, Zipline,
+NewPipe, ktor, datastore, ...) must be declared at build time. Nucleus generates most of it; the
+rest lives in [`composeApp/graalvm/reachability-metadata.json`](composeApp/graalvm/reachability-metadata.json).
 
-How it works, in short:
-- [`DownloadLinuxGtkBundleTask`](buildSrc/src/main/kotlin/org/spotube/gradle/DownloadLinuxGtkBundleTask.kt) downloads the packages, keeps the libraries reachable from GTK/WebKit and relocates them with `patchelf`. Needs `ar`, `tar`, `zstd`, `readelf` and `patchelf`.
-- WebKitGTK has its helper-process path compiled in, so the library is patched to look relative to the working directory, and at startup the app moves there ([`AppImageEnvironment`](composeApp/src/jvmMain/kotlin/org/spotube/spotube/core/appimage/AppImageEnvironment.kt)). It also points `GIO_EXTRA_MODULES` at the bundled TLS module and sets `WEBKIT_DISABLE_DMABUF_RENDERER=1`, because the bundled WebKitGTK 2.44's dmabuf renderer never paints (or aborts) against a newer host Mesa/compositor. The display backend is left alone: forcing X11 doesn't help, since the webview doesn't paint on XWayland either.
-- Startup order matters: `main()` calls `GraalVmInitializer.initialize()` first, since the VLC loader and the environment setup read `compose.application.resources.dir`.
+Symptoms: `ClassNotFoundException`, `NoSuchMethodException` or `MissingReflectionRegistrationError`
+in the native binary, while `:composeApp:run` works.
 
-#### Reflection metadata (when a feature breaks only in the native build)
+1. `./gradlew :composeApp:runWithNativeAgent` starts the app on the JVM with GraalVM's tracing agent.
+2. Use the broken feature, then **close the window normally**. Ctrl+C discards the recording.
+3. Commit the updated JSON in `composeApp/graalvm/` and rebuild.
 
-A native image is a closed world: anything the app reaches through reflection, JNI or JNA (vlcj, the Zipline/QuickJS plugin engine, NewPipe, ktor, datastore, …) must be declared at build time. Nucleus generates most of this automatically. The rest is in [`composeApp/graalvm/reachability-metadata.json`](composeApp/graalvm/reachability-metadata.json).
+> [!Tip]
+> `./gradlew :composeApp:runGraalvmNative` is a faster debug loop: a quick `-Ob` build that names the
+> missing registration.
 
-If something works in `:composeApp:run` but throws `ClassNotFoundException`, `NoSuchMethodException`, `MissingReflectionRegistrationError` or similar in the native binary, record what's missing:
+> [!Warning]
+> Keep the hand-written `uk.co.caprica.vlcj.binding.lib.LibVlc` entry, or playback fails to initialize.
 
-```bash
-./gradlew :composeApp:runWithNativeAgent
-```
+### 5. Production vs development builds
 
-The app starts on the JVM with GraalVM's tracing agent attached. Use the broken feature (and anything near it), then **close the window normally**: the recorded entries are merged into `composeApp/graalvm/` only on a clean exit, not with Ctrl+C. Commit the updated JSON and rebuild the native image.
+Production mode turns on automatically for `package*`, `create*`, `notarize*` and
+`nativeImageCompile` tasks. Force it with `-Pproduction=true|false`.
 
-`./gradlew :composeApp:runGraalvmNative` gives a faster debugging loop: a quick-build (`-Ob`) native image that reports exactly which registration is missing.
+| Area        | Development            | Production                                                                                                               |
+| ----------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| Rust lib    | fast `debug` profile   | `release` with LTO and stripping (31 MB → 1.8 MB)                                                                        |
+| Desktop app | hot-reloadable JVM app | size-optimized (`-Os`) GraalVM native image                                                                              |
+| Native libs | all                    | host OS/CPU only; Skia loaded from `lib/`; on Linux ~10 KB `libjvm.so`/`libjava.so` shims instead of the JDK's 28 MB one |
 
-Keep the hand-written `uk.co.caprica.vlcj.binding.lib.LibVlc` entry. JNA's direct mapping looks up its `native` methods through reflection, and without the entry, playback fails to initialize.
+Android picks the Rust profile from its build type.
 
-### Production vs development builds
+### 6. Releases
 
-Production mode is switched on automatically when you ask Gradle for a shippable artifact: any `package*`, `create*`, `notarize*` or `nativeImageCompile` task. You can force it either way with `-Pproduction=true` or `-Pproduction=false`.
+Run [`spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml) manually
+(`workflow_dispatch`) as `stable`, `beta` or `nightly`.
 
-| | Development (`run`, debug builds) | Production (installers, native image) |
-|---|---|---|
-| Rust library (desktop) | `debug` profile, fast incremental compile | `release` profile with LTO, single codegen unit, stripped (31 MB → 1.8 MB) |
-| Desktop app | JVM, hot-reloadable | GraalVM native image, `-Os` (size-optimized) |
-| Native libraries | everything on the classpath | only the host OS/CPU's natives; other OSes' and CPUs' libraries are pruned from the uber JAR the image is compiled from |
-| Skia (Skiko) | extracted from the JAR | loaded from `lib/` next to the binary, not embedded a second time |
-| JDK runtime libs (Linux) | n/a | native-image's ~10 KB `libjvm.so`/`libjava.so` shims instead of the JDK's (28 MB `libjvm.so`) |
+- **Beta:** the stable build as a draft, tagged `v<version>-beta.N`. Set `betaNumber` in
+  `composeApp/build.gradle.kts` to N, and back to `null` for stable.
+- **Desktop:** each platform (Linux x86_64 and aarch64, Windows, macOS) builds its installers on its
+  own runner.
+- **Android:** a signed APK.
 
-Android picks the Rust profile from its build type (`debug` or `release`) on its own.
+</details>
+<hr/>
 
-### Releases
+## 📚 Resources
 
-Releases are built by [`spotube-release-binary.yml`](.github/workflows/spotube-release-binary.yml), run manually (`workflow_dispatch`) as `stable`, `beta` or `nightly`. A beta is the stable build released like a stable release (draft, not a pre-release), tagged `v<version>-beta.N` (set `betaNumber` in `composeApp/build.gradle.kts` to N, and back to `null` for stable). Each desktop platform (Linux x86_64 and aarch64, Windows, macOS) builds its native installers on its own runner. Android builds a signed APK.
+**Core stack**
+- [Kotlin Multiplatform](https://kotlinlang.org/docs/multiplatform.html)
+- [Compose Multiplatform](https://www.jetbrains.com/compose-multiplatform/)
+- [Compose Hot Reload](https://github.com/JetBrains/compose-hot-reload)
+- [Koin for KMP](https://insert-koin.io/docs/reference/koin-mp/kmp)
+- [Ktor client](https://ktor.io/docs/client-create-multiplatform-application.html)
+- [DataStore for KMP](https://developer.android.com/kotlin/multiplatform/datastore)
+
+**Desktop and native**
+- [Nucleus](https://github.com/kdroidFilter/Nucleus): desktop packaging and GraalVM integration
+- [ComposeNativeWebview](https://github.com/kdroidFilter/ComposeNativeWebview)
+- [GraalVM Native Image](https://www.graalvm.org/latest/reference-manual/native-image/) and its
+  [reachability metadata](https://www.graalvm.org/latest/reference-manual/native-image/metadata/)
+- [Gobley](https://gobley.dev): Rust in Kotlin Multiplatform
+- [vlcj](https://github.com/caprica/vlcj): VLC bindings for audio playback
+
+**Plugins**
+- [Zipline](https://github.com/cashapp/zipline): runs the JS plugins
 
 ## 👥 The Spotube team
 

composeApp/src/commonMain/kotlin/org/spotube/spotube/modules/shell/AppShell.kt

@@ -32,17 +32,23 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.animation.core.spring
+import androidx.compose.animation.core.Spring
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.dp
@@ -299,6 +305,15 @@ internal fun CompactPlayerOverlay(
     onAlternativeSource: () -> Unit,
     onExpandLyrics: () -> Unit,
     floatingPlayer: @Composable (Modifier) -> Unit = { AppFloatingPlayer(modifier = it) },
+    expandedPlayer: @Composable (modifier: Modifier, onCollapse: () -> Unit) -> Unit = { modifier, onCollapse ->
+        AppExpandedPlayer(
+            modifier = modifier,
+            onCollapse = onCollapse,
+            onQueue = onQueue,
+            onAlternativeSource = onAlternativeSource,
+            onExpandLyrics = onExpandLyrics
+        )
+    },
     bottomBar: @Composable (Modifier) -> Unit = {
         AppBottombar(navigator = navigator, navigationState = navigationState, modifier = it)
     },
@@ -325,16 +340,39 @@ internal fun CompactPlayerOverlay(
     val sheetState = key(peekHeight) {
         rememberBottomSheetState(
             initialDetent = partialDetent,
-            detents = listOf(partialDetent, SheetDetent.FullyExpanded)
+            detents = listOf(partialDetent, SheetDetent.FullyExpanded),
+            // A spring carries the fling velocity into the settle, so releasing mid-drag
+            // glides to the nearest detent instead of stalling and then easing like a tween.
+            animationSpec = spring(
+                dampingRatio = Spring.DampingRatioNoBouncy,
+                stiffness = Spring.StiffnessMediumLow)
         )
     }
 
-    val progress = if (!sheetState.offset.isFinite() ||
-        (sheetState.isIdle && sheetState.currentDetent == partialDetent)
-    ) 0f else runCatching {
-        sheetState.progress(partialDetent, SheetDetent.FullyExpanded)
-    }.getOrDefault(0f).takeIf { it.isFinite() } ?: 0f
-    val uiState = viewModel.compactSheetUiState(progress.coerceIn(0f, 1f))
+    // Read only inside draw/derived scopes: the sheet offset changes every drag frame, and
+    // reading it in composition would recompose the whole player on each one.
+    val progress by remember(sheetState, partialDetent) {
+        derivedStateOf {
+            val value = if (!sheetState.offset.isFinite() ||
+                (sheetState.isIdle && sheetState.currentDetent == partialDetent)
+            ) 0f else runCatching {
+                sheetState.progress(partialDetent, SheetDetent.FullyExpanded)
+            }.getOrDefault(0f).takeIf { it.isFinite() } ?: 0f
+            value.coerceIn(0f, 1f)
+        }
+    }
+    // Keyed on the sheet state: it is recreated when the peek height changes, and a derived
+    // value left reading the previous sheet's progress would never update again.
+    val expandedPlayerVisible by remember(sheetState) {
+        derivedStateOf { viewModel.compactSheetUiState(progress).showExpandedPlayer }
+    }
+    val floatingPlayerVisible by remember(sheetState) {
+        derivedStateOf { viewModel.compactSheetUiState(progress).floatingPlayerAlpha > 0.01f }
+    }
+    // Once shown, keep the expanded player composed: composing it (view models, lyrics, cover
+    // art) on the first drag frame of every gesture is the hitch the user feels as lag.
+    var expandedPlayerComposed by remember { mutableStateOf(false) }
+    if (expandedPlayerVisible) expandedPlayerComposed = true
 
     Box(modifier = Modifier.fillMaxSize()) {
         content()
@@ -345,44 +383,52 @@ internal fun CompactPlayerOverlay(
         ) {
             Sheet(modifier = Modifier.fillMaxSize()) {
                 Box(modifier = Modifier.fillMaxSize()) {
-                    if (uiState.showExpandedPlayer) {
-                        AppExpandedPlayer(
-                            modifier = Modifier
+                    if (expandedPlayerComposed) {
+                        expandedPlayer(
+                            Modifier
                                 .fillMaxSize()
-                                .graphicsLayer { alpha = uiState.expandedPlayerAlpha },
-                            onCollapse = {
-                                scope.launch { sheetState.animateTo(partialDetent) }
-                            },
-                            onQueue = onQueue,
-                            onAlternativeSource = onAlternativeSource,
-                            onExpandLyrics = onExpandLyrics
+                                .graphicsLayer {
+                                    alpha = viewModel.compactSheetUiState(progress).expandedPlayerAlpha
+                                },
+                            { scope.launch { sheetState.animateTo(partialDetent) } }
                         )
                     }
 
-                    if (uiState.floatingPlayerAlpha > 0.01f) {
-                        Column(modifier = Modifier.fillMaxWidth()) {
-                            floatingPlayer(
-                                Modifier
-                                    .graphicsLayer {
-                                        alpha = uiState.floatingPlayerAlpha
-                                    })
-                        }
+                    // Always composed: building it (view model, cover art, player state) only once
+                    // progress drops below the fade-out point stalls the collapse mid-drag.
+                    Column(modifier = Modifier.fillMaxWidth()) {
+                        floatingPlayer(
+                            Modifier
+                                .zeroSizeUnless(floatingPlayerVisible)
+                                .graphicsLayer {
+                                    alpha = viewModel.floatingPlayerAlpha(progress)
+                                })
                     }
                 }
             }
         }
 
-        if (uiState.floatingPlayerAlpha > 0.01f) {
-            bottomBar(
-                Modifier
-                    .fillMaxWidth()
-                    .align(Alignment.BottomCenter)
-                    .onSizeChanged { size ->
-                        viewModel.onBottomBarMeasured(with(density) { size.height.toDp() })
-                    }
-                    .graphicsLayer {
-                        alpha = uiState.floatingPlayerAlpha
-                    })
-        }
+        bottomBar(
+            Modifier
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter)
+                .zeroSizeUnless(floatingPlayerVisible)
+                .onSizeChanged { size ->
+                    viewModel.onBottomBarMeasured(with(density) { size.height.toDp() })
+                }
+                .graphicsLayer {
+                    alpha = viewModel.floatingPlayerAlpha(progress)
+                })
     }
 }
+
+/**
+ * Keeps the content composed but takes it out of layout, drawing and hit testing while it is
+ * fully faded out, so it neither steals touches from what is above it nor costs a re-composition
+ * when it comes back.
+ */
+private fun Modifier.zeroSizeUnless(visible: Boolean): Modifier =
+    if (visible) this else layout { measurable, constraints ->
+        measurable.measure(constraints)
+        layout(0, 0) {}
+    }

composeApp/src/jvmTest/kotlin/org/spotube/spotube/modules/shell/CompactPlayerOverlayDragTest.kt

@@ -0,0 +1,113 @@
+package org.spotube.spotube.modules.shell
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.ImageComposeScene
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.PointerType
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.use
+import org.spotube.spotube.core.navigation.Navigator
+import org.spotube.spotube.core.navigation.Routes
+import org.spotube.spotube.core.navigation.TOP_LEVEL_ROUTES
+import org.spotube.spotube.core.navigation.rememberNavigationState
+import org.spotube.spotube.core.ui.theming.SpotubeTheme
+import org.spotube.spotube.modules.settings.Theme
+import org.spotube.spotube.modules.settings.UserSettings
+import kotlin.test.Test
+import kotlin.test.assertFalse
+import kotlin.test.assertTrue
+
+@OptIn(ExperimentalComposeUiApi::class)
+class CompactPlayerOverlayDragTest {
+    @Test
+    fun draggingTheSheetUpShowsTheExpandedPlayer() {
+        var expandedComposed = false
+        var floatingCompositions = 0
+        var floatingPlaced = false
+        val width = 400
+        val height = 800
+        ImageComposeScene(width, height) {
+            SpotubeTheme(UserSettings(theme = Theme.DARK)) {
+                val navigation = rememberNavigationState(Routes.Home, TOP_LEVEL_ROUTES)
+                val navigator = remember(navigation) { Navigator(navigation) }
+                CompactPlayerOverlay(
+                    navigator = navigator,
+                    navigationState = navigation,
+                    viewModel = remember { AppShellViewModel() },
+                    onQueue = {}, onAlternativeSource = {}, onExpandLyrics = {},
+                    floatingPlayer = { modifier ->
+                        DisposableEffect(Unit) {
+                            floatingCompositions++
+                            onDispose {}
+                        }
+                        Box(
+                            modifier.fillMaxWidth().height(64.dp).background(Color.Gray)
+                                .onGloballyPositioned { floatingPlaced = true })
+                    },
+                    expandedPlayer = { modifier, _ ->
+                        DisposableEffect(Unit) {
+                            expandedComposed = true
+                            onDispose { expandedComposed = false }
+                        }
+                        Box(modifier.fillMaxSize().background(Color.Red))
+                    },
+                    bottomBar = { modifier ->
+                        Box(modifier.fillMaxWidth().height(56.dp).background(Color.Blue))
+                    }
+                ) { Box(Modifier.fillMaxSize()) }
+            }
+        }.use { scene ->
+            var t = 0L
+            fun frame() { scene.render(t); t += 16_000_000L }
+            repeat(10) { frame() }
+            assertTrue(floatingPlaced, "floating player should show while collapsed")
+            assertFalse(expandedComposed, "expanded player should not be composed while collapsed")
+
+            // grab the floating player (just above the bottom bar) and drag to the top
+            val startY = height - 120f + 20f
+            val start = Offset(width / 2f, startY)
+            scene.sendPointerEvent(PointerEventType.Press, start, type = PointerType.Touch, timeMillis = t / 1_000_000L)
+            repeat(5) { frame() }
+            var y = startY
+            repeat(30) {
+                y -= (startY - 40f) / 30f
+                scene.sendPointerEvent(PointerEventType.Move, Offset(width / 2f, y), type = PointerType.Touch, timeMillis = t / 1_000_000L)
+                frame()
+            }
+            scene.sendPointerEvent(PointerEventType.Release, Offset(width / 2f, y), type = PointerType.Touch, timeMillis = t / 1_000_000L)
+            repeat(120) { frame() }
+
+            assertTrue(expandedComposed, "expanded player should be composed after dragging up")
+            // out of layout while the expanded player covers it, but never re-composed
+            floatingPlaced = false
+            repeat(5) { frame() }
+            assertFalse(floatingPlaced, "floating player should be out of layout when fully expanded")
+
+            // drag back down: the floating player must return without being composed again
+            val downStart = Offset(width / 2f, 60f)
+            scene.sendPointerEvent(PointerEventType.Press, downStart, type = PointerType.Touch, timeMillis = t / 1_000_000L)
+            repeat(5) { frame() }
+            var dy = downStart.y
+            repeat(30) {
+                dy += (height - 160f) / 30f
+                scene.sendPointerEvent(PointerEventType.Move, Offset(width / 2f, dy), type = PointerType.Touch, timeMillis = t / 1_000_000L)
+                frame()
+            }
+            scene.sendPointerEvent(PointerEventType.Release, Offset(width / 2f, dy), type = PointerType.Touch, timeMillis = t / 1_000_000L)
+            repeat(120) { frame() }
+            assertTrue(floatingPlaced, "floating player should be back after collapsing")
+            assertTrue(floatingCompositions == 1, "floating player was composed $floatingCompositions times, expected 1")
+        }
+    }
+}

packaging/linux/org.spotube.spotube.metainfo.xml.mustache

@@ -55,8 +55,28 @@
 
   <screenshots>
     <screenshot type="default">
-      <caption>Spotube on the desktop</caption>
-      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/branding/spotube-screenshot.png</image>
+      <caption>Browse music from the service your plugin connects to</caption>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/home-desktop-dark.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Synced lyrics</caption>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/lyrics-desktop-dark.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Your playlists</caption>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/playlists-desktop-dark.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Search tracks, albums, artists, playlists and users</caption>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/search-desktop-dark.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Local folders and downloads</caption>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/local-tracks-desktop-dark.png</image>
+    </screenshot>
+    <screenshot>
+      <caption>Group Jam rooms</caption>
+      <image>https://raw.githubusercontent.com/team-spotube/spotube/master/assets/screenshots/group-jam-desktop-dark.png</image>
     </screenshot>
   </screenshots>