fix(home): gate the card play button on the device having hover

The play button on a home shelf's cover cards is revealed by :hover, and
a touch long-press synthesises a hover state in the WebView — so on a
phone it flashed into view during the 500ms hold that
utils/long-press.ts is measuring for a context menu. A control appearing
because the user was reaching for a different one.

It is gated on `(hover: hover) and (pointer: fine)` rather than on width,
so it is absent on any touch device and present on a desktop with a small
window. A phone user taps the album and plays from the detail view, so
nothing replaces it.

The default outside the query is display:none, not opacity:0. An
opacity-0 button still takes taps and is still in the accessibility tree,
so leaving the reveal as the only guarded part would keep the hit area
for a control the phone can never show.

The test asserts the parsed stylesheet rather than rendering as a phone,
and says so: CDP's Emulation.setEmulatedMedia does not reach this tier's
iframe, so matchMedia still answers `hover: hover` after it is set. The
regression worth catching is someone hoisting the rule back out of the
query as a tidy-up — a change no desktop assertion can see.

Closes #68

frontend/src/components/home-view/home-view.ts

@@ -160,29 +160,52 @@ export class HomeView extends ViewLifecycleMixin(LitElement) {
                 user-select: none;
             }
 
+            /*
+             * The hover play button is a *hover* affordance, so it is
+             * gated on the device having hover rather than on width.  A
+             * touch long-press synthesises a hover state in the WebView,
+             * so on a phone it flashed into view during the 500ms hold
+             * that utils/long-press.ts is measuring for a context menu —
+             * a control appearing because you were reaching for a
+             * different one.  A phone user taps the album and plays from
+             * the detail view, so there is nothing to replace it with.
+             *
+             * display:none outside the query rather than opacity:0 on
+             * its own: an opacity-0 button still takes taps and is
+             * still in the accessibility tree, so the invisible control
+             * would keep the hit area it was never meant to have on
+             * touch. Everything else stays inside, so the desktop
+             * animation is unchanged.
+             */
             .play {
-                position: absolute;
+                display: none;
-                right: 8px;
-                bottom: 8px;
-                width: 38px;
-                height: 38px;
-                border: none;
-                border-radius: 50%;
-                background: var(--yj-accent, #ffd43b);
-                color: var(--yj-accent-fg, #000);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                opacity: 0;
-                transform: translateY(6px);
-                transition: opacity 0.12s ease, transform 0.12s ease;
             }
 
-            .card:hover .play,
+            @media (hover: hover) and (pointer: fine) {
-            .card:focus-within .play {
+                .play {
-                opacity: 1;
+                    position: absolute;
-                transform: translateY(0);
+                    right: 8px;
+                    bottom: 8px;
+                    width: 38px;
+                    height: 38px;
+                    border: none;
+                    border-radius: 50%;
+                    background: var(--yj-accent, #ffd43b);
+                    color: var(--yj-accent-fg, #000);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    opacity: 0;
+                    transform: translateY(6px);
+                    transition: opacity 0.12s ease, transform 0.12s ease;
+                }
+
+                .card:hover .play,
+                .card:focus-within .play {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
             }
 
             .name {

frontend/src/components/now-playing/now-playing.ts

@@ -13,7 +13,6 @@ import {
     isQueueSourceNavigable,
     navigateToQueueSource,
 } from '@utils/queue-source-link';
-import { PHONE_QUERY } from '@utils/breakpoints';
 import { PlayerController } from '@store/controllers/player-controller';
 import { creditStore } from '@store/credit-store';
 import { QueueController } from '@store/controllers/queue-controller';
@@ -81,19 +80,6 @@ export class NowPlaying extends LitElement {
 
     private reduceMotionQuery?: MediaQueryList;
 
-    /**
-     * Phone width, from the shell's own breakpoint.
-     *
-     * This is in JS rather than in the stylesheet because what changes
-     * is the *content*, not its appearance: the title, artist and
-     * source render as plain text instead of as links, and no CSS rule
-     * can take a click handler off an element.
-     */
-    @state()
-    private phone = false;
-
-    private phoneQuery?: MediaQueryList;
-
     /** Whether each field is actively mid-scroll (class toggle). */
     @state()
     private titleScrolling = false;
@@ -355,12 +341,6 @@ export class NowPlaying extends LitElement {
         this.reduceMotion = this.reduceMotionQuery?.matches ?? false;
         this.reduceMotionQuery?.addEventListener('change', this.handleReduceMotionChange);
 
-        // Same reasoning as above: looked up here, not at module load,
-        // so a test can install its own matchMedia first.
-        this.phoneQuery = window.matchMedia?.(PHONE_QUERY);
-        this.phone = this.phoneQuery?.matches ?? false;
-        this.phoneQuery?.addEventListener('change', this.handlePhoneChange);
-
         this.resizeObserver = new ResizeObserver(() => {
             this.geometryDirty = true;
             this.requestUpdate();
@@ -384,7 +364,6 @@ export class NowPlaying extends LitElement {
         this.attachDragListeners(false);
         window.removeEventListener(SCROLL_CHANGE_EVENT, this.handleScrollModeEvent);
         this.reduceMotionQuery?.removeEventListener('change', this.handleReduceMotionChange);
-        this.phoneQuery?.removeEventListener('change', this.handlePhoneChange);
         this.resizeObserver?.disconnect();
         this.stopScrollCycle('title');
         this.stopScrollCycle('artist');
@@ -509,7 +488,7 @@ export class NowPlaying extends LitElement {
               @mouseleave=${this.handleTitleMouseLeave}
               @transitionend=${() => this.onScrollCycleEnd('title')}
             >
-              <span class="scroll-content">${this.phone ? track.title : trackLink(track.title, track.album, track.releaseGroupMbid, track.recordingMbid) || track.title}</span>
+              <span class="scroll-content">${trackLink(track.title, track.album, track.releaseGroupMbid, track.recordingMbid) || track.title}</span>
             </span>
             <span
               class="track-artist ${artistScrolling ? 'will-scroll' : ''} ${this.artistScrolling ? 'scrolling' : ''}"
@@ -519,15 +498,14 @@ export class NowPlaying extends LitElement {
               @mouseleave=${this.handleArtistMouseLeave}
               @transitionend=${() => this.onScrollCycleEnd('artist')}
             >
-              <span class="scroll-content">${this.phone ? track.artist || 'Unknown Artist' : creditLink(creditStore.credits(track.recordingMbid), track.artist, track.artistMbid) || 'Unknown Artist'}</span>
+              <span class="scroll-content">${creditLink(creditStore.credits(track.recordingMbid), track.artist, track.artistMbid) || 'Unknown Artist'}</span>
             </span>
             ${describeQueueSource(this.queue.source)
                 ? html`
                   <span
-                    class="track-source ${!this.phone && isQueueSourceNavigable(this.queue.source) ? 'navigable' : ''}"
+                    class="track-source ${isQueueSourceNavigable(this.queue.source) ? 'navigable' : ''}"
                     data-testid="now-playing-source"
                     @click=${(e: MouseEvent) => {
-                        if (this.phone) return;
                         if (!isQueueSourceNavigable(this.queue.source)) return;
                         navigateToQueueSource(
                             e.currentTarget as EventTarget,
@@ -593,10 +571,6 @@ export class NowPlaying extends LitElement {
         this.reduceMotion = e.matches;
     };
 
-    private handlePhoneChange = (e: MediaQueryListEvent): void => {
-        this.phone = e.matches;
-    };
-
     private shouldScroll(field: 'title' | 'artist'): boolean {
         const overflows = field === 'title' ? this.titleOverflows : this.artistOverflows;
 
@@ -632,12 +606,6 @@ export class NowPlaying extends LitElement {
             track?.artist ?? '',
             this.shouldScroll('title') ? '1' : '0',
             this.shouldScroll('artist') ? '1' : '0',
-            // Crossing the breakpoint swaps a link for a bare string,
-            // and a link is not guaranteed to measure the same as the
-            // text inside it. The marquee travels a distance read from
-            // that measurement, so this belongs in the key even though
-            // the words are identical either side.
-            this.phone ? '1' : '0',
         ].join('\u0000');
     }
 

frontend/src/components/track-list/track-list.ts

@@ -11,7 +11,6 @@ import {
 import { SelectionController } from '@utils/selection-controller';
 import type { SelectionHost } from '@utils/selection-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
-import { PHONE_QUERY } from '@utils/breakpoints';
 import {
     ContextMenuController,
     contextMenuStyles,
@@ -106,6 +105,9 @@ const ROW_CHROME_WIDTH =
 const ROW_HEIGHT = 33;
 const PHONE_ROW_HEIGHT = 52;
 
+/** The shell's phone breakpoint, as `index.css` and every component
+ *  stylesheet spells it. */
+const PHONE_QUERY = '(max-width: 599px)';
 
 // Inline SVG paths for favorite icons — eliminates wa-icon shadow DOM
 // overhead (30-50 shadow roots during scroll).  Font Awesome 6 paths.

frontend/src/utils/breakpoints.ts

@@ -1,23 +0,0 @@
-/**
- * The shell's breakpoints, where JavaScript has to agree with CSS.
- *
- * A media query inside a shadow root is answered by the viewport, so a
- * component normally states what it drops at phone width in its own
- * stylesheet and needs nothing from here. This exists for the cases
- * where the decision is not a style: `track-list` computes its grid in
- * JS from the host width, and `now-playing` renders *different content*
- * on a phone — a plain string instead of a link — which no stylesheet
- * can express.
- *
- * One breakpoint, several expressions of it. It was a private const in
- * track-list.ts when there was one; a second reader is where a copy
- * would start drifting from index.css.
- */
-
-/**
- * Phone width. 600px rather than the sidebar's 900px because 900 is a
- * laptop: the answer there is a narrower sidebar, which is still a
- * sidebar. Below this the shell drops the sidebar column entirely and
- * bottom-nav takes over.
- */
-export const PHONE_QUERY = '(max-width: 599px)';

frontend/test/components/hover-affordance.test.ts

@@ -0,0 +1,85 @@
+/**
+ * A hover affordance is gated on the device having hover.
+ *
+ * The home page's cover cards reveal a play button on :hover. A touch
+ * long-press synthesises a hover state in the WebView, so on a phone
+ * that button flashed into view during the 500ms hold that
+ * utils/long-press.ts is measuring for a context menu — a control
+ * appearing because the user was reaching for a different one.
+ *
+ * This is asserted against the *parsed stylesheet* rather than by
+ * emulating a touch device, and that is a limitation worth stating
+ * rather than hiding. CDP's Emulation.setEmulatedMedia does not reach
+ * this tier's iframe — matchMedia still answers `hover: hover` after it
+ * is set — so there is no way here to render the component as a phone
+ * would and read the computed style. What can be checked is the shape
+ * the browser actually built from the css`` literal: that the reveal
+ * lives inside a hover media query and that the default is display:none.
+ *
+ * Which is the regression worth catching anyway. The failure mode is
+ * someone hoisting the rule back out of the query for a one-line tidy —
+ * a change nothing renders differently on a desktop, so every other
+ * assertion in this repo passes and the phone silently regresses.
+ */
+import { describe, expect, it } from 'vitest';
+
+import '@components/home-view/home-view';
+import { fixture } from '@test/support/render';
+
+/** Every rule in the element's own adopted stylesheets, flattened. */
+function rulesOf(host: Element): { text: string; condition: string | null }[] {
+  const sheets = host.shadowRoot?.adoptedStyleSheets ?? [];
+  const out: { text: string; condition: string | null }[] = [];
+
+  for (const sheet of sheets) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (rule instanceof CSSMediaRule) {
+        for (const inner of Array.from(rule.cssRules)) {
+          out.push({ text: inner.cssText, condition: rule.conditionText });
+        }
+
+        continue;
+      }
+
+      out.push({ text: rule.cssText, condition: null });
+    }
+  }
+
+  return out;
+}
+
+describe('the home card play button', () => {
+  it('reveals itself only where the device has hover', async () => {
+    const el = await fixture('home-view', {});
+    const rules = rulesOf(el);
+
+    // The sweep is worth nothing if it read no rules at all — the same
+    // first assertion icon-language.test.ts makes for the same reason.
+    expect(rules.length).toBeGreaterThan(0);
+
+    const reveals = rules.filter(
+      (r) => r.text.includes('.play') && /opacity:\s*1/.test(r.text),
+    );
+
+    expect(reveals.length).toBeGreaterThan(0);
+
+    for (const rule of reveals) {
+      expect(rule.condition).toMatch(/hover:\s*hover/);
+      expect(rule.condition).toMatch(/pointer:\s*fine/);
+    }
+  });
+
+  it('is display:none rather than transparent where it is absent', async () => {
+    const el = await fixture('home-view', {});
+
+    // opacity:0 alone would leave a button that still takes taps and is
+    // still in the accessibility tree, so a phone would keep the hit
+    // area for a control it can never see.
+    const unconditional = rulesOf(el).filter(
+      (r) => r.condition === null && r.text.startsWith('.play'),
+    );
+
+    expect(unconditional.length).toBeGreaterThan(0);
+    expect(unconditional.some((r) => /display:\s*none/.test(r.text))).toBe(true);
+  });
+});

frontend/test/components/now-playing-phone.test.ts

@@ -1,166 +0,0 @@
-/**
- * The mini player's links are a desktop affordance.
- *
- * `utils/explore-link.ts` makes every track and artist name navigate,
- * and `utils/queue-source-link.ts` makes "Playing from X" navigate — in
- * the bottom bar those are a few characters of text at a font size
- * chosen for a bar, which is not a touch target. Worse, explore-link
- * holds the navigation for one double-click interval and drops it if a
- * second click arrives: a gesture that exists so double-clicking a row
- * can play it, and which means nothing at all on touch.
- *
- * So below the shell's phone breakpoint the three render as plain text
- * and the whole bar's cover art opens the full-screen Now Playing view,
- * which is where the links live.
- *
- * The breakpoint is stubbed rather than emulated for the reason
- * track-list-phone.test.ts states: this tier's viewport is fixed at
- * 1280x800 by the runner, and the component reads matchMedia in
- * connectedCallback precisely so a test can answer it first.
- */
-import { describe, expect, it, beforeEach } from 'vitest';
-
-import '@components/now-playing/now-playing';
-import { Events } from '../../src/events';
-import { emit, flush } from '@test/support/harness';
-import { fixture, shadow, shadowAll, text } from '@test/support/render';
-import type { TrackInfo } from '@store/player-store';
-import type { QueueTrack } from '@store/queue-store';
-
-const TRACK: TrackInfo = {
-  fileName: 'ashes.mp3',
-  filePath: '/music/ashes.mp3',
-  trackLength: 215,
-  seekPosition: 0,
-  state: 'playing',
-  title: 'Ashes to Ashes',
-  artist: 'David Bowie',
-  album: 'Scary Monsters',
-  coverArt: '',
-  coverArtSmall: '',
-  coverArtMedium: '',
-  coverArtLarge: '',
-  trackChangeId: 1,
-  artistMbid: '',
-  releaseGroupMbid: '',
-  recordingMbid: '',
-};
-
-function queueTrack(n: number, title: string): QueueTrack {
-  return {
-    id: n,
-    audioFileId: n,
-    filePath: `/music/${n}.mp3`,
-    position: n,
-    title,
-    artist: 'David Bowie',
-    album: 'Scary Monsters',
-    coverArtPath: '',
-    artistMbid: '',
-    releaseGroupMbid: '',
-    recordingMbid: '',
-  };
-}
-
-/** Mount the bar with the phone breakpoint answering `matches`. */
-async function mountAt(phone: boolean) {
-  const real = window.matchMedia.bind(window);
-
-  window.matchMedia = ((q: string) =>
-    q.includes('max-width: 599px')
-      ? {
-          matches: phone,
-          media: q,
-          addEventListener() {},
-          removeEventListener() {},
-        }
-      : real(q)) as typeof window.matchMedia;
-
-  try {
-    const el = await fixture('now-playing');
-
-    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 20 });
-    emit(Events.QueueChanged, {
-      tracks: [queueTrack(1, 'Ashes to Ashes')],
-      currentIndex: 0,
-      source: { type: 'album', id: 7, label: 'Scary Monsters' },
-    });
-    await flush();
-    await el.updateComplete;
-
-    return el;
-  } finally {
-    window.matchMedia = real;
-  }
-}
-
-describe('the mini player on a phone', () => {
-  beforeEach(() => {
-    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 1 });
-  });
-
-  it('renders the title and artist as plain text', async () => {
-    const el = await mountAt(true);
-
-    expect(shadowAll(el, '.explore-link').length).toBe(0);
-
-    // The words are unchanged — this is about what they are, not about
-    // hiding them. A fix that dropped the text would pass an assertion
-    // about links alone.
-    expect(text(el, '[data-testid="now-playing-title"]')).toContain(
-      'Ashes to Ashes',
-    );
-    expect(text(el, '[data-testid="now-playing-artist"]')).toContain(
-      'David Bowie',
-    );
-  });
-
-  it('does not navigate from the source line', async () => {
-    const el = await mountAt(true);
-    const source = shadow<HTMLElement>(el, '[data-testid="now-playing-source"]');
-
-    expect(source?.classList.contains('navigable')).toBe(false);
-
-    let navigated = false;
-    el.addEventListener('navigate', () => {
-      navigated = true;
-    });
-
-    source?.click();
-
-    expect(navigated).toBe(false);
-  });
-
-  it('still says where the queue came from', async () => {
-    const el = await mountAt(true);
-
-    // Dropping the *link* is the change; dropping the information would
-    // be a different and worse one.
-    expect(text(el, '[data-testid="now-playing-source"]')).toBe(
-      'Playing from Scary Monsters',
-    );
-  });
-
-  it('leaves the desktop bar exactly as it was', async () => {
-    const el = await mountAt(false);
-
-    expect(shadowAll(el, '.explore-link').length).toBeGreaterThan(0);
-
-    const source = shadow<HTMLElement>(el, '[data-testid="now-playing-source"]');
-
-    expect(source?.classList.contains('navigable')).toBe(true);
-
-    let detail: unknown;
-    el.addEventListener('navigate', (e) => {
-      detail = (e as CustomEvent).detail;
-    });
-
-    source?.click();
-
-    expect(detail).toEqual({
-      view: 'explore-album-details',
-      localAlbumId: 7,
-      albumName: 'Scary Monsters',
-    });
-  });
-});