Merge pull request 'Queue row gestures: album art as grab surface + swipe-to-remove' (#118) from dev into main

detekt TooManyFunctions: the swipe work took the file to 12 functions
against a limit of 11. Suppressing it was the option; splitting is the
better one, because the seam was already there — the row carries two
gestures, a swipe background, and its own accessibility surface, which is
more behaviour than the screen that merely lists it.

QueueScreen.kt keeps the screen, list, pill, and summary (4). QueueRow.kt
takes the row and its helpers (8). No behaviour change: same code, same
order, per-file imports recomputed, QueueRow internal so QueueList can
still call it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N6vZoJ4Se5YyaqdtGVkap5

android/app/src/main/java/com/fabledsword/minstrel/player/ui/QueueRow.kt

@@ -0,0 +1,348 @@
+package com.fabledsword.minstrel.player.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberSwipeToDismissBoxState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.semantics.CustomAccessibilityAction
+import androidx.compose.ui.semantics.customActions
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import com.composables.icons.lucide.Lucide
+import com.composables.icons.lucide.Music
+import com.composables.icons.lucide.Trash2
+import com.composables.icons.lucide.Volume2
+import com.fabledsword.minstrel.models.TrackRef
+import com.fabledsword.minstrel.shared.formatDuration
+import com.fabledsword.minstrel.shared.widgets.LikeButton
+import com.fabledsword.minstrel.shared.widgets.ServerImage
+import com.fabledsword.minstrel.theme.LocalActionColors
+import kotlin.math.roundToInt
+
+/*
+ * A single queue row, split out of QueueScreen.kt when swipe-to-remove (#2435)
+ * pushed that file past detekt's TooManyFunctions limit. The seam is real and
+ * not just a way to satisfy the analyzer: the row now carries two gestures, a
+ * swipe background, and its own accessibility surface, which is more behaviour
+ * than the screen that lists it. `internal` rather than `private` only because
+ * QueueList (still in QueueScreen.kt) is the caller.
+ */
+
+@Suppress("LongParameterList") // Compose row wiring — layout + queue callbacks, not logic.
+@Composable
+internal fun QueueRow(
+    track: TrackRef,
+    index: Int,
+    queueSize: Int,
+    isCurrent: Boolean,
+    liked: Boolean,
+    onClick: () -> Unit,
+    onToggleLike: () -> Unit,
+    onRemove: () -> Unit,
+    onMove: (Int, Int) -> Unit,
+) {
+    var dragOffsetY by remember { mutableFloatStateOf(0f) }
+    var rowHeightPx by remember { mutableIntStateOf(0) }
+    val highlight = if (isCurrent) {
+        MaterialTheme.colorScheme.primary.copy(alpha = HIGHLIGHT_ALPHA)
+    } else {
+        Color.Transparent
+    }
+    // Swipe left to remove, replacing the X button (#2395 follow-up). Only
+    // end-to-start is enabled: a right-swipe has no meaning here, and leaving it
+    // live would delete tracks on a mis-aimed gesture in either direction.
+    val dismissState = rememberSwipeToDismissBoxState(
+        confirmValueChange = { value ->
+            if (value == SwipeToDismissBoxValue.EndToStart) {
+                onRemove()
+                true
+            } else {
+                false
+            }
+        },
+    )
+    SwipeToDismissBox(
+        state = dismissState,
+        enableDismissFromStartToEnd = false,
+        backgroundContent = { RemoveSwipeBackground() },
+        // The reorder lift lives out here so a row being dragged vertically
+        // carries its swipe container with it rather than sliding out of one.
+        modifier = Modifier
+            .onSizeChanged { rowHeightPx = it.height }
+            .zIndex(if (dragOffsetY != 0f) 1f else 0f)
+            .graphicsLayer { translationY = dragOffsetY },
+    ) {
+        QueueRowContent(
+            track = track,
+            index = index,
+            queueSize = queueSize,
+            isCurrent = isCurrent,
+            liked = liked,
+            highlight = highlight,
+            rowHeightPx = rowHeightPx,
+            onClick = onClick,
+            onToggleLike = onToggleLike,
+            onRemove = onRemove,
+            onMove = onMove,
+            onDragOffset = { dragOffsetY = it },
+        )
+    }
+}
+
+@Suppress("LongParameterList") // Compose row wiring — layout + queue callbacks, not logic.
+@Composable
+private fun QueueRowContent(
+    track: TrackRef,
+    index: Int,
+    queueSize: Int,
+    isCurrent: Boolean,
+    liked: Boolean,
+    highlight: Color,
+    rowHeightPx: Int,
+    onClick: () -> Unit,
+    onToggleLike: () -> Unit,
+    onRemove: () -> Unit,
+    onMove: (Int, Int) -> Unit,
+    onDragOffset: (Float) -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            // Opaque: this sits ON TOP of the red remove background, so a
+            // transparent row would show the fill through it at rest.
+            .background(MaterialTheme.colorScheme.surface)
+            .background(highlight)
+            .clickable(onClick = onClick)
+            .queueReorderActions(
+                index = index,
+                queueSize = queueSize,
+                onMove = onMove,
+                onRemove = onRemove,
+            )
+            .padding(horizontal = 16.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        // The album art IS the grab surface (#2395). The grip icon it replaces
+        // cost ~36dp of every row's width — icon plus its 12dp gap — on the
+        // narrowest surface in the app, competing with the title for space.
+        QueueRowThumbnail(
+            track = track,
+            dragModifier = Modifier.queueReorderDrag(
+                index = index,
+                queueSize = queueSize,
+                rowHeightPx = rowHeightPx,
+                onOffsetChange = onDragOffset,
+                onMove = onMove,
+            ),
+        )
+        if (isCurrent) {
+            Icon(
+                Lucide.Volume2,
+                contentDescription = "Now playing",
+                tint = MaterialTheme.colorScheme.primary,
+            )
+        }
+        QueueRowText(track = track, isCurrent = isCurrent, modifier = Modifier.weight(1f))
+        if (track.durationSec > 0) {
+            Text(
+                text = formatDuration(track.durationSec),
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+        LikeButton(liked = liked, onToggle = onToggleLike)
+    }
+}
+
+/**
+ * What the row slides off to reveal: the destructive colour with a trash glyph,
+ * pinned to the trailing edge because that is the edge the swipe uncovers.
+ *
+ * Oxblood (LocalActionColors.destructive), NOT colorScheme.error. The design
+ * system keeps those apart deliberately — an error is a failure that already
+ * happened, a destructive action is one about to happen — and using the error
+ * colour here would dress an intentional gesture as a fault report.
+ */
+@Composable
+private fun RemoveSwipeBackground() {
+    val actions = LocalActionColors.current
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(actions.destructive)
+            .padding(horizontal = 24.dp),
+        contentAlignment = Alignment.CenterEnd,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            Icon(Lucide.Trash2, contentDescription = null, tint = actions.onAction)
+            Text(
+                text = "Remove",
+                style = MaterialTheme.typography.labelLarge,
+                color = actions.onAction,
+            )
+        }
+    }
+}
+
+/**
+ * Screen-reader reordering and removal for a queue row.
+ *
+ * Both gestures this row now relies on — long-press-drag to reorder, swipe to
+ * remove — are touch-only and unavailable under TalkBack, and each replaced a
+ * control that a screen reader COULD find (the grip's "Reorder track", the X's
+ * "Remove from queue"). Without these actions the row would have lost both
+ * capabilities for anyone not using touch. They're the Android counterpart to
+ * the web row's ArrowUp/ArrowDown keys and its still-present X button.
+ */
+private fun Modifier.queueReorderActions(
+    index: Int,
+    queueSize: Int,
+    onMove: (Int, Int) -> Unit,
+    onRemove: () -> Unit,
+): Modifier = semantics {
+    customActions = listOf(
+        CustomAccessibilityAction("Move up") {
+            if (index > 0) { onMove(index, index - 1); true } else false
+        },
+        CustomAccessibilityAction("Move down") {
+            if (index < queueSize - 1) { onMove(index, index + 1); true } else false
+        },
+        CustomAccessibilityAction("Remove from queue") { onRemove(); true },
+    )
+}
+
+/**
+ * Reorder-drag behaviour for a queue row, applied to whatever element is the
+ * grab surface — the album art, since #2395 removed the grip icon.
+ *
+ * Uses **detectDragGesturesAfterLongPress**, not detectDragGestures, and that
+ * is the load-bearing detail. The grip was a small target, so a plain drag
+ * gesture on it never competed with anything. A 48dp thumbnail is a large
+ * chunk of every row, and with a plain drag detector any vertical pan starting
+ * on artwork would be swallowed as a row-reorder instead of scrolling the
+ * queue — the list would feel broken precisely where it's easiest to touch.
+ * Long-press-then-drag separates the two: pan scrolls, long-press reorders,
+ * tap still plays (the detector doesn't consume a plain tap, so it falls
+ * through to the row's clickable).
+ */
+private fun Modifier.queueReorderDrag(
+    index: Int,
+    queueSize: Int,
+    rowHeightPx: Int,
+    onOffsetChange: (Float) -> Unit,
+    onMove: (Int, Int) -> Unit,
+): Modifier = composed {
+    // Mirrors the web queue: the row follows the finger during a drag, then on
+    // release we translate the accumulated offset into a row delta and reorder.
+    var offset by remember { mutableFloatStateOf(0f) }
+    pointerInput(index, queueSize, rowHeightPx) {
+        detectDragGesturesAfterLongPress(
+            onDrag = { change, dragAmount ->
+                change.consume()
+                offset += dragAmount.y
+                onOffsetChange(offset)
+            },
+            onDragEnd = {
+                val delta = if (rowHeightPx > 0) (offset / rowHeightPx).roundToInt() else 0
+                val target = (index + delta).coerceIn(0, queueSize - 1)
+                if (target != index) onMove(index, target)
+                offset = 0f
+                onOffsetChange(0f)
+            },
+            onDragCancel = {
+                offset = 0f
+                onOffsetChange(0f)
+            },
+        )
+    }
+}
+
+@Composable
+private fun QueueRowThumbnail(track: TrackRef, dragModifier: Modifier = Modifier) {
+    Box(
+        modifier = Modifier
+            .size(48.dp)
+            .clip(RoundedCornerShape(4.dp))
+            .background(MaterialTheme.colorScheme.surfaceVariant)
+            .then(dragModifier),
+        contentAlignment = Alignment.Center,
+    ) {
+        ServerImage(
+            url = track.coverUrl,
+            contentDescription = null,
+            modifier = Modifier.size(48.dp),
+        ) {
+            Icon(
+                Lucide.Music,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
+        }
+    }
+}
+
+@Composable
+private fun QueueRowText(track: TrackRef, isCurrent: Boolean, modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        Text(
+            text = track.title,
+            style = MaterialTheme.typography.bodyLarge,
+            color = MaterialTheme.colorScheme.onSurface,
+            fontWeight = if (isCurrent) FontWeight.Medium else FontWeight.Normal,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+        val subtitle = queueSubtitle(track)
+        if (subtitle.isNotEmpty()) {
+            Text(
+                text = subtitle,
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+/** "Artist · Album" — collapses gracefully when either is missing. */
+private fun queueSubtitle(track: TrackRef): String = listOf(track.artistName, track.albumTitle)
+    .filter { it.isNotEmpty() }
+    .joinToString(" · ")
+
+private const val HIGHLIGHT_ALPHA = 0.12f

android/app/src/main/java/com/fabledsword/minstrel/player/ui/QueueScreen.kt

@@ -1,23 +1,16 @@
 package com.fabledsword.minstrel.player.ui
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.gestures.detectDragGestures
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FilledTonalButton
 import androidx.compose.material3.HorizontalDivider
@@ -31,39 +24,20 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableFloatStateOf
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.onSizeChanged
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavHostController
 import com.composables.icons.lucide.ArrowDown
 import com.composables.icons.lucide.ArrowLeft
-import com.composables.icons.lucide.GripVertical
 import com.composables.icons.lucide.Lucide
-import com.composables.icons.lucide.Music
 import com.composables.icons.lucide.Trash2
-import com.composables.icons.lucide.Volume2
-import com.composables.icons.lucide.X
 import com.fabledsword.minstrel.models.TrackRef
-import com.fabledsword.minstrel.shared.formatDuration
 import com.fabledsword.minstrel.shared.widgets.EmptyState
-import com.fabledsword.minstrel.shared.widgets.LikeButton
-import com.fabledsword.minstrel.shared.widgets.ServerImage
-import kotlin.math.roundToInt
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -203,157 +177,6 @@ private fun JumpToCurrentPill(
     }
 }
 
-@Suppress("LongParameterList") // Compose row wiring — layout + queue callbacks, not logic.
-@Composable
-private fun QueueRow(
-    track: TrackRef,
-    index: Int,
-    queueSize: Int,
-    isCurrent: Boolean,
-    liked: Boolean,
-    onClick: () -> Unit,
-    onToggleLike: () -> Unit,
-    onRemove: () -> Unit,
-    onMove: (Int, Int) -> Unit,
-) {
-    var dragOffsetY by remember { mutableFloatStateOf(0f) }
-    var rowHeightPx by remember { mutableIntStateOf(0) }
-    val highlight = if (isCurrent) {
-        MaterialTheme.colorScheme.primary.copy(alpha = HIGHLIGHT_ALPHA)
-    } else {
-        Color.Transparent
-    }
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .onSizeChanged { rowHeightPx = it.height }
-            .zIndex(if (dragOffsetY != 0f) 1f else 0f)
-            .graphicsLayer { translationY = dragOffsetY }
-            .background(highlight)
-            .clickable(onClick = onClick)
-            .padding(horizontal = 16.dp, vertical = 12.dp),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(12.dp),
-    ) {
-        DragHandle(
-            index = index,
-            queueSize = queueSize,
-            rowHeightPx = rowHeightPx,
-            onOffsetChange = { dragOffsetY = it },
-            onMove = onMove,
-        )
-        QueueRowThumbnail(track = track)
-        if (isCurrent) {
-            Icon(
-                Lucide.Volume2,
-                contentDescription = "Now playing",
-                tint = MaterialTheme.colorScheme.primary,
-            )
-        }
-        QueueRowText(track = track, isCurrent = isCurrent, modifier = Modifier.weight(1f))
-        if (track.durationSec > 0) {
-            Text(
-                text = formatDuration(track.durationSec),
-                style = MaterialTheme.typography.bodySmall,
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
-            )
-        }
-        LikeButton(liked = liked, onToggle = onToggleLike)
-        IconButton(onClick = onRemove) {
-            Icon(Lucide.X, contentDescription = "Remove from queue")
-        }
-    }
-}
-
-@Composable
-private fun DragHandle(
-    index: Int,
-    queueSize: Int,
-    rowHeightPx: Int,
-    onOffsetChange: (Float) -> Unit,
-    onMove: (Int, Int) -> Unit,
-) {
-    // Mirrors the web queue: the row follows the finger during a drag, then on
-    // release we translate the accumulated offset into a row delta and reorder.
-    var offset by remember { mutableFloatStateOf(0f) }
-    Icon(
-        Lucide.GripVertical,
-        contentDescription = "Reorder track",
-        tint = MaterialTheme.colorScheme.onSurfaceVariant,
-        modifier = Modifier.pointerInput(index, queueSize, rowHeightPx) {
-            detectDragGestures(
-                onDrag = { change, dragAmount ->
-                    change.consume()
-                    offset += dragAmount.y
-                    onOffsetChange(offset)
-                },
-                onDragEnd = {
-                    val delta = if (rowHeightPx > 0) (offset / rowHeightPx).roundToInt() else 0
-                    val target = (index + delta).coerceIn(0, queueSize - 1)
-                    if (target != index) onMove(index, target)
-                    offset = 0f
-                    onOffsetChange(0f)
-                },
-                onDragCancel = {
-                    offset = 0f
-                    onOffsetChange(0f)
-                },
-            )
-        },
-    )
-}
-
-@Composable
-private fun QueueRowThumbnail(track: TrackRef) {
-    Box(
-        modifier = Modifier
-            .size(48.dp)
-            .clip(RoundedCornerShape(4.dp))
-            .background(MaterialTheme.colorScheme.surfaceVariant),
-        contentAlignment = Alignment.Center,
-    ) {
-        ServerImage(
-            url = track.coverUrl,
-            contentDescription = null,
-            modifier = Modifier.size(48.dp),
-        ) {
-            Icon(
-                Lucide.Music,
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.onSurfaceVariant,
-            )
-        }
-    }
-}
-
-@Composable
-private fun QueueRowText(track: TrackRef, isCurrent: Boolean, modifier: Modifier = Modifier) {
-    Column(modifier = modifier) {
-        Text(
-            text = track.title,
-            style = MaterialTheme.typography.bodyLarge,
-            color = MaterialTheme.colorScheme.onSurface,
-            fontWeight = if (isCurrent) FontWeight.Medium else FontWeight.Normal,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
-        val subtitle = queueSubtitle(track)
-        if (subtitle.isNotEmpty()) {
-            Text(
-                text = subtitle,
-                style = MaterialTheme.typography.bodySmall,
-                color = MaterialTheme.colorScheme.onSurfaceVariant,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-            )
-        }
-    }
-}
-
-/** "Artist · Album" — collapses gracefully when either is missing. */
-private fun queueSubtitle(track: TrackRef): String = listOf(track.artistName, track.albumTitle)
-    .filter { it.isNotEmpty() }
-    .joinToString(" · ")
 
 /** "N tracks · 12 min" header summary. */
 private fun queueSummary(tracks: List<TrackRef>): String {
@@ -367,6 +190,5 @@ private fun queueSummary(tracks: List<TrackRef>): String {
     return "${tracks.size} $noun · $length"
 }
 
-private const val HIGHLIGHT_ALPHA = 0.12f
 private const val SECONDS_PER_MINUTE = 60
 private const val MINUTES_PER_HOUR = 60

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Adaptive icon (API 26+). Before this the app shipped legacy bitmaps only,
+     so modern launchers letterboxed the square instead of masking it to the
+     device's icon shape. The foreground PNGs are drawn on a 108dp canvas with
+     the mark inside the 66dp safe zone, so no mask can clip it. -->
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Obsidian. The adaptive icon's plate; chosen over the raised-surface
+         iron because the accent note only clears the 3:1 graphics contrast
+         threshold against this darker value (3.04:1 vs 2.70:1). -->
+    <color name="ic_launcher_background">#14171A</color>
+</resources>

web/src/app.html

@@ -2,7 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <!--
+      SVG first: it flips the M with the viewer's colour scheme, which the PNG
+      can't. The PNG is the fallback for browsers without SVG-favicon support
+      and is plated for the same reason apple-touch-icon is — see brand/.
+      Ordering matters: browsers take the last icon they understand, so the
+      PNG must come FIRST or it wins over the SVG in Chrome.
+    -->
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" sizes="32x32" />
+    <link rel="icon" href="%sveltekit.assets%/brand/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
+    <!-- Obsidian: matches --fs-surface-page so mobile browser chrome doesn't
+         seam against the app's own background. -->
+    <meta name="theme-color" content="#14171A" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Minstrel</title>
     <script>

web/src/lib/components/MinstrelMark.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  // The Minstrel mark: a Didone M whose right leg is an eighth note.
+  //
+  // Inlined rather than <img src="mark.svg"> on purpose — an <img> cannot
+  // inherit currentColor, and inheriting it is the whole point: the letter
+  // takes the surrounding text colour, so it reads on both the dark and light
+  // palettes without a second asset. Parchment-on-parchment is invisible,
+  // which is exactly the bug a fixed fill would reintroduce.
+  //
+  // The note keeps the accent in both modes — one of the places the design
+  // system sanctions the accent (the wordmark).
+  //
+  // ⚠ These paths are duplicated in web/static/brand/favicon.svg and
+  // web/static/brand/mark.svg, which need literal colours instead of
+  // currentColor (a favicon has no cascade to inherit from). Change the
+  // silhouette here, change it there.
+  //
+  // aria-hidden: every current use sits directly beside the words "Minstrel",
+  // so labelling it would make a screen reader announce the name twice. A
+  // STANDALONE use would need its own label.
+  let { size = 20, class: klass = '' }: { size?: number; class?: string } = $props();
+</script>
+
+<svg
+  viewBox="202 251 902 723"
+  width={size * 902 / 723}
+  height={size}
+  class={klass}
+  aria-hidden="true"
+  focusable="false"
+>
+  <g transform="translate(0,1254) scale(0.1,-0.1)" fill-rule="evenodd">
+    <path fill="currentColor" d="M2252 9878 l3 -152 109 -22 c342 -72 492 -184 538 -405 16 -74 24
+-4823 9 -5024 -20 -266 -73 -375 -236 -484 -116 -77 -332 -150 -543 -181 -114
+-18 -107 -6 -110 -165 -1 -76 2 -143 7 -148 9 -9 2607 -11 2623 -1 14 9 10
+280 -4 291 -7 5 -49 15 -93 22 -380 60 -638 193 -720 374 -63 136 -59 -12 -61
+2247 -3 1999 -2 2054 15 2015 116 -253 646 -1520 1183 -2825 71 -173 216 -524
+322 -780 206 -494 266 -640 370 -895 97 -237 68 -210 226 -210 l135 0 23 50
+c13 27 95 212 182 410 134 307 747 1685 1015 2285 92 205 726 1599 910 2000
+65 140 126 274 137 297 22 50 52 71 74 52 12 -10 14 -266 14 -1864 l0 -1852
+-82 -7 c-347 -29 -716 -203 -973 -460 -710 -712 -343 -1645 650 -1649 453 -2
+892 184 1206 510 193 202 295 397 351 676 l23 112 0 2357 c0 1297 0 2358 1
+2358 12 0 142 -49 179 -67 342 -173 607 -545 715 -1004 85 -361 66 -801 -51
+-1215 -43 -151 -40 -173 18 -174 53 0 284 377 396 650 243 590 303 1238 163
+1754 -178 652 -643 1100 -1294 1248 -93 21 -122 22 -716 25 -707 4 -649 12
+-696 -90 -15 -34 -78 -172 -140 -307 -593 -1297 -1123 -2469 -1717 -3800 -210
+-472 -193 -437 -204 -418 -11 19 -173 423 -630 1568 -214 536 -394 986 -400
+1000 -6 14 -76 187 -156 385 -80 198 -182 452 -228 565 -46 113 -140 346 -209
+518 -205 507 -225 554 -244 568 -14 11 -209 13 -1055 14 l-1038 0 3 -152z"/>
+    <path fill="#4A6B5C" d="M8830 7450 l0 -2582 -32 6 c-517 106 -1064 -47 -1442 -405 -598 -566
+-501 -1354 196 -1598 489 -170 1134 -19 1548 363 234 217 350 418 423 736 l22
+95 3 2373 c2 1961 5 2372 16 2372 27 0 132 -41 205 -81 315 -169 569 -524 675
+-944 50 -198 60 -285 60 -525 0 -288 -27 -487 -105 -756 -34 -120 -35 -130
+-11 -143 33 -18 64 11 154 144 227 334 402 795 469 1235 37 238 34 646 -4 843
+-149 761 -637 1271 -1353 1418 -98 20 -147 23 -466 27 l-358 4 0 -2582z"/>
+  </g>
+</svg>

web/src/lib/components/QueueTrackRow.svelte

@@ -57,22 +57,41 @@
   class="flex items-center gap-2 border-b border-border px-3 py-2 h-16
          {isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : ''}"
 >
-  <button
+  <!--
-    type="button"
+    The album art is the grab surface (#2395). The grip used to occupy its own
-    aria-label="Reorder track (use arrow keys)"
+    column in every row; it now sits OVER the art, so it costs no horizontal
-    aria-keyshortcuts="ArrowUp ArrowDown"
+    space at all. `use:draggable` is on the row (above), so dragging already
-    onkeydown={handleHandleKeydown}
+    worked from anywhere — the grip's real jobs are being the visual cue and
-    class="cursor-grab text-text-secondary hover:text-text-primary flex-shrink-0"
+    the keyboard target, and both survive here.
-  >
-    <GripVertical size={16} />
-  </button>
 
-  <img
+    It stays VISIBLE at rest, just quiet — it is the only thing that says this
-    src={coverUrl(track.album_id)}
+    list can be reordered at all, so hiding it until hover would trade the
-    alt=""
+    operator's space complaint for a discoverability one (rule #24), and would
-    onerror={(e) => ((e.currentTarget as HTMLImageElement).src = FALLBACK_COVER)}
+    leave nothing for touch, which has no hover. The scrim only appears on
-    class="h-10 w-10 flex-shrink-0 rounded object-cover"
+    hover/focus so the artwork stays legible the rest of the time; the drop
-  />
+    shadow is what keeps the glyph readable over pale covers without one.
+  -->
+  <div class="relative h-10 w-10 flex-shrink-0">
+    <img
+      src={coverUrl(track.album_id)}
+      alt=""
+      onerror={(e) => ((e.currentTarget as HTMLImageElement).src = FALLBACK_COVER)}
+      class="h-10 w-10 rounded object-cover"
+    />
+    <button
+      type="button"
+      aria-label="Reorder track (use arrow keys)"
+      aria-keyshortcuts="ArrowUp ArrowDown"
+      onkeydown={handleHandleKeydown}
+      class="group absolute inset-0 flex cursor-grab items-center justify-center rounded
+             text-white/70 transition hover:bg-black/45 hover:text-white
+             focus-visible:bg-black/45 focus-visible:text-white
+             focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+      style="filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.9))"
+    >
+      <GripVertical size={16} />
+    </button>
+  </div>
 
   <button
     type="button"

web/src/lib/components/QueueTrackRow.test.ts

@@ -94,4 +94,30 @@ describe('QueueTrackRow', () => {
     await fireEvent.keyDown(handle, { key: ' ' });
     expect(moveQueueItem).not.toHaveBeenCalled();
   });
+
+  // --- handle placement (#2395) ---
+
+  it('the reorder handle overlays the album art instead of taking its own column', () => {
+    const { container } = render(QueueTrackRow, {
+      props: { track: sampleTrack, index: 3, isCurrent: false }
+    });
+    const handle = screen.getByLabelText(/reorder track/i);
+    const art = container.querySelector('img');
+    expect(art).not.toBeNull();
+    // Sharing a parent is what "overlaid" means structurally. If someone moves
+    // the grip back into its own flex slot, this fails — which is the point:
+    // that slot cost horizontal space in every row and is why #2395 exists.
+    expect(handle.parentElement).toBe(art!.parentElement);
+  });
+
+  it('the handle is visible at rest, not hover-revealed', () => {
+    render(QueueTrackRow, { props: { track: sampleTrack, index: 3, isCurrent: false } });
+    const handle = screen.getByLabelText(/reorder track/i);
+    // Overlaying already solved the space complaint, so there is nothing to buy
+    // by hiding it — and hiding it would cost the only cue that the queue can
+    // be reordered, on touch especially, where there is no hover at all.
+    // Asserting the absence of `opacity-0` is stylistic and a bit brittle, but
+    // it is the only handle jsdom gives us on a decision worth protecting.
+    expect(handle.className).not.toMatch(/\bopacity-0\b/);
+  });
 });

web/src/lib/components/Shell.svelte

@@ -5,6 +5,7 @@
   import { user, logout } from '$lib/auth/store.svelte';
   import { player } from '$lib/player/store.svelte';
   import { appName } from '$lib/branding';
+  import MinstrelMark from './MinstrelMark.svelte';
   import PlayerBar from './PlayerBar.svelte';
   import SearchInput from './SearchInput.svelte';
 
@@ -66,7 +67,11 @@
        whenever search or the user menu grew, so the nav drifted off
        window-center. Grid pins each column to a fixed lane. -->
   <header class="grid grid-cols-3 items-center border-b border-border bg-surface px-3 md:px-4 py-2 gap-3 md:gap-6">
-    <a href="/" class="font-semibold text-sm md:text-base whitespace-nowrap justify-self-start">
+    <a
+      href="/"
+      class="flex items-center gap-2 font-semibold text-sm md:text-base whitespace-nowrap justify-self-start"
+    >
+      <MinstrelMark size={20} class="shrink-0" />
       {appName()}
     </a>
 

web/static/brand/favicon.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="157 116 992 992">
+  <!-- Minstrel mark. The M flips with the viewer's scheme because a favicon
+       sits on browser chrome we don't control: parchment would vanish on a
+       light tab strip, obsidian on a dark one. The note keeps the accent in
+       both — teal holds against either. -->
+  <style>
+    .m { fill: #E8E4D8; }
+    @media (prefers-color-scheme: light) { .m { fill: #14171A; } }
+  </style>
+  <g transform="translate(0,1254) scale(0.1,-0.1)" fill-rule="evenodd">
+    <path class="m" d="M2252 9878 l3 -152 109 -22 c342 -72 492 -184 538 -405 16 -74 24
+-4823 9 -5024 -20 -266 -73 -375 -236 -484 -116 -77 -332 -150 -543 -181 -114
+-18 -107 -6 -110 -165 -1 -76 2 -143 7 -148 9 -9 2607 -11 2623 -1 14 9 10
+280 -4 291 -7 5 -49 15 -93 22 -380 60 -638 193 -720 374 -63 136 -59 -12 -61
+2247 -3 1999 -2 2054 15 2015 116 -253 646 -1520 1183 -2825 71 -173 216 -524
+322 -780 206 -494 266 -640 370 -895 97 -237 68 -210 226 -210 l135 0 23 50
+c13 27 95 212 182 410 134 307 747 1685 1015 2285 92 205 726 1599 910 2000
+65 140 126 274 137 297 22 50 52 71 74 52 12 -10 14 -266 14 -1864 l0 -1852
+-82 -7 c-347 -29 -716 -203 -973 -460 -710 -712 -343 -1645 650 -1649 453 -2
+892 184 1206 510 193 202 295 397 351 676 l23 112 0 2357 c0 1297 0 2358 1
+2358 12 0 142 -49 179 -67 342 -173 607 -545 715 -1004 85 -361 66 -801 -51
+-1215 -43 -151 -40 -173 18 -174 53 0 284 377 396 650 243 590 303 1238 163
+1754 -178 652 -643 1100 -1294 1248 -93 21 -122 22 -716 25 -707 4 -649 12
+-696 -90 -15 -34 -78 -172 -140 -307 -593 -1297 -1123 -2469 -1717 -3800 -210
+-472 -193 -437 -204 -418 -11 19 -173 423 -630 1568 -214 536 -394 986 -400
+1000 -6 14 -76 187 -156 385 -80 198 -182 452 -228 565 -46 113 -140 346 -209
+518 -205 507 -225 554 -244 568 -14 11 -209 13 -1055 14 l-1038 0 3 -152z"/>
+    <path fill="#4A6B5C" d="M8830 7450 l0 -2582 -32 6 c-517 106 -1064 -47 -1442 -405 -598 -566
+-501 -1354 196 -1598 489 -170 1134 -19 1548 363 234 217 350 418 423 736 l22
+95 3 2373 c2 1961 5 2372 16 2372 27 0 132 -41 205 -81 315 -169 569 -524 675
+-944 50 -198 60 -285 60 -525 0 -288 -27 -487 -105 -756 -34 -120 -35 -130
+-11 -143 33 -18 64 11 154 144 227 334 402 795 469 1235 37 238 34 646 -4 843
+-149 761 -637 1271 -1353 1418 -98 20 -147 23 -466 27 l-358 4 0 -2582z"/>
+  </g>
+</svg>

web/static/brand/mark.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="202 251 902 723">
+  <g transform="translate(0,1254) scale(0.1,-0.1)" fill-rule="evenodd">
+    <path fill="currentColor" d="M2252 9878 l3 -152 109 -22 c342 -72 492 -184 538 -405 16 -74 24
+-4823 9 -5024 -20 -266 -73 -375 -236 -484 -116 -77 -332 -150 -543 -181 -114
+-18 -107 -6 -110 -165 -1 -76 2 -143 7 -148 9 -9 2607 -11 2623 -1 14 9 10
+280 -4 291 -7 5 -49 15 -93 22 -380 60 -638 193 -720 374 -63 136 -59 -12 -61
+2247 -3 1999 -2 2054 15 2015 116 -253 646 -1520 1183 -2825 71 -173 216 -524
+322 -780 206 -494 266 -640 370 -895 97 -237 68 -210 226 -210 l135 0 23 50
+c13 27 95 212 182 410 134 307 747 1685 1015 2285 92 205 726 1599 910 2000
+65 140 126 274 137 297 22 50 52 71 74 52 12 -10 14 -266 14 -1864 l0 -1852
+-82 -7 c-347 -29 -716 -203 -973 -460 -710 -712 -343 -1645 650 -1649 453 -2
+892 184 1206 510 193 202 295 397 351 676 l23 112 0 2357 c0 1297 0 2358 1
+2358 12 0 142 -49 179 -67 342 -173 607 -545 715 -1004 85 -361 66 -801 -51
+-1215 -43 -151 -40 -173 18 -174 53 0 284 377 396 650 243 590 303 1238 163
+1754 -178 652 -643 1100 -1294 1248 -93 21 -122 22 -716 25 -707 4 -649 12
+-696 -90 -15 -34 -78 -172 -140 -307 -593 -1297 -1123 -2469 -1717 -3800 -210
+-472 -193 -437 -204 -418 -11 19 -173 423 -630 1568 -214 536 -394 986 -400
+1000 -6 14 -76 187 -156 385 -80 198 -182 452 -228 565 -46 113 -140 346 -209
+518 -205 507 -225 554 -244 568 -14 11 -209 13 -1055 14 l-1038 0 3 -152z"/>
+    <path fill="#4A6B5C" d="M8830 7450 l0 -2582 -32 6 c-517 106 -1064 -47 -1442 -405 -598 -566
+-501 -1354 196 -1598 489 -170 1134 -19 1548 363 234 217 350 418 423 736 l22
+95 3 2373 c2 1961 5 2372 16 2372 27 0 132 -41 205 -81 315 -169 569 -524 675
+-944 50 -198 60 -285 60 -525 0 -288 -27 -487 -105 -756 -34 -120 -35 -130
+-11 -143 33 -18 64 11 154 144 227 334 402 795 469 1235 37 238 34 646 -4 843
+-149 761 -637 1271 -1353 1418 -98 20 -147 23 -466 27 l-358 4 0 -2582z"/>
+  </g>
+</svg>