fix(explore): stop hiding the request badge until the row is hovered

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

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

@@ -111,32 +111,13 @@ 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 {
@@ -150,8 +131,6 @@ 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}"
                     >
-                        <span class="album-title">${album.Name}</span
+                        ${album.Name}${album.Year
-                        >${album.Year
+                ? html`
-                ? html`<span class="album-year"
+                              <span class="album-year">
-                                  >(${album.Year})</span
+                                  (${album.Year})</span
                               >`
                 : nothing}
                     </div>

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

@@ -662,34 +662,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;
-                }
             }
         `,
     ];

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

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