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

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

@@ -1,66 +0,0 @@
-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,17 +207,6 @@ 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,8 +37,7 @@
     <footer class="bottom-bar">
         <now-playing></now-playing>
         <audio-player></audio-player>
-        <button aria-label="Toggle queue" aria-controls="queue-panel" aria-expanded="false"
+        <button aria-label="Toggle queue" id="queue-button">
-            id="queue-button">
             <wa-icon name="list"></wa-icon>
         </button>
     </footer>

frontend/index.ts

@@ -521,28 +521,6 @@ 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/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
+                        <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/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);
+  });
+});