Small-fix batch: ten issues from the desktop backlog (#83)

Rolls up #82 (@yonlu) and #74, #75, #76, #77, #78, #79, #81 as one push, so the batch cuts one release rather than eight.

Closes #9, #13, #14, #19, #26, #29, #33, #35, #37, #41.

backend/download/reconcile.go

@@ -310,15 +310,35 @@ func (r *Reconciler) run(ctx context.Context, force bool) (Summary, error) {
 
 	summary.Synced = r.syncExternalLists(ctx)
 
-	attempted, started, err := r.attemptDue(ctx, force)
+	// Nothing is searched for when there is nothing to search with, and
-	if err != nil {
+	// the point is what that *does not* do to the list.
-		return summary, err
+	//
+	// 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
+		}
+
+		summary.Attempted = attempted
+		summary.Started = started
 	}
 
-	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.
+        // Single album: show its cover, badged with how many tracks are
-        // Multiple albums: show track-count badge.
+        // 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
+                        <span class="album-title">${album.Name}</span
-                ? html`
+                        >${album.Year
-                              <span class="album-year">
+                ? html`<span class="album-year"
-                                  (${album.Year})</span
+                                  >(${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
+            /* The request control is offered on every row that has
-             * something to request, and only when the row is being
+             * something to request, and is not revealed on hover.
-             * attended to — a column of plus signs down a mostly-owned
-             * album is the clutter the green ticks were.
              *
-             * Hidden with opacity, never display:none or visibility,
+             * It used to be transparent until the row was hovered or
-             * so it keeps its place in the layout (rows do not reflow
+             * focused, on the reasoning that a column of plus signs
-             * as the pointer moves) and stays in the tab order and the
+             * down a mostly-owned album is clutter. That reasoning was
-             * accessibility tree.  focus-within is what makes it
+             * inherited from the green ticks it replaced and does not
-             * reachable without a mouse: tabbing to the button reveals
+             * survive the rule those were removed for: a tick marked
-             * it, and the row's own focus reveals it before you get
+             * the *common* case, while this marks the rows that are
-             * there. */
+             * **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.
+ * Creates a drag image showing an album cover art thumbnail, with a
- * Falls back to the track-count badge if the image fails to load.
+ * 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');