Merge pull request 'Readable accent text app-wide; Android queue drag math under test' (#144) from dev into main

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

@@ -0,0 +1,32 @@
+package com.fabledsword.minstrel.player.ui
+
+import kotlin.math.roundToInt
+
+/**
+ * Drag offset to row delta, rounded to the nearest row boundary. The Android
+ * half of web's `offsetToDelta` (web/src/lib/components/queue-row-math.ts):
+ * the two clients are meant to agree, and QueueDragMathTest mirrors web's
+ * cases so both are held to it (#2436).
+ *
+ * Ties round toward positive infinity, as JS `Math.round` does: half a row
+ * down moves one row, half a row up stays put. A row not yet measured
+ * (height 0) moves nothing.
+ */
+internal fun queueDragDelta(offsetPx: Float, rowHeightPx: Int): Int =
+    if (rowHeightPx > 0) (offsetPx / rowHeightPx).roundToInt() else 0
+
+/**
+ * The queue index a row dragged from [index] lands on, clamped to the queue.
+ * A drag past either end stops at the first or last row.
+ */
+internal fun queueDragTarget(
+    index: Int,
+    offsetPx: Float,
+    rowHeightPx: Int,
+    queueSize: Int,
+): Int {
+    // coerceIn throws on an empty range; a row can't be dragged in an empty
+    // queue, but the composable's keys can briefly outlive the list.
+    if (queueSize <= 0) return index
+    return (index + queueDragDelta(offsetPx, rowHeightPx)).coerceIn(0, queueSize - 1)
+}

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

@@ -48,7 +48,6 @@ 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)
@@ -278,8 +277,7 @@ private fun Modifier.queueReorderDrag(
                 onOffsetChange(offset)
             },
             onDragEnd = {
-                val delta = if (rowHeightPx > 0) (offset / rowHeightPx).roundToInt() else 0
+                val target = queueDragTarget(index, offset, rowHeightPx, queueSize)
-                val target = (index + delta).coerceIn(0, queueSize - 1)
                 if (target != index) onMove(index, target)
                 offset = 0f
                 onOffsetChange(0f)

android/app/src/test/java/com/fabledsword/minstrel/player/ui/QueueDragMathTest.kt

@@ -0,0 +1,78 @@
+package com.fabledsword.minstrel.player.ui
+
+import org.junit.jupiter.api.Test
+import kotlin.test.assertEquals
+
+/**
+ * The queue drag math (#2436). The delta cases mirror web's
+ * queue-row-math.test.ts one for one, so a change to either client's
+ * rounding shows up as a disagreement here rather than as a drop that lands
+ * one row off on one platform only.
+ */
+class QueueDragMathTest {
+
+    @Test
+    fun `zero offset moves nothing`() {
+        assertEquals(0, queueDragDelta(0f, 64))
+    }
+
+    @Test
+    fun `a full row down moves one`() {
+        assertEquals(1, queueDragDelta(64f, 64))
+    }
+
+    @Test
+    fun `just under half a row rounds down`() {
+        assertEquals(0, queueDragDelta(31f, 64))
+    }
+
+    @Test
+    fun `half a row or more rounds up`() {
+        assertEquals(1, queueDragDelta(32f, 64))
+    }
+
+    @Test
+    fun `drag up is symmetric, with ties toward positive infinity as in JS`() {
+        assertEquals(-1, queueDragDelta(-64f, 64))
+        assertEquals(0, queueDragDelta(-32f, 64))
+    }
+
+    @Test
+    fun `several rows`() {
+        assertEquals(3, queueDragDelta(192f, 64))
+        assertEquals(-2, queueDragDelta(-128f, 64))
+    }
+
+    @Test
+    fun `a row not yet measured moves nothing`() {
+        assertEquals(0, queueDragDelta(100f, 0))
+        assertEquals(0, queueDragDelta(100f, -1))
+    }
+
+    @Test
+    fun `the measured row height is what counts`() {
+        assertEquals(1, queueDragDelta(56f, 56))
+        assertEquals(1, queueDragDelta(28f, 56))
+    }
+
+    @Test
+    fun `a drag past either end stops at the first or last row`() {
+        assertEquals(0, queueDragTarget(index = 1, offsetPx = -640f, rowHeightPx = 64, queueSize = 5))
+        assertEquals(4, queueDragTarget(index = 3, offsetPx = 640f, rowHeightPx = 64, queueSize = 5))
+    }
+
+    @Test
+    fun `a sub-half-row drag lands where it started`() {
+        assertEquals(2, queueDragTarget(index = 2, offsetPx = 20f, rowHeightPx = 64, queueSize = 5))
+    }
+
+    @Test
+    fun `before the row is measured a drag lands where it started`() {
+        assertEquals(2, queueDragTarget(index = 2, offsetPx = 300f, rowHeightPx = 0, queueSize = 5))
+    }
+
+    @Test
+    fun `an empty queue does not throw`() {
+        assertEquals(0, queueDragTarget(index = 0, offsetPx = 64f, rowHeightPx = 64, queueSize = 0))
+    }
+}

web/scripts/check-tint-contrast.js

@@ -65,10 +65,13 @@ export function findCss(source) {
 }
 
 // Hues that fail AA as text even on a plain surface, so the raw hue is never
-// text at all: error measures 2.64:1 on slate and 3.23 on iron in dark mode,
+// text at all. Dark mode, against 4.5:
-// against 4.5; error-fg measures 5.30 at worst. A border or outline in the
+//   error   2.64 on slate, 3.23 on iron   → error-fg 5.30 at worst
-// hue is a graphic with a 3:1 floor and stays allowed.
+//   accent  2.21 on slate, 3.04 on the page → accent-fg 5.62 at worst (#5318)
-export const TEXT_NEVER_RAW = ['error'];
+// Accent icons (the liked heart, active shuffle/repeat) follow too: as
+// graphics they only need 3:1, and the raw accent misses even that on iron.
+// A border or outline in the hue is a graphic and stays allowed.
+export const TEXT_NEVER_RAW = ['error', 'accent'];
 
 /** Raw text-X classes and color: var(--fs-X) for the hues above. */
 export function findRawText(source) {

web/scripts/check-tint-contrast.test.js

@@ -42,6 +42,13 @@ describe('hue-on-own-tint check (#3150)', () => {
       expect(findRawText(`.msg { color: var(--fs-error); }`)[0].fix).toBe('var(--fs-error-fg)');
     });
 
+    test('raw accent text is caught too, including hover: variants (#5318)', () => {
+      expect(findRawText(`<a class="text-sm text-accent hover:underline">`)[0].fix).toBe('text-accent-fg');
+      expect(findRawText(`<a class="hover:text-accent">`)).toHaveLength(1);
+      expect(findRawText(`.pending { color: var(--fs-accent); }`)[0].fix).toBe('var(--fs-accent-fg)');
+      expect(findRawText(`<a class="text-accent-fg border-accent">`)).toEqual([]);
+    });
+
     test('passes error-fg, and error as a border or outline', () => {
       expect(findRawText(`<p class="text-error-fg">x</p>`)).toEqual([]);
       expect(findRawText(`<div class="border-error" class:border-error={bad}>`)).toEqual([]);

web/src/lib/components/AlphabeticalGrid.svelte

@@ -201,7 +201,7 @@
     cursor: default;
   }
   .rail-btn.pending {
-    color: var(--fs-accent);
+    color: var(--fs-accent-fg);
     cursor: wait;
   }
   :global(.rail-btn .spin) {

web/src/lib/components/LikeButton.svelte

@@ -44,5 +44,5 @@
   aria-label={liked ? 'Unlike' : 'Like'}
   aria-pressed={liked}
   onclick={onClick}
-  class="rounded p-1 {sizeClass} {liked ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}"
+  class="rounded p-1 {sizeClass} {liked ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}"
 >{liked ? '♥' : '♡'}</button>

web/src/lib/components/MobileAppDownload.svelte

@@ -48,9 +48,9 @@
     <a
       href={info.apkUrl}
       download="minstrel.apk"
-      class="mobile-app-download flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-sm text-text-primary no-underline transition-colors hover:bg-surface-hover hover:text-accent focus-visible:ring-2 focus-visible:ring-accent"
+      class="mobile-app-download flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2 text-sm text-text-primary no-underline transition-colors hover:bg-surface-hover hover:text-accent-fg focus-visible:ring-2 focus-visible:ring-accent"
     >
-      <Smartphone size={18} strokeWidth={1.5} class="shrink-0 text-accent" />
+      <Smartphone size={18} strokeWidth={1.5} class="shrink-0 text-accent-fg" />
       <span class="flex flex-col leading-tight">
         <span class="font-medium">Get the Android app</span>
         <span class="text-xs text-text-secondary">

web/src/lib/components/QueueTrackRow.svelte

@@ -101,7 +101,7 @@
   >
     <div class="flex items-center gap-2 min-w-0">
       {#if isCurrent}
-        <span class="text-xs text-accent uppercase tracking-wide flex-shrink-0">Now playing</span>
+        <span class="text-xs text-accent-fg uppercase tracking-wide flex-shrink-0">Now playing</span>
       {/if}
       <span class="font-medium truncate text-text-primary">{track.title}</span>
     </div>

web/src/routes/admin/+page.svelte

@@ -290,7 +290,7 @@
     <header class="flex items-baseline justify-between">
       <h3 class="font-display text-xl font-medium text-text-primary">Pending requests</h3>
       {#if pendingCount > PREVIEW_LIMIT}
-        <a href="/admin/requests" class="text-sm text-accent hover:underline">View all {pendingCount} →</a>
+        <a href="/admin/requests" class="text-sm text-accent-fg hover:underline">View all {pendingCount} →</a>
       {/if}
     </header>
 
@@ -523,7 +523,7 @@
     <header class="flex items-baseline justify-between">
       <h3 class="font-display text-xl font-medium text-text-primary">Quarantine</h3>
       {#if quarantineCount > PREVIEW_LIMIT}
-        <a href="/admin/quarantine" class="text-sm text-accent hover:underline">View all {quarantineCount} →</a>
+        <a href="/admin/quarantine" class="text-sm text-accent-fg hover:underline">View all {quarantineCount} →</a>
       {/if}
     </header>
 

web/src/routes/admin/integrations/+page.svelte

@@ -424,7 +424,7 @@
     <div>
       <h3 class="font-display text-lg font-medium text-text-primary">Lidarr</h3>
       <p class="mt-1 text-sm text-text-secondary">
-        Search Lidarr from <span class="font-mono text-accent">/discover</span> and
+        Search Lidarr from <span class="font-mono text-accent-fg">/discover</span> and
         route approved requests to it.
       </p>
     </div>

web/src/routes/admin/requests/+page.svelte

@@ -225,7 +225,7 @@
               {rowMeta(r)}
             </div>
             {#if r.imported_album_count > 0 || r.imported_track_count > 0}
-              <div class="text-sm text-accent" data-testid="ingest-progress">
+              <div class="text-sm text-accent-fg" data-testid="ingest-progress">
                 {#if r.kind === 'artist'}
                   {r.imported_album_count} {r.imported_album_count === 1 ? 'album' : 'albums'}
                   · {r.imported_track_count} {r.imported_track_count === 1 ? 'track' : 'tracks'} ingested

web/src/routes/admin/tuning/+page.svelte

@@ -495,7 +495,7 @@
                   {/each}
                   {#if s.points.length > 1}
                     <polyline
-                      class="text-accent"
+                      class="text-accent-fg"
                       points={sparkPoints(s)}
                       fill="none"
                       stroke="currentColor"
@@ -503,7 +503,7 @@
                     />
                   {:else if s.points.length === 1}
                     <circle
-                      class="text-accent"
+                      class="text-accent-fg"
                       cx={xFor(s.points[0].week_start)}
                       cy={SPARK_H - s.points[0].skip_rate * SPARK_H}
                       r="2" fill="currentColor"

web/src/routes/albums/[id]/+page.svelte

@@ -95,7 +95,7 @@
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
       <p>Album not found.</p>
-      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+      <a href="/" class="mt-2 inline-block text-sm text-accent-fg">Back to Library</a>
     </div>
   {:else if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />
@@ -131,7 +131,7 @@
              in that genre. -->
         {#if album.year}
           <p class="text-sm">
-            <a href={`/library/years?y=${album.year}`} class="text-accent hover:underline">
+            <a href={`/library/years?y=${album.year}`} class="text-accent-fg hover:underline">
               {album.year}
             </a>
           </p>

web/src/routes/artists/[id]/+page.svelte

@@ -73,7 +73,7 @@
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
       <p>Artist not found.</p>
-      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+      <a href="/" class="mt-2 inline-block text-sm text-accent-fg">Back to Library</a>
     </div>
   {:else if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />

web/src/routes/forgot-password/+page.svelte

@@ -71,7 +71,7 @@
     {/if}
 
     <p class="mt-4 text-center text-sm text-text-secondary">
-      Remembered? <a href="/login" class="text-accent hover:underline">Log in</a>
+      Remembered? <a href="/login" class="text-accent-fg hover:underline">Log in</a>
     </p>
   </div>
 </main>

web/src/routes/library/albums/+page.svelte

@@ -65,7 +65,7 @@
     <p class="text-text-secondary">
       No albums in your loaded library match
       <span class="font-medium">'{filter.trim()}'</span>.
-      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent-fg hover:underline">
         Search the full library →
       </a>
     </p>

web/src/routes/library/artists/+page.svelte

@@ -63,7 +63,7 @@
     <p class="text-text-secondary">
       No artists in your loaded library match
       <span class="font-medium">'{filter.trim()}'</span>.
-      <a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+      <a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent-fg hover:underline">
         Search the full library →
       </a>
     </p>

web/src/routes/library/genres/+page.svelte

@@ -112,7 +112,7 @@
     <header class="space-y-2">
       <a
         href="/library/genres"
-        class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+        class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
       >
         <ChevronLeft size={14} aria-hidden="true" />
         All genres

web/src/routes/library/liked/+page.svelte

@@ -89,7 +89,7 @@
         title="No liked artists yet."
       >
         {#snippet actions()}
-          <a href="/library/artists" class="text-accent hover:underline">Browse artists →</a>
+          <a href="/library/artists" class="text-accent-fg hover:underline">Browse artists →</a>
         {/snippet}
       </EmptyState>
     {:else}
@@ -121,7 +121,7 @@
         title="No liked albums yet."
       >
         {#snippet actions()}
-          <a href="/library/albums" class="text-accent hover:underline">Browse albums →</a>
+          <a href="/library/albums" class="text-accent-fg hover:underline">Browse albums →</a>
         {/snippet}
       </EmptyState>
     {:else}
@@ -153,7 +153,7 @@
         title="No liked tracks yet."
       >
         {#snippet actions()}
-          <a href="/" class="text-accent hover:underline">Find something new →</a>
+          <a href="/" class="text-accent-fg hover:underline">Find something new →</a>
         {/snippet}
       </EmptyState>
     {:else}

web/src/routes/library/years/+page.svelte

@@ -97,7 +97,7 @@
     <header class="space-y-2">
       <a
         href="/library/years"
-        class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+        class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
       >
         <ChevronLeft size={14} aria-hidden="true" />
         All years

web/src/routes/login/+page.svelte

@@ -85,11 +85,11 @@
     </form>
 
     <p class="mt-4 text-center text-sm text-text-secondary">
-      <a href="/forgot-password" class="text-accent hover:underline">Forgot password?</a>
+      <a href="/forgot-password" class="text-accent-fg hover:underline">Forgot password?</a>
     </p>
     <p class="mt-2 text-center text-sm text-text-secondary">
       Don't have an account?
-      <a href="/register" class="text-accent hover:underline">Register</a>
+      <a href="/register" class="text-accent-fg hover:underline">Register</a>
     </p>
   </div>
 </main>

web/src/routes/now-playing/+page.svelte

@@ -163,7 +163,7 @@
           aria-label="Shuffle"
           aria-pressed={player.shuffle}
           class="flex items-center justify-center min-h-[44px] min-w-[44px] rounded
-                 {player.shuffle ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}
+                 {player.shuffle ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}
                  focus-visible:ring-2 focus-visible:ring-accent"
         >
           <Shuffle size={20} strokeWidth={1.5} />
@@ -216,7 +216,7 @@
           aria-label={repeatLabel}
           aria-pressed={player.repeat !== 'off'}
           class="flex items-center justify-center min-h-[44px] min-w-[44px] rounded
-                 {player.repeat !== 'off' ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}
+                 {player.repeat !== 'off' ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}
                  focus-visible:ring-2 focus-visible:ring-accent"
         >
           {#if player.repeat === 'one'}

web/src/routes/register/+page.svelte

@@ -170,7 +170,7 @@
 
     <p class="mt-4 text-center text-sm text-text-secondary">
       Already have an account?
-      <a href="/login" class="text-accent hover:underline">Sign in</a>
+      <a href="/login" class="text-accent-fg hover:underline">Sign in</a>
     </p>
   </div>
 </main>

web/src/routes/requests/+page.svelte

@@ -107,7 +107,7 @@
               {rowMeta(r)}
             </div>
             {#if r.imported_album_count > 0 || r.imported_track_count > 0}
-              <div class="text-sm text-accent" data-testid="ingest-progress">
+              <div class="text-sm text-accent-fg" data-testid="ingest-progress">
                 {#if r.kind === 'artist'}
                   {r.imported_album_count} {r.imported_album_count === 1 ? 'album' : 'albums'}
                   · {r.imported_track_count} {r.imported_track_count === 1 ? 'track' : 'tracks'} ingested
@@ -139,7 +139,7 @@
               <a
                 {href}
                 aria-label={`Listen to ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+                class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
               >
                 <Music2 size={16} strokeWidth={1} /> Listen
               </a>

web/src/routes/reset-password/[token]/+page.svelte

@@ -89,7 +89,7 @@
       </button>
     </form>
     <p class="mt-4 text-center text-sm text-text-secondary">
-      <a href="/login" class="text-accent hover:underline">Back to login</a>
+      <a href="/login" class="text-accent-fg hover:underline">Back to login</a>
     </p>
   </div>
 </main>

web/src/routes/search/+page.svelte

@@ -56,7 +56,7 @@
           {#if artists.total > artists.items.length}
             <a
               href={`/search/artists?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {artists.total} →
             </a>
@@ -77,7 +77,7 @@
           {#if albums.total > albums.items.length}
             <a
               href={`/search/albums?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {albums.total} →
             </a>
@@ -98,7 +98,7 @@
           {#if tracks.total > tracks.items.length}
             <a
               href={`/search/tracks?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {tracks.total} →
             </a>

web/src/routes/settings/+page.svelte

@@ -363,7 +363,7 @@
               <button
                 type="button"
                 onclick={clearToken}
-                class="text-sm text-accent hover:underline"
+                class="text-sm text-accent-fg hover:underline"
                 disabled={$tokenMutation.isPending}
               >clear</button>
             </div>
@@ -402,7 +402,7 @@
         {/if}
 
         <p class="text-xs text-text-secondary">
-          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent hover:underline">listenbrainz.org/profile</a>.
+          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent-fg hover:underline">listenbrainz.org/profile</a>.
           Tokens are stored unencrypted in this server's database — treat as sensitive.
         </p>
       </div>
@@ -682,7 +682,7 @@
     <h2 class="text-lg font-semibold">Library</h2>
     <ul class="space-y-2 text-sm">
       <li>
-        <a href="/library/hidden" class="text-accent hover:underline">Hidden tracks</a>
+        <a href="/library/hidden" class="text-accent-fg hover:underline">Hidden tracks</a>
         <span class="text-text-secondary"> — tracks you've flagged as bad rips, wrong tags, or otherwise unplayable.</span>
       </li>
     </ul>

web/tailwind.config.js

@@ -26,8 +26,10 @@ export default {
         accent: {
           DEFAULT: 'var(--fs-accent)',
           tint: 'color-mix(in srgb, var(--fs-accent) 12%, transparent)',
-          // Accent TEXT on an accent tint (#3150). The raw accent on its own
+          // All accent TEXT and icons use this, on a tint or not (#3150,
-          // tint measures 1.97:1 at worst; this measures 5.03.
+          // #5318). The raw accent measures 1.97:1 on its own tint and 2.21 on
+          // slate at worst; this measures 5.03 and 5.62. The raw accent stays
+          // for borders, rings and fills, where it is a graphic, not text.
           fg: 'var(--fs-accent-fg)'
         },
         warning: { DEFAULT: 'var(--fs-warning)', fg: 'var(--fs-warning-fg)' },