feat(android): a name is not a link on a phone, the menu carries it

Every track, album and artist name in the app navigates through
`utils/explore-link.ts`, and every sentence of how it does that is a
desktop compromise: the navigation is held for one double-click
interval so double-clicking the row can still play it, and the target
is a few characters of text inside a row. On touch that is a delay on
an ambiguous target, and since #63 the row's own tap claims the click
anyway -- so the link was unreachable as well as fiddly.

So below the phone breakpoint a name renders as plain text and the
row's context menu carries the destination instead: `go-to-menu.ts`
draws "Go to Artist" / "Go to Album" under exactly the condition the
link is not, using `explore-link`'s own exported routing so an untagged
entity reaches the library page by the same lookup.

Three things this leans on. Suppressing a link with no menu behind it
is not a smaller affordance but a destination the phone cannot reach,
so `keepOnPhone` is the exception for the three surfaces with no row
menu. The items are drawn for a single selection only, which is the
Play item's rule one step on. And there is no "Go to Genre", because
no row renders a genre link to lose -- that would be new navigation
rather than a replacement.

Closes #67

.pi/skills/yellowjacket-dev/SKILL.md

@@ -158,7 +158,7 @@ only climb when it cannot.
 | You changed | Run | Cost |
 |---|---|---|
 | A Lit component, a store, the shortcut service | `make ui-test` | ~2 s, no app |
-| …and it renders differently | `make ui-visual` | + 10 baselines, opt-in, never gates |
+| …and it renders differently | `make ui-visual` | + 6 baselines, opt-in |
 | Any Go code | `make test` | 3 passes, ~2 min |
 | A service that emits events | `make test` — assert on the payload, see `backend/queue/emit_test.go` | in-process, no app |
 | A bound method or a bound struct field | `make bindings` then `make ui-test` | ~1.5 s + 2 s |
@@ -180,13 +180,6 @@ less than it looks.)
 
 Two rules about climbing:
 
-- **If you moved a component's geometry, run `make ui-visual` and
-  refresh that component's baseline in the same commit.** Nothing else
-  will: it is the one tier in this repo no hook and no CI job runs, and
-  it cannot be one — its references are machine-specific, measured in
-  [references/ui-tier.md](references/ui-tier.md). Four of them drifted
-  across three merges before anyone noticed (#196). Read the image;
-  never bless a reference you did not cause.
 - **A component test passing is not the app rendering.** If you touched
   anything in `frontend/src`, verify it in the real app too — start it
   headless, `screenshot --filename=/tmp/shot.png`, and *read the PNG*.

.pi/skills/yellowjacket-dev/references/ui-tier.md

@@ -78,58 +78,9 @@ synchronously.
   Microtasks and not a timer, deliberately: a timer hangs forever under
   the suites that install fake ones.
 
-## The visual tier does not gate, and that is measured (#196)
+Visual baselines are font-hinting and compositing sensitive, which is
-
+why they are opt-in: they only mean anything on the machine that
-`make ui-visual` is the same suite with nine `toMatchScreenshot`
+recorded them.
-baselines switched on. **Nothing runs it but a person**, deliberately,
-and the reason is a number rather than a preference: the committed
-baselines were recorded on Arch, and replayed in a bare `ubuntu:24.04`
-container — CI's `check` image — three of them fail for reasons that
-have nothing to do with any component.
-
-| baseline | Arch | ubuntu:24.04 |
-|---|---|---|
-| `page-header` filtered-by-search | passes | ratio 0.03 differ, against a 0.02 allowance |
-| `track-info` | passes | ratio 0.03 differ |
-| `seek-bar` | 1152×18 | 1152×17 |
-
-The two references that were genuinely stale did not even agree about
-their *new* size — `now-playing` renders 1152×65 on Arch and 1152×64 in
-the container. So moving CI's `check` job from `make ui-test` to
-`make ui-visual` is not a one-line change: it needs a second,
-container-recorded baseline set, which every local run would then fail
-against. That is the same trap the other way round, and a pre-push hook
-is the same fault again — one machine's baselines against everybody
-else's renderer.
-
-So the tier stays local and opt-in, and the rule that replaces the gate
-is:
-
-- **A change that moves a component's geometry refreshes that
-  component's reference in the same commit, having read the image.**
-  Look at the PNG; the dimensions in the failure message are the cheap
-  half of the answer.
-- **Never refresh a reference you did not cause.** #196 exists because
-  four of them drifted across three unrelated merges, and every red run
-  made the next person likelier to stop running the tier than to read
-  it.
-- **State the world the shot is taken in.** The stores are singletons,
-  so a visual case that sets nothing photographs whatever the previous
-  case left behind — which is how the sidebar's baseline came to have
-  Tracks lit and `now-playing`'s to be playing from a dynamic mix.
-- **Record one file with `make ui-visual-update UI_ARGS=<path>`**, and
-  check `git status` before committing either way. That filter is only
-  honoured since #204: the recipe was a bare `--update`, and vitest
-  takes the following positional as the flag's value, so the path was
-  swallowed and *every* baseline was re-recorded — blessing any stale
-  one in silence.
-
-What the tier is worth, for the record: it is a *layout* check, blind to
-colour (the component tier has no `:root`, so it renders the fallbacks —
-`make ui-visual` passed unchanged through a whole palette rewrite,
-twice), and it has caught one thing nothing else could — swapping
-`library-status-indicator`'s `<button>` for a `<span>` lost the UA
-stylesheet's `box-sizing` and grew the badge 36→38px.
 
 ## Bindings
 

.planning/NOTES.md

@@ -4913,52 +4913,6 @@ disabled — it gates on a directory chosen *in the wizard*, and the
 existing-library check runs once, on mount. A reload clears it. Nothing
 is broken; it cost twenty minutes of believing a tap had been swallowed.
 
-## The sheet's scroll fade, and where a scrim may not go (measured 2026-08-23, headless)
-
-#207's answer. The affordance is two background layers on
-`wa-dialog::part(body)` and the conditionality is
-`background-attachment`, not a scroll listener: a cover of the sheet's
-own colour painted at the end of the *content* (`local`) over a shadow
-pinned to the box (`scroll`), so the cover scrolls up and hides the
-shadow exactly when there is nothing more to see.
-
-Measured at 424x360 (which is where a menu overflows on `main`, since
-`main` does not yet carry #67's eighth item — at 424x439 the track
-list's seven items are `scrollHeight` 364 against `clientHeight` 364,
-fitting exactly). Pixel at x=300, dark ramp, `bgElevated` `#343a40`:
-
-| y | before | more below | at the end of the list |
-|---|---|---|---|
-| 330 | 52,58,64 | 50,56,62 | 52,58,64 |
-| 340 | 52,58,64 | 43,48,53 | 52,58,64 |
-| 350 | 52,58,64 | 33,37,40 | 52,58,64 |
-| 359 | 52,58,64 | 22,24,27 | 52,58,64 |
-
-Three things worth keeping.
-
-**A menu that fits draws nothing**, which is the same measurement: at
-424x439 the sheet is flat 52,58,64 to its bottom edge, because with no
-overflow the `local` layer's positioning area *is* the padding box and
-the cover lands on top of the shadow.
-
-**A scrim over a menu row is that row's text surface**, so the 4.5:1
-rule reaches it and this is why the curve is steep rather than linear.
-A row is 48px with its label centred; 32px of scrim already down to a
-quarter strength at 14px puts about 0.06 at the label. Checked on the
-light ramp (`bgElevated` `#e9ecef`, text `#212529`) by overriding the
-two custom properties on `:root`: background at the label 205,207,210,
-which is **9.9:1**. The first draft — a linear 48px at 0.8 — put ~0.375
-on that label, 5.0:1, passing but visibly greyed. The bottom few pixels
-go to ~2.4:1 in either draft and are deliberately below where any
-label of a *fully visible* row sits; a label that lands there belongs
-to the half-cut row, which is the thing being signalled.
-
-**A dark scrim on a dark surface reads far worse in a shrunk screenshot
-than on screen.** The first two probes (24px/0.45, then 32px/0.75) were
-measurably present — 52,58,64 down to 30,33,37 — and invisible in the
-inline preview. Crop the bottom 70px and scale it up before judging;
-the pixel values are the honest answer either way.
-
 ## The phone's context sheet is now longer than the phone (measured 2026-08-23, headless at 424x439)
 
 #67 moves two destinations into every row menu, and the track list's
@@ -4994,87 +4948,3 @@ ordinary track makes it 9.
 Filed as its own issue rather than fixed in #67's diff: it is a
 property of the shared sheet (`components/menu-surface/`), not of the
 items.
-
-## The tap highlight is one inherited declaration (measured 2026-08-24)
-
-`-webkit-tap-highlight-color` is an **inherited** property, and an
-inherited property crosses a shadow boundary — so `html { … :
-transparent }` in `index.css` reaches every shadow root in the app and
-no component needs a rule of its own. Measured in the running app
-(Chromium, `app-sidebar`'s `li button`, which is three shadow roots
-from the document): `rgba(0, 0, 0, 0)` with the rule, and
-`rgba(0, 0, 0, 0.18)` with it removed. That 0.18 grey over the bounding
-rect of whatever was tapped is what #54 reported.
-
-The same argument was already spent once and is worth not
-re-deriving: `index.css`'s first rule is `*, *::before, *::after {
-user-select: none }`, which for the same reason already covers the
-shadow roots — #54's Findings ask for `user-select` on interactive
-surfaces and it has been done since before the issue was filed.
-
-**What the highlight was, on the surfaces that had nothing else, is the
-press feedback.** Measured on a track row with the press rule removed
-and the button held down: `rgba(255, 255, 255, 0.05)` — the *hover*
-tint, arriving because the pointer is over the row, which is a
-synthesised hover on a phone and outlives the press. With the rule:
-0.12 while held, and the neighbouring row unchanged. So the press state
-is part of removing the highlight rather than a separate polish item,
-and the hover tints on those same surfaces moved behind
-`(hover: hover) and (pointer: fine)`, which is #68's gate applied to a
-tint rather than to a revealed control.
-
-**`touch-action: manipulation` was considered and not taken.** The
-Findings offer it for the 300ms tap delay; this app's viewport is
-`width=device-width`, which is what removes that delay in Chrome, so
-the stated benefit is not there to win. What it would change is the
-gesture stack #63 tuned by measurement on the device (`pan-y` plus a
-non-passive `preventDefault`), and that is not measurable from here.
-
-## Art pop-in is measurable in a browser, if you count frames rather than milliseconds (measured 2026-08-24)
-
-#65 is an Android report ("scrolling through albums, the art pops in")
-and the desktop harness can measure it, which was not obvious: the
-first attempt waited 220 ms after each scroll jump and found **zero**
-blank covers on either build. The metric only discriminates at one and
-two animation frames after the jump, which is where a pop-in actually
-lives.
-
-Protocol, on `make dev-headless SEED=bulk` (4 988 albums), ten
-2 400px jumps of `.grid-scroll-container`, counting covers whose rect
-intersects the viewport with `naturalWidth === 0`:
-
-| build | blank at frame 1 | at frame 2 | at 50 ms |
-|---|---|---|---|
-| `main` | 254 / 258 | 214 / 258 | 0 |
-| `main`, second run | 254 / 258 | 190 / 258 | 0 |
-| prefetch | 117 / 258 | 77 / 258 | 0 |
-| prefetch, second run | 118 / 258 | 96 / 258 | 0 |
-
-Two things this protocol gets wrong if repeated carelessly. **A second
-run in the same browser session measures the HTTP cache**, not the
-build — the skill already warns about this for `make perf`, and it
-applies to any image measurement; every row above is a fresh
-`playwright-cli close` + `open`. And **the frontend is embedded**, so
-comparing builds is a `git stash` *and* a rebuild, not a stash.
-
-**The bulk library's covers are 300x300 and ~3.7 kB**, which is why
-both builds are clean by 50 ms here and why the phone's number cannot
-be inferred from this one — same caveat the skill already records
-about full-size artwork.
-
-**`rangeChanged` and `visibilityChanged` are different ranges**, and
-the difference is the whole of this fix's value.
-`@lit-labs/virtualizer` reports `_first`/`_last` (rendered, including
-the ~1000px overhang) on the former and `_firstVisible`/`_lastVisible`
-on the latter. Both grids listen to `visibilityChanged` for scroll
-persistence, which wants the visible range and is correct; a prefetch
-window measured from it lands mostly on cards that already exist.
-Anchored there, the component test could see only one row past the
-last rendered card.
-
-**`_overhang` is not configurable.** It is a `protected` field set to
-1000 in `BaseLayout` and read by every layout; there is no option on
-`grid()`/`flow()` and no property on the element. The issue's Direction
-("ask the virtualizer for a larger overscan") is therefore not
-available without patching a private, which is why the request is
-issued ahead of the element instead.

CLAUDE.md

@@ -262,26 +262,6 @@ real store code. A binding carries an **ID**, not a name
 `yellowjacket/backend/home.Service.GetShelves`), so the fake derives
 that map from the generated tree rather than writing it down.
 
-**A test file does not get its own origin, so `setup.ts` clears
-`localStorage` between tests.** `@vitest/browser-playwright` opens one
-BrowserContext per session and runs several files in it one after
-another, so everything a component persists — the track list's sort and
-column widths, the cover size, `now-playing`'s scroll mode — is still
-there when the next file mounts the same component. Which files share a
-tab, and in what order, changes run to run, so the symptom is a spec
-that fails about one test in three and passes every time it is run on
-its own: #138 cost three scheduled runs, one of them a PR whose diff
-held no frontend code at all. Measured on the build before the fix, a
-single full run started **24** tests with storage already set. Two
-things follow. The clear is safe precisely because the leak is
-sequential — files in a session do not overlap, so it cannot wipe
-storage a concurrently-running file is in the middle of using — and it
-belongs in `setup.ts` rather than in the specs that write, because the
-spec that *reads* is never the one that knows. And a spec whose
-assertion depends on an order still **states that order** rather than
-inheriting a default, or the next change to a default is the same
-mystery again.
-
 **`frontend/bindings/` is generated by `wails3`, not `go generate`**, so
 the pre-commit codegen check does not cover it. `make bindings-check`
 (~3.5 s warm, ~20 s on a cold build cache, also a pre-commit hook)
@@ -1113,9 +1093,9 @@ not the fix and cannot be: that function is the `document` listener for
 `navigate`, so it is an infinite loop.
 
 **It is a store rather than an event, because a component that mounts
-after a navigation still has to know.** `bottom-nav`'s "More" sheet
+after a navigation still has to know.** `bottom-nav`'s "More" drawer
 creates its `<app-sidebar>` on open, and that copy had heard no
-`navigate` at all — standing on Albums, it opened highlighting
+`navigate` at all — standing on Albums, the drawer opened highlighting
 Home. An event has no answer for a listener that was not there.
 
 **A detail view is not a view here**, so the destination it was opened
@@ -1216,7 +1196,7 @@ and then vanishing.
 than a general rule about phones.** `PHONE_COLUMN_IDS` is the precedent
 for "what a phone shows is a different question", and it would apply —
 except that `bottom-nav`'s "More" opens the *same* `<app-sidebar>`,
-which filters, so an unfiltered bar would contradict its own sheet one
+which filters, so an unfiltered bar would contradict its own drawer one
 tap away. Which four tabs is still plan 016's committed subset; this
 only removes from it, and "More" is never filtered because it is how
 everything else stays reachable.
@@ -1422,7 +1402,7 @@ descendants. On the reference device the main panel spans 0-318 of a
 items cut off, with no way to reach them. `showModal()` is Chrome 37
 and uses the real top layer, so a dialog is immune by construction.
 
-Seven things about it are load-bearing.
+Six things about it are load-bearing.
 
 **"Dialogs are fine" needed checking, because every other dialog in
 this app is mounted in `index.html`** — outside `.main-panel` — so it
@@ -1451,25 +1431,6 @@ doing nothing, which reads as the gesture breaking. `menu-dismiss` is
 that signal; the three surfaces that do not use `ContextMenuController`
 bind it themselves.
 
-**A sheet that scrolls says so, and `background-attachment` is what
-asks whether it does** (#207). The sheet is capped at 85vh — a surface
-covering the whole screen is a page, not a sheet — so a long menu's
-body scrolls, and for three phases it scrolled *silently*: measured at
-424x439, eight items ended at y=470 with the fold at 439, and where the
-cut lands on a row boundary the sheet ends in a clean edge that reads
-as the end of the list. The fade is two background layers on
-`wa-dialog::part(body)` — a shadow pinned to the box (`scroll`) under a
-cover of the sheet's own colour painted at the end of the *content*
-(`local`), which scrolls up over the shadow exactly when there is
-nothing more to see. So it is absent on a menu that fits, present the
-moment one does not, and gone again at the end of the list, with no
-scroll listener and nothing reaching into `wa-dialog`'s shadow root for
-the scroller. **The curve is steep because the rows under it stay
-live**: a scrim over a menu item is that item's text surface, and the
-4.5:1 rule applies to it — 32px already down to a quarter strength at
-14px spends its weight below the last legible label, measured at 9.9:1
-on the light ramp, whose `bgElevated` is `#e9ecef`.
-
 **The playlist submenu is a sheet too, and it had to be.** It is a
 `placement="right-start"` flyout, and making the menu full-width moved
 its anchor — measured at x −182 to 0, entirely off-screen, so "Add to
