fix(ui): stop the album grid eating the year it was sorted by

The year sat inside the same ellipsis box as the title, so it was the
first thing truncation took: a card wide enough for a long album name
never showed its year, and browsing the grid *by year* showed years
only for the albums with short names. The sort said one thing and the
cards showed another.

Title and year are now a flex row where only the title gives way. A
row rather than a second line, because the card's height is what the
virtualizer measures rows by.

Refs #29

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

@@ -1898,10 +1898,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/explore-album-details/explore-album-details.ts

@@ -2,7 +2,6 @@ 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,
@@ -290,7 +289,6 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         designTokens,
         exploreLinkStyles,
         contextMenuStyles,
-        srOnly,
         css`
             :host {
                 display: flex;
@@ -3035,21 +3033,11 @@ 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="sr-only">Tracklist</h3>
+                    <h3 class="section-header">Tracklist</h3>
                     <div class="section-loading">Loading tracks\u2026</div>
                 </section>
             `;
@@ -3062,7 +3050,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         if (!current) {
             return html`
                 <section>
-                    <h3 class="sr-only">Tracklist</h3>
+                    <h3 class="section-header">Tracklist</h3>
                     <div class="section-error">
                         <wa-icon name="triangle-exclamation"></wa-icon>
                         No release data available.
@@ -3075,7 +3063,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
         if (tracks.length === 0) {
             return html`
                 <section>
-                    <h3 class="sr-only">Tracklist</h3>
+                    <h3 class="section-header">Tracklist</h3>
                     <div
                         style="color: var(--yj-text-tertiary, #888); font-size: var(--yj-text-md)"
                     >
@@ -3091,7 +3079,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
 
         return html`
             <section>
-                <h3 class="sr-only">Tracklist</h3>
+                <h3 class="section-header">Tracklist</h3>
                 <div class="tracklist">
                     ${discNumbers.map((discNum) => {
                         const discTracks = discMap.get(discNum) ?? [];

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-tracklist-heading.test.ts

@@ -1,89 +0,0 @@
-/**
- * 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');
-  });
-});