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

@@ -1480,16 +1480,12 @@ export class CoverGrid
             source: 'cover-grid',
         });
 
-        // Single album: show its cover, badged with how many tracks are
+        // Single album: show cover art thumbnail.
-        // on the way -- an album is 1 track or 30 and the thumbnail is
+        // Multiple albums: show track-count badge.
-        // 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(
@@ -1902,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/src/utils/drag-image.ts

@@ -29,23 +29,11 @@ export function createDragImage(count: number): HTMLElement {
 }
 
 /**
- * Creates a drag image showing an album cover art thumbnail, with a
+ * Creates a drag image showing an album cover art thumbnail.
- * corner badge saying how many tracks are on the way.
+ * Falls back to the track-count badge if the image fails to load.
- *
- * 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');
@@ -56,12 +44,6 @@ 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');
@@ -79,44 +61,11 @@ 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/drag-image.test.ts

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