@@ -1631,51 +1592,6 @@ sits inside which media query — and says so; the regression it exists
 for is someone hoisting a rule out of its query as a tidy-up, which
 nothing on a desktop renders differently.
 
-**The web view's own tap highlight is gone, and what replaced it is a
-press state** (#54). `-webkit-tap-highlight-color` is an *inherited*
-property, so one declaration on `html` in `index.css` reaches every
-shadow root in the app and takes away the grey box a phone drew over
-the bounding rect of whatever was tapped — measured at
-`rgba(0, 0, 0, 0.18)` with the rule removed. `user-select` is the same
-argument and was already done: `index.css`'s first rule is `*, *::before,
-*::after { user-select: none }`, which reaches the shadow roots for the
-same reason.
-
-Three things about it are load-bearing.
-
-**Removing the highlight removes the only touch feedback several
-surfaces had**, so the press state is part of the same change rather
-than a later polish item: the four lists' rows, `bottom-nav`'s tabs,
-`app-sidebar`'s destinations (which are also the phone's "More" sheet)
-and the shared `contextMenuStyles` menu item all take
-`--yj-press-overlay` on `:active`. The cards already had one
-(`transform: scale(0.97)`) and are untouched.
-
-**A press selector carries a state class or it does nothing where it
-matters.** A row is `.track-row.selected.active`, so a bare
-`.track-row:active` is one class short of it and the press is invisible
-on exactly the row a phone is most likely to press — the one it has
-just selected. The rule is last and lists `.selected:active` /
-`.active:active` beside the bare form.
-
-**And the hover tints on those same surfaces moved behind
-`(hover: hover) and (pointer: fine)`**, which is #68's gate applied to
-a tint rather than to a revealed control and for the same mechanism: a
-hold synthesises a hover in the WebView, so an ungated tint arrives
-because a finger touched the row and stays there after it has gone —
-measured, since with the press rule removed a held row reads
-`rgba(255, 255, 255, 0.05)`, the hover tint, rather than nothing.
-`touch-action: manipulation` was considered and declined: the 300ms
-delay it is offered for is already absent on a `width=device-width`
-viewport, and what it would really change is the gesture stack #63
-tuned by measurement on a device this session cannot measure.
-
-The split of tiers is `hover-affordance.test.ts`'s: `press-feedback.
-test.ts` reads the parsed stylesheet, because `:active` cannot be
-forced there either, and `native-touch-feel.spec.ts` *measures* — it
-holds the button down on a real row of the real list, and it is the
-only tier that loads `index.css` at all.
-
 Three lists had no focused row to open a menu *from* — the queue panel
 and both playlist detail views — and gained a roving tab stop through
 `utils/roving-rows.ts`. **`track-list` deliberately does not use it**:
@@ -1832,21 +1748,6 @@ is not it.** A `placeholder` is an accname fallback, so an
 Explore's search box — the audit's own `a11y.26` — as clean. A sweep
 for *empty* names cannot see a *weak* one.
 
-**`title` is the same trap one rung lower, and it defeats the obvious
-spec as well as the obvious sweep.** `queue-panel`'s Clear queue and
-Add queue to playlist were named by `title` alone, so
-`getByRole('button', { name: 'Clear queue' })` matched them **before**
-the fix as well as after — a `getByRole` assertion, which is what
-catches every other nameless control in this app, would have been
-green on the broken build. `title` is the *last* fallback in the
-accname order, so content put inside the button later silently
-outranks it, and it is the one name a phone cannot show, having no
-hover. The property is therefore asserted as *the name is not the
-tooltip*: `queue-overlay.spec.ts` removes the `title` attributes and
-asks again, which is 1 and 1 with `aria-label` and was measured at 0
-and 0 without it. The `title`s stay, because on a desktop they are
-also the tooltip for an icon-only control and that is a different job.
-
 **The shell scrolls sideways and not down.** `body` is
 `overflow-x: auto; overflow-y: hidden`, and both halves are measured.
 Vertically there is nothing to fix: the middle grid row is `1fr` and
@@ -1889,7 +1790,7 @@ listing the destinations again — but rendering it unconditionally put a
 second copy of every `data-testid="nav-*"` in the DOM, and 30 existing
 specs failed with "strict mode violation: resolved to 2 elements" on a
 desktop viewport where the element is not even visible. It renders only
-while the sheet is open, and `bottom-nav.test.ts` asserts its absence
+while the drawer is open, and `bottom-nav.test.ts` asserts its absence
 before that.
 
 **The tab bar is four destinations and a way to the rest.** Three to
@@ -1898,33 +1799,6 @@ is 32px each. Which four is plan 016's committed subset, and everything
 else — Settings included, because a phone still needs it — is behind
 "More".
 
-**And "More" rises from the bottom, on #60's sheet rather than a
-second one** (#71). It was a `wa-drawer placement="start"`: a 200px
-column of a 424px screen, opening away from the thumb that asked for
-it, with the rest of its 400px band empty. It is the *same element*
-with `placement="bottom"` and `without-header`, which is what keeps
-the change to where it comes from — `wa-drawer` renders a native
-`<dialog>` and opens it with `showModal()`, so #60's containment
-finding carries over with nothing new to prove, and the focus trap,
-Escape, tap-outside and `wa-after-hide` all come along. Measured at
-424x439: 424 wide, 373 tall (85vh, so there is an outside to tap),
-48px rows.
-
-Three things about it are load-bearing. **The sidebar is mounted
-rather than re-listed as data**, which the issue offers as the
-alternative: the shell's own `<app-sidebar>` is `display: none` below
-600px rather than removed, so a second list drawing `nav-*` handles is
-the duplication above, and it would be a second place to add the next
-view to. **There is one scroller, and it is the sheet's body** — the
-reported "only part of the screen scrolls under my finger" is three
-nested ones (the dialog, its body, and the sidebar's own
-`overflow-y: auto` host), so which box a drag moves depends on where
-the finger landed; `overscroll-behavior: contain` is the other half.
-And **`expanded` means the host owns the box, not just the labels**:
-`app-sidebar` writes an *inline* width and caps itself at 400px, which
-beats any rule the host could write, so the width, the scrolling and
-the mouse-only resize handle all follow that attribute.
-
 **There are three supported size bands, and the queue is part of the
 promise.** Plan 018 (#24) wrote them down: **Phone** below 600 (bottom
 nav, reflows, fits 320px exactly), **Compact** 600–899 (icon sidebar),
@@ -2700,38 +2574,11 @@ Five things about it are load-bearing, and four of them fail silently:
   correctly. Confidently wrong is worse than absent here, which is the
   same rule `Known` exists for.
 
-One gap this did not close and #104 did: **`dhowden/tag` has no RIFF
+One gap this did not close, and it is older: **`dhowden/tag` has no
-reader**, so nothing the tag writer put in a WAV's `id3 ` chunk was
+RIFF reader**, so nothing the tag writer puts in a WAV's `id3 ` chunk
-visible to `metadata.ExtractTags` — not the totals and not the title
+is visible to `metadata.ExtractTags` — not the totals and not the title
-either, on files the app itself had just tagged. `wav_test.go` read
+either. `wav_test.go` reads that chunk itself, which is why no test
-that chunk itself, which is why no test noticed: a round trip asserted
+ever noticed.
-through the writer's own parser is a test of the writer.
-
-`backend/riff` is where the container is now read, and it is its own
-package because the alternative is an import cycle — `tagwriter`
-imports `metadata`, so `metadata` cannot reach back for `parseRIFF`.
-`backend/tagtotals` is the precedent.
-
-Three things about it are load-bearing. **The two readers are
-deliberately different**: `Parse` holds every chunk in memory, which is
-what rewriting a file needs, and a WAV's audio *is* a chunk — so the
-scan path uses `ID3Chunk`, which seeks over what it is not looking for.
-**The container decides, before `tag.ReadFrom` rather than after it
-fails**, because that library's last resort is an ID3v1 trailer and a
-WAV carrying both would otherwise be read by the wrong one. And **an
-untagged WAV is a file with no tags, not a file with a problem**: no
-chunk, an RF64 container or a tag holding no frames all read as empty
-metadata with no `TagReadWarning`, since the scanner's filename
-fallback is the right answer and a warning would put a fault on a file
-that has none.
-
-The gap was pinned by a test that said so, which failed the moment the
-reader learned and carried the instructions for what to update in its
-own comment. So it is deleted, `TestFixturesMatchManifest` no longer
-skips `wav`, and `totals_test.go`'s WAV case goes through
-`metadata.ExtractTags` like the other three formats. The fixture
-library's two WAV tracks scan with their tags and their cover now,
-which is a change to what every seeded tier sees.
 
 **The absence is what gets marked, not the presence.** The tracklist
 put a green tick against every owned track and a legend underneath
@@ -3418,46 +3265,6 @@ rather than searching it — the store replaces that array when its
 contents change and shares the unchanged members, which is the same
 signal `track-list`'s memoized caches key on.
 
-**And the right tier arriving late still reads as no art at all**, so
-the two grids ask for it before the card exists (#65).
-`utils/image-prefetch.ts` warms the images a scroll is about to reach,
-from `cover-grid`'s and `artists-view`'s virtualizers. Measured on the
-50 000-track bulk seed over ten 2 400px jumps: of 258 covers arriving
-in view, **254 were still blank one frame later and 214 two frames
-later**; with the prefetch, 117 and 77. Both builds are clean by 50 ms
-on a desktop with 3.7 kB fixture covers, which is where the reference
-device's slower engine and 27 kB covers spend their pop-in.
-
-Four things about it are load-bearing.
-
-**The overscan the obvious fix asks for does not exist.**
-`@lit-labs/virtualizer`'s `_overhang` is a hard-coded 1000px
-`protected` field on `BaseLayout` with no configuration surface, so
-raising it means monkey-patching a private. 1000px is about two
-screens on a 439px viewport, and the *image* cannot be requested until
-the card it lives in is rendered — which is what this asks for
-instead.
-
-**It hangs off `rangeChanged`, not `visibilityChanged`.** Those report
-different ranges: visibility is what is on screen, and the virtualizer
-has already rendered that 1000px past it. Anchored to the visible
-range the window is spent on cards that already exist and have already
-asked for their own art — measured as the difference between the
-prefetch reaching one row past the last card and reaching a full
-window past it.
-
-**It is not the `LRUMap` path, and saying so is the bound.** That
-ceiling holds Explore's base64 data URLs in JS; a library cover is a
-plain URL under `Cache-Control: immutable` (the filenames are content
-hashes), so what retains the bytes is the browser's own cache. What
-this module retains is the *set of URLs already asked for*, capped at
-512 and reported to `window.__yjCacheStats()` — 497 entries and 15 407
-chars after the run above.
-
-**The prefetch asks for what the card will draw.** `artists-view`'s
-tier ladder moved into `artistAvatarURL()` so the two cannot disagree;
-a second copy would be a warm cache for a tier nothing renders.
-
 **The same rule, on the selection path, was the worst stall in the
 app.** Five components turned selected file paths back into tracks with
 `filePaths.map(fp => tracks.find(…))`, so "Select all → Edit tags" at
@@ -3642,25 +3449,6 @@ Pre-commit hooks verify generated code is fresh — always run `make generate` a
 Tests use `database.NewTestDB(t)` for in-memory SQLite, built by the same
 `applySchema` production uses so the two cannot diverge. Test audio fixtures live in `test_data/music_library_test/`. Table-driven tests are the norm.
 
-**`make ui-visual` is the one tier nothing but a person runs, and it
-cannot become one.** Its ten `toMatchScreenshot` baselines were recorded
-on a developer's Arch box; replayed in a bare `ubuntu:24.04` container
-— CI's `check` image — three of them fail on font metrics and
-compositing alone (`track-info` and one `page-header` shot at a 0.03
-mismatch ratio against a 0.02 allowance, `seek-bar` one pixel shorter),
-and two components disagree about their own height between the two
-machines. So CI keeps running `make ui-test`, which is the same suite
-with the comparisons off, and a pre-push hook would be the same fault
-with the machines swapped. What replaces the gate is a rule, in
-`.pi/skills/yellowjacket-dev/references/ui-tier.md`: **a change that
-moves a component's geometry refreshes that component's baseline in the
-same commit, having read the image, and never one it did not cause**.
-That is #196, which was four stale references accumulated across three
-unrelated merges — a red tier nobody could read, which is how it stayed
-red. A visual case must also **state the world it photographs**, since
-the stores are singletons and a case that sets nothing records whatever
-the previous one left in them.
-
 ## Git Workflow
 
 Feature branches and PRs are the only way in: **`main` is a protected

Makefile

@@ -160,11 +160,8 @@ ui-watch: ## Same suite, in watch mode
 ui-visual: ## Run the suite including screenshot comparisons
 	@cd frontend && YJ_VISUAL=1 npx vitest run $(UI_ARGS)
 
-# `--update=true`, never a bare `--update`: vitest takes the following
+ui-visual-update: ## Re-record the screenshot baselines
-# positional as the flag's value, so `--update <path>` swallows the path
+	@cd frontend && YJ_VISUAL=1 npx vitest run --update $(UI_ARGS)
-# and re-records every baseline in the repo instead of the one named.
-ui-visual-update: ## Re-record the screenshot baselines (UI_ARGS=<path> to filter)
-	@cd frontend && YJ_VISUAL=1 npx vitest run --update=true $(UI_ARGS)
 
 ui-setup: ## Install the Vitest browser provider's own Chromium (once)
 	@cd frontend && pnpm install && npx playwright install chromium

backend/metadata/tags.go

@@ -74,14 +74,6 @@ func ExtractTags(path string) (*TrackMetadata, error) {
 
 // ExtractTagsFromReader reads metadata from an io.ReadSeeker.
 func ExtractTagsFromReader(r io.ReadSeeker) (*TrackMetadata, error) {
-	// The container decides, so this is asked before tag.ReadFrom and
-	// not after its failure: a WAV's tags live in a RIFF chunk that
-	// dhowden/tag cannot see, and its fallback -- an ID3v1 trailer --
-	// would otherwise outrank them.
-	if meta, ok := wavTags(r); ok {
-		return meta, nil
-	}
-
 	m, err := tag.ReadFrom(r)
 	if err != nil {
 		// No tags found is not necessarily an error - return empty metadata

backend/metadata/tags_wav.go

@@ -1,68 +0,0 @@
-package metadata
-
-import (
-	"bytes"
-	"errors"
-	"fmt"
-	"io"
-	"strings"
-
-	"yellowjacket/backend/riff"
-)
-
-// wavTags reads the ID3v2 tag a WAV carries in its RIFF "id3 " chunk,
-// which is where backend/tagwriter puts it and where dhowden/tag --
-// having no RIFF reader at all -- cannot look.  Without this a WAV
-// scans as an untagged file however carefully it was tagged.
-//
-// ok is false when r is not a RIFF/WAVE container, and the read
-// position is restored either way so the caller can carry on.
-func wavTags(r io.ReadSeeker) (*TrackMetadata, bool) {
-	start, err := r.Seek(0, io.SeekCurrent)
-	if err != nil {
-		return nil, false
-	}
-
-	id3Data, chunkErr := riff.ID3Chunk(r)
-
-	if _, err := r.Seek(start, io.SeekStart); err != nil {
-		return nil, false
-	}
-
-	switch {
-	case chunkErr == nil:
-		return wavTagsFrom(id3Data), true
-
-	// Not ours to read: let the ordinary dispatch have the file.
-	case errors.Is(chunkErr, riff.ErrNotRIFF), errors.Is(chunkErr, riff.ErrNotWAVE):
-		return nil, false
-
-	// A RIFF container we cannot get a tag out of -- no chunk, an RF64
-	// file, a truncated header.  That is a file with no readable tags,
-	// which is what the scanner's filename fallback is for.
-	default:
-		return &TrackMetadata{}, true
-	}
-}
-
-// wavTagsFrom parses the bytes of a WAV's ID3v2 chunk.
-func wavTagsFrom(id3Data []byte) *TrackMetadata {
-	meta, err := extractID3v2Lenient(bytes.NewReader(id3Data))
-	if err != nil {
-		// A tag holding no frames is not a damaged tag: writing every
-		// field back out empty leaves one, and warning about it would
-		// put a fault on a file that has none.
-		if errors.Is(err, ErrTagsUnreadable) {
-			return &TrackMetadata{}
-		}
-
-		return &TrackMetadata{
-			TagReadWarning: fmt.Errorf("%w: %w", ErrTagsUnreadable, err),
-		}
-	}
-
-	// extractID3v2Lenient names MP3, being the recovery path for one.
-	meta.FileFormat = strings.ToUpper(strings.TrimPrefix(string(WAV), "."))
-
-	return meta
-}

backend/riff/riff.go

@@ -1,183 +0,0 @@
-// Package riff reads the chunk layout of a RIFF/WAVE container.
-//
-// It exists because both halves of WAV tagging need it and neither can
-// import the other: backend/tagwriter writes a WAV's tags into a RIFF
-// "id3 " chunk and already imports backend/metadata, which is what has
-// to read them back out.  backend/tagtotals is the precedent.
-//
-// The two readers here are deliberately different.  Parse holds every
-// chunk's data in memory, which is what rewriting a file needs; a WAV's
-// audio *is* the "data" chunk, so doing that on the scan path would
-// read every library file in full.  ID3Chunk seeks over what it is not
-// looking for instead.  Both walk the same headers.
-package riff
-
-import (
-	"bytes"
-	"encoding/binary"
-	"errors"
-	"fmt"
-	"io"
-	"strings"
-)
-
-// Sentinel errors describing a container this package will not read.
-var (
-	ErrRF64NotSupported = errors.New("RF64 files are not yet supported")
-	ErrNotRIFF          = errors.New("not a RIFF file")
-	ErrNotWAVE          = errors.New("not a WAVE file")
-	ErrNoID3Chunk       = errors.New("no ID3 chunk in RIFF file")
-)
-
-// Chunk holds a single RIFF sub-chunk (ID + raw data).
-type Chunk struct {
-	ID   [4]byte
-	Data []byte
-}
-
-// IsID3 reports whether id is that of an ID3v2 RIFF chunk.  Both
-// lowercase "id3 " and uppercase "ID3 " are accepted.
-func IsID3(id [4]byte) bool {
-	return strings.ToLower(string(id[:3])) == "id3"
-}
-
-// Parse reads every RIFF sub-chunk from r, in order, starting at the
-// reader's current position.  It rejects RF64 files and non-WAVE
-// containers with descriptive errors.  The parser is lenient: it
-// tolerates a missing final padding byte and ignores the declared
-// RIFF size.
-func Parse(r io.Reader) ([]Chunk, error) {
-	if err := readContainer(r); err != nil {
-		return nil, err
-	}
-
-	var chunks []Chunk
-
-	for {
-		id, size, err := nextHeader(r)
-		if errors.Is(err, io.EOF) {
-			break
-		}
-
-		if err != nil {
-			return nil, err
-		}
-
-		data := make([]byte, size)
-		if _, err := io.ReadFull(r, data); err != nil {
-			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
-		}
-
-		chunks = append(chunks, Chunk{ID: id, Data: data})
-
-		// Odd-length chunks have a padding byte.  Lenient: if the
-		// read fails (e.g. EOF), just break rather than error.
-		if size%2 != 0 {
-			var pad [1]byte
-
-			if _, err := r.Read(pad[:]); err != nil {
-				break
-			}
-		}
-	}
-
-	return chunks, nil
-}
-
-// ID3Chunk returns the payload of the ID3v2 chunk of the RIFF/WAVE
-// container at the reader's current position, seeking over every other
-// chunk rather than reading it.  It returns ErrNoID3Chunk when the
-// container carries no such chunk, and leaves the read position
-// unspecified either way.
-func ID3Chunk(r io.ReadSeeker) ([]byte, error) {
-	if err := readContainer(r); err != nil {
-		return nil, err
-	}
-
-	for {
-		id, size, err := nextHeader(r)
-		if errors.Is(err, io.EOF) {
-			return nil, ErrNoID3Chunk
-		}
-
-		if err != nil {
-			return nil, err
-		}
-
-		if !IsID3(id) {
-			// Odd-length chunks carry a padding byte.  Seeking past
-			// the end of the file is not an error; the next header
-			// read is what reports the end.
-			if _, err := r.Seek(int64(size)+int64(size%2), io.SeekCurrent); err != nil {
-				return nil, fmt.Errorf("skip chunk %q: %w", id, err)
-			}
-
-			continue
-		}
-
-		// Copied rather than allocated up front: a truncated file is
-		// free to declare a chunk larger than the whole of itself.
-		var data bytes.Buffer
-		if _, err := io.CopyN(&data, r, int64(size)); err != nil {
-			return nil, fmt.Errorf("read chunk data for %q: %w", id, err)
-		}
-
-		return data.Bytes(), nil
-	}
-}
-
-// readContainer consumes the 12-byte RIFF/WAVE header at the reader's
-// current position.
-func readContainer(r io.Reader) error {
-	var magic [4]byte
-	if _, err := io.ReadFull(r, magic[:]); err != nil {
-		return fmt.Errorf("read RIFF magic: %w", err)
-	}
-
-	if string(magic[:]) == "RF64" {
-		return ErrRF64NotSupported
-	}
-
-	if string(magic[:]) != "RIFF" {
-		return fmt.Errorf("%w: got %q", ErrNotRIFF, magic)
-	}
-
-	// Read (and discard) RIFF size — lenient, do not enforce.
-	var riffSize uint32
-	if err := binary.Read(r, binary.LittleEndian, &riffSize); err != nil {
-		return fmt.Errorf("read RIFF size: %w", err)
-	}
-
-	var form [4]byte
-	if _, err := io.ReadFull(r, form[:]); err != nil {
-		return fmt.Errorf("read WAVE form type: %w", err)
-	}
-
-	if string(form[:]) != "WAVE" {
-		return fmt.Errorf("%w: got %q", ErrNotWAVE, form)
-	}
-
-	return nil
-}
-
-// nextHeader reads one sub-chunk header.  It returns io.EOF once the
-// chunks are exhausted, including for a header cut short.
-func nextHeader(r io.Reader) ([4]byte, uint32, error) {
-	var id [4]byte
-
-	_, err := io.ReadFull(r, id[:])
-	if errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF) {
-		return id, 0, io.EOF
-	}
-
-	if err != nil {
-		return id, 0, fmt.Errorf("read chunk ID: %w", err)
-	}
-
-	var size uint32
-	if err := binary.Read(r, binary.LittleEndian, &size); err != nil {
-		return id, 0, fmt.Errorf("read chunk size for %q: %w", id, err)
-	}
-
-	return id, size, nil
-}

backend/riff/riff_test.go

@@ -1,211 +0,0 @@
-package riff_test
-
-import (
-	"bytes"
-	"encoding/binary"
-	"errors"
-	"testing"
-
-	"yellowjacket/backend/riff"
-)
-
-// chunk is one sub-chunk to put in a test container.
-type chunk struct {
-	id   string
-	data []byte
-}
-
-// buildRIFF assembles a container from magic, form type and chunks,
-// padding odd-length chunks the way a writer must.
-func buildRIFF(magic, form string, chunks []chunk) []byte {
-	var body bytes.Buffer
-
-	body.WriteString(form)
-
-	for _, c := range chunks {
-		body.WriteString(c.id)
-		_ = binary.Write(&body, binary.LittleEndian, uint32(len(c.data)))
-		body.Write(c.data)
-
-		if len(c.data)%2 != 0 {
-			body.WriteByte(0)
-		}
-	}
-
-	var out bytes.Buffer
-
-	out.WriteString(magic)
-	_ = binary.Write(&out, binary.LittleEndian, uint32(body.Len()))
-	out.Write(body.Bytes())
-
-	return out.Bytes()
-}
-
-func TestID3Chunk_FindsTheTagPastTheAudio(t *testing.T) {
-	t.Parallel()
-
-	tests := []struct {
-		name   string
-		chunks []chunk
-		want   string
-	}{
-		{
-			name: "after an odd-length chunk",
-			chunks: []chunk{
-				{id: "fmt ", data: make([]byte, 16)},
-				{id: "LIST", data: []byte("INFOodd")},
-				{id: "data", data: make([]byte, 200)},
-				{id: "id3 ", data: []byte("ID3vTAG")},
-			},
-			want: "ID3vTAG",
-		},
-		{
-			// The chunk ID is written both ways in the wild, and the
-			// writer accepts either, so the reader must too.
-			name: "uppercase ID3",
-			chunks: []chunk{
-				{id: "data", data: make([]byte, 8)},
-				{id: "ID3 ", data: []byte("upper")},
-			},
-			want: "upper",
-		},
-		{
-			name: "first chunk",
-			chunks: []chunk{
-				{id: "id3 ", data: []byte("first")},
-				{id: "data", data: make([]byte, 8)},
-			},
-			want: "first",
-		},
-	}
-
-	for _, tc := range tests {
-		t.Run(tc.name, func(t *testing.T) {
-			t.Parallel()
-
-			r := bytes.NewReader(buildRIFF("RIFF", "WAVE", tc.chunks))
-
-			got, err := riff.ID3Chunk(r)
-			if err != nil {
-				t.Fatalf("ID3Chunk: %v", err)
-			}
-
-			if string(got) != tc.want {
-				t.Errorf("chunk data: got %q, want %q", got, tc.want)
-			}
-		})
-	}
-}
-
-func TestID3Chunk_RejectsWhatItCannotRead(t *testing.T) {
-	t.Parallel()
-
-	tests := []struct {
-		name  string
-		bytes []byte
-		want  error
-	}{
-		{
-			name:  "no ID3 chunk",
-			bytes: buildRIFF("RIFF", "WAVE", []chunk{{id: "data", data: []byte{1, 2}}}),
-			want:  riff.ErrNoID3Chunk,
-		},
-		{
-			name:  "no chunks at all",
-			bytes: buildRIFF("RIFF", "WAVE", nil),
-			want:  riff.ErrNoID3Chunk,
-		},
-		{
-			name:  "not RIFF",
-			bytes: []byte("ID3\x03\x00\x00\x00\x00\x00\x00\x00\x00"),
-			want:  riff.ErrNotRIFF,
-		},
-		{
-			name:  "not WAVE",
-			bytes: buildRIFF("RIFF", "AVI ", []chunk{{id: "id3 ", data: []byte("x")}}),
-			want:  riff.ErrNotWAVE,
-		},
-		{
-			name:  "RF64",
-			bytes: buildRIFF("RF64", "WAVE", []chunk{{id: "id3 ", data: []byte("x")}}),
-			want:  riff.ErrRF64NotSupported,
-		},
-	}
-
-	for _, tc := range tests {
-		t.Run(tc.name, func(t *testing.T) {
-			t.Parallel()
-
-			_, err := riff.ID3Chunk(bytes.NewReader(tc.bytes))
-			if !errors.Is(err, tc.want) {
-				t.Errorf("ID3Chunk error: got %v, want %v", err, tc.want)
-			}
-		})
-	}
-}
-
-// A file cut short mid-chunk is a file with no tag, not a reason to
-// allocate the size it claims: the declared size is four bytes any
-// truncation can leave saying 4 GB.
-func TestID3Chunk_ToleratesATruncatedFile(t *testing.T) {
-	t.Parallel()
-
-	full := buildRIFF("RIFF", "WAVE", []chunk{
-		{id: "data", data: make([]byte, 64)},
-		{id: "id3 ", data: []byte("tag")},
-	})
-
-	t.Run("cut inside the audio", func(t *testing.T) {
-		t.Parallel()
-
-		_, err := riff.ID3Chunk(bytes.NewReader(full[:32]))
-		if !errors.Is(err, riff.ErrNoID3Chunk) {
-			t.Errorf("ID3Chunk error: got %v, want %v", err, riff.ErrNoID3Chunk)
-		}
-	})
-
-	t.Run("cut inside the tag", func(t *testing.T) {
-		t.Parallel()
-
-		if _, err := riff.ID3Chunk(bytes.NewReader(full[:len(full)-2])); err == nil {
-			t.Error("ID3Chunk: got nil error for a truncated tag chunk")
-		}
-	})
-}
-
-// Parse is the writer's half and reads every chunk into memory, which
-// is what preserving them needs.
-func TestParse_ReadsEveryChunkInOrder(t *testing.T) {
-	t.Parallel()
-
-	raw := buildRIFF("RIFF", "WAVE", []chunk{
-		{id: "fmt ", data: make([]byte, 16)},
-		{id: "LIST", data: []byte("INFOodd")},
-		{id: "id3 ", data: []byte("tag")},
-	})
-
-	chunks, err := riff.Parse(bytes.NewReader(raw))
-	if err != nil {
-		t.Fatalf("Parse: %v", err)
-	}
-
-	want := []string{"fmt ", "LIST", "id3 "}
-	if len(chunks) != len(want) {
-		t.Fatalf("chunk count: got %d, want %d", len(chunks), len(want))
-	}
-
-	for i, id := range want {
-		if got := string(chunks[i].ID[:]); got != id {
-			t.Errorf("chunk %d: got %q, want %q", i, got, id)
-		}
-	}
-
-	if !riff.IsID3(chunks[2].ID) || string(chunks[2].Data) != "tag" {
-		t.Errorf("id3 chunk: got %q", chunks[2].Data)
-	}
-
-	// The padding byte after an odd chunk is not part of its data.
-	if string(chunks[1].Data) != "INFOodd" {
-		t.Errorf("odd chunk data: got %q, want %q", chunks[1].Data, "INFOodd")
-	}
-}

backend/tagwriter/totals_test.go

@@ -13,10 +13,9 @@ import (
 // indistinguishable from never having written one.  So these assert the
 // round trip through the *reader the scan uses*, not the bytes.
 //
-// WAV was the exception until #104 -- dhowden/tag has no RIFF reader,
+// WAV is the exception and it is not this change's: dhowden/tag has no
-// so metadata.ExtractTags could not see a WAV's ID3 chunk and this
+// RIFF reader at all, so metadata.ExtractTags cannot see a WAV's ID3
-// case read the chunk itself, which is a test of the writer wearing
+// chunk -- which is why every other test here reads that chunk itself.
-// the shape of a round trip.  All four go through the scanner now.
 func TestWriteTotals_RoundTripsInEveryFormat(t *testing.T) {
 	t.Parallel()
 
@@ -92,7 +91,7 @@ func TestWriteTotals_RoundTripsInEveryFormat(t *testing.T) {
 		},
 		{
 			name: "wav",
-			read: viaScanner,
+			read: readWavID3Tags,
 			write: func(t *testing.T, dir string) string {
 				t.Helper()
 

backend/tagwriter/wav.go

@@ -8,22 +8,116 @@ import (
 	"io"
 	"log/slog"
 	"os"
+	"strings"
 
 	id3v2 "github.com/bogem/id3v2/v2"
 
 	"yellowjacket/backend/fileutil"
-	"yellowjacket/backend/riff"
 )
 
-// errFileTooLargeForWAV is the one RIFF error that belongs to the
+// Sentinel errors for WAV RIFF operations.
-// writer; reading rejects a container in backend/riff.
+var (
-var errFileTooLargeForWAV = errors.New("file too large for WAV format (>4GB)")
+	errRF64NotSupported   = errors.New("RF64 files are not yet supported")
+	errNotRIFF            = errors.New("not a RIFF file")
+	errNotWAVE            = errors.New("not a WAVE file")
+	errFileTooLargeForWAV = errors.New("file too large for WAV format (>4GB)")
+)
+
+// riffChunk holds a single RIFF sub-chunk (ID + raw data).
+type riffChunk struct {
+	id   [4]byte
+	data []byte
+}
+
+// parseRIFF reads all RIFF sub-chunks from r.  It rejects RF64 files
+// and non-WAVE containers with descriptive errors.  The parser is
+// lenient on read: it tolerates missing padding bytes and ignores
+// the declared RIFF size.
+func parseRIFF(r io.ReadSeeker) ([]riffChunk, error) {
+	// Read 4-byte container magic.
+	var magic [4]byte
+	if _, err := io.ReadFull(r, magic[:]); err != nil {
+		return nil, fmt.Errorf("read RIFF magic: %w", err)
+	}
+
+	if string(magic[:]) == "RF64" {
+		return nil, errRF64NotSupported
+	}
+
+	if string(magic[:]) != "RIFF" {
+		return nil, fmt.Errorf("%w: got %q", errNotRIFF, magic)
+	}
+
+	// Read (and discard) RIFF size — lenient, do not enforce.
+	var riffSize uint32
+	if err := binary.Read(r, binary.LittleEndian, &riffSize); err != nil {
+		return nil, fmt.Errorf("read RIFF size: %w", err)
+	}
+
+	// Read 4-byte form type.
+	var form [4]byte
+	if _, err := io.ReadFull(r, form[:]); err != nil {
+		return nil, fmt.Errorf("read WAVE form type: %w", err)
+	}
+
+	if string(form[:]) != "WAVE" {
+		return nil, fmt.Errorf("%w: got %q", errNotWAVE, form)
+	}
+
+	// Read sub-chunks until EOF.
+	var chunks []riffChunk
+
+	for {
+		var chunkID [4]byte
+
+		_, err := io.ReadFull(r, chunkID[:])
+		if errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF) {
+			break
+		}
+
+		if err != nil {
+			return nil, fmt.Errorf("read chunk ID: %w", err)
+		}
+
+		var chunkSize uint32
+		if err := binary.Read(r, binary.LittleEndian, &chunkSize); err != nil {
+			return nil, fmt.Errorf("read chunk size for %q: %w", chunkID, err)
+		}
+
+		data := make([]byte, chunkSize)
+		if _, err := io.ReadFull(r, data); err != nil {
+			return nil, fmt.Errorf("read chunk data for %q: %w", chunkID, err)
+		}
+
+		chunks = append(chunks, riffChunk{id: chunkID, data: data})
+
+		// Odd-length chunks have a padding byte.  Lenient: if the
+		// read fails (e.g. EOF), just break rather than error.
+		if chunkSize%2 != 0 {
+			var pad [1]byte
+
+			if _, err := r.Read(pad[:]); err != nil {
+				break
+			}
+		}
+	}
+
+	return chunks, nil
+}
+
+// isID3ChunkID returns true if id represents an ID3v2 RIFF chunk.
+// Both lowercase "id3 " and uppercase "ID3 " are accepted.
+func isID3ChunkID(id [4]byte) bool {
+	s := strings.ToLower(string(id[:3]))
+
+	return s == "id3"
+}
 
 // writeRIFF writes a complete RIFF/WAVE container to w, preserving
 // the given chunks in order and appending the id3Data as the final
 // "id3 " chunk.  Returns errFileTooLargeForWAV if the result would
 // exceed the 4 GB RIFF limit.
-func writeRIFF(w io.Writer, chunks []riff.Chunk, id3Data []byte) error {
+func writeRIFF(w io.Writer, chunks []riffChunk, id3Data []byte) error {
 	// Calculate total RIFF payload size:
 	//   4 bytes (WAVE form type)
 	// + for each preserved chunk: 8 (header) + len(data) + padding
@@ -31,7 +125,7 @@ func writeRIFF(w io.Writer, chunks []riff.Chunk, id3Data []byte) error {
 	riffPayload := uint64(4)
 
 	for _, c := range chunks {
-		sz := uint64(len(c.Data))
+		sz := uint64(len(c.data))
 		riffPayload += 8 + sz
 
 		if sz%2 != 0 {
@@ -68,7 +162,7 @@ func writeRIFF(w io.Writer, chunks []riff.Chunk, id3Data []byte) error {
 
 	// Write each preserved chunk.
 	for _, c := range chunks {
-		if err := writeChunk(w, c.ID, c.Data); err != nil {
+		if err := writeChunk(w, c.id, c.data); err != nil {
 			return err
 		}
 	}
@@ -131,7 +225,7 @@ func writeWavTags(
 		return fmt.Errorf("open wav for reading: %w", err)
 	}
 
-	allChunks, err := riff.Parse(f)
+	allChunks, err := parseRIFF(f)
 
 	// Close immediately — we need the handle released before
 	// AtomicWrite creates the replacement file.
@@ -143,13 +237,13 @@ func writeWavTags(
 
 	// Separate preserved chunks from existing ID3 data.
 	var (
-		preserved   []riff.Chunk
+		preserved   []riffChunk
 		existingID3 []byte
 	)
 
 	for _, c := range allChunks {
-		if riff.IsID3(c.ID) {
+		if isID3ChunkID(c.id) {
-			existingID3 = c.Data
+			existingID3 = c.data
 		} else {
 			preserved = append(preserved, c)
 		}

backend/tagwriter/wav_test.go

@@ -12,7 +12,6 @@ import (
 	id3v2 "github.com/bogem/id3v2/v2"
 
 	"yellowjacket/backend/metadata"
-	"yellowjacket/backend/riff"
 )
 
 // createTestWAV builds a minimal valid WAV file with an optional
@@ -271,88 +270,6 @@ func TestWriteWavTags_PartialUpdate(t *testing.T) {
 	assertStrField(t, "Composer", meta.Composer, "Original Composer")
 }
 
-// The writer has always been correct and the reader could not see it:
-// a WAV tagged by this app scanned as an untagged file, so editing
-// tags, autotagging a folder or importing a WAV download all appeared
-// to work and changed nothing the library could show (#104).  So this
-// asserts the write through metadata.ExtractTags -- the reader the
-// scan uses -- rather than through the id3 chunk.
-func TestWriteWavTags_ReadBackByTheScanner(t *testing.T) {
-	t.Parallel()
-
-	dir := t.TempDir()
-	path := createTestWAV(t, dir, "scanner.wav", nil)
-	art := tinyJPEG(t)
-
-	changes := TagChanges{
-		FieldTitle:       "Some Song",
-		FieldArtist:      "Some Artist",
-		FieldAlbum:       "Some Album",
-		FieldAlbumArtist: "Some Album Artist",
-		FieldGenre:       "Rock",
-		FieldYear:        2024,
-		FieldTrackNumber: 3,
-		FieldComposer:    "Some Composer",
-		FieldCoverArt:    art,
-	}
-
-	if err := writeWavTags(testLogger(), path, changes); err != nil {
-		t.Fatalf("writeWavTags: %v", err)
-	}
-
-	meta, err := metadata.ExtractTags(path)
-	if err != nil {
-		t.Fatalf("ExtractTags: %v", err)
-	}
-
-	if meta.TagReadWarning != nil {
-		t.Errorf("TagReadWarning: %v", meta.TagReadWarning)
-	}
-
-	assertStrField(t, "Title", meta.Title, "Some Song")
-	assertStrField(t, "Artist", meta.Artist, "Some Artist")
-	assertStrField(t, "Album", meta.Album, "Some Album")
-	assertStrField(t, "AlbumArtist", meta.AlbumArtist, "Some Album Artist")
-	assertStrField(t, "Genre", meta.Genre, "Rock")
-	assertStrField(t, "Composer", meta.Composer, "Some Composer")
-	assertStrField(t, "FileFormat", meta.FileFormat, "WAV")
-	assertIntField(t, "Year", meta.Year, 2024)
-	assertIntField(t, "TrackNumber", meta.TrackNumber, 3)
-
-	if !strings.HasPrefix(meta.TagFormat, "ID3v2") {
-		t.Errorf("TagFormat: got %q, want an ID3v2 version", meta.TagFormat)
-	}
-
-	if meta.Picture == nil {
-		t.Fatal("expected cover art, got nil")
-	}
-
-	if !bytes.Equal(meta.Picture.Data, art) {
-		t.Errorf("picture data mismatch: got %d bytes, want %d",
-			len(meta.Picture.Data), len(art))
-	}
-}
-
-// An untagged WAV is a file with no tags, not a file with a problem:
-// the scanner falls back to the filename and must not be handed a
-// warning to surface about it.
-func TestUntaggedWav_ReadsAsEmptyWithoutAWarning(t *testing.T) {
-	t.Parallel()
-
-	path := createTestWAV(t, t.TempDir(), "bare.wav", nil)
-
-	meta, err := metadata.ExtractTags(path)
-	if err != nil {
-		t.Fatalf("ExtractTags: %v", err)
-	}
-
-	if meta.TagReadWarning != nil {
-		t.Errorf("TagReadWarning: %v", meta.TagReadWarning)
-	}
-
-	assertStrField(t, "Title", meta.Title, "")
-}
-
 func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	t.Parallel()
 
@@ -365,7 +282,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 		t.Fatalf("open original: %v", err)
 	}
 
-	origChunks, err := riff.Parse(origFile)
+	origChunks, err := parseRIFF(origFile)
 	_ = origFile.Close()
 
 	if err != nil {
@@ -375,7 +292,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	// Record original chunk data by ID string.
 	origData := map[string][]byte{}
 	for _, c := range origChunks {
-		origData[string(c.ID[:])] = c.Data
+		origData[string(c.id[:])] = c.data
 	}
 
 	// Write a tag to trigger RIFF rewrite.
@@ -392,7 +309,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 		t.Fatalf("open after write: %v", err)
 	}
 
-	newChunks, err := riff.Parse(newFile)
+	newChunks, err := parseRIFF(newFile)
 	_ = newFile.Close()
 
 	if err != nil {
@@ -403,7 +320,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	origNonID3 := 0
 
 	for _, c := range origChunks {
-		if !riff.IsID3(c.ID) {
+		if !isID3ChunkID(c.id) {
 			origNonID3++
 		}
 	}
@@ -411,7 +328,7 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 	newNonID3 := 0
 
 	for _, c := range newChunks {
-		if !riff.IsID3(c.ID) {
+		if !isID3ChunkID(c.id) {
 			newNonID3++
 		}
 	}
@@ -442,17 +359,17 @@ func TestWriteWavTags_ChunkPreservation(t *testing.T) {
 // in chunks and its data matches want byte-for-byte.
 func checkChunkPreserved(
 	t *testing.T,
-	chunks []riff.Chunk,
+	chunks []riffChunk,
 	idStr string,
 	want []byte,
 ) {
 	t.Helper()
 
 	for _, c := range chunks {
-		if string(c.ID[:]) == idStr {
+		if string(c.id[:]) == idStr {
-			if !bytes.Equal(c.Data, want) {
+			if !bytes.Equal(c.data, want) {
 				t.Errorf("chunk %q data changed: got %d bytes, want %d",
-					idStr, len(c.Data), len(want))
+					idStr, len(c.data), len(want))
 			}
 
 			return
@@ -513,7 +430,7 @@ func TestWriteWavTags_RejectsRF64(t *testing.T) {
 	buf.WriteString("WAVE")
 
 	// Minimal ds64 chunk (required for RF64 but we just need
-	// enough bytes for riff.Parse to hit the RF64 rejection).
+	// enough bytes for parseRIFF to hit the RF64 rejection).
 	buf.WriteString("ds64")
 	_ = binary.Write(&buf, binary.LittleEndian, uint32(28)) //nolint:mnd
 	buf.Write(make([]byte, 28))                             //nolint:mnd
@@ -537,12 +454,9 @@ func TestWriteWavTags_RejectsRF64(t *testing.T) {
 
 // readWavID3Tags extracts ID3v2 metadata from a WAV file by parsing
 // the RIFF structure and reading the id3 chunk with bogem/id3v2.
-//
+// dhowden/tag's ReadFrom does not support WAV files, and its
-// metadata.ExtractTags reads a WAV since #104 and is what the round
+// ReadID3v2Tags fails on empty tags (after clearing all frames).
-// trips assert through.  This stays for the two cases that are about
+// Using bogem/id3v2.ParseReader handles all cases correctly.
-// the bytes rather than about the scan: a tag with every frame
-// cleared, which no reader reports as anything, and the chunk
-// preservation test, which is already parsing the container itself.
 func readWavID3Tags(
 	t *testing.T,
 	path string,
@@ -556,17 +470,17 @@ func readWavID3Tags(
 
 	defer func() { _ = f.Close() }()
 
-	chunks, err := riff.Parse(f)
+	chunks, err := parseRIFF(f)
 	if err != nil {
-		t.Fatalf("riff.Parse: %v", err)
+		t.Fatalf("parseRIFF: %v", err)
 	}
 
 	// Find the id3 chunk.
 	var id3Data []byte
 
 	for _, c := range chunks {
-		if riff.IsID3(c.ID) {
+		if isID3ChunkID(c.id) {
-			id3Data = c.Data
+			id3Data = c.data
 
 			break
 		}

e2e/specs/native-touch-feel.spec.ts

@@ -1,140 +0,0 @@
-import { test, expect } from '../support/fixtures.js';
-
-/**
- * The web view's own tap highlight, and what replaced it (#54).
- *
- * Two halves, and each is here because no other tier can see it.
- *
- * **The highlight is killed by one declaration on `html`**, which
- * reaches the app's shadow roots because `-webkit-tap-highlight-color`
- * is inherited and inheritance crosses a shadow boundary. That is a
- * property of `index.css`, and `index.css` is loaded by the real app
- * and by nothing else — the component tier mounts a component with no
- * page stylesheet at all, which is the same reason the theme's ramps
- * are invisible to it.
- *
- * **The press state is measured rather than read.** The component tier
- * asserts the shape of the stylesheet (which rule is inside which
- * query, and that the press selector carries a state class), because
- * `:active` cannot be forced there. Here there is a real pointer: hold
- * the button down on a real row of the real list and read what the row
- * became. That is the assertion that would fail if the rule were
- * hoisted, renamed, or lost to `.selected`.
- *
- * What neither half is, is the device. Chrome 113's WebView is where
- * the grey box was reported and where a finger is; the numbers from it
- * are on the PR.
- */
-type Page = import('@playwright/test').Page;
-
-/** The phone this work was measured against, in CSS pixels. */
-const DEVICE = { width: 424, height: 439 };
-
-/** The computed tap-highlight colour of a node inside a shadow root. */
-const tapHighlight = (page: Page, host: string, inner: string) =>
-  page.evaluate(
-    ([hostSel, innerSel]) => {
-      const el = document
-        .querySelector(hostSel!)
-        ?.shadowRoot?.querySelector(innerSel!);
-
-      if (!el) return null;
-
-      return getComputedStyle(el).getPropertyValue(
-        '-webkit-tap-highlight-color',
-      );
-    },
-    [host, inner],
-  );
-
-test.describe('the tap highlight', () => {
-  test('is transparent inside a shadow root, from one rule on html', async ({
-    app,
-    browserName,
-  }) => {
-    await app.getByTestId('nav-tracks').click();
-    await expect(app.getByTestId('main-content')).toHaveAttribute(
-      'data-active-view',
-      'tracks',
-    );
-
-    const row = await tapHighlight(app, 'track-list', '.track-row');
-
-    expect(row).not.toBeNull();
-
-    // The property is a WebKit extension that only iOS honours, so an
-    // engine is free not to report one at all. Chromium always does —
-    // measured at rgba(0, 0, 0, 0.18) with the rule removed, which is
-    // the grey box the report describes — so the assertion is not
-    // skippable there, and nothing this app can do makes the property
-    // disappear on an engine that has it.
-    test.skip(
-      row === '',
-      `${browserName} reports no -webkit-tap-highlight-color to read`,
-    );
-
-    expect(row).toBe('rgba(0, 0, 0, 0)');
-  });
-});
-
-test.describe('the press state that replaced it', () => {
-  test.beforeEach(async ({ app }) => {
-    await app.setViewportSize(DEVICE);
-    await app.getByTestId('tab-tracks').click();
-    await expect(app.getByTestId('main-content')).toHaveAttribute(
-      'data-active-view',
-      'tracks',
-    );
-    await expect(app.locator('track-list').first()).toBeVisible();
-  });
-
-  test.afterEach(async ({ app }) => {
-    await app.mouse.up();
-    await app.setViewportSize({ width: 1440, height: 900 });
-  });
-
-  test('shows on the row being pressed, and on that row only', async ({
-    app,
-  }) => {
-    const rows = await app.evaluate(() => {
-      const found = document
-        .querySelector('track-list')
-        ?.shadowRoot?.querySelectorAll('.track-row');
-
-      if (!found || found.length < 2) return null;
-
-      const rect = found[1]!.getBoundingClientRect();
-
-      return {
-        x: Math.round(rect.x + rect.width / 2),
-        y: Math.round(rect.y + rect.height / 2),
-      };
-    });
-
-    expect(rows).not.toBeNull();
-
-    const backgrounds = () =>
-      app.evaluate(() => {
-        const found = document
-          .querySelector('track-list')!
-          .shadowRoot!.querySelectorAll('.track-row');
-
-        return {
-          pressed: getComputedStyle(found[1]!).backgroundColor,
-          neighbour: getComputedStyle(found[2]!).backgroundColor,
-        };
-      });
-
-    await app.mouse.move(rows!.x, rows!.y);
-    await app.mouse.down();
-
-    const held = await backgrounds();
-
-    // The press overlay, from the theme rather than from a literal in
-    // a component: rgba(255, 255, 255, 0.12) on both dark ramps.
-    expect(held.pressed).toBe('rgba(255, 255, 255, 0.12)');
-    expect(held.neighbour).not.toBe(held.pressed);
-
-    await app.mouse.up();
-  });
-});

e2e/specs/phone-shell.spec.ts

@@ -98,58 +98,6 @@ test.describe('the shell on a phone', () => {
     ).toBeVisible();
   });
 
-  test('draws "More" as a sheet on the bottom edge (#71)', async ({ app }) => {
-    await app.getByTestId('tab-more').click();
-    await expect(app.getByTestId('nav-drawer').locator('app-sidebar'))
-      .toBeVisible();
-
-    // What the report is about is geometry, and geometry is what no
-    // other assertion here can see: the side drawer was a 200px column
-    // opening away from the thumb that asked for it, with the rest of
-    // its 400px band empty. Measured rather than screenshotted, since
-    // the failure is a number.
-    //
-    // Polled, because a sheet *arrives*: the drawer's show animation
-    // translates it a full height below the fold, so a measurement
-    // taken the moment its content is visible reports a box hanging
-    // 412px off the bottom of the screen. Asking for the settled
-    // number is the assertion; asking once is a race.
-    const measure = () => app.evaluate(() => {
-      const nav = document.querySelector('bottom-nav');
-      const drawer = nav?.shadowRoot?.querySelector('wa-drawer');
-      const dialog = drawer?.shadowRoot?.querySelector('[part~="dialog"]');
-      const sidebar = nav?.shadowRoot?.querySelector('app-sidebar');
-      const row = sidebar?.shadowRoot?.querySelector('li button');
-      const box = dialog?.getBoundingClientRect();
-
-      return {
-        left: Math.round(box?.left ?? -1),
-        right: Math.round(box?.right ?? -1),
-        bottom: Math.round(box?.bottom ?? -1),
-        height: Math.round(box?.height ?? -1),
-        row: Math.round(row?.getBoundingClientRect().height ?? -1),
-        viewport: [window.innerWidth, window.innerHeight],
-      };
-    });
-
-    await expect
-      .poll(async () => (await measure()).bottom)
-      .toBe(PHONE.height);
-
-    const sheet = await measure();
-
-    expect(sheet.left).toBe(0);
-    expect(sheet.right).toBe(sheet.viewport[0]);
-
-    // A surface covering the whole screen is a page, not a sheet --
-    // which is also what leaves an outside to tap on, the only pointer
-    // route out of it (#171 is the same question one surface over).
-    expect(sheet.height).toBeLessThan(sheet.viewport[1]);
-
-    // 48px rows, from #186's touch floor and #60's context sheet.
-    expect(sheet.row).toBeGreaterThanOrEqual(48);
-  });
-
   for (const vp of [PHONE, SMALL_PHONE]) {
     test(`does not scroll sideways at ${vp.width}×${vp.height}`, async ({ app }) => {
       await app.setViewportSize(vp);

e2e/specs/queue-overlay.spec.ts

@@ -157,62 +157,6 @@ test.describe('an overlaid queue says it is over the content', () => {
   });
 });
 
-/**
- * #170 — the other two buttons in that same row.
- *
- * Clear queue and Add queue to playlist predate the close button and
- * were named by a `title` attribute and nothing else. Unlike the
- * sliders in `control-names.spec.ts`, that is not a *missing* name:
- * `title` is the last fallback in the accname order, so
- * `getByRole('button', { name: 'Clear queue' })` matched them before
- * this fix as well as after it — measured, 1 and 1. A sweep for empty
- * names cannot see a weak one, which is `a11y.26`'s complaint and the
- * reason this file could have grown a green test that proved nothing.
- *
- * So the name is asserted twice, and the second assertion is the one
- * that fails on the broken build. Taking the tooltip away and asking
- * again is the property in words: **the name is not the tooltip**. It
- * is what makes the button survive content being put inside it later,
- * and it is the only one of the two a phone has — there is no hover on
- * the surface #55 turned into a full screen. Measured on `main` before
- * the fix: 0 and 0.
- *
- * Both buttons are disabled here, because the queue starts empty and
- * naming is not enablement. A disabled button is still in the
- * accessibility tree, which is exactly where the complaint was.
- */
-test.describe('the queue header says what its actions do', () => {
-  const ACTIONS = ['Clear queue', 'Add queue to playlist'];
-
-  test('names both of the older actions', async ({ app }) => {
-    await openQueue(app);
-
-    for (const name of ACTIONS) {
-      await expect(
-        app.getByRole('button', { name, exact: true }),
-      ).toHaveCount(1);
-    }
-  });
-
-  test('and the names do not come from the tooltip', async ({ app }) => {
-    await openQueue(app);
-
-    await app.locator('#queue-panel').evaluate((el) => {
-      for (const button of el.shadowRoot!.querySelectorAll(
-        '.header-action-button',
-      )) {
-        button.removeAttribute('title');
-      }
-    });
-
-    for (const name of ACTIONS) {
-      await expect(
-        app.getByRole('button', { name, exact: true }),
-      ).toHaveCount(1);
-    }
-  });
-});
-
 /**
  * The inline panel is the mode that already worked, and the one every
  * other queue spec is written against. It keeps its resize handle and

frontend/index.css

@@ -7,26 +7,6 @@
 
 html {
     height: 100%;
-
-    /* #54.  The web view's own tap highlight -- the grey box a phone
-       draws over the bounding rect of whatever was tapped -- gone in
-       one declaration, because `-webkit-tap-highlight-color` is an
-       *inherited* property and an inherited property crosses a shadow
-       boundary.  So this reaches every one of the app's shadow roots
-       without a rule in any of them; before it, exactly one component
-       (`library-status-indicator`) set it and the box appeared
-       everywhere else.
-
-       What it costs is the only touch feedback several surfaces had,
-       which is why the rows, the tab bar and the shared menu items
-       grew a `:active` state in the same change: removing the wrong
-       feedback and leaving none is not an improvement.  The cards
-       already had one (`transform: scale(0.97)`).
-
-       `user-select` is the same argument one rule up and was already
-       done: the `*` rule at the top of this file is inherited into the
-       shadow roots too. */
-    -webkit-tap-highlight-color: transparent;
 }
 
 body {

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

@@ -7,7 +7,6 @@ import {
 import '@lit-labs/virtualizer';
 import type {
     LitVirtualizer,
-    RangeChangedEvent,
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
@@ -31,7 +30,6 @@ import type { ContextMenuHost, MenuTarget } from '@utils/context-menu-controller
 import { FavoritesController } from '@store/controllers/favorites-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { RovingGridController } from '@utils/roving-grid';
-import { prefetchImageWindow } from '@utils/image-prefetch';
 
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
@@ -584,26 +582,6 @@ export class ArtistsView
      * Scroll position persistence
      * ================================================================ */
 
-    /**
-     * Warm the avatars just past the rendered range (#65).
-     *
-     * `rangeChanged` is the rendered range and `visibilityChanged` is
-     * what is on screen; the virtualizer has already drawn about
-     * 1000px past the latter, so that is the wrong anchor to measure a
-     * prefetch window from. It is deliberately outside the
-     * `restoringScroll` guard below: a restored scroll lands in the
-     * middle of the grid, which is exactly when nothing around it is
-     * cached.
-     */
-    private onRangeChanged = (e: RangeChangedEvent) => {
-        prefetchImageWindow(
-            this.cachedGridEntries,
-            e.first,
-            e.last,
-            (entry) => this.artistAvatarURL(entry.artist),
-        );
-    };
-
     /**
      * Save the first visible item index on scroll.
      */
@@ -1167,16 +1145,7 @@ export class ArtistsView
      * Helpers
      * ================================================================ */
 
-    /**
+    private renderArtistAvatar(artist: library.Artist) {
-     * The image this artist's card will draw, or `''` for the initial
-     * placeholder.
-     *
-     * Split out of `renderArtistAvatar` so the prefetch (#65) asks for
-     * exactly what the card is going to ask for — a second copy of the
-     * tier ladder would be a second thing to keep in step, and warming
-     * the wrong tier is a download that buys nothing.
-     */
-    private artistAvatarURL(artist: library.Artist): string {
         const needed = (this.imageSize ?? 176) * window.devicePixelRatio;
         let imageURL = '';
 
@@ -1203,12 +1172,6 @@ export class ArtistsView
             ) ?? '';
         }
 
-        return imageURL;
-    }
-
-    private renderArtistAvatar(artist: library.Artist) {
-        const imageURL = this.artistAvatarURL(artist);
-
         if (imageURL) {
             return html`<img
                 class="avatar-image"
@@ -1568,7 +1531,6 @@ export class ArtistsView
                     .keyFunction=${(entry: ArtistEntry) => entry.artist.ID}
                     .layout=${this.gridLayout}
                     @visibilityChanged=${this.onVisibilityChanged}
-                    @rangeChanged=${this.onRangeChanged}
                 ></lit-virtualizer>
             </div>
             ${this.renderContextMenu()}

frontend/src/components/bottom-nav/bottom-nav.ts

@@ -27,43 +27,15 @@ interface Tab {
  * three to five items before the targets stop being thumb-sized —
  * 360 px over eleven sidebar entries is 32 px each — so the four here
  * are the ones plan 016's subset says a phone is *for*, and "More"
- * opens the existing `<app-sidebar>` in a sheet. That is deliberately
+ * opens the existing `<app-sidebar>` in a drawer. That is deliberately
  * a reuse rather than a second nav: two lists of destinations is two
  * places to add the next view to, and the sidebar already carries the
  * drag-to-navigate behaviour, the active state and the labels.
  *
- * **"More" rises from the bottom, and it is the same sheet a context
- * menu is** (#71). It was a `wa-drawer` sliding in from the side: a
- * 200px column of a 424px screen, opening away from the thumb that
- * asked for it, with three nested scrollers in it — the dialog, its
- * body, and the sidebar's own `overflow-y: auto` host — which is the
- * "only part of the screen scrolls under my finger" in the report.
- *
- * Three things about the replacement are load-bearing.
- *
- * **It is the same element with another `placement`, not a new
- * surface.** `wa-drawer` renders a native `<dialog>` and opens it with
- * `showModal()`, which is exactly what `menu-surface`'s sheet relies
- * on — Chrome 37, the real top layer — so #60's containment finding
- * carries over with nothing new to prove, and the focus trap, Escape,
- * tap-outside and `wa-after-hide` all come along unchanged.
- *
- * **The body is the only scroller**, with `overscroll-behavior:
- * contain`, and the sidebar is told to stop being one. Nesting them is
- * what makes a drag scroll the wrong box.
- *
- * **The sidebar is still mounted rather than re-listed as data**,
- * which the issue offers as an alternative. Its `data-testid` per
- * destination is the reason: the shell's own sidebar is `display:
- * none` below 600px rather than removed, so a second list drawing
- * `nav-*` handles is the duplication this component already renders
- * conditionally to avoid — and it would be a second place to add the
- * next view to, with its own copy of #25's visibility filter.
- *
  * It emits the same bubbling, composed `navigate` event the sidebar
  * does, so `index.ts` needs no knowledge of it, and it listens for that
  * event globally for the same reason the sidebar does: a navigation it
- * did not send (a card click, a detail view, the sheet) still has to
+ * did not send (a card click, a detail view, the drawer) still has to
  * move the highlight.
  */
 @customElement('bottom-nav')
@@ -117,17 +89,6 @@ export class BottomNav extends LitElement {
             color: var(--yj-accent, #ffd43b);
         }
 
-        /* The press state (#54). This bar is the phone's primary
-           navigation and had no feedback of its own at all -- what a
-           tap produced was the web view's tap highlight, a grey box
-           over the whole 48px cell, which index.css has now taken
-           away. The .active rule above is which tab you are *on*; this
-           is the tab being pressed, so they are a colour and a
-           background rather than two colours. */
-        button:active {
-            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
-        }
-
         button:focus-visible {
             outline: 2px solid var(--yj-accent, #ffd43b);
             outline-offset: -2px;
@@ -143,50 +104,15 @@ export class BottomNav extends LitElement {
             white-space: nowrap;
         }
 
-        /* The sheet. --size is the drawer's own API for the axis its
-           placement uses, so auto is what makes it hug its content
-           instead of being a fixed 25rem band; the rest is the shape
-           the menu-surface context sheet already has, so a phone meets
-           one sheet rather than two. 85vh for its reason too: a surface
-           covering the whole screen is a page, not a sheet. */
-        wa-drawer {
-            --size: auto;
-        }
-
-        wa-drawer::part(dialog) {
-            max-height: 85vh;
-            border-radius: 12px 12px 0 0;
-            /* The sidebar paints its own surface, so the sheet takes
-               that colour rather than the menus' elevated one: two
-               greys in one sheet is a seam across the middle of it. */
-            background-color: var(--yj-bg-surface, #212529);
-            /* One scroller, and it is the body below. The dialog's own
-               overflow: auto is what let the sheet scroll as well as
-               its content, and it is also what would square off the
-               corners this rule just rounded. */
-            overflow: hidden;
-        }
-
         wa-drawer::part(body) {
             padding: 0;
-            /* A scroll that reaches the end of this list must not
-               become a scroll of the page underneath it. */
-            overscroll-behavior: contain;
-            /* The sheet sits on the bottom edge, so the last
-               destination would otherwise be under the home indicator
-               on a gesture-navigation phone -- the same allowance the
-               bar itself makes above. */
-            padding-bottom: env(safe-area-inset-bottom, 0);
         }
 
-        /* A sheet is dragged at with a thumb, so it says where its top
+        app-sidebar {
-           edge is. Decorative: the destinations are below it. */
+            /* The sidebar sizes itself inline and collapses to icons
-        .grip {
+               below 900px, which is every phone.  In the drawer there
-            width: 36px;
+               is room for the labels, so it is told not to. */
-            height: 4px;
+            height: 100%;
-            margin: 8px auto 4px;
-            border-radius: 2px;
-            background: var(--yj-text-tertiary, #888);
         }
     `];
 
@@ -221,7 +147,7 @@ export class BottomNav extends LitElement {
     private visibilityCtrl = new ViewVisibilityController(this);
 
     /**
-     * Whether the sheet has been asked for.
+     * Whether the drawer has been asked for.
      *
      * The sidebar inside it is rendered only while this is true, and
      * that is not an optimisation. `app-sidebar` carries a
@@ -263,17 +189,15 @@ export class BottomNav extends LitElement {
 
     override updated() {
         // Web Awesome renders its heading into its own shadow root and
-        // never points aria-labelledby at it, so the sheet would
+        // never points aria-labelledby at it, so the drawer would
         // otherwise be announced unnamed -- the same fix, and the same
         // reason, as every wa-dialog in the app. A drawer's shadow root
-        // has the same shape, so the helper needs no change; under
+        // has the same shape, so the helper needs no change.
-        // `without-header` there is no heading to point at, which is
-        // that helper's documented `aria-label` path.
         nameDialog(this.drawer);
     }
 
     private onGlobalNavigate = () => {
-        // A navigation from inside the sheet is the sheet's job done.
+        // A navigation from inside the drawer is the drawer's job done.
         // The highlight is not this listener's business any more.
         this.drawerOpen = false;
     };
@@ -339,14 +263,12 @@ export class BottomNav extends LitElement {
             </nav>
 
             <wa-drawer
-                placement="bottom"
+                placement="start"
-                without-header
                 label="All views"
                 data-testid="nav-drawer"
                 ?open=${this.drawerOpen}
                 @wa-after-hide=${this.onDrawerHide}
             >
-                <div class="grip"></div>
                 ${this.drawerOpen
                     ? html`<app-sidebar expanded></app-sidebar>`
                     : nothing}

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

@@ -8,7 +8,6 @@ import {
 import '@lit-labs/virtualizer';
 import type {
     LitVirtualizer,
-    RangeChangedEvent,
     VisibilityChangedEvent,
 } from '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';
@@ -31,7 +30,6 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/playlist-picker/playlist-picker.js';
 import { loadTrackDetails } from '@utils/lazy-track-details.js';
 import { tracksByFilePath, tracksForPaths } from '@utils/track-index.js';
-import { prefetchImageWindow } from '@utils/image-prefetch.js';
 import type { TrackDetails } from '@components/track-details/track-details.js';
 import type { CoverArtUrls } from '@components/track-details/track-details.js';
 import { AlbumSelectionManager } from './album-selection.js';
@@ -912,31 +910,6 @@ export class CoverGrid
         );
     };
 
-    /**
-     * Warm the covers just past the rendered range (#65).
-     *
-     * `rangeChanged` rather than `visibilityChanged`, because the two
-     * report different ranges and only one of them is the right
-     * anchor: visibility is what is on screen, and the virtualizer has
-     * already rendered about 1000px past that. Measured from the
-     * visible range this would spend most of its window on cards that
-     * already exist and have already asked for their own art.
-     *
-     * The entry lists are memoized, so asking for one here costs a
-     * reference compare.
-     */
-    private onRangeChanged = (e: RangeChangedEvent) => {
-        const entries = this.splitMode
-            ? this.getBeforeEntries()
-            : this.buildGridEntries();
-
-        prefetchImageWindow(entries, e.first, e.last, (entry) =>
-            entry.album.CoverArtPath
-                ? this.getCoverUrl(entry.album)
-                : '',
-        );
-    };
-
     /* ====================================================================
      * Virtualizer items
      * ==================================================================== */
@@ -2030,7 +2003,6 @@ export class CoverGrid
                 @keydown=${this.onGridAlbumKeydown}
                 @contextmenu=${this.onGridAlbumContextMenu}
                 @visibilityChanged=${this.onVisibilityChanged}
-                @rangeChanged=${this.onRangeChanged}
             ></lit-virtualizer>
         `;
     }
@@ -2065,7 +2037,6 @@ export class CoverGrid
                 @keydown=${this.onGridAlbumKeydown}
                 @contextmenu=${this.onGridAlbumContextMenu}
                 @visibilityChanged=${this.onVisibilityChanged}
-                @rangeChanged=${this.onRangeChanged}
             ></lit-virtualizer>
 
             <album-dropdown

frontend/src/components/menu-surface/menu-surface.ts

@@ -155,55 +155,10 @@ export class MenuSurface extends LitElement {
            bottom was at y=452 on a 439px screen -- the one row a
            destructive action is most likely to be. The cap has to stay
            (a sheet covering the whole screen is a page, not a sheet),
-           so the body is what gives.
+           so the body is what gives. */
-
-           **And a body that scrolls says so** (#207). Scrolling was the
-           whole of the fix above, which left the last item reachable
-           and nothing on screen admitting it was there -- measured at
-           424x439, eight items ending at y=470 with the fold at 439,
-           and worse when the cut lands on a row boundary, where the
-           sheet ends in a clean edge that reads as the end of the list.
-
-           Two layers, and the *order* is what asks the question: a
-           shadow pinned to the bottom of the box (attachment scroll),
-           and over it a cover of the sheet's own colour painted at the
-           end of the *content* (attachment local), which therefore
-           scrolls up over the shadow and hides it exactly when there is
-           nothing more to see. So the affordance is absent on a menu
-           that fits, present the moment one does not, and gone again at
-           the end of the list -- with no scroll listener, no
-           measurement, and nothing reaching into wa-dialog's shadow
-           root for the scroller. background-attachment is Chrome 4;
-           the reference device is Chrome 113.
-
-           **The curve is steep because the rows under it stay live.**
-           A scrim over a menu item is that item's text surface, and
-           this app's rule is that text clears 4.5:1 on every surface it
-           can sit on -- which the light ramp, whose bgElevated is
-           #e9ecef, is what makes non-theoretical. A row is 48px with
-           its label centred, so 32px of scrim that is already down to
-           a quarter strength at 14px reaches y-centre at about 0.06 and
-           spends its weight on the strip below the last legible label.
-           Measured on the dark ramp at x=300, flat 52,58,64 throughout
-           before: 50,56,62 at y=330, 33,37,40 at y=350 and 22,24,27 at
-           the bottom edge, and flat again at the end of the list. The
-           light ramp puts 9.9:1 on the last label. */
         wa-dialog::part(body) {
             padding: 0;
             overflow-y: auto;
-            background:
-                linear-gradient(
-                        var(--yj-bg-elevated, #343a40),
-                        var(--yj-bg-elevated, #343a40)
-                    )
-                    bottom / 100% 32px no-repeat local,
-                linear-gradient(
-                        to top,
-                        rgba(0, 0, 0, 0.6) 0%,
-                        rgba(0, 0, 0, 0.25) 45%,
-                        rgba(0, 0, 0, 0) 100%
-                    )
-                    bottom / 100% 32px no-repeat scroll;
         }
 
         /* A sheet is dragged at with a thumb, so it says where its top

frontend/src/components/playlist-details/playlist-details.ts

@@ -1357,14 +1357,8 @@ export class PlaylistDetails
             user-select: none;
         }
 
-        /* A hover tint is for a device that hovers (#54). A hold
+        .track-item:hover {
-           synthesises a hover in the WebView, so ungated this arrives
+            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-           because a finger touched the row and stays after it has
-           gone; the press state below is what a tap gets instead. */
-        @media (hover: hover) and (pointer: fine) {
-            .track-item:hover {
-                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-            }
         }
 
         .track-item.selected {
@@ -1384,13 +1378,11 @@ export class PlaylistDetails
             cursor: pointer;
         }
 
-        @media (hover: hover) and (pointer: fine) {
+        .track-item.phantom:hover {
-            .track-item.phantom:hover {
+            background-color: var(
-                background-color: var(
+                --yj-hover-overlay,
-                    --yj-hover-overlay,
+                rgba(255, 255, 255, 0.05)
-                    rgba(255, 255, 255, 0.05)
+            );
-                );
-            }
         }
 
         .track-item.phantom.selected {
@@ -1400,19 +1392,6 @@ export class PlaylistDetails
             );
         }
 
-        /* The press state (#54): the feedback a tap has now that the
-           web view's own highlight box is gone (index.css). Last, and
-           carrying a class, because a selected or playing row is two
-           classes deep and a bare :active would lose to it. */
-        .track-item.selected:active,
-        .track-item.active:active,
-        .track-item:active {
-            background-color: var(
-                --yj-press-overlay,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .phantom-row {
             grid-column: 1 / -1;
             display: flex;

frontend/src/components/queue-panel/queue-panel.ts

@@ -581,14 +581,8 @@ export class QueuePanel
             contain: strict;
         }
 
-        /* A hover tint is for a device that hovers (#54). A hold
+        .track-item:hover {
-           synthesises a hover in the WebView, so ungated this arrives
+            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-           because a finger touched the row and stays after it has
-           gone; the press state below is what a tap gets instead. */
-        @media (hover: hover) and (pointer: fine) {
-            .track-item:hover {
-                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-            }
         }
 
         .track-item.selected {
@@ -603,19 +597,6 @@ export class QueuePanel
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
-        /* The press state (#54): the feedback a tap has now that the
-           web view's own highlight box is gone (index.css). Last, and
-           carrying a class, because a selected or playing row is two
-           classes deep and a bare :active would lose to it. */
-        .track-item.selected:active,
-        .track-item.active:active,
-        .track-item:active {
-            background-color: var(
-                --yj-press-overlay,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .track-position {
             font-size: var(--yj-text-sm);
             color: var(--yj-text-tertiary, #888);
@@ -2201,25 +2182,11 @@ export class QueuePanel
                             `
                             : nothing}
                     </div>
-                    <!-- **Every action here is named by aria-label**, like
-                         the close button #24 added beside them (#170). A
-                         title alone *is* a name, which is why a sweep for
-                         empty names reports these clean and why an
-                         assertion by role and name is green either way --
-                         but it is the weakest one: title is the last
-                         fallback in the accname order, so any content put
-                         inside the button later silently outranks it, and
-                         a phone has no hover to show it as a tooltip.
-
-                         The titles stay. On a desktop they are the tooltip
-                         for an icon-only control, which is a different job
-                         from naming it, and aria-label does not do it. -->
                     <div class="header-actions">
                         <button
                             class="header-action-button"
                             @click=${() => void this.handleClearQueue()}
                             ?disabled=${tracks.length === 0}
-                            aria-label="Clear queue"
                             title="Clear queue"
                         >
                             <wa-icon
@@ -2230,7 +2197,6 @@ export class QueuePanel
                             class="header-action-button add-to-playlist-button"
                             @click=${this.handleAddToPlaylist}
                             ?disabled=${tracks.length === 0}
-                            aria-label="Add queue to playlist"
                             title="Add queue to playlist"
                         >
                             <wa-icon

frontend/src/components/sidebar/app-sidebar.ts

@@ -42,26 +42,6 @@ export class AppSidebar extends LitElement {
             scrollbar-width: thin;
         }
 
-        /* A host that has made room owns the box, not just the labels
-           (#71). The bottom-nav sheet is the width of the screen and
-           provides the one scroll container it needs; left to itself
-           the sidebar is a 200px column with a second scroller inside
-           it, which is what a nested scroll region feels like under a
-           thumb -- part of the surface moves and part of it does not. */
-        :host([expanded]) {
-            max-width: none;
-            height: auto;
-            overflow: visible;
-        }
-
-        /* And the width is not draggable there. It is a mouse
-           affordance (mousedown, col-resize) sitting on the right edge
-           of a touch surface, where the compatibility mouse events a
-           tap synthesises can start a resize nobody asked for. */
-        :host([expanded]) .resize-handle {
-            display: none;
-        }
-
         .resize-handle {
             position: absolute;
             top: 0;
@@ -115,15 +95,8 @@ export class AppSidebar extends LitElement {
             text-align: center;
         }
 
-        /* A hover tint is for a device that hovers (#54), and this
+        li button:hover {
-           component is on a phone too: below 600px it is what
+            background-color: var(--yj-bg-elevated, #343a40);
-           bottom-nav's "More" sheet mounts, where a hold
-           synthesises a hover and leaves a destination looking picked
-           after the finger has gone. */
-        @media (hover: hover) and (pointer: fine) {
-            li button:hover {
-                background-color: var(--yj-bg-elevated, #343a40);
-            }
         }
 
         li button:focus-visible {
@@ -135,14 +108,6 @@ export class AppSidebar extends LitElement {
             background-color: var(--yj-bg-overlay, #495057);
         }
 
-        /* The press state (#54), after the .active rule and at the same
-           specificity, so pressing the destination you are already on
-           still says something. It is what a tap gets now that
-           index.css has taken the web view's own highlight box away. */
-        li button:active {
-            background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
-        }
-
         li button p {
             margin: 0;
             white-space: nowrap;
@@ -180,25 +145,6 @@ export class AppSidebar extends LitElement {
         :host(.collapsed) li button wa-icon {
             font-size: var(--yj-icon-md);
         }
-
-        /* Below 600px the only place this renders is the bottom-nav
-           sheet -- the shell's own copy is display: none there -- so
-           the rows are sized for the thumb that opened it: 48px, which
-           is #186's floor and the height every row in #60's context
-           sheet already has. A media query inside a shadow root is
-           answered by the viewport, so the component states this
-           itself rather than the sheet reaching in. */
-        @media (max-width: 599px) {
-            ul {
-                padding: 4px 8px 8px;
-            }
-
-            li button {
-                min-height: 48px;
-                padding: 12px 10px;
-                gap: 14px;
-            }
-        }
     `];
 
     /** Delay in ms before a drag-hover triggers navigation. */
@@ -227,14 +173,11 @@ export class AppSidebar extends LitElement {
 
     /**
      * Keep the labels regardless of the viewport, for a host that has
-     * made room for them -- `bottom-nav`'s sheet, which is the whole
+     * made room for them -- `bottom-nav`'s drawer, which is the whole
      * screen wide on the phone where this would otherwise auto-collapse
      * to icons. The auto-collapse is a *width* response to a narrow
-     * shell, and inside a sheet the shell is not what the sidebar is
+     * shell, and inside a drawer the shell is not what the sidebar is
      * sharing space with.
-     *
-     * It says the host owns the *box*, not only the labels: the width,
-     * the scrolling and the resize handle all follow it (#71).
      */
     @property({ type: Boolean, reflect: true })
     expanded = false;
@@ -407,18 +350,9 @@ export class AppSidebar extends LitElement {
      * be a media query in the stylesheet.
      */
     private applyViewportWidth() {
-        // A host that made room decides how much: `bottom-nav`'s sheet
+        const narrow =
-        // is the whole screen wide, and the inline width below -- which
+            !this.expanded &&
-        // beats any rule the host could write -- would draw the old
+            (this.narrowViewport?.matches ?? false);
-        // 200px side drawer inside it.
-        if (this.expanded) {
-            this.style.width = '100%';
-            this.collapsed = false;
-
-            return;
-        }
-
-        const narrow = this.narrowViewport?.matches ?? false;
         const width = narrow
             ? MIN_WIDTH
             : this.userWidth;

frontend/src/components/smart-playlist-details/smart-playlist-details.ts

@@ -516,14 +516,8 @@ export class SmartPlaylistDetails
             user-select: none;
         }
 
-        /* A hover tint is for a device that hovers (#54). A hold
+        .track-item:hover {
-           synthesises a hover in the WebView, so ungated this arrives
+            background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-           because a finger touched the row and stays after it has
-           gone; the press state below is what a tap gets instead. */
-        @media (hover: hover) and (pointer: fine) {
-            .track-item:hover {
-                background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-            }
         }
 
         .track-item.selected {
@@ -539,19 +533,6 @@ export class SmartPlaylistDetails
             background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
         }
 
-        /* The press state (#54): the feedback a tap has now that the
-           web view's own highlight box is gone (index.css). Last, and
-           carrying a class, because a selected or playing row is two
-           classes deep and a bare :active would lose to it. */
-        .track-item.selected:active,
-        .track-item.active:active,
-        .track-item:active {
-            background-color: var(
-                --yj-press-overlay,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         /* Phantom rows span the full grid */
         .track-item.phantom {
             display: grid;

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

@@ -1201,16 +1201,8 @@ export class TrackList
       padding-left: 6px;
     }
 
-    /* A hover tint is for a device that hovers (#54): a hold
+    .track-row:hover {
-       synthesises a hover in the WebView, so ungated this is a
+      background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-       highlight that arrives because a finger touched the row and
-       then stays there after it has gone -- which reads as a
-       selection the user did not make. Same gate, and the same
-       mechanism, as #68's revealed controls. */
-    @media (hover: hover) and (pointer: fine) {
-      .track-row:hover {
-        background-color: var(--yj-hover-overlay, rgba(255, 255, 255, 0.05));
-      }
     }
 
     .track-row.selected {
@@ -1247,23 +1239,6 @@ export class TrackList
       background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
     }
 
-    /* The press state (#54), and the only feedback a tap has now that
-       the web view's tap highlight is gone (index.css).
-
-       **Last, and as specific as the state rules above**: a row that
-       is selected and playing is .track-row.selected.active, so a
-       bare .track-row:active is one class short of it and a press
-       on the row a phone is most likely to press -- the one it just
-       selected -- would show nothing. Instant rather than
-       transitioned, because the only measured statement here about
-       transitions on a list is that two card grids removed theirs
-       for software-rendering repaint cost. */
-    .track-row.selected:active,
-    .track-row.active:active,
-    .track-row:active {
-      background-color: var(--yj-press-overlay, rgba(255, 255, 255, 0.12));
-    }
-
 
     .cell {
       overflow: hidden;

frontend/src/store/theme-store.ts

@@ -46,17 +46,6 @@ export interface ShadePalette {
     border: string;
     borderSubtle: string;
     hoverOverlay: string;
-    /**
-     * The tint a surface takes while it is being pressed (#54).
-     *
-     * Separate from `hoverOverlay` because the two answer different
-     * questions and only one of them a phone can ask: a hover is a
-     * pointer resting somewhere, a press is a finger on the thing it
-     * is about to activate. It is deliberately the stronger of the
-     * two — a press that reads the same as a hover says nothing on a
-     * device where the hover is synthesised by the press itself.
-     */
-    pressOverlay: string;
     selectionBg: string;
 }
 
@@ -106,7 +95,6 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#333333',
         borderSubtle: '#222222',
         hoverOverlay: 'rgba(255, 255, 255, 0.05)',
-        pressOverlay: 'rgba(255, 255, 255, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
     dark: {
@@ -126,7 +114,6 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#444444',
         borderSubtle: '#333333',
         hoverOverlay: 'rgba(255, 255, 255, 0.05)',
-        pressOverlay: 'rgba(255, 255, 255, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
     light: {
@@ -146,7 +133,6 @@ export const SHADE_PALETTES: Record<BackgroundShade, ShadePalette> = {
         border: '#ced4da',
         borderSubtle: '#dee2e6',
         hoverOverlay: 'rgba(0, 0, 0, 0.05)',
-        pressOverlay: 'rgba(0, 0, 0, 0.12)',
         selectionBg: 'rgba(100, 160, 255, 0.15)',
     },
 };
@@ -299,7 +285,6 @@ function deriveThemeVariables(
 
         // Interactive overlays
         '--yj-hover-overlay': palette.hoverOverlay,
-        '--yj-press-overlay': palette.pressOverlay,
         '--yj-selection-bg': palette.selectionBg,
 
         // Semantic *fills* — the background of a solid button or badge.

frontend/src/utils/context-menu-controller.ts

@@ -710,35 +710,10 @@ export const contextMenuStyles = css`
         font-size: 13px;
     }
 
-    /* A hover tint is for a device that hovers (#54).
+    .context-menu-panel wa-dropdown-item:hover {
-
-       Below the query is a phone, where a hold *synthesises* a hover
-       in the WebView -- the same mechanism #68 gates the revealed
-       controls on -- so an ungated tint is a highlight that arrives
-       because a finger touched the row and then stays on it after the
-       finger has gone. Which is indistinguishable from the press
-       state below, and outlives it. */
-    @media (hover: hover) and (pointer: fine) {
-        .context-menu-panel wa-dropdown-item:hover {
-            background-color: var(
-                --yj-hover-overlay,
-                rgba(255, 255, 255, 0.1)
-            );
-        }
-    }
-
-    /* And a press state is for every device, because it is the one
-       piece of feedback a tap has now that the web view's own
-       highlight box is gone (index.css). Stronger than the hover tint
-       on purpose, and instant rather than transitioned: the only
-       measured statement this repo has about transitions on these
-       surfaces is the two card grids that removed theirs because
-       software rendering repaints per frame, and the phone is not
-       something this session can measure. */
-    .context-menu-panel wa-dropdown-item:active {
         background-color: var(
-            --yj-press-overlay,
+            --yj-hover-overlay,
-            rgba(255, 255, 255, 0.12)
+            rgba(255, 255, 255, 0.1)
         );
     }
 

frontend/src/utils/image-prefetch.ts

@@ -1,156 +0,0 @@
-/**
- * Warm the browser's image cache for the cards a scroll is about to
- * reach.
- *
- * #65: album art pops in while scrolling. The rule this app already
- * follows is that a row image is `loading="lazy" decoding="async"` and
- * draws the smallest adequate tier, and both halves are in place —
- * `cover-grid.getCoverUrl()` and `artists-view`'s avatar both pick
- * `_sm`/`_md`/`_lg` from the card size and the device pixel ratio. What
- * is left is *when* the fetch starts: the grids are virtualized, so the
- * `<img>` does not exist at all until the virtualizer decides to render
- * its card, and only then can the browser ask for anything.
- *
- * The issue's Direction asks for a larger overscan, and that is not
- * available: `@lit-labs/virtualizer`'s `_overhang` is a hard-coded
- * 1000px `protected` field on `BaseLayout` with no configuration
- * surface, so raising it means monkey-patching a private. 1000px is
- * about two screens on the reference device's 439px viewport, which is
- * a fraction of a second at speed.
- *
- * So the request is issued ahead of the element instead. Cover art and
- * artist images are plain URLs served by `coverart.Handler` /
- * `explore`'s image handler under `Cache-Control: public,
- * max-age=31536000, immutable` — the filenames are content hashes — so
- * a prefetched image is a cache hit by the time the card is drawn, and
- * a second pass over the same rows costs nothing at all.
- *
- * Three things about it are load-bearing.
- *
- * **This is not the `LRUMap` path the issue's Findings warn about.**
- * That ceiling (`ARTIST_IMAGE_CACHE_LIMIT` and friends) bounds
- * Explore's base64 data URLs, which are held in JS. A library cover is
- * a URL, and what retains the bytes is the browser's own HTTP cache,
- * which evicts on its own terms. What this module retains is the *set
- * of URLs already asked for*, which is why that set has a cap and
- * reports itself to `window.__yjCacheStats()` — the measurement the
- * issue asks for.
- *
- * **A window is warmed on both sides of the rendered range.** The
- * event carries no direction, and scrolling back up needs the same
- * treatment; the rows behind are already in `requested` from the pass
- * that rendered them, so the backward half issues nothing in the
- * common case and is free.
- *
- * **An in-flight image is held.** `new Image().src = url` and drop it
- * is the usual idiom and usually survives, but "usually" is an engine
- * detail and the engine that matters here is a two-year-old WebView.
- * The element is kept until it loads or fails, and no longer — nothing
- * here holds a decoded bitmap on purpose.
- */
-
-import { registerCacheProbe } from './cache-stats.js';
-import { LRUMap } from './lru-map.js';
-
-/**
- * How many entries past each edge of the rendered range to warm.
- *
- * Entries rather than pixels, because that is what the event reports
- * and what the caller has an array of. Twelve rows on the phone's
- * two-column grid and four on a desktop's six, on top of the
- * virtualizer's own 1000px — enough to cover a flick, and bounded so a
- * fast scroll through 5 000 albums cannot ask for 5 000 covers.
- */
-export const PREFETCH_AHEAD = 24;
-
-/** Ceiling on the record of what has already been asked for. */
-export const PREFETCH_MEMORY = 512;
-
-/** URLs already requested; the value is a placeholder, the key is the record. */
-const requested = new LRUMap<string, true>(PREFETCH_MEMORY);
-
-/** Images still loading, held so the request cannot be collected. */
-const inFlight = new Set<HTMLImageElement>();
-
-registerCacheProbe('imagePrefetch', () => {
-    let chars = 0;
-
-    for (const url of requested.keys()) chars += url.length;
-
-    return { entries: requested.size, chars, limit: PREFETCH_MEMORY };
-});
-
-/** Whether this URL has already been asked for. */
-export function imagePrefetched(url: string): boolean {
-    return requested.has(url);
-}
-
-/**
- * Ask the browser for `url` unless it has already been asked for.
- * Returns whether a request was issued.
- */
-export function prefetchImage(url: string): boolean {
-    if (!url || requested.has(url)) return false;
-
-    requested.set(url, true);
-
-    const img = new Image();
-
-    inFlight.add(img);
-
-    const done = () => {
-        inFlight.delete(img);
-    };
-
-    img.addEventListener('load', done, { once: true });
-    img.addEventListener('error', done, { once: true });
-    img.decoding = 'async';
-    img.src = url;
-
-    return true;
-}
-
-/**
- * Warm the images either side of a virtualizer's rendered range.
- *
- * `first`/`last` are the indices the `visibilityChanged` event
- * reported; `urlOf` returns the image the card at that index will
- * draw, or `''` where it draws a placeholder. Returns how many
- * requests were issued, which is what a test can assert on and what
- * makes "a second run does approximately nothing" checkable.
- */
-export function prefetchImageWindow<T>(
-    items: readonly T[],
-    first: number,
-    last: number,
-    urlOf: (item: T) => string,
-    ahead: number = PREFETCH_AHEAD,
-): number {
-    if (items.length === 0 || first < 0 || last < first) return 0;
-
-    const from = Math.max(0, first - ahead);
-    const to = Math.min(items.length - 1, last + ahead);
-    let issued = 0;
-
-    // Forward first: it is the direction a scroll is usually going, so
-    // it is the half that has to win the race.
-    for (let i = last + 1; i <= to; i++) {
-        const item = items[i];
-
-        if (item !== undefined && prefetchImage(urlOf(item))) issued++;
-    }
-
-    for (let i = from; i < first; i++) {
-        const item = items[i];
-
-        if (item !== undefined && prefetchImage(urlOf(item))) issued++;
-    }
-
-    return issued;
-}
-
-/** Forget what has been asked for. For tests; the app never needs it. */
-export function resetImagePrefetch(): void {
-    requested.clear();
-    inFlight.clear();
-}

frontend/test/components/art-prefetch.test.ts

@@ -1,190 +0,0 @@
-/**
- * The grids ask for the art below the fold before the card exists
- * (#65).
- *
- * Reported as "scrolling through albums, the art pops in". The cards
- * already draw the smallest adequate tier and are already
- * `loading="lazy"`, so what was left is *when*: `<lit-virtualizer>`
- * renders about 1000px past the viewport and the `<img>` — and
- * therefore the request — does not exist until it does. On the
- * reference device that is about two screens.
- *
- * These assert the mechanism, since no tier here can photograph a
- * pop-in: that the rows past the rendered range are requested, that
- * the request is for the same tier the card will draw, and that the
- * window has an end — an unbounded prefetch of a 5 000-album library
- * is the failure this trades against.
- *
- * What is *not* asserted here is that a rendered card was never
- * prefetched. It often was, honestly: the grid lays out more than once
- * on mount, so a row warmed by the first pass is drawn by the second,
- * which is the whole point. The rule that a single pass skips its own
- * rendered range is `image-prefetch.test.ts`'s, where one call can be
- * looked at on its own.
- */
-import { describe, expect, it, beforeEach } from 'vitest';
-import type { LitElement } from 'lit';
-
-import '@components/cover-grid/cover-grid';
-import '@components/artists-view/artists-view';
-import { emit, stub, flush, resetHarness } from '@test/support/harness';
-import { Events } from '../../src/events';
-import { fixture, shadowAll } from '@test/support/render';
-import {
-  PREFETCH_AHEAD,
-  imagePrefetched,
-  resetImagePrefetch,
-} from '@utils/image-prefetch';
-
-/** Enough albums that the virtualizer's own window is nowhere near the end. */
-const ALBUMS = Array.from({ length: 400 }, (_, i) => {
-  const n = String(i + 1).padStart(4, '0');
-
-  return {
-    ID: i + 1,
-    Name: `Album ${n}`,
-    ArtistName: 'Aurora Fields',
-    Year: 2020,
-    CoverArtPath: `/covers/${n}.jpg`,
-    CoverArtSmall: `/covers/${n}_sm.jpg`,
-    CoverArtMedium: `/covers/${n}_md.jpg`,
-    CoverArtLarge: `/covers/${n}_lg.jpg`,
-  };
-});
-
-const ARTISTS = Array.from({ length: 400 }, (_, i) => {
-  const n = String(i + 1).padStart(4, '0');
-
-  return {
-    ID: i + 1,
-    Name: `Artist ${n}`,
-    AlbumCount: 2,
-    TrackCount: 9,
-    ImageSmall: `/artists/${n}_sm.jpg`,
-    ImageMedium: `/artists/${n}_md.jpg`,
-    ImageLarge: `/artists/${n}_lg.jpg`,
-  };
-});
-
-/** 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, 200));
-}
-
-/** The `src` of every card the grid actually rendered. */
-function renderedSources(el: LitElement, selector: string): string[] {
-  return shadowAll(el, selector)
-    .map((img) => (img as HTMLImageElement).getAttribute('src') ?? '')
-    .filter(Boolean);
-}
-
-/**
- * The last index the virtualizer has rendered, read off the cards
- * rather than counted: the rendered range is what the prefetch window
- * is measured from, and a count assumes it starts at 0 and has no
- * gaps.
- */
-function lastRenderedIndex(el: LitElement, selector: string): number {
-  const indices = shadowAll(el, selector).map((card) =>
-    Number(card.getAttribute('data-index')),
-  );
-
-  return Math.max(...indices);
-}
-
-/**
- * The tier the cards chose, read off a rendered card rather than
- * recomputed — the point of the assertion is that the prefetch and the
- * card agree, so deriving both from the same ladder here would prove
- * nothing.
- */
-function tierSuffix(src: string): string {
-  const m = /_(sm|md|lg)\.jpg$/.exec(src);
-
-  return m ? `_${m[1]}` : '';
-}
-
-beforeEach(() => {
-  resetHarness();
-  resetImagePrefetch();
-  localStorage.clear();
-  stub('library.Library.GetAlbums', ALBUMS);
-  stub('library.Library.GetArtists', ARTISTS);
-  stub('library.Library.GetTracks', []);
-  stub('library.Library.GetGenres', []);
-  emit(Events.LibraryScanComplete);
-});
-
-describe('the albums grid warms the covers below the fold', () => {
-  it('asks for the covers past the rendered range, in the tier the card draws', async () => {
-    const el = await fixture<LitElement>('cover-grid');
-
-    sized(el);
-    await settle(el);
-
-    const rendered = renderedSources(el, 'img.cover-image');
-
-    expect(rendered.length).toBeGreaterThan(0);
-
-    const tier = tierSuffix(rendered[0]!);
-    const url = (index: number) =>
-      `/covers/${String(index + 1).padStart(4, '0')}${tier}.jpg`;
-
-    // The grid starts at the top and never scrolls here, so the whole
-    // window lies past the last card drawn.
-    const last = lastRenderedIndex(el, '.album-card');
-
-    expect(imagePrefetched(url(last + 1))).toBe(true);
-    expect(imagePrefetched(url(last + PREFETCH_AHEAD))).toBe(true);
-  });
-
-  it('stops at the end of the window rather than warming the library', async () => {
-    const el = await fixture<LitElement>('cover-grid');
-
-    sized(el);
-    await settle(el);
-
-    const rendered = renderedSources(el, 'img.cover-image');
-    const tier = tierSuffix(rendered[0]!);
-    const url = (index: number) =>
-      `/covers/${String(index + 1).padStart(4, '0')}${tier}.jpg`;
-
-    // Not "exactly `last + PREFETCH_AHEAD`": the grid lays out more
-    // than once on mount and each pass warms a window from wherever
-    // the rendered range was then, so the reachable set is a few
-    // windows wide. The property that matters is that it is a window
-    // at all rather than the library.
-    expect(imagePrefetched(url(399))).toBe(false);
-    expect(window.__yjCacheStats?.()['imagePrefetch']?.entries ?? 0)
-      .toBeLessThan(ALBUMS.length / 2);
-  });
-});
-
-describe('the artists grid warms its avatars the same way', () => {
-  it('asks for the avatars past the rendered range', async () => {
-    const el = await fixture<LitElement>('artists-view');
-
-    sized(el);
-    await settle(el);
-
-    const rendered = renderedSources(el, 'img.avatar-image');
-
-    expect(rendered.length).toBeGreaterThan(0);
-
-    const tier = tierSuffix(rendered[0]!);
-    const last = lastRenderedIndex(el, '.artist-card');
-    const url = (index: number) =>
-      `/artists/${String(index + 1).padStart(4, '0')}${tier}.jpg`;
-
-    expect(imagePrefetched(url(last + 1))).toBe(true);
-    expect(imagePrefetched(url(399))).toBe(false);
-  });
-});

frontend/test/components/bottom-nav.test.ts

@@ -193,119 +193,4 @@ describe('bottom-nav', () => {
     expect(shadow<HTMLElement>(el, 'app-sidebar')?.hasAttribute('expanded'))
       .toBe(true);
   });
-
-  it('draws "More" as a sheet rising from the bottom', async () => {
-    const el = await fixture<Nav>('bottom-nav');
-    const drawer = shadow<HTMLElement>(el, 'wa-drawer');
-
-    // #71. A side drawer is a desktop shape: it opened away from the
-    // thumb that asked for it and drew a 200px column of a 424px
-    // screen. `placement` is the whole of the change to *where* it
-    // comes from, and `without-header` is what makes it the same sheet
-    // `menu-surface` draws rather than a second pattern with a title
-    // bar and a close button.
-    expect(drawer?.getAttribute('placement')).toBe('bottom');
-    expect(drawer?.hasAttribute('without-header')).toBe(true);
-
-    // Named all the same: `nameDialog`'s documented aria-label path,
-    // since without-header renders no heading to point at.
-    expect(drawer?.getAttribute('label')).toBe('All views');
-  });
-
-  it('leaves exactly one scroll container, and it is the sheet body', async () => {
-    const el = await fixture<Nav>('bottom-nav');
-    const drawer = shadow<HTMLElement & { open: boolean }>(el, 'wa-drawer');
-
-    if (!drawer) throw new Error('no drawer');
-
-    const shown = once(drawer, 'wa-after-show');
-
-    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
-    await shown;
-    await update(el, {});
-
-    // The report is "only part of the screen scrolls under my finger",
-    // and the cause is three boxes that each scroll: the dialog, its
-    // body, and the sidebar's own overflow-y host. Which one a drag
-    // moves depends on where the finger landed.
-    const dialog = drawer.shadowRoot?.querySelector('[part~="dialog"]');
-    const body = drawer.shadowRoot?.querySelector('[part~="body"]');
-    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
-
-    if (!dialog || !body || !sidebar) throw new Error('no sheet');
-
-    expect(getComputedStyle(dialog).overflowY).toBe('hidden');
-    expect(getComputedStyle(body).overflowY).toBe('auto');
-    expect(getComputedStyle(sidebar).overflowY).toBe('visible');
-
-    // And the one that does scroll keeps it to itself, or reaching the
-    // end of the destinations scrolls the page behind the sheet.
-    expect(getComputedStyle(body).overscrollBehaviorY).toBe('contain');
-  });
-
-  it('gives the sheet the whole width, which the sidebar does not take', async () => {
-    const el = await fixture<Nav>('bottom-nav');
-
-    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
-    await update(el, {});
-
-    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
-
-    if (!sidebar) throw new Error('no sidebar');
-
-    // `app-sidebar` writes an *inline* width and caps itself at 400px,
-    // which beats any rule this host could write — so "the host owns
-    // the box" has to be part of what `expanded` means, or the sheet
-    // draws the old 200px column inside a full-width surface.
-    expect(sidebar.style.width).toBe('100%');
-    expect(getComputedStyle(sidebar).maxWidth).toBe('none');
-  });
-
-  it('sizes the sheet rows for a thumb, below the phone breakpoint', async () => {
-    const el = await fixture<Nav>('bottom-nav');
-
-    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
-    await update(el, {});
-
-    const sidebar = shadow<HTMLElement>(el, 'app-sidebar');
-    const sheets = sidebar?.shadowRoot?.adoptedStyleSheets ?? [];
-    const phoneRules: string[] = [];
-
-    for (const sheet of sheets) {
-      for (const rule of Array.from(sheet.cssRules)) {
-        if (!(rule instanceof CSSMediaRule)) continue;
-
-        if (!/max-width:\s*599px/.test(rule.conditionText)) continue;
-
-        for (const inner of Array.from(rule.cssRules)) {
-          phoneRules.push(inner.cssText);
-        }
-      }
-    }
-
-    // Asserted against the parsed stylesheet, like
-    // `hover-affordance.test.ts` and for the same reason: this tier's
-    // iframe is not 599px wide, so the rule cannot be *rendered* here —
-    // but the regression worth catching is someone moving it out of the
-    // query, which nothing on a desktop draws differently.
-    expect(phoneRules.length).toBeGreaterThan(0);
-    expect(phoneRules.some((r) => /min-height:\s*48px/.test(r))).toBe(true);
-  });
-
-  it('takes the resize handle out of the sheet', async () => {
-    const el = await fixture<Nav>('bottom-nav');
-
-    shadow<HTMLButtonElement>(el, '[data-testid="tab-more"]')?.click();
-    await update(el, {});
-
-    const handle = shadow<HTMLElement>(el, 'app-sidebar')
-      ?.shadowRoot?.querySelector('.resize-handle');
-
-    if (!handle) throw new Error('no resize handle');
-
-    // A col-resize strip on the right edge of a touch surface: the
-    // compatibility mouse events a tap synthesises reach its
-    // `mousedown`, so it can start a resize nobody asked for.
-    expect(getComputedStyle(handle).display).toBe('none');
-  });
 });

frontend/test/components/chrome.test.ts

@@ -137,11 +137,6 @@ describe('<app-sidebar>', () => {
   });
 
   it('looks the way it did last time', async () => {
-    // Stated rather than inherited: `activeViewStore` is a singleton, so
-    // without this the shot records whichever view the *previous* case
-    // left in it and the reference moves when the file is reordered.
-    activeViewStore.setView('home', true);
-
     const el = await fixture('app-sidebar');
 
     await visual(el, 'app-sidebar');

frontend/test/components/menu-surface.test.ts

@@ -206,56 +206,6 @@ describe('menu-surface', () => {
       expect(dismissed, 'no menu-dismiss reached the document').toBe(1);
     });
 
-    /**
-     * The scroll affordance (#207), and this is the mechanism again
-     * rather than the symptom.
-     *
-     * The sheet's body has scrolled since #60 and said nothing about
-     * it: measured at 424x439, eight items ended at y=470 with the
-     * fold at 439, and where the cut lands on a row boundary the sheet
-     * ends in a clean edge that reads as the end of the list.
-     *
-     * What makes the fade *conditional* — absent on a menu that fits,
-     * present the moment one does not, gone again at the end of the
-     * list — is `background-attachment`, not a scroll listener: a cover
-     * of the sheet's own colour is painted at the end of the content
-     * and attached `local`, over a shadow pinned to the box and
-     * attached `scroll`. So the pair of attachments *is* the feature,
-     * and it is what this asserts. The rendered result was measured in
-     * the harness (dark ramp 52,58,64 flat before; 52,57,63 at the last
-     * label and 22,24,27 at the bottom edge with more below; flat again
-     * at the end of the list) and is on the PR.
-     */
-    it('paints the fade only while there is more below', async () => {
-      const el = await surfaceWithPanel();
-
-      const wrapper = el.shadowRoot?.querySelector('wa-dialog');
-
-      await (wrapper as HTMLElement & { updateComplete: Promise<unknown> })
-        .updateComplete;
-
-      const body = wrapper?.shadowRoot?.querySelector('[part~="body"]');
-
-      expect(body, 'no body part to scroll').not.toBeNull();
-
-      const style = getComputedStyle(body as Element);
-
-      expect(style.overflowY, 'the body is what gives, not the cap').toBe(
-        'auto',
-      );
-
-      // The cover scrolls with the content; the shadow does not. Either
-      // one alone is a fade that is always there or never there.
-      expect(
-        style.backgroundAttachment,
-        'the cover must be local and the shadow must not',
-      ).toBe('local, scroll');
-
-      // Both sit at the bottom, or the cover hides nothing.
-      expect(style.backgroundPosition).toBe('50% 100%, 50% 100%');
-      expect(style.backgroundSize).toBe('100% 32px, 100% 32px');
-    });
-
     /**
      * A dialog with no accessible name is what `utils/name-dialog.ts`
      * exists for; here the name is already written on the panel, so no

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

@@ -366,16 +366,6 @@ describe('<now-playing>', () => {
     const el = await fixture('now-playing');
 
     emit(Events.TrackChanged, { ...TRACK, trackChangeId: 6 });
-    // Stated rather than inherited: the queue store is a singleton, so
-    // without this the shot records whichever source the *previous*
-    // case left in it and the reference moves when the file is
-    // reordered. Three lines is what the bar renders while playing
-    // from somewhere, which is the arrangement worth recording.
-    setQueue([queueTrack(1, 'Ashes to Ashes')], 0, {
-      type: 'album',
-      id: 7,
-      label: 'Scary Monsters',
-    });
     await flush();
     await el.updateComplete;
 

frontend/test/components/play-in-context.test.ts

@@ -161,15 +161,6 @@ describe('double-clicking a row in the track list', () => {
     localStorage.removeItem('track-list-column-widths');
 
     el = await fixture<LitElement>('track-list', { externalTracks: LIST });
-
-    // Say which order is being asserted rather than inheriting one.
-    // `restoreSortPreferences()` runs in `connectedCallback`, so the
-    // list opens in whatever sort was last persisted -- and
-    // `track-11` sorts before `track-3` by title, which is the shape
-    // of #138. The row below is the fixture's third track only while
-    // nothing is sorting the list.
-    (el as unknown as { sortField: string | null }).sortField = null;
-
     el.style.display = 'block';
     el.style.height = '600px';
     await flush();
@@ -181,10 +172,6 @@ describe('double-clicking a row in the track list', () => {
     const rows = shadowAll(el, '.track-row');
     const row = rows.find((r) => r.getAttribute('data-index') === '3');
 
-    // Stated first, so a list that is not in the order this asserts
-    // fails by saying so rather than as an off-by-eight file path.
-    expect(row?.getAttribute('data-file-path')).toBe('/music/track-3.mp3');
-
     dblclick(row!);
     await flush();
 

frontend/test/components/press-feedback.test.ts

@@ -1,191 +0,0 @@
-/**
- * What a tap looks like now that the web view's own highlight is gone
- * (#54).
- *
- * `index.css` sets `-webkit-tap-highlight-color: transparent` on
- * `html`, which — the property being inherited — reaches every shadow
- * root in the app. That takes away the grey box a phone drew over the
- * bounding rect of whatever was tapped, and with it the only touch
- * feedback the rows, the tab bar, the sidebar's destinations and the
- * shared menu items had. So the press states below are not decoration:
- * without them this change trades wrong feedback for none.
- *
- * **Asserted against the parsed stylesheet**, on `hover-affordance`'s
- * precedent and with the same limitation stated out loud: CDP's
- * `Emulation.setEmulatedMedia` does not reach this tier's iframe, so
- * there is no way here to render a component as a phone would, and
- * `:active` cannot be forced from a test either. What the browser will
- * answer is the shape it built from the `css` literal — which rule sits
- * inside which media query, and what the press selector actually is.
- *
- * Two regressions are worth catching that way, and both are silent on a
- * desktop:
- *
- * - someone hoisting a hover tint back out of its query as a tidy-up,
- *   which on a phone is a highlight that arrives because a finger
- *   touched the row and stays after it has gone;
- * - someone simplifying the press selector to a bare `:active`, which
- *   is one class short of `.selected` / `.active` and so does nothing
- *   on the row a phone is most likely to press — the one it has just
- *   selected.
- *
- * The pixels are the Android tier's, and the tap highlight itself is
- * `e2e/specs/native-touch-feel.spec.ts`, since only the real app loads
- * `index.css` at all.
- */
-import { describe, expect, it } from 'vitest';
-
-import '@components/track-list/track-list';
-import '@components/queue-panel/queue-panel';
-import '@components/playlist-details/playlist-details';
-import '@components/smart-playlist-details/smart-playlist-details';
-import '@components/bottom-nav/bottom-nav';
-import '@components/sidebar/app-sidebar';
-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;
-}
-
-/** The four lists, their row selector, and the tag that draws them. */
-const LISTS: Array<[string, string]> = [
-  ['track-list', '.track-row'],
-  ['queue-panel', '.track-item'],
-  ['playlist-details', '.track-item'],
-  ['smart-playlist-details', '.track-item'],
-];
-
-describe('a row says it is being pressed', () => {
-  for (const [tag, row] of LISTS) {
-    it(`${tag} draws a press state that survives its state classes`, async () => {
-      const el = await fixture(tag, {});
-      const rules = rulesOf(el);
-
-      // Worth nothing if it read no rules at all — the first assertion
-      // icon-language.test.ts makes, for the same reason.
-      expect(rules.length).toBeGreaterThan(0);
-
-      const press = rules.filter(
-        (r) => r.text.includes(`${row}:active`) && r.text.includes('background-color'),
-      );
-
-      expect(press.length).toBeGreaterThan(0);
-
-      for (const rule of press) {
-        // A press is not a hover: it is the one thing a touch device
-        // can say, so it must not sit behind a pointer query.
-        expect(rule.condition).toBeNull();
-        expect(rule.text).toContain('--yj-press-overlay');
-      }
-
-      // The load-bearing half: the selector carries a state class, or
-      // it loses to `.selected` / `.selected.active` and the press is
-      // invisible on a selected or playing row.
-      expect(press.some((r) => r.text.includes(`${row}.selected:active`))).toBe(true);
-    });
-
-    it(`${tag} keeps its hover tint for devices that hover`, async () => {
-      const el = await fixture(tag, {});
-      const rules = rulesOf(el);
-
-      expect(rules.length).toBeGreaterThan(0);
-
-      const hover = rules.filter(
-        (r) =>
-          r.text.includes(`${row}:hover`) &&
-          r.text.includes('--yj-hover-overlay'),
-      );
-
-      expect(hover.length).toBeGreaterThan(0);
-
-      for (const rule of hover) {
-        expect(rule.condition).toMatch(/hover:\s*hover/);
-        expect(rule.condition).toMatch(/pointer:\s*fine/);
-      }
-    });
-  }
-});
-
-describe('the two navigations say they are being pressed', () => {
-  it('the phone tab bar, which had no state of its own at all', async () => {
-    const el = await fixture('bottom-nav', {});
-    const rules = rulesOf(el);
-
-    expect(rules.length).toBeGreaterThan(0);
-
-    const press = rules.filter((r) => r.text.startsWith('button:active'));
-
-    expect(press.length).toBe(1);
-    expect(press[0]!.condition).toBeNull();
-    expect(press[0]!.text).toContain('--yj-press-overlay');
-  });
-
-  it("the sidebar, which is also the phone's More sheet", async () => {
-    const el = await fixture('app-sidebar', {});
-    const rules = rulesOf(el);
-
-    expect(rules.length).toBeGreaterThan(0);
-
-    const press = rules.filter((r) => r.text.startsWith('li button:active'));
-
-    expect(press.length).toBe(1);
-    expect(press[0]!.condition).toBeNull();
-    expect(press[0]!.text).toContain('--yj-press-overlay');
-
-    // Its hover tint is a destination looking picked, if it is left to
-    // a synthesised hover inside the More sheet.
-    const hover = rules.filter((r) => r.text.startsWith('li button:hover'));
-
-    expect(hover.length).toBeGreaterThan(0);
-
-    for (const rule of hover) {
-      expect(rule.condition).toMatch(/hover:\s*hover/);
-    }
-  });
-});
-
-describe('the shared context menu', () => {
-  // One stylesheet, fourteen menus — the same reason the sheet's row
-  // height lives there rather than in each host.
-  it('presses its items, in the one place every menu includes', async () => {
-    const el = await fixture('queue-panel', {});
-    const rules = rulesOf(el);
-
-    const press = rules.filter((r) =>
-      r.text.startsWith('.context-menu-panel wa-dropdown-item:active'),
-    );
-
-    expect(press.length).toBe(1);
-    expect(press[0]!.condition).toBeNull();
-    expect(press[0]!.text).toContain('--yj-press-overlay');
-
-    const hover = rules.filter((r) =>
-      r.text.startsWith('.context-menu-panel wa-dropdown-item:hover'),
-    );
-
-    expect(hover.length).toBeGreaterThan(0);
-
-    for (const rule of hover) {
-      expect(rule.condition).toMatch(/hover:\s*hover/);
-      expect(rule.condition).toMatch(/pointer:\s*fine/);
-    }
-  });
-});

frontend/test/setup.ts

@@ -72,23 +72,6 @@ document.body.style.margin = '0';
 
 beforeEach(() => {
   resetHarness();
-
-  // A test file does not get its own origin. `@vitest/browser-playwright`
-  // opens one BrowserContext per session and runs several files in it,
-  // one after another, so everything a component persists — the track
-  // list's sort and column widths, the cover size, `now-playing`'s
-  // scroll mode — is still there when the next file mounts the same
-  // component. That is invisible until it is intermittent, because
-  // which files share a tab and in what order changes run to run: it
-  // cost #138 three scheduled runs, one of them a PR with no frontend
-  // code in it at all.
-  //
-  // Clearing here rather than in the specs that write is deliberate —
-  // the spec that *reads* is never the one that knows. It is safe for
-  // the same reason the leak exists: files in a session are
-  // sequential, so this cannot wipe storage a concurrent file is in
-  // the middle of using.
-  localStorage.clear();
 });
 
 afterEach(() => {

frontend/test/support/pixel.svg

@@ -1,2 +0,0 @@
-<!-- A real, servable image for the prefetch tests: one transparent pixel. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>

frontend/test/utils/image-prefetch.test.ts

@@ -1,113 +0,0 @@
-/**
- * What the grids ask for ahead of the scroll (#65).
- *
- * The virtualizer renders about 1000px past its viewport and nothing
- * else can be asked for, because the `<img>` does not exist until the
- * card does — two screens on the reference device, which is a fraction
- * of a second at speed. `prefetchImageWindow` issues the request
- * before the element, so the assertions here are about *which* rows
- * are asked for, that none is asked for twice, and that a request is
- * really made rather than merely recorded.
- */
-import { describe, expect, it, beforeEach } from 'vitest';
-
-import {
-  PREFETCH_MEMORY,
-  imagePrefetched,
-  prefetchImage,
-  prefetchImageWindow,
-  resetImagePrefetch,
-} from '@utils/image-prefetch';
-
-/** A hundred cards, each with its own cover URL. */
-const CARDS = Array.from({ length: 100 }, (_, i) => ({ url: `/covers/${i}_sm.jpg` }));
-
-const urlOf = (card: { url: string }) => card.url;
-
-beforeEach(() => {
-  resetImagePrefetch();
-});
-
-describe('warming the images a scroll is about to reach', () => {
-  it('asks for the rows just past the rendered range, and no further', () => {
-    const issued = prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
-
-    // Three past each edge: 51-53 and 37-39.
-    expect(issued).toBe(6);
-    expect(imagePrefetched('/covers/51_sm.jpg')).toBe(true);
-    expect(imagePrefetched('/covers/53_sm.jpg')).toBe(true);
-    expect(imagePrefetched('/covers/54_sm.jpg')).toBe(false);
-    expect(imagePrefetched('/covers/39_sm.jpg')).toBe(true);
-    expect(imagePrefetched('/covers/37_sm.jpg')).toBe(true);
-    expect(imagePrefetched('/covers/36_sm.jpg')).toBe(false);
-  });
-
-  it('leaves the rendered rows alone — they have their own <img>', () => {
-    prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
-
-    expect(imagePrefetched('/covers/45_sm.jpg')).toBe(false);
-  });
-
-  it('asks for nothing twice, so a scroll back over the same rows is free', () => {
-    prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
-
-    expect(prefetchImageWindow(CARDS, 40, 50, urlOf, 3)).toBe(0);
-  });
-
-  it('clamps at both ends of the list', () => {
-    // At the top of a five-item list nothing precedes the range, and
-    // the tail runs out after two.
-    expect(prefetchImageWindow(CARDS.slice(0, 5), 0, 2, urlOf, 10)).toBe(2);
-  });
-
-  it('asks for nothing when the virtualizer reports an empty range', () => {
-    // `visibilityChanged` reports -1/-1 before anything is laid out.
-    expect(prefetchImageWindow(CARDS, -1, -1, urlOf)).toBe(0);
-  });
-
-  it('skips a card that draws a placeholder rather than an image', () => {
-    expect(prefetchImageWindow(CARDS, 40, 50, () => '', 3)).toBe(0);
-  });
-
-  it('really issues the request, rather than only recording it', async () => {
-    // A served file, so the load succeeds and the resource timing entry
-    // is unambiguous; the query string keeps it distinct per run.
-    const url = `/test/support/pixel.svg?prefetch=${Date.now()}`;
-    const href = new URL(url, location.href).href;
-
-    expect(prefetchImage(url)).toBe(true);
-
-    for (let i = 0; i < 100; i++) {
-      if (performance.getEntriesByName(href).length > 0) break;
-
-      await new Promise((r) => setTimeout(r, 20));
-    }
-
-    expect(performance.getEntriesByName(href)).toHaveLength(1);
-    expect(prefetchImage(url)).toBe(false);
-    expect(performance.getEntriesByName(href)).toHaveLength(1);
-  });
-
-  it('reports what it is holding, with its cap, to the cache stats', () => {
-    prefetchImageWindow(CARDS, 40, 50, urlOf, 3);
-
-    const stat = window.__yjCacheStats?.()['imagePrefetch'];
-
-    expect(stat).toBeTruthy();
-    expect(stat!.entries).toBe(6);
-    expect(stat!.limit).toBe(PREFETCH_MEMORY);
-    // It holds URLs, not images — the bytes are the browser's cache.
-    expect(stat!.chars).toBe(6 * '/covers/51_sm.jpg'.length);
-  });
-
-  it('keeps its record bounded, so a 50 000-album scroll cannot grow it', () => {
-    const many = Array.from(
-      { length: PREFETCH_MEMORY * 2 },
-      (_, i) => ({ url: `/covers/bulk-${i}_sm.jpg` }),
-    );
-
-    prefetchImageWindow(many, 0, 0, urlOf, many.length);
-
-    expect(window.__yjCacheStats?.()['imagePrefetch']?.entries).toBe(PREFETCH_MEMORY);
-  });
-});

internal/testfixtures/fixtures_test.go

@@ -30,6 +30,12 @@ func TestFixturesMatchManifest(t *testing.T) {
 	m := testfixtures.Load(t)
 
 	for _, want := range m.Tracks {
+		// WAV tags are write-only today; see
+		// TestWAVTagsAreNotReadableYet.
+		if want.Format == "wav" {
+			continue
+		}
+
 		t.Run(want.Path, func(t *testing.T) {
 			t.Parallel()
 
@@ -155,6 +161,39 @@ func TestDuplicateFixturesAreIndistinguishable(t *testing.T) {
 	}
 }
 
+// TestWAVTagsAreNotReadableYet pins a known gap rather than hiding it.
+//
+// backend/tagwriter writes WAV tags into a RIFF "id3 " chunk, but
+// backend/metadata reads through dhowden/tag, which recognises MP3,
+// FLAC, OGG, MP4 and DSF and has no RIFF parser at all.  So every tag
+// the app writes to a WAV is invisible to the app that wrote it, and
+// WAV tracks always scan in as untitled.
+//
+// The fixtures are tagged correctly on disk, so when the reader learns
+// to unwrap the RIFF chunk this test starts failing — which is the
+// point.  Delete it then and drop the "wav" skip in
+// TestFixturesMatchManifest.
+func TestWAVTagsAreNotReadableYet(t *testing.T) {
+	t.Parallel()
+
+	m := testfixtures.Load(t)
+
+	for _, path := range m.Case(t, testfixtures.CaseWAVTracks) {
+		got, err := metadata.ExtractTags(path)
+		if err != nil {
+			t.Fatalf("extract tags from %s: %v", path, err)
+		}
+
+		if got.Title != "" {
+			t.Errorf(
+				"%s: WAV tags are now readable (%q) — good news; "+
+					"see this test's comment for what to update",
+				filepath.Base(path), got.Title,
+			)
+		}
+	}
+}
+
 func assertTag(t *testing.T, field string, want testfixtures.Track, got string) {
 	t.Helper()