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/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);
+  });
+});

lefthook.yml

@@ -20,14 +20,19 @@ pre-commit:
       glob: "*.go"
       run: go tool golangci-lint run --timeout 5m ./...
 
-    # Snapshots the tree either side of the generators and reports only
-    # what moved across them.  This used to be `go generate` plus a bare
-    # `git diff --name-only`, which is the *whole unstaged worktree* — so
-    # any unrelated edit sitting there was reported as stale generated
-    # code, and `make generate` then fixed nothing.  See the script.
     codegen-check:
       glob: "*.{go,sql,templ}"
-      run: ./scripts/codegen-check.sh
+      run: |
+        go generate ./...
+        if [ -n "$(git diff --name-only)" ]; then
+          echo "Generated code is out of date. Run 'make generate' and stage the changes."
+          # --no-pager, or this blocks forever on `less` waiting for a
+          # keypress that a hook run without a tty will never get: the
+          # commit hangs at exactly the moment it is trying to tell you
+          # why it failed.
+          git --no-pager diff --stat
+          exit 1
+        fi
 
     # frontend/bindings is generated by `wails3`, not `go generate`, so
     # the check above does not cover it.  ~3.5s warm, ~20s on a cold

scripts/codegen-check.sh

@@ -1,81 +0,0 @@
-#!/usr/bin/env bash
-#
-# Fails when `go generate ./...` would change something that is not staged.
-#
-# The obvious spelling of this is `go generate && git diff --name-only`,
-# which is what the hook used to be, and it answers the wrong question:
-# that diff is the *whole unstaged worktree*, so any unrelated edit — a
-# note, a plan document, the next commit's files sitting there while this
-# one lands — was reported as
-#
-#     Generated code is out of date. Run 'make generate' and stage the changes.
-#
-# Running `make generate` then does nothing, because nothing generated is
-# stale, and the message sends you looking for a codegen problem that does
-# not exist.  Splitting one piece of work into several commits is exactly
-# the shape that triggers it, so the workaround was a constraint on commit
-# order for no real reason.
-#
-# So the tree is snapshotted either side of the generators and only what
-# *moved across them* is reported.  That is deliberately not a list of
-# generated paths: sqlcgen, `*_templ.go` and `frontend/src/events.ts` are
-# today's answer, a fourth generator is one `//go:generate` line away, and
-# a path list is a second place to remember it — the same reasoning that
-# keeps staleshape.go parsing sql/schemas/ rather than restating it.
-#
-# Content, not names: a generated file that is *already* dirty and is then
-# rewritten further keeps its name in both snapshots and would otherwise
-# slip through.
-
-set -euo pipefail
-
-cd "$(dirname "$0")/.."
-
-# name + worktree blob hash for every file that differs from the index.
-# A file listed but absent (a deletion) hashes as "gone" rather than
-# aborting the pipeline.
-snapshot() {
-	git diff --name-only | while IFS= read -r f; do
-		if [ -f "$f" ]; then
-			printf '%s %s\n' "$f" "$(git hash-object -- "$f")"
-		else
-			printf '%s gone\n' "$f"
-		fi
-	done
-}
-
-# A brand-new generated file is not in either diff, because it is not
-# tracked at all — the same blind spot bindings-check.sh names.  Both
-# snapshots are taken before the generators run.
-before="$(snapshot)"
-before_untracked="$(git ls-files --others --exclude-standard)"
-
-go generate ./...
-
-after="$(snapshot)"
-after_untracked="$(git ls-files --others --exclude-standard)"
-
-# Symmetric difference, and the symmetry is the whole point.  Generation
-# can push a file *into* the unstaged set (it was current, now it is not)
-# or *out* of it (someone hand-edited generated output and the generator
-# put it back) — and the second is stale generated code just as much as
-# the first.  Comparing one direction only reports "current" for it,
-# which is the failure this script was written to stop.
-moved="$(comm -3 <(printf '%s\n' "$before" | sort) <(printf '%s\n' "$after" | sort) |
-	cut -d' ' -f1 | tr -d '\t' | sort -u | grep -v '^$' || true)"
-
-if [ -n "$moved" ]; then
-	echo "codegen-check: generated code is out of date." >&2
-	echo "Run 'make generate' and stage:" >&2
-	printf '  %s\n' $moved >&2
-	exit 1
-fi
-
-if [ "$after_untracked" != "$before_untracked" ]; then
-	echo "codegen-check: generation produced new files. Stage them:" >&2
-	comm -13 <(printf '%s\n' "$before_untracked" | sort) \
-		<(printf '%s\n' "$after_untracked" | sort) >&2
-	exit 1
-fi
-
-echo "codegen-check: generated code is current"