Merge remote-tracking branch 'origin/fix/queue-toggle-state' into integration/small-fixes

The badge on a row you do not own was transparent until the row was
hovered or focused. That rule was inherited from the green ticks it
replaced, and it does not survive the reason those went: a tick marked
the *common* case, while this marks the rows that are not here. A mark
on the exception is the information on this page, and one that appears
only under the pointer cannot be seen, counted, or reached by anyone
driving the app with a finger.

The repaint half of #33 is fixed in #82; this is only the visibility,
rebased to leave that alone.

Refs #33

backend/download/reconcile.go

@@ -310,6 +310,25 @@ func (r *Reconciler) run(ctx context.Context, force bool) (Summary, error) {
 
 	summary.Synced = r.syncExternalLists(ctx)
 
+	// Nothing is searched for when there is nothing to search with, and
+	// the point is what that *does not* do to the list.
+	//
+	// Attempting anyway is not merely wasted work: every request comes
+	// back "no download clients are enabled", which RecordAttempt writes
+	// down as an attempt and schedules a retry for -- so a user who has
+	// deliberately built a wanted list with no client watched their
+	// requests accrue failures and announce "next check in 6 hours"
+	// about a check that cannot happen. Wanting something without a way
+	// to fetch it is a supported thing to do; being told it is being
+	// looked for is a lie.
+	//
+	// Everything above this line still runs: an artist subscription
+	// still expands, and a request the user satisfied by some other
+	// route -- ripped, bought, copied in -- is still retired, because
+	// neither needs a provider.
+	summary.NoProviders = len(r.manager.enabledProviders()) == 0
+
+	if !summary.NoProviders {
 		attempted, started, err := r.attemptDue(ctx, force)
 		if err != nil {
 			return summary, err
@@ -317,8 +336,9 @@ func (r *Reconciler) run(ctx context.Context, force bool) (Summary, error) {
 
 		summary.Attempted = attempted
 		summary.Started = started
+	}
+
 	summary.Waiting = r.countWaiting(ctx)
-	summary.NoProviders = len(r.manager.enabledProviders()) == 0
 
 	r.logger.Info(
 		"reconciled request list",

backend/download/reconcile_test.go

@@ -453,6 +453,15 @@ func TestReconcileRespectsBatchSize(t *testing.T) {
 	f := newReconcileFixture(t)
 	ctx := context.Background()
 
+	// A client that searches and finds nothing. The batch size is about
+	// how many requests one pass *searches for*, which only means
+	// anything when there is something to search with -- a pass with no
+	// provider now attempts nothing at all, deliberately.
+	f.manager.installProvider(
+		Config{ID: 1, Priority: 50},
+		NewFakeProvider(1, "finds-nothing", Caps{CanSearch: true}),
+	)
+
 	f.reconciler.SetBatch(2)
 
 	for _, mbid := range []string{"rg-1", "rg-2", "rg-3", "rg-4"} {
@@ -593,3 +602,72 @@ func TestSummaryReportsNoProviders(t *testing.T) {
 		t.Error("summary did not report that no download client is enabled")
 	}
 }
+
+// ...and it does not search, which is the part the user sees.
+//
+// Attempting with no provider fails every request with "no download
+// clients are enabled", and RecordAttempt writes that down as an
+// attempt and schedules a retry -- so a wanted list built deliberately
+// without a client accrued failures and announced "next check in 6
+// hours" about a check that cannot happen. Wanting something with no
+// way to fetch it is supported; being told it is being looked for is
+// a lie.
+func TestNoProvidersMeansNoAttempt(t *testing.T) {
+	t.Parallel()
+
+	f := newReconcileFixture(t)
+	ctx := context.Background()
+
+	id, err := f.store.AddRequest(ctx, Request{
+		MBID:      "rg-1",
+		Entity:    EntityReleaseGroup,
+		LibraryID: 1,
+		Title:     "OK Computer",
+	})
+	if err != nil {
+		t.Fatalf("AddRequest: %v", err)
+	}
+
+	f.catalog.tracklists["rg-1"] = fourTrackDownload().Expected
+
+	summary, err := f.reconciler.RunNow(ctx)
+	if err != nil {
+		t.Fatalf("RunNow: %v", err)
+	}
+
+	if summary.Attempted != 0 {
+		t.Errorf("attempted %d requests with no client to search with, want 0",
+			summary.Attempted)
+	}
+
+	// The list still knows what is on it: "nothing happened" has to be
+	// reportable as "nothing was searched for, of the one thing you
+	// want" rather than as silence.
+	if summary.Waiting != 1 {
+		t.Errorf("summary reported %d waiting, want 1", summary.Waiting)
+	}
+
+	req, err := f.store.GetRequest(ctx, id)
+	if err != nil {
+		t.Fatalf("GetRequest: %v", err)
+	}
+
+	if req.Attempts != 0 {
+		t.Errorf("attempts = %d, want 0: a pass that could not search did not",
+			req.Attempts)
+	}
+
+	if req.LastError != "" {
+		t.Errorf("lastError = %q, want empty: the request did not fail, it "+
+			"was never tried", req.LastError)
+	}
+
+	// A new request is due immediately (next_try_at is set to now on
+	// insert), so the fault is not the presence of a time -- it is a
+	// time pushed into the future by a failed attempt, which is what the
+	// UI renders as "next check in 6 hours".
+	if req.NextTryAt.After(time.Now().Add(time.Minute)) {
+		t.Errorf("next try scheduled for %v: a check that cannot happen was "+
+			"put on the clock", req.NextTryAt)
+	}
+}

e2e/specs/queue-toggle-state.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect } from '../support/fixtures.js';
+
+/**
+ * The queue button says whether the queue is open.
+ *
+ * It used to look identical in both states, so the only way to tell
+ * what pressing it would do was to look at the other side of the window
+ * and infer it — and for anyone not looking at all there was nothing to
+ * infer from: no `aria-expanded`, no `aria-controls`, no pressed state.
+ *
+ * The state is reflected *from the panel*, not kept beside the click,
+ * because the button is not the only thing that opens the queue —
+ * `now-playing-view` sets the same attribute, since it hides the bar
+ * this button lives in. A flag maintained by the click handler would be
+ * right until something else opened the panel and then quietly wrong,
+ * which is the second test here.
+ */
+test.describe('the queue toggle', () => {
+  test('reports open and closed, and names what it controls', async ({
+    app,
+  }) => {
+    const toggle = app.locator('#queue-button');
+
+    await expect(toggle).toHaveAttribute('aria-controls', 'queue-panel');
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+
+    // The state is not only in the accessibility tree: a control that
+    // announces a state it does not draw is half a fix.
+    //
+    // Background rather than colour, because the pointer is still on
+    // the button after the click and `:hover` paints it the same accent
+    // the open state does -- so a colour comparison here passes on the
+    // broken build and proves nothing.
+    const [open, closed] = await toggle.evaluate((el) => {
+      const now = getComputedStyle(el).backgroundColor;
+
+      el.setAttribute('aria-expanded', 'false');
+      const shut = getComputedStyle(el).backgroundColor;
+
+      el.setAttribute('aria-expanded', 'true');
+
+      return [now, shut];
+    });
+
+    expect(open).not.toBe(closed);
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('follows the panel when something else opens it', async ({ app }) => {
+    const toggle = app.locator('#queue-button');
+
+    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+    // Exactly what `now-playing-view`'s queue button does.
+    await app.evaluate(() =>
+      document.getElementById('queue-panel')?.setAttribute('open', ''),
+    );
+
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  });
+});

frontend/index.css

@@ -207,6 +207,17 @@ body div.sidebar {
         color: var(--yj-accent, #ffd43b);
     }
 
+    /* An open queue is a state this button can be in, and it used to
+       look exactly like the closed one -- so the only way to tell what
+       pressing it would do was to look at the other side of the window
+       and infer it. `aria-expanded` is the same fact for anyone not
+       looking at all, and it points at the panel it controls. */
+    #queue-button[aria-expanded='true'] {
+        color: var(--yj-accent, #ffd43b);
+        background: var(--yj-bg-overlay, #404040);
+        border-radius: 4px;
+    }
+
     #queue-button.drag-over {
         color: var(--yj-accent, #ffd43b);
         outline: 2px dashed var(--yj-accent, #ffd43b);

frontend/index.html

@@ -37,7 +37,8 @@
     <footer class="bottom-bar">
         <now-playing></now-playing>
         <audio-player></audio-player>
-        <button aria-label="Toggle queue" id="queue-button">
+        <button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
+            id="queue-button">
             <wa-icon name="list"></wa-icon>
         </button>
     </footer>

frontend/index.ts

@@ -521,6 +521,28 @@ if (queueButton && queuePanel) {
         }
     });
 
+    // The button says whether the panel is open, and it learns that
+    // from the panel rather than from its own click handler.
+    //
+    // It is not the only thing that opens the queue -- `now-playing-view`
+    // sets the same attribute, because it hides the bar this button
+    // lives in -- so a state kept beside the click would be right until
+    // something else opened the panel and then quietly wrong. The panel's
+    // `open` attribute is the one fact; this reflects it.
+    const reflectQueueState = () => {
+        queueButton.setAttribute(
+            'aria-expanded',
+            String(queuePanel.hasAttribute('open')),
+        );
+    };
+
+    new MutationObserver(reflectQueueState).observe(queuePanel, {
+        attributes: true,
+        attributeFilter: ['open'],
+    });
+
+    reflectQueueState();
+
     // ---------------------------------------------------------------
     // Queue button as drop target (when queue panel is closed)
     // ---------------------------------------------------------------

frontend/src/components/audio-player/seekbar/seek-bar.ts

@@ -68,6 +68,29 @@ export class SeekBar extends LitElement {
       align-items: center;
     }
 
+    /* The clocks must not resize as they count.
+
+       Two things move them, and they need different answers. Digits in
+       a proportional font are different widths, so 1:11 is narrower
+       than 4:08 and the bar breathed once a second -- that is what
+       tabular figures fix. The character *count* changes too, at the
+       hundredth minute and whenever the right-hand clock is toggled to
+       remaining and grows a minus sign, and a figure width cannot fix
+       that -- so each clock also reserves the widest string this track
+       can put in it. The budget is per track rather than a constant
+       because reserving six characters on every track would push the
+       slider in by a character at each end for nothing. */
+    #seek-bar-container small,
+    .time-toggle {
+      font-variant-numeric: tabular-nums;
+      flex: 0 0 auto;
+      min-width: calc(var(--yj-clock-chars, 5) * 1ch);
+    }
+
+    #seek-bar-container small {
+      text-align: left;
+    }
+
     .time-toggle {
       background: none;
       border: none;
@@ -76,6 +99,9 @@ export class SeekBar extends LitElement {
       font: inherit;
       font-size: var(--wa-font-size-s, 0.875rem);
       cursor: pointer;
+      /* One more for the minus sign the remaining form carries. */
+      min-width: calc((var(--yj-clock-chars, 5) + 1) * 1ch);
+      text-align: right;
     }
 
     .time-toggle:hover,
@@ -219,8 +245,19 @@ export class SeekBar extends LitElement {
       : formatSeconds(this.trackLength);
     const rightTime = this.hasTrack ? rightLabel : '--:--';
 
+    // The widest string either clock can hold for *this* track. The
+    // duration is the longest elapsed value there can be, so its length
+    // is the budget; `--:--` is five, which is also the floor.
+    const clockChars = Math.max(
+      5,
+      this.hasTrack ? formatSeconds(this.trackLength).length : 0,
+    );
+
     return html`
-      <div id="seek-bar-container">
+      <div
+        id="seek-bar-container"
+        style="--yj-clock-chars: ${clockChars}"
+      >
         <small data-testid="elapsed-time">${elapsedTime}</small>
         <wa-slider
           label="Seek"

frontend/src/components/cover-grid/cover-grid-styles.ts

@@ -111,13 +111,32 @@ const gridStyles = css`
         scale: 0.95;
     }
 
+    /* Title and year on one line, and only the title truncates.
+
+       The year used to be part of the same run of text, so it was the
+       first thing an ellipsis ate: a card wide enough for a long album
+       name never showed its year, and browsing by year showed years
+       only for the albums with short names -- the sort said one thing
+       and the cards showed another.
+
+       A flex row rather than a second line, because the card's height
+       is what the virtualizer measures rows by. */
     .album-name {
         font-size: var(--album-name-font, 14px);
         font-weight: 400;
         color: var(--yj-text-primary, #fff);
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        gap: 0.35em;
+        min-width: 0;
+    }
+
+    .album-title {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        min-width: 0;
     }
 
     .artist-name {
@@ -131,6 +150,8 @@ const gridStyles = css`
 
     .album-year {
         color: var(--yj-text-tertiary, #888);
+        flex: 0 0 auto;
+        white-space: nowrap;
     }
 
     /* ========================================

frontend/src/components/cover-grid/cover-grid.ts

@@ -1480,12 +1480,16 @@ export class CoverGrid
             source: 'cover-grid',
         });
 
-        // Single album: show cover art thumbnail.
-        // Multiple albums: show track-count badge.
+        // Single album: show its cover, badged with how many tracks are
+        // on the way -- an album is 1 track or 30 and the thumbnail is
+        // the same picture either way, so the number the drop is about
+        // was the one thing this drag did not say.
+        // Multiple albums: show the track-count badge alone.
         if (isSingleAlbum && hit.album.CoverArtPath) {
             this.dragImageEl =
                 createAlbumArtDragImage(
                     this.getCoverUrl(hit.album),
+                    filePaths.length,
                 );
         } else {
             this.dragImageEl = createDragImage(
@@ -1898,10 +1902,10 @@ export class CoverGrid
                         class="album-name"
                         title="${album.Name}"
                     >
-                        ${album.Name}${album.Year
-                ? html`
-                              <span class="album-year">
-                                  (${album.Year})</span
+                        <span class="album-title">${album.Name}</span
+                        >${album.Year
+                ? html`<span class="album-year"
+                                  >(${album.Year})</span
                               >`
                 : nothing}
                     </div>

frontend/src/components/downloads-view/downloads-view.ts

@@ -512,7 +512,9 @@ export class DownloadsView extends ViewLifecycleMixin(LitElement) {
                         ${request.artist ? `${request.artist} — ` : ''}${request.title ||
                         request.mbid}
                     </div>
-                    <div class="detail">${requestDetail(request, this.nowMs)}</div>
+                    <div class="detail">
+                        ${requestDetail(request, this.nowMs, this.canDownload)}
+                    </div>
                 </div>
                 <div class="actions">
                     ${request.state === 'satisfied'
@@ -706,10 +708,20 @@ export class DownloadsView extends ViewLifecycleMixin(LitElement) {
  * looked for rather than as an error, because that is what it is — the
  * retry is already scheduled and there is nothing for the user to do.
  */
-function requestDetail(request: Request, nowMs: number): string {
+function requestDetail(
+    request: Request,
+    nowMs: number,
+    canDownload: boolean,
+): string {
     if (request.state === 'satisfied') return 'In your library';
     if (request.state === 'paused') return 'Paused — not being looked for';
 
+    // With no client there is no search and no retry clock — the
+    // backend stopped scheduling one — so a row must not imply either.
+    // "Queued" and "next check in 6 hours" are both promises nothing is
+    // in a position to keep.
+    if (!canDownload) return 'On your list — no download client to search with';
+
     if (request.attempts === 0) return 'Queued — not searched for yet';
 
     const tries = `Searched ${request.attempts} time${request.attempts === 1 ? '' : 's'}`;

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -2,6 +2,7 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { designTokens } from '../../styles/tokens.css';
+import { srOnly } from '../../styles/sr-only.css';
 import {
     LookupReleaseGroup,
     BrowseReleases,
@@ -289,6 +290,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         designTokens,
         exploreLinkStyles,
         contextMenuStyles,
+        srOnly,
         css`
             :host {
                 display: flex;
@@ -662,34 +664,21 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                 font-weight: 400;
             }
 
-            /* The request control is only offered where there is
-             * something to request, and only when the row is being
-             * attended to — a column of plus signs down a mostly-owned
-             * album is the clutter the green ticks were.
+            /* The request control is offered on every row that has
+             * something to request, and is not revealed on hover.
              *
-             * Hidden with opacity, never display:none or visibility,
-             * so it keeps its place in the layout (rows do not reflow
-             * as the pointer moves) and stays in the tab order and the
-             * accessibility tree.  focus-within is what makes it
-             * reachable without a mouse: tabbing to the button reveals
-             * it, and the row's own focus reveals it before you get
-             * there. */
+             * It used to be transparent until the row was hovered or
+             * focused, on the reasoning that a column of plus signs
+             * down a mostly-owned album is clutter. That reasoning was
+             * inherited from the green ticks it replaced and does not
+             * survive the rule those were removed for: a tick marked
+             * the *common* case, while this marks the rows that are
+             * **not** here. A mark on the exception is the information
+             * on this page — and one that appears only under the
+             * pointer cannot be seen, counted, or reached by anyone
+             * driving this with a finger. */
             .track-row .track-request {
                 flex-shrink: 0;
-                opacity: 0;
-                transition: opacity 0.12s ease;
-            }
-
-            .track-row:hover .track-request,
-            .track-row:focus-within .track-request,
-            .track-row .track-request:focus-visible {
-                opacity: 1;
-            }
-
-            @media (prefers-reduced-motion: reduce) {
-                .track-row .track-request {
-                    transition: none;
-                }
             }
         `,
     ];
@@ -3047,11 +3036,21 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
 
     /* ── Tracklist ── */
 
+    /**
+     * The heading is there and is not drawn.
+     *
+     * A list of numbered titles with durations under an album's cover
+     * does not need a word above it saying what it is — it was the
+     * only thing on this page labelling something already obvious. But
+     * the section is a landmark and the page's heading structure runs
+     * through it, so what goes is the *ink*, not the element: a reader
+     * jumping by heading still finds the tracklist.
+     */
     private renderTracklist() {
         if (this.loadingReleases) {
             return html`
                 <section>
-                    <h3 class="section-header">Tracklist</h3>
+                    <h3 class="sr-only">Tracklist</h3>
                     <div class="section-loading">Loading tracks\u2026</div>
                 </section>
             `;
@@ -3064,7 +3063,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         if (!current) {
             return html`
                 <section>
-                    <h3 class="section-header">Tracklist</h3>
+                    <h3 class="sr-only">Tracklist</h3>
                     <div class="section-error">
                         <wa-icon name="triangle-exclamation"></wa-icon>
                         No release data available.
@@ -3077,7 +3076,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         if (tracks.length === 0) {
             return html`
                 <section>
-                    <h3 class="section-header">Tracklist</h3>
+                    <h3 class="sr-only">Tracklist</h3>
                     <div
                         style="color: var(--yj-text-tertiary, #888); font-size: var(--yj-text-md)"
                     >
@@ -3093,7 +3092,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
 
         return html`
             <section>
-                <h3 class="section-header">Tracklist</h3>
+                <h3 class="sr-only">Tracklist</h3>
                 <div class="tracklist">
                     ${discNumbers.map((discNum) => {
                         const discTracks = discMap.get(discNum) ?? [];

frontend/src/utils/drag-image.ts

@@ -29,11 +29,23 @@ export function createDragImage(count: number): HTMLElement {
 }
 
 /**
- * Creates a drag image showing an album cover art thumbnail.
- * Falls back to the track-count badge if the image fails to load.
+ * Creates a drag image showing an album cover art thumbnail, with a
+ * corner badge saying how many tracks are on the way.
+ *
+ * The count is not decoration. The cover says *what* is being dragged
+ * and nothing said *how much* — an album is 1 track or 30 and the
+ * thumbnail is identical either way, so the one number the drop is
+ * about was the one thing the drag did not show. Every other drag in
+ * the app says it (`createDragImage` is a count and nothing else);
+ * this one was the exception because it had a picture to show instead.
+ *
+ * A count of 1 draws no badge: "1" over a single album cover is noise,
+ * and the absence is unambiguous next to a badge that only ever
+ * appears when there is more than one.
  */
 export function createAlbumArtDragImage(
     coverUrl: string,
+    count = 1,
 ): HTMLElement {
     const size = 64;
     const wrapper = document.createElement('div');
@@ -44,6 +56,12 @@ export function createAlbumArtDragImage(
         'left: -1000px',
         'pointer-events: none',
         'z-index: 9999',
+        // The badge is positioned against this box, and the box stays
+        // exactly the cover's size: anything outside it risks being
+        // clipped out of the snapshot the browser takes, and padding
+        // it instead would move the cover away from the cursor.
+        `width: ${size}px`,
+        `height: ${size}px`,
     ].join(';');
 
     const img = document.createElement('img');
@@ -61,11 +79,44 @@ export function createAlbumArtDragImage(
     ].join(';');
 
     wrapper.appendChild(img);
+
+    if (count > 1) {
+        wrapper.appendChild(countBadge(count));
+    }
+
     document.body.appendChild(wrapper);
 
     return wrapper;
 }
 
+/** The corner badge on a multi-track drag image. */
+function countBadge(count: number): HTMLElement {
+    const badge = document.createElement('span');
+
+    badge.className = 'drag-count-badge';
+    badge.textContent = String(count);
+    badge.style.cssText = [
+        'position: absolute',
+        'top: 3px',
+        'right: 3px',
+        'min-width: 20px',
+        'height: 20px',
+        'padding: 0 5px',
+        'box-sizing: border-box',
+        'border-radius: 10px',
+        'background: #ffd43b',
+        'color: #000',
+        'font-size: 12px',
+        'font-weight: 600',
+        'font-family: inherit',
+        'line-height: 20px',
+        'text-align: center',
+        'box-shadow: 0 1px 4px rgba(0,0,0,0.5)',
+    ].join(';');
+
+    return badge;
+}
+
 /**
  * Creates a drag image styled like a queue track card showing the
  * track title and artist.  Used when dragging a single track.

frontend/test/components/album-card-year.test.ts

@@ -0,0 +1,87 @@
+/**
+ * The year on an album card survives a long album name.
+ *
+ * The year used to be part of the same run of text as the title, inside
+ * one `text-overflow: ellipsis` box — so it was the first thing the
+ * ellipsis ate. A card wide enough for a long name never showed its
+ * year at all, which means sorting the grid *by year* showed years only
+ * for the albums with short names: the sort said one thing and the
+ * cards showed another.
+ *
+ * The fix is a flex row in which only the title truncates, rather than
+ * a second line, because the card's height is what the virtualizer
+ * measures rows by.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+
+import '@components/cover-grid/cover-grid';
+import { emit, stub, flush, resetHarness } from '@test/support/harness';
+import { Events } from '../../src/events';
+import { fixture, shadowAll } from '@test/support/render';
+
+const LONG =
+  'The Rise and Fall of a Midwest Princess in the Key of Everything';
+
+/** Long names throughout: the fault only shows on a card under
+ *  pressure, and a grid of "Album 3" proves nothing. */
+const ALBUMS = Array.from({ length: 12 }, (_, i) => ({
+  ID: i + 1,
+  Name: `${LONG} ${i + 1}`,
+  ArtistName: 'Aurora Fields',
+  Year: 2019 + (i % 5),
+}));
+
+/** Give the virtualizer a viewport; a zero-height host renders nothing. */
+function sized(el: HTMLElement): void {
+  el.style.display = 'block';
+  el.style.height = '600px';
+  el.style.width = '900px';
+}
+
+async function settle(el: LitElement): Promise<void> {
+  await flush();
+  await el.updateComplete;
+  await new Promise((r) => setTimeout(r, 80));
+}
+
+describe('the album card’s year', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('library.Library.GetAlbums', ALBUMS);
+    stub('library.Library.GetTracks', []);
+    emit(Events.LibraryScanComplete);
+  });
+
+  it('is rendered on every card, however long the name', async () => {
+    const el = await fixture<LitElement>('cover-grid');
+
+    sized(el);
+    await settle(el);
+
+    const cards = shadowAll(el, '.album-card');
+    const years = shadowAll(el, '.album-year');
+
+    expect(cards.length).toBeGreaterThan(0);
+    expect(years).toHaveLength(cards.length);
+    expect(years.every((y) => /^\(\d{4}\)$/.test(y.textContent!.trim()))).toBe(
+      true,
+    );
+  });
+
+  it('is not what the ellipsis eats', async () => {
+    const el = await fixture<LitElement>('cover-grid');
+
+    sized(el);
+    await settle(el);
+
+    const year = shadowAll(el, '.album-year')[0]!;
+    const title = shadowAll(el, '.album-title')[0]!;
+
+    // The title is the box that gives way...
+    expect(title.scrollWidth).toBeGreaterThan(title.clientWidth);
+    // ...and the year keeps every pixel it asked for.
+    expect(year.clientWidth).toBeGreaterThan(0);
+    expect(year.scrollWidth).toBeLessThanOrEqual(year.clientWidth + 1);
+  });
+});

frontend/test/components/album-request-badge-visibility.test.ts

@@ -0,0 +1,97 @@
+/**
+ * The request badge on an unowned row is there without being hovered.
+ *
+ * It used to be transparent until the row was hovered or focused, on
+ * the reasoning that a column of plus signs down a mostly-owned album
+ * is clutter. That reasoning came from the green ticks it replaced and
+ * does not survive the rule those were removed for: a tick marked the
+ * **common** case, while this marks the rows that are *not* here. A
+ * mark on the exception is the information on this page, and one that
+ * exists only under the pointer cannot be seen, counted, or reached by
+ * anyone driving the app with a finger.
+ *
+ * That the badge *repaints* when clicked is the other half of #33 and
+ * is covered by `album-track-request.test.ts`.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+
+import '@components/explore-album-details/explore-album-details';
+import { stub, flush, resetHarness } from '@test/support/harness';
+import { fixture, shadowAll } from '@test/support/render';
+
+function track(n: number, owned: boolean) {
+  return {
+    position: n,
+    discNumber: 1,
+    title: `Track ${n}`,
+    length: 200000,
+    mbid: `mbid-${n}`,
+    inLibrary: owned,
+  };
+}
+
+/** An album with one owned track and one that is not here. */
+async function albumWithAnUnownedTrack(): Promise<LitElement> {
+  const el = await fixture<LitElement>('explore-album-details', {
+    albumName: 'Glass Harbour',
+    releaseGroupMBID: 'rg-1',
+  });
+
+  stub('library.Library.GetFilePathsByRecordingMBIDs', {
+    'mbid-1': ['/music/mbid-1.mp3'],
+  });
+
+  Object.assign(el, {
+    versionEntries: [
+      {
+        key: 'v1',
+        label: '2019',
+        sublabel: '2 tracks',
+        tracks: [track(1, true), track(2, false)],
+      },
+    ],
+    selectedVersionKey: 'v1',
+    loadingReleases: false,
+    loadingInfo: false,
+  });
+  el.requestUpdate();
+  await flush();
+  await el.updateComplete;
+
+  return el;
+}
+
+const badges = (el: LitElement) =>
+  shadowAll(el, 'library-status-indicator.track-request');
+
+describe('the tracklist’s request badge', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('library.Library.GetFilePathsByRecordingMBIDs', {});
+    stub('library.Library.GetFilePathsByAlbums', {});
+    stub('library.Library.GetAlbumTracks', []);
+    stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+    stub('download.Service.ProviderKinds', []);
+    stub('download.Service.ListProviders', []);
+    stub('download.Service.ListDownloads', []);
+    stub('download.Service.ListRequests', []);
+  });
+
+  it('is visible without a pointer anywhere near it', async () => {
+    const el = await albumWithAnUnownedTrack();
+    const [badge] = badges(el);
+
+    expect(badge).toBeTruthy();
+    // Computed opacity rather than the absence of a rule, because the
+    // rule could come back under a different selector.
+    expect(getComputedStyle(badge!).opacity).toBe('1');
+  });
+
+  it('is still only on the rows with something to request', async () => {
+    // Always-visible is not the same as everywhere: an owned track has
+    // nothing left to ask for, and a badge on it would be the column of
+    // green ticks this page deliberately stopped drawing.
+    expect(badges(await albumWithAnUnownedTrack())).toHaveLength(1);
+  });
+});

frontend/test/components/album-tracklist-heading.test.ts

@@ -0,0 +1,89 @@
+/**
+ * The tracklist's own heading.
+ *
+ * A list of numbered titles with durations, under the album's cover, is
+ * the one thing on this page that did not need a word above it saying
+ * what it was — "TRACKLIST" labelled the only thing already obvious.
+ *
+ * What goes is the *ink*, not the element. The section is a landmark
+ * and the page's heading structure runs through it, so a reader moving
+ * by heading still has to be able to find it, and it is hidden the way
+ * `sr-only` hides things: `clip-path`, never `display: none`, which
+ * would take it out of the accessibility tree along with the layout.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+
+import '@components/explore-album-details/explore-album-details';
+import { stub, flush, resetHarness } from '@test/support/harness';
+import { fixture, shadowAll } from '@test/support/render';
+
+function track(n: number) {
+  return {
+    position: n,
+    discNumber: 1,
+    title: `Track ${n}`,
+    length: 200000,
+    mbid: `mbid-${n}`,
+    inLibrary: true,
+  };
+}
+
+async function albumPage(): Promise<LitElement> {
+  const el = await fixture<LitElement>('explore-album-details', {
+    albumName: 'Glass Harbour',
+    releaseGroupMBID: 'rg-1',
+  });
+
+  Object.assign(el, {
+    versionEntries: [
+      {
+        key: 'v1',
+        label: '2019',
+        sublabel: '2 tracks',
+        tracks: [track(1), track(2)],
+      },
+    ],
+    selectedVersionKey: 'v1',
+    loadingReleases: false,
+    loadingInfo: false,
+  });
+  el.requestUpdate();
+  await flush();
+  await el.updateComplete;
+
+  return el;
+}
+
+const tracklistHeading = (el: LitElement) =>
+  shadowAll(el, 'h3').find((h) => h.textContent?.trim() === 'Tracklist');
+
+describe('the album tracklist heading', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('library.Library.GetFilePathsByRecordingMBIDs', {});
+    stub('library.Library.GetFilePathsByAlbums', {});
+    stub('library.Library.GetAlbumTracks', []);
+    stub('library.Library.GetAllLibrariesWithTrackCounts', []);
+    stub('download.Service.ProviderKinds', []);
+    stub('download.Service.ListProviders', []);
+    stub('download.Service.ListDownloads', []);
+    stub('download.Service.ListRequests', []);
+  });
+
+  it('is still in the tree', async () => {
+    expect(tracklistHeading(await albumPage())).toBeTruthy();
+  });
+
+  it('takes up no room on the page', async () => {
+    const heading = tracklistHeading(await albumPage())!;
+    const box = heading.getBoundingClientRect();
+
+    expect(box.width).toBeLessThanOrEqual(1);
+    expect(box.height).toBeLessThanOrEqual(1);
+    // Hidden by clipping, not by removal: display:none and
+    // visibility:hidden both take it out of the accessibility tree.
+    expect(getComputedStyle(heading).display).not.toBe('none');
+    expect(getComputedStyle(heading).visibility).not.toBe('hidden');
+  });
+});

frontend/test/components/downloads-no-client.test.ts

@@ -0,0 +1,90 @@
+/**
+ * What a wanted list says when there is nothing to search with.
+ *
+ * Wanting something without a download client is a supported thing to
+ * do — the list is kept, and it starts moving when a client is added.
+ * What was not supported was the app *claiming to be looking*: every
+ * pass attempted each request, failed it with "no download clients are
+ * enabled", recorded that as an attempt and scheduled a retry, so a row
+ * read "Searched 3 times, no download clients are enabled · next check
+ * in 6 hours" about a check that could not happen.
+ *
+ * The backend half is `TestNoProvidersMeansNoAttempt`. This is the row.
+ */
+import { describe, expect, it, beforeEach } from 'vitest';
+import type { LitElement } from 'lit';
+
+import '@components/downloads-view/downloads-view';
+import { stub, emit, flush, resetHarness } from '@test/support/harness';
+import { Events } from '../../src/events';
+import { fixture, shadowAll } from '@test/support/render';
+
+/** A request that has been tried and is waiting on a retry — the shape
+ *  a list with a client in it produces. */
+const WAITING = {
+  id: 1,
+  mbid: 'rg-1',
+  entity: 'release-group',
+  libraryId: 1,
+  artist: 'Aurora Fields',
+  title: 'Glass Harbour',
+  state: 'wanted',
+  attempts: 3,
+  lastError: 'no source has it yet',
+  nextTryAt: new Date(Date.now() + 6 * 3600_000).toISOString(),
+};
+
+const PROVIDER = {
+  id: 1,
+  kind: 'slskd',
+  name: 'Sound',
+  enabled: true,
+  priority: 50,
+};
+
+/**
+ * The download store is a singleton whose `init()` runs once per
+ * session, so a second mount does not re-read the provider list. The
+ * event is how the app itself learns a client was added, and is what
+ * makes this test independent of which case ran first.
+ */
+async function view(providers: unknown[]): Promise<LitElement> {
+  stub('download.Service.ListProviders', providers);
+
+  const el = await fixture<LitElement>('downloads-view');
+
+  emit(Events.DownloadProvidersChanged);
+  await flush();
+  await el.updateComplete;
+
+  return el;
+}
+
+const details = (el: LitElement) =>
+  shadowAll(el, '.detail').map((d) => d.textContent!.trim());
+
+describe('a request row with no download client', () => {
+  beforeEach(() => {
+    resetHarness();
+    stub('download.Service.ProviderKinds', []);
+    stub('download.Service.ListProviders', []);
+    stub('download.Service.ListDownloads', []);
+    stub('download.Service.ListRequests', [WAITING]);
+  });
+
+  it('does not promise a check that cannot happen', async () => {
+    const el = await view([]);
+
+    expect(details(el)).toHaveLength(1);
+    expect(details(el)[0]).toBe(
+      'On your list — no download client to search with',
+    );
+    expect(details(el)[0]).not.toMatch(/next check/);
+  });
+
+  it('reports the retry schedule again once a client exists', async () => {
+    const el = await view([PROVIDER]);
+
+    expect(details(el)[0]).toMatch(/next check/);
+  });
+});

frontend/test/components/drag-image.test.ts

@@ -0,0 +1,71 @@
+/**
+ * A drag says how much it is carrying.
+ *
+ * Every drag in the app already did — `createDragImage` is a count and
+ * nothing else — except the one with a picture to show instead. An
+ * album dragged to the queue put its cover under the cursor and said
+ * nothing about how many tracks that was, and an album is 1 track or 30
+ * with the same thumbnail either way. The number is the thing the drop
+ * is about.
+ *
+ * A count of 1 draws no badge: "1" over a single cover is noise, and
+ * the absence reads unambiguously beside a badge that only ever appears
+ * when there is more than one.
+ */
+import { describe, expect, it, afterEach } from 'vitest';
+
+import {
+  createAlbumArtDragImage,
+  removeDragImage,
+} from '@utils/drag-image';
+
+const made: HTMLElement[] = [];
+
+function dragImage(count?: number): HTMLElement {
+  const el =
+    count === undefined
+      ? createAlbumArtDragImage('data:image/gif;base64,R0lGODlhAQABAAAAACw=')
+      : createAlbumArtDragImage(
+          'data:image/gif;base64,R0lGODlhAQABAAAAACw=',
+          count,
+        );
+
+  made.push(el);
+
+  return el;
+}
+
+const badge = (el: HTMLElement) =>
+  el.querySelector<HTMLElement>('.drag-count-badge');
+
+describe('the album drag image', () => {
+  afterEach(() => {
+    while (made.length > 0) removeDragImage(made.pop()!);
+  });
+
+  it('says how many tracks are being dragged', () => {
+    expect(badge(dragImage(12))?.textContent).toBe('12');
+  });
+
+  it('says nothing when there is only one track', () => {
+    expect(badge(dragImage(1))).toBeNull();
+  });
+
+  it('still draws a bare cover for a caller that gives no count', () => {
+    // The count is optional so the helper stays usable from a call site
+    // that has a cover and no list; it must not badge such a drag "1".
+    expect(badge(dragImage())).toBeNull();
+  });
+
+  it('keeps the badge inside the cover', () => {
+    // setDragImage snapshots the element, and anything outside its box
+    // risks being clipped out of that snapshot — while padding the box
+    // instead would move the cover away from the cursor.
+    const el = dragImage(30);
+    const outer = el.getBoundingClientRect();
+    const mark = badge(el)!.getBoundingClientRect();
+
+    expect(mark.right).toBeLessThanOrEqual(outer.right);
+    expect(mark.top).toBeGreaterThanOrEqual(outer.top);
+  });
+});

frontend/test/components/transport.test.ts

@@ -227,6 +227,41 @@ describe('<seek-bar>', () => {
     expect(text(el, '[data-testid="remaining-time"]')).toBe('01:30');
   });
 
+  it('keeps the slider still as the clocks count', async () => {
+    const el = await fixture('seek-bar');
+
+    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 31 });
+    await flush();
+    await el.updateComplete;
+
+    const slider = () =>
+      shadow(el, 'wa-slider')!.getBoundingClientRect();
+    const before = slider();
+
+    // 1:11 against 4:08 is the reported jitter: different digits, and
+    // in a proportional font different widths. Toggling the right-hand
+    // clock is the other half -- the minus sign is a whole character.
+    for (const positionSeconds of [8, 71, 88]) {
+      emit(Events.PlaybackPositionChanged, {
+        positionSeconds,
+        trackLength: 90,
+        trackChangeId: 31,
+        seq: positionSeconds,
+        playing: true,
+      });
+      await flush();
+      await el.updateComplete;
+
+      expect(slider().width).toBeCloseTo(before.width, 1);
+      expect(slider().left).toBeCloseTo(before.left, 1);
+    }
+
+    await click(el, '[data-testid="remaining-time"]');
+    await el.updateComplete;
+
+    expect(slider().width).toBeCloseTo(before.width, 1);
+  });
+
   it('renders the position the backend reports rather than its own count', async () => {
     const el = await fixture('seek-bar');