fix(page-header): collapse the actions that do not fit into a menu

Playlists slotted three buttons totalling 390px into a header that gets 700px at 900x600, so "New Smart Playlist" rendered 114 of its 162px with the queue closed, and 158 of 162 at the 800x600 enforced minimum. On a phone none of the three could be reached at all, which is what the Android report said. Plan 018's size matrix promises the opposite: no action is ever unreachable at any supported size. The header could not fix that for slotted markup, and that is a fact about the API rather than an effort estimate — a component cannot move another component's light-DOM children into a dropdown and keep their behaviour, and arbitrary markup offers nothing generic to render as a menu item. So a host passes `PageAction[]` and the header chooses the rendering; the slot survives for markup a data list cannot express, at the stated cost that a slotted action does not collapse. All three hosts that slot actions migrated, which also normalises the plain-<button>/<wa-button> split between them onto one shape the header styles — and lets it measure a button that has already upgraded, rather than a wa-button whose shadow DOM arrives in its own first update. Four things in it are load-bearing: - Every measuring pass starts from all-visible, so the collapsed set is a pure function of the current width and an action comes back when the window grows. It flips `hidden` imperatively rather than re-rendering between steps, or the intermediate state paints and the fix flashes the overflow it exists to prevent. - "Fits" means nothing is clipped, not that the header does not overflow. Once the title can ellipsis it absorbs the pressure and scrollWidth reports a perfect fit while the heading reads "Playlis…" — this bug moved from the button to the title, and invisible to the same measurement that missed it the first time. - New Playlist has the highest priority because it is the drop target and a closed menu cannot be one. `PageAction.drop` therefore carries the host's own handlers; the affordance is absent from the overflow rather than approximated there. - The overflow trigger is a named button with aria-expanded and an aria-controls naming a panel that is always in the DOM, and the keyboard model is the shared `MenuKeyboard`. `layout-overflow.spec.ts` passes on the broken build — it asserts the shell needs no sideways scrolling, and clipping inside a component is invisible to it, which is why this defect survived a spec named for it. The new spec measures each button against its own header at four viewports and asserts buttons plus menu account for every declared action, without which it would pass vacuously on a build rendering none. Closes #69
docs: record the page-header actions rule, and complete plan 018
2026-08-19 13:18:55 -04:00 · 2026-08-19 13:18:24 -04:00
24 changed files with 106 additions and 1206 deletions
@@ -3664,35 +3664,3 @@ knowing before someone "fixes" it as broken: sampled from screenshots at
 900×600, the main panel's background goes 33,37,41 → 18,20,23 and a
 row's text 242 → 133. It covers the content area only — not the sidebar
 or the transport — because the queue is not modal.
 ## No test tier can see a `hover:` media query (measured 2026-08-19)
 Gating an affordance on `(hover: hover) and (pointer: fine)` — #68's fix
 for the play button that flashed on a long-press — is invisible to both
 browser tiers, in *different* ways, and neither of them fails.
 - **`make ui-test`**: CDP's `Emulation.setEmulatedMedia` with a `hover`
  feature does not reach the tier's iframe. The call succeeds and
  `matchMedia('(hover: hover)')` still answers `true` afterwards. So
  there is no way to render a component as a phone would and read the
  computed style.
 - **`make e2e`**: both projects are desktop (`Desktop Chrome`,
  `Desktop Safari`), and the phone specs reach phone *width* with
  `setViewportSize`, which changes no media feature but `width`. So the
  phone specs run with `hover: hover` and the gate is never exercised.
 What does work, and what the fix was verified with, is a second browser
 context under a device descriptor: `chromium.newContext(devices['Pixel
 5'])` reports `hover=false pointer:fine=false` and the button computes
 `display: none`, against `flex` at 1440px. That is a one-off script, not
 a spec — `isMobile` is Chromium-only, so it cannot become an e2e project
 without losing the WebKit half.
 `hover-affordance.test.ts` therefore asserts the *parsed stylesheet* —
 that the reveal rule sits inside the media query — which catches the
 regression that actually threatens it: someone hoisting the rule back out
 as a tidy-up, a change nothing on a desktop renders differently.
 Related: a width-gated decision **is** testable at both tiers, which is
 why #61's phone mini player is a `matchMedia` stub in the component test
 and needs nothing special.
@@ -952,50 +952,6 @@ kept beside it, because two stacks is precisely how a view's own back
 button and the phone's gesture come to disagree about what one press
 means.
 **And there is one statement of which view is active**, for the same
 reason: `popstate` calls `handleNavigate()` directly and dispatches no
 `navigate`, so the two nav components — which learned the active view
 from that event — kept highlighting the view the user had just *left*.
 `store/active-view-store.ts` is the shell saying where the user is, and
 both navs read it through `ActiveViewController` rather than holding an
 `activeView` of their own.
 Four things about it are load-bearing.
 **"Please go to X" and "the active view is now X" are different
 statements**, and only the first existed — dispatched from 28 call
 sites across 18 files. A re-dispatch from inside `handleNavigate` is
 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" drawer
 creates its `<app-sidebar>` on open, and that copy had heard no
 `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
 from stays lit. `app-sidebar` did that by accident (it guarded on
 `navItems.some(...)`, so an unmatched name left its highlight alone)
 and `bottom-nav` had no such guard and so lit *nothing* — which is why
 one looked right and the other looked broken on the same screen.
 Whether a view is primary is the shell's fact: `view in VIEW_TAGS` is
 passed to `setView`, never re-derived, because a second copy of that
 list is a second thing to forget.
 **Nothing is lit until the shell has navigated.** The store starts
 empty rather than defaulting to `home`, which is what `app-sidebar`'s
 field used to do to match the landing view — a default that is correct
 only while `GetDefaultPage()` agrees with it.
 The assertion is `aria-current="page"`, in
 `e2e/specs/back-navigation.spec.ts`. That file existed throughout the
 bug, covered exactly these journeys, and asserted only
 `data-active-view` — the shell's own bookkeeping, which was right the
 whole way through — so it was green on the broken build. Same trap as
 `layout-overflow.spec.ts` and `page-header`: a spec named for the
 behaviour, measuring the plumbing.
 **A primary view is cached, not unmounted.** `index.ts` keeps every
 primary view in the DOM and toggles a `.view-hidden` class, because that
 is what preserves `scrollTop` across navigation — so
@@ -82,100 +82,6 @@ func TestPruneStaleLocalCrossReferences(t *testing.T) {
 	}
 }
 // TestPruneClearsInLibraryWithNoLocalID covers the fixed point: a row
 // carrying in_library with a NULL local_*_id.  The upsert's conflict
 // clause is `in_library = MAX(in_library, excluded.in_library)`, so it
 // can only ever raise the flag, and this pass used to be gated on the id
 // being present — which meant nothing in the app could clear such a row,
 // ever.  It is asserted for all three entity types because the gate was
 // written once and used three times, so a fix applied to one is a fix
 // that looks complete.
 //
 // The rows are seeded with raw SQL rather than through seedIndexResult
 // deliberately: upsertBatch writes a zero LocalArtistID as literal 0,
 // not NULL, and 0 satisfies `IS NOT NULL` — so the old gate already
 // caught that shape and a fixture built through the upsert cannot
 // reproduce this at all.  NULL is what the artifact importer and any
 // older writer leave behind, the column being nullable with no default.
 func TestPruneClearsInLibraryWithNoLocalID(t *testing.T) {
 	t.Parallel()
 	db := database.NewTestDB(t)
 	si := NewSearchIndex(db, nil, nil, slog.Default())
 	// A genuinely owned artist, to prove the wider gate does not simply
 	// clear everything it now looks at.
 	database.InsertTestTrack(t, db, database.TestTrack{
 		FilePath: "/music/owned.mp3",
 		Artist:   "Owned",
 	})
 	artist, err := db.Queries.GetArtistByName(t.Context(), "Owned")
 	if err != nil {
 		t.Fatalf("read seeded artist: %v", err)
 	}
 	seedIndexResult(t, db, SearchIndexResult{
 		EntityType:    EntityArtist,
 		MBID:          testMBID("owned"),
 		Title:         "Owned",
 		ArtistName:    "Owned",
 		ArtistMBID:    testMBID("owned"),
 		InLibrary:     true,
 		LocalArtistID: artist.ID,
 	})
 	orphans := []struct {
 		name       string
 		entityType string
 		mbid       string
 	}{
 		{"artist", EntityArtist, "orphan-artist"},
 		{"release group", EntityReleaseGroup, "orphan-release-group"},
 		{"recording", EntityRecording, "orphan-recording"},
 	}
 	for _, o := range orphans {
 		if _, err := db.ExecContext(
 			`INSERT INTO explore_index
 			     (entity_type, mbid, title, artist_name, artist_mbid,
 			      in_library,
 			      local_artist_id, local_release_group_id, local_recording_id)
 			 VALUES (?, ?, ?, ?, ?, 1, ?, ?, ?)`,
 			dbEntityType(o.entityType), dbMBID(testMBID(o.mbid)), o.name, o.name,
 			dbMBID(testMBID(o.mbid)),
 			nil, nil, nil,
 		); err != nil {
 			t.Fatalf("seed %s orphan: %v", o.name, err)
 		}
 	}
 	si.pruneStaleLocalCrossReferences()
 	inLibrary := func(t *testing.T, mbid string) int {
 		t.Helper()
 		var flag int
 		if err := db.QueryRowWriter(
 			"SELECT in_library FROM explore_index WHERE mbid = ?", dbMBID(mbid),
 		).Scan(&flag); err != nil {
 			t.Fatalf("read in_library for %q: %v", mbid, err)
 		}
 		return flag
 	}
 	for _, o := range orphans {
 		if got := inLibrary(t, testMBID(o.mbid)); got != 0 {
 			t.Errorf("%s with a NULL local id: in_library = %d, want 0", o.name, got)
 		}
 	}
 	if got := inLibrary(t, testMBID("owned")); got != 1 {
 		t.Errorf("owned artist: in_library = %d, want 1 (it still has a file)", got)
 	}
 }
 // TestUnenrichedLibraryArtistMBIDs_OrdersByOwnedTrackCount verifies the
 // backfill queue prioritizes artists by how many tracks the user actually
 // owns, not by how many duplicate-mbid artist rows happen to exist (the
@@ -2562,19 +2562,6 @@ func (si *SearchIndex) PopulateLocalCrossReferences() {
 // The row itself is left in place (it may still be part of the shipped
 // catalog, just no longer owned) — only the "this is mine" bookkeeping
 // is cleared.
 //
 // It is gated on the flag *or* the id, not on the id alone.  Gated on
 // the id, `in_library = 1 AND local_*_id IS NULL` is a fixed point: the
 // upsert can only ever raise the flag and this pass skipped such a row
 // by construction, so nothing in the app could clear it — a row claiming
 // to be owned, permanently, with no local row to check the claim
 // against.  Nothing in the tree writes that shape today
 // (collectLibraryEntities sets both together), which is exactly why it
 // is worth closing now: the exposure is a database written by an older
 // version, and the next writer that sets the flag without an id, which
 // nothing structurally prevents.  A NULL id fails the existence test on
 // its own, so the wider gate needs no second clause to say what "not
 // owned" means.
 func (si *SearchIndex) pruneStaleLocalCrossReferences() {
 	type prune struct {
 		entityType string
@@ -2607,8 +2594,7 @@ func (si *SearchIndex) pruneStaleLocalCrossReferences() {
 		result, err := si.db.ExecContext(
 			`UPDATE explore_index
 			 SET in_library = 0, `+p.column+` = NULL
-			 WHERE entity_type = ?
+			 WHERE entity_type = ? AND `+p.column+` IS NOT NULL
 			   AND (`+p.column+` IS NOT NULL OR in_library = 1)
 			   AND NOT EXISTS (`+p.exists+`)`,
 			dbEntityType(p.entityType),
 		)
@@ -15,49 +15,12 @@ import { test, expect } from '../support/fixtures.js';
 *
 * What it cannot answer is whether Android's *gesture* reaches the
 * WebView, which is between the OS and the scaffold.
 *
 * **And `data-active-view` is not the behaviour.** Every assertion here
 * used to be that attribute, which the shell sets on every path
 * including `_isBack` — so this file was green throughout #72, in
 * which both navs highlighted the view the user had just *left*. The
 * shell's own bookkeeping was the one thing that was already right;
 * what a person sees is `aria-current`, and that is asserted below as
 * well. This is the same trap `layout-overflow.spec.ts` set for #69: a
 * spec named for the behaviour, measuring the plumbing.
 */
 type Page = import('@playwright/test').Page;
 const activeView = (page: Page) =>
  page.getByTestId('main-content');
 /** A common phone, where the bottom bar is the primary navigation. */
 const PHONE = { width: 390, height: 844 };
 /**
 * The nav item for a destination, in whichever navigation is on screen.
 *
 * Both navs carry a button named `Albums`, and only one of them is ever
 * in the accessibility tree — the other is `display: none` — so the
 * role query resolves to the one the user can see at this viewport.
 * That is the point: the highlight has to be right in both, and #72 was
 * two different-looking symptoms of one cause.
 */
 const navItem = (page: Page, label: string) =>
  page.getByRole('button', { name: label, exact: true });
 /**
 * `aria-current="page"` is the accessible fact and the assertion worth
 * making; `.active` is a class and could be restyled without breaking
 * anything real.
 */
 async function expectHighlighted(page: Page, label: string): Promise<void> {
  await expect(navItem(page, label)).toHaveAttribute('aria-current', 'page');
 }
 async function expectNotHighlighted(page: Page, label: string): Promise<void> {
  await expect(navItem(page, label)).toHaveAttribute('aria-current', 'false');
 }
 /**
 * Open an artist's detail view, which is the deepest ordinary route.
 *
@@ -108,105 +71,6 @@ test.describe('the back gesture', () => {
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
  });
  test('leaves the nav highlighting the view it landed on, not the one it left', async ({
    app,
  }) => {
    await app.getByTestId('nav-albums').click();
    await expectHighlighted(app, 'Albums');
    await app.getByTestId('nav-tracks').click();
    await expectHighlighted(app, 'Tracks');
    await app.goBack();
    // #72, and the half of it the report did not describe: this is
    // desktop, and before the shell published the active view *both*
    // navs stayed on Tracks. An absent highlight reads as a glitch; a
    // confident wrong one is worse, and any back across two primary
    // views produced it.
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expectHighlighted(app, 'Albums');
    await expectNotHighlighted(app, 'Tracks');
  });
  test('keeps the parent destination lit while a detail view is open', async ({
    app,
  }) => {
    await app.getByTestId('nav-artists').click();
    await expectHighlighted(app, 'Artists');
    await openAnArtist(app);
    // A detail view is not a destination in either nav, and the user is
    // still inside Artists. `app-sidebar` did this by accident -- it
    // guarded on its own item list, so an unmatched name left the
    // highlight alone -- and that accident is why the sidebar looked
    // right on a detail view while the tab bar lit nothing. This test
    // therefore passed before the fix and is here to keep the rule from
    // being lost while the others are made to pass; the *tab bar's*
    // half of it is the phone test below, which did not.
    await expectHighlighted(app, 'Artists');
    await app.goBack();
    await expectHighlighted(app, 'Artists');
  });
  test('the tab bar survives the same journey on a phone', async ({ app }) => {
    await app.setViewportSize(PHONE);
    // The reported shape: Albums, open an album, press back. The tab
    // bar had a highlight, then no highlight at all, and never got it
    // back — `bottom-nav` took the detail view's name, matched it
    // against no tab, and lit nothing.
    await navItem(app, 'Albums').click();
    await expectHighlighted(app, 'Albums');
    await app.locator('cover-grid').getByText('Glass Harbour').first().click();
    await expect(activeView(app)).toHaveAttribute(
      'data-active-view',
      'explore-album-details',
    );
    await expectHighlighted(app, 'Albums');
    await app.goBack();
    await expect(activeView(app)).toHaveAttribute('data-active-view', 'albums');
    await expectHighlighted(app, 'Albums');
  });
  test('the drawer sidebar opens on the page you are standing on', async ({
    app,
  }) => {
    await app.setViewportSize(PHONE);
    await navItem(app, 'Tracks').click();
    await expectHighlighted(app, 'Tracks');
    // A third symptom of the same cause, found while measuring #72 and
    // not in the report: `bottom-nav` mounts its `<app-sidebar>` when
    // the drawer opens, so that copy had heard no `navigate` at all and
    // showed its own default — Home, from any page in the app. An event
    // has no answer for a listener that was not there; a store does.
    await navItem(app, 'More').click();
    // The element carrying the testid is the `wa-drawer` host, which
    // always reports hidden -- what is visible is the `<dialog>` in its
    // shadow root -- so the drawer being open is asserted of the
    // sidebar it holds rather than of itself.
    const drawer = app.getByTestId('nav-drawer');
    await expect(drawer.locator('app-sidebar')).toBeVisible();
    await expect(drawer.getByTestId('nav-tracks')).toHaveAttribute(
      'aria-current',
      'page',
    );
    await expect(drawer.getByTestId('nav-home')).toHaveAttribute(
      'aria-current',
      'false',
    );
  });
  test('an in-app back button consumes exactly one entry', async ({ app }) => {
    await app.getByTestId('nav-tracks').click();
    await openAnArtist(app);
@@ -40,7 +40,6 @@ import { setBasePath } from '@awesome.me/webawesome/dist/webawesome.js';
 import { registerBundledIcons } from './src/icons';
 import { queueStore } from '@store/queue-store';
 import { searchStore } from '@store/search-store';
 import { activeViewStore } from '@store/active-view-store';
 import * as Player from '@go/player/player.js';
 import * as Queue from '@go/queue/queue.js';
 import { GetDefaultPage } from '@go/config/config.js';
@@ -280,20 +279,6 @@ async function handleNavigate(
    // attribute keeps e2e selectors semantic instead of structural.
    mainContent.dataset.activeView = view;
    // And publishing it as a *value* is what the nav components read.
    // They used to learn the active view from the `navigate` event,
    // which only the outbound path dispatches -- so a back-navigation
    // left both of them highlighting the view it had just left (#72).
    // Re-dispatching `navigate` here is not the fix: this file is a
    // document listener for it, so that is an infinite loop, and
    // "please go to X" is not the statement being made.
    //
    // `view in VIEW_TAGS` is the primary/detail split, and it is passed
    // rather than re-derived because this table is where it is written
    // down.  A detail view therefore leaves the tab it was opened from
    // lit, which is what the report asks for.
    activeViewStore.setView(view, view in VIEW_TAGS);
    // --- Primary (cacheable) views ----------------------------------------
    if (view in VIEW_TAGS) {
        // Remove any active detail view first
@@ -7,7 +7,6 @@ import { designTokens } from '../../styles/tokens.css';
 import '../sidebar/app-sidebar.js';
 import { nameDialog } from '@utils/name-dialog';
 import { ICON_PLAYLIST } from '@utils/icon-language';
 import { ActiveViewController } from '@store/controllers/active-view-controller';
 type View = 'home' | 'albums' | 'tracks' | 'playlists';
@@ -115,19 +114,8 @@ export class BottomNav extends LitElement {
        }
    `];
-    /**
+    @state()
-     * Which tab is lit, read from the shell rather than tracked here.
+    private activeView = 'home';
     *
     * This was a `@state()` field set from the `navigate` event, which
     * only the outbound path dispatches -- so backing out of a detail
     * view left the highlight wherever it had been (#72). It had no
     * equivalent of `app-sidebar`'s `navItems.some(...)` guard either,
     * so a detail view set it to a name matching no tab and *nothing*
     * was lit; that asymmetry is why one nav looked broken and the
     * other looked fine. The store answers both: a detail view leaves
     * the tab it was opened from lit, in both components.
     */
    private activeCtrl = new ActiveViewController(this);
    /**
     * Whether the drawer has been asked for.
@@ -179,9 +167,12 @@ export class BottomNav extends LitElement {
        nameDialog(this.drawer);
    }
-    private onGlobalNavigate = () => {
+    private onGlobalNavigate = (e: Event) => {
        const detail = (e as CustomEvent<{ view?: string }>).detail;
        if (detail?.view) this.activeView = detail.view;
        // 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;
    };
@@ -215,11 +206,9 @@ export class BottomNav extends LitElement {
                        <li>
                            <button
                                type="button"
-                                class=${this.activeCtrl.isActive(tab.id)
+                                class=${this.activeView === tab.id ? 'active' : ''}
                                    ? 'active'
                                    : ''}
                                data-testid="tab-${tab.id}"
-                                aria-current=${this.activeCtrl.isActive(tab.id)
+                                aria-current=${this.activeView === tab.id
                                    ? 'page'
                                    : 'false'}
                                @click=${() => this.navigate(tab.id)}
@@ -161,52 +161,29 @@ export class HomeView extends ViewLifecycleMixin(LitElement) {
                user-select: none;
            }
            /*
             * The hover play button is a *hover* affordance, so it is
             * gated on the device having hover rather than on width.  A
             * touch long-press synthesises a hover state in the WebView,
             * so on a phone it flashed into view during the 500ms hold
             * that utils/long-press.ts is measuring for a context menu —
             * a control appearing because you were reaching for a
             * different one.  A phone user taps the album and plays from
             * the detail view, so there is nothing to replace it with.
             *
             * display:none outside the query rather than opacity:0 on
             * its own: an opacity-0 button still takes taps and is
             * still in the accessibility tree, so the invisible control
             * would keep the hit area it was never meant to have on
             * touch. Everything else stays inside, so the desktop
             * animation is unchanged.
             */
            .play {
-                display: none;
+                position: absolute;
                right: 8px;
                bottom: 8px;
                width: 38px;
                height: 38px;
                border: none;
                border-radius: 50%;
                background: var(--yj-accent, #ffd43b);
                color: var(--yj-accent-fg, #000);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                opacity: 0;
                transform: translateY(6px);
                transition: opacity 0.12s ease, transform 0.12s ease;
            }
-            @media (hover: hover) and (pointer: fine) {
+            .card:hover .play,
-                .play {
+            .card:focus-within .play {
-                    position: absolute;
+                opacity: 1;
-                    right: 8px;
+                transform: translateY(0);
                    bottom: 8px;
                    width: 38px;
                    height: 38px;
                    border: none;
                    border-radius: 50%;
                    background: var(--yj-accent, #ffd43b);
                    color: var(--yj-accent-fg, #000);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    opacity: 0;
                    transform: translateY(6px);
                    transition: opacity 0.12s ease, transform 0.12s ease;
                }
                .card:hover .play,
                .card:focus-within .play {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .name {
@@ -13,7 +13,6 @@ import {
    isQueueSourceNavigable,
    navigateToQueueSource,
 } from '@utils/queue-source-link';
 import { PHONE_QUERY } from '@utils/breakpoints';
 import { PlayerController } from '@store/controllers/player-controller';
 import { creditStore } from '@store/credit-store';
 import { QueueController } from '@store/controllers/queue-controller';
@@ -81,19 +80,6 @@ export class NowPlaying extends LitElement {
    private reduceMotionQuery?: MediaQueryList;
    /**
     * Phone width, from the shell's own breakpoint.
     *
     * This is in JS rather than in the stylesheet because what changes
     * is the *content*, not its appearance: the title, artist and
     * source render as plain text instead of as links, and no CSS rule
     * can take a click handler off an element.
     */
    @state()
    private phone = false;
    private phoneQuery?: MediaQueryList;
    /** Whether each field is actively mid-scroll (class toggle). */
    @state()
    private titleScrolling = false;
@@ -355,12 +341,6 @@ export class NowPlaying extends LitElement {
        this.reduceMotion = this.reduceMotionQuery?.matches ?? false;
        this.reduceMotionQuery?.addEventListener('change', this.handleReduceMotionChange);
        // Same reasoning as above: looked up here, not at module load,
        // so a test can install its own matchMedia first.
        this.phoneQuery = window.matchMedia?.(PHONE_QUERY);
        this.phone = this.phoneQuery?.matches ?? false;
        this.phoneQuery?.addEventListener('change', this.handlePhoneChange);
        this.resizeObserver = new ResizeObserver(() => {
            this.geometryDirty = true;
            this.requestUpdate();
@@ -384,7 +364,6 @@ export class NowPlaying extends LitElement {
        this.attachDragListeners(false);
        window.removeEventListener(SCROLL_CHANGE_EVENT, this.handleScrollModeEvent);
        this.reduceMotionQuery?.removeEventListener('change', this.handleReduceMotionChange);
        this.phoneQuery?.removeEventListener('change', this.handlePhoneChange);
        this.resizeObserver?.disconnect();
        this.stopScrollCycle('title');
        this.stopScrollCycle('artist');
@@ -509,7 +488,7 @@ export class NowPlaying extends LitElement {
              @mouseleave=${this.handleTitleMouseLeave}
              @transitionend=${() => this.onScrollCycleEnd('title')}
            >
-              <span class="scroll-content">${this.phone ? track.title : trackLink(track.title, track.album, track.releaseGroupMbid, track.recordingMbid) || track.title}</span>
+              <span class="scroll-content">${trackLink(track.title, track.album, track.releaseGroupMbid, track.recordingMbid) || track.title}</span>
            </span>
            <span
              class="track-artist ${artistScrolling ? 'will-scroll' : ''} ${this.artistScrolling ? 'scrolling' : ''}"
@@ -519,15 +498,14 @@ export class NowPlaying extends LitElement {
              @mouseleave=${this.handleArtistMouseLeave}
              @transitionend=${() => this.onScrollCycleEnd('artist')}
            >
-              <span class="scroll-content">${this.phone ? track.artist || 'Unknown Artist' : creditLink(creditStore.credits(track.recordingMbid), track.artist, track.artistMbid) || 'Unknown Artist'}</span>
+              <span class="scroll-content">${creditLink(creditStore.credits(track.recordingMbid), track.artist, track.artistMbid) || 'Unknown Artist'}</span>
            </span>
            ${describeQueueSource(this.queue.source)
                ? html`
                  <span
-                    class="track-source ${!this.phone && isQueueSourceNavigable(this.queue.source) ? 'navigable' : ''}"
+                    class="track-source ${isQueueSourceNavigable(this.queue.source) ? 'navigable' : ''}"
                    data-testid="now-playing-source"
                    @click=${(e: MouseEvent) => {
                        if (this.phone) return;
                        if (!isQueueSourceNavigable(this.queue.source)) return;
                        navigateToQueueSource(
                            e.currentTarget as EventTarget,
@@ -593,10 +571,6 @@ export class NowPlaying extends LitElement {
        this.reduceMotion = e.matches;
    };
    private handlePhoneChange = (e: MediaQueryListEvent): void => {
        this.phone = e.matches;
    };
    private shouldScroll(field: 'title' | 'artist'): boolean {
        const overflows = field === 'title' ? this.titleOverflows : this.artistOverflows;
@@ -632,12 +606,6 @@ export class NowPlaying extends LitElement {
            track?.artist ?? '',
            this.shouldScroll('title') ? '1' : '0',
            this.shouldScroll('artist') ? '1' : '0',
            // Crossing the breakpoint swaps a link for a bare string,
            // and a link is not guaranteed to measure the same as the
            // text inside it. The marquee travels a distance read from
            // that measurement, so this belongs in the key even though
            // the words are identical either side.
            this.phone ? '1' : '0',
        ].join('\u0000');
    }
@@ -4,7 +4,6 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { designTokens } from '../../styles/tokens.css';
 import type { DragActiveDetail } from '@utils/drag-controller';
 import { ActiveViewController } from '@store/controllers/active-view-controller';
 import {
    ICON_PLAYLIST,
    ICON_AUTOTAG,
@@ -160,20 +159,11 @@ export class AppSidebar extends LitElement {
    /** Delay in ms before a drag-hover triggers navigation. */
    private static readonly HOVER_NAV_DELAY = 600;
-    /**
+    /** Home, because that is where `index.ts` now navigates on startup
-     * Which item is lit, read from the shell rather than tracked here.
+     *  (H-8). The sidebar does not hear a `navigate` it did not send,
-     *
+     *  so this default is what keeps `aria-current` honest on arrival. */
-     * This used to be a `@state()` field defaulting to `home` -- the
+    @state()
-     * landing view -- because "the sidebar does not hear a `navigate`
+    private activeView: View = 'home';
     * it did not send". That default was the only honest moment it
     * ever had: a back-navigation dispatches no `navigate`, so the
     * highlight stayed on the view the user had just left (#72), and
     * the copy of this component that `bottom-nav` mounts inside its
     * drawer opened on `home` from whatever page you were standing on.
     * The shell publishes the active view now, so there is nothing to
     * default and nothing to keep in step.
     */
    private activeCtrl = new ActiveViewController(this);
    @state()
    private isDragging = false;
@@ -247,6 +237,10 @@ export class AppSidebar extends LitElement {
            'yj-drag-active',
            this.onDragActive as EventListener,
        );
        document.addEventListener(
            'navigate',
            this.onGlobalNavigate as EventListener,
        );
    }
    override disconnectedCallback() {
@@ -268,6 +262,10 @@ export class AppSidebar extends LitElement {
            'yj-drag-active',
            this.onDragActive as EventListener,
        );
        document.removeEventListener(
            'navigate',
            this.onGlobalNavigate as EventListener,
        );
        this.clearDragHoverTimer();
    }
@@ -284,9 +282,8 @@ export class AppSidebar extends LitElement {
            <nav aria-label="Main">
            <ul>
                ${this.navItems.map((item) => {
            const active = this.activeCtrl.isActive(item.id);
            const classes = [
-                active
+                this.activeView === item.id
                    ? 'active'
                    : '',
                this.dragHoverView === item.id
@@ -302,7 +299,7 @@ export class AppSidebar extends LitElement {
                                type="button"
                                class=${classes}
                                data-testid="nav-${item.id}"
-                                aria-current=${active
+                                aria-current=${this.activeView === item.id
                    ? 'page'
                    : 'false'}
                                @click=${() =>
@@ -385,6 +382,19 @@ export class AppSidebar extends LitElement {
    private static readonly DROP_VIEWS: Set<View> =
        new Set(['playlists']);
    /** Keeps the highlighted nav item in sync with navigation that
     * originates outside the sidebar itself (e.g. the launch-page
     * dispatch in index.ts). */
    private onGlobalNavigate = (
        e: CustomEvent<{ view?: string }>,
    ) => {
        const view = e.detail.view;
        if (view && this.navItems.some((item) => item.id === view)) {
            this.activeView = view as View;
        }
    };
    private onDragActive = (
        e: CustomEvent<DragActiveDetail>,
    ) => {
@@ -450,11 +460,7 @@ export class AppSidebar extends LitElement {
    }
    private navigate(view: View) {
-        // No optimistic highlight: the shell answers, and it answers
+        this.activeView = view;
        // synchronously in `handleNavigate` before it awaits anything.
        // Setting it here as well is the second opinion this fix
        // removes -- it is what let a click's highlight survive a
        // navigation the shell then handled differently.
        this.dispatchEvent(new CustomEvent('navigate', {
            detail: { view },
            bubbles: true,
@@ -11,7 +11,6 @@ import {
 import { SelectionController } from '@utils/selection-controller';
 import type { SelectionHost } from '@utils/selection-controller';
 import { ViewLifecycleMixin } from '@utils/view-lifecycle';
 import { PHONE_QUERY } from '@utils/breakpoints';
 import {
    ContextMenuController,
    contextMenuStyles,
@@ -106,6 +105,9 @@ const ROW_CHROME_WIDTH =
 const ROW_HEIGHT = 33;
 const PHONE_ROW_HEIGHT = 52;
 /** The shell's phone breakpoint, as `index.css` and every component
 *  stylesheet spells it. */
 const PHONE_QUERY = '(max-width: 599px)';
 // Inline SVG paths for favorite icons — eliminates wa-icon shadow DOM
 // overhead (30-50 shadow roots during scroll).  Font Awesome 6 paths.
@@ -1,90 +0,0 @@
 /**
 * Which primary view the app is showing.
 *
 * The shell has always known this -- `handleNavigate()` sets
 * `#main-content`'s `data-active-view` on every path, `_isBack`
 * included -- and never told anyone. The nav components learned it
 * from the `navigate` CustomEvent instead, which only the *outbound*
 * path dispatches: the `popstate` listener calls `handleNavigate()`
 * directly. So both navs kept highlighting the view you had just left
 * (#72).
 *
 * The fix cannot be a re-dispatch of `navigate`. `index.ts` is itself a
 * document listener for it, so emitting one from inside
 * `handleNavigate` is an infinite loop -- and the two statements are
 * different anyway: `navigate` means *please go to X*, and 28 call
 * sites across 18 files say it. This says *the active view is now X*,
 * which only the shell is in a position to say and only once per
 * navigation.
 *
 * Three things about it are load-bearing.
 *
 * **It is a store rather than an event**, because a component that
 * mounts *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, the drawer highlighted
 * Home -- its `activeView` default, which existed to match the landing
 * view and matched nothing else ever after. An event has no answer for
 * a listener that was not there; a value does.
 *
 * **A detail view is not a view here.** Opening one leaves the primary
 * view it was opened from lit, which is what #72 asks for and what
 * `app-sidebar` used to do by accident -- it guarded on
 * `navItems.some(...)`, so a name matching no item left its highlight
 * alone. `bottom-nav` had no such guard and so lit nothing on a detail
 * view. Neither was correct; the sidebar was stale-but-lucky, and
 * stating the rule once is what makes the two agree.
 *
 * **Whether a view is primary is the shell's fact, not this store's.**
 * `VIEW_TAGS` in `index.ts` is the list, and a copy of it here is a
 * second list to forget -- so the caller passes the answer it already
 * has rather than this file re-deriving it.
 */
 type Subscriber = () => void;
 class ActiveViewStore {
    /** Empty until the shell's first navigation, which happens at
     *  startup from `GetDefaultPage()`. Nothing is highlighted for that
     *  moment, which is honest: the alternative is a written-down
     *  default that is right only when the default page agrees with it. */
    private activeView = '';
    private subscribers = new Set<Subscriber>();
    /** The active primary view, e.g. `albums`. */
    get(): string {
        return this.activeView;
    }
    isActive(view: string): boolean {
        return this.activeView !== '' && this.activeView === view;
    }
    /**
     * Called by the shell on every navigation, `popstate` included.
     *
     * `isPrimary` is `view in VIEW_TAGS` at the call site: a detail
     * view reports itself and deliberately changes nothing, so the view
     * it was opened from stays lit until the user picks another one.
     */
    setView(view: string, isPrimary: boolean): void {
        if (!isPrimary) return;
        if (view === this.activeView) return;
        this.activeView = view;
        this.notify();
    }
    subscribe(fn: Subscriber): () => void {
        this.subscribers.add(fn);
        return () => this.subscribers.delete(fn);
    }
    private notify(): void {
        this.subscribers.forEach((fn) => fn());
    }
 }
 export const activeViewStore = new ActiveViewStore();
@@ -1,59 +0,0 @@
 import type {
    ReactiveController,
    ReactiveControllerHost,
 } from 'lit';
 import { activeViewStore } from '../active-view-store';
 /**
 * ActiveViewController connects a Lit component to the
 * ActiveViewStore.
 *
 * Usage in a component:
 *
 *   private activeCtrl = new ActiveViewController(this);
 *
 *   render() {
 *     const lit = this.activeCtrl.isActive('albums');
 *   }
 *
 * It reads through to the store rather than copying the value into a
 * `@state()` field, which is the point of #72: two components holding
 * their own idea of the active view is what let them disagree with the
 * shell and with each other.
 */
 export class ActiveViewController implements ReactiveController {
    private host: ReactiveControllerHost;
    private unsubscribe?: () => void;
    constructor(host: ReactiveControllerHost) {
        this.host = host;
        host.addController(this);
    }
    // ===============================================================
    // LIFECYCLE HOOKS
    // ===============================================================
    hostConnected(): void {
        this.unsubscribe = activeViewStore.subscribe(() => {
            this.host.requestUpdate();
        });
    }
    hostDisconnected(): void {
        this.unsubscribe?.();
    }
    // ===============================================================
    // DATA ACCESS
    // ===============================================================
    /** The active primary view, e.g. `albums`. */
    get current(): string {
        return activeViewStore.get();
    }
    isActive(view: string): boolean {
        return activeViewStore.isActive(view);
    }
 }
@@ -9,8 +9,6 @@ export type { ThemeState, BackgroundShade } from './theme-store';
 export { ThemeController } from './controllers/theme-controller';
 export { searchStore } from './search-store';
 export { SearchController } from './controllers/search-controller';
 export { activeViewStore } from './active-view-store';
 export { ActiveViewController } from './controllers/active-view-controller';
 export { shortcutsStore } from './shortcuts-store';
 export type { ShortcutsState } from './shortcuts-store';
 export { ShortcutsController } from './controllers/shortcuts-controller';
@@ -1,23 +0,0 @@
 /**
 * The shell's breakpoints, where JavaScript has to agree with CSS.
 *
 * A media query inside a shadow root is answered by the viewport, so a
 * component normally states what it drops at phone width in its own
 * stylesheet and needs nothing from here. This exists for the cases
 * where the decision is not a style: `track-list` computes its grid in
 * JS from the host width, and `now-playing` renders *different content*
 * on a phone — a plain string instead of a link — which no stylesheet
 * can express.
 *
 * One breakpoint, several expressions of it. It was a private const in
 * track-list.ts when there was one; a second reader is where a copy
 * would start drifting from index.css.
 */
 /**
 * Phone width. 600px rather than the sidebar's 900px because 900 is a
 * laptop: the answer there is a narrower sidebar, which is still a
 * sidebar. Below this the shell drops the sidebar column entirely and
 * bottom-nav takes over.
 */
 export const PHONE_QUERY = '(max-width: 599px)';
@@ -3,21 +3,15 @@
 *
 * Three of these are about the thing that makes a second nav dangerous:
 * it has to agree with the first one. `bottom-nav` emits the same
- * bubbling, composed `navigate` event `app-sidebar` does, and reads
+ * bubbling, composed `navigate` event `app-sidebar` does and listens
- * which tab is lit from `activeViewStore` — the shell's one statement
+ * for that event globally, so a navigation from anywhere — a card, a
- * of where the user is — so it follows a navigation from anywhere: a
+ * detail view, the drawer's own sidebar — moves its highlight too. A
- * card, a detail view, the drawer's own sidebar, or the back gesture.
+ * tab bar that only tracks its own clicks looks right until the moment
- *
+ * the user arrives somewhere by another route.
 * That last one is why the source is the store and not the `navigate`
 * event these tests used to dispatch. `popstate` dispatches no
 * `navigate` (index.ts calls `handleNavigate` directly), so a tab bar
 * listening for the event looked right until the user pressed back —
 * #72.
 */
 import { describe, expect, it, beforeEach } from 'vitest';
 import '@components/bottom-nav/bottom-nav';
 import { activeViewStore } from '@store/active-view-store';
 import type { BottomNav } from '@components/bottom-nav/bottom-nav';
 import { fixture, shadow, shadowAll, update } from '@test/support/render';
 import { resetHarness } from '@test/support/harness';
@@ -27,12 +21,6 @@ type Nav = BottomNav;
 const tabs = (el: HTMLElement) =>
  shadowAll<HTMLButtonElement>(el, 'nav button');
 /** The testids of whatever the bar says is the current page. */
 const current = (el: HTMLElement) =>
  tabs(el)
    .filter((b) => b.getAttribute('aria-current') === 'page')
    .map((b) => b.dataset.testid);
 /** Resolve on one occurrence of an event, or reject loudly on time. */
 const once = (el: Element, name: string, timeoutMs = 2000) =>
  new Promise<void>((resolve, reject) => {
@@ -82,55 +70,36 @@ describe('bottom-nav', () => {
  it('follows a navigation it did not send', async () => {
    const el = await fixture<Nav>('bottom-nav');
-    activeViewStore.setView('tracks', true);
+    document.dispatchEvent(new CustomEvent('navigate', {
      detail: { view: 'tracks' },
      bubbles: true,
      composed: true,
    }));
    await update(el, {});
-    expect(current(el)).toEqual(['tab-tracks']);
+    const current = tabs(el)
      .filter((b) => b.getAttribute('aria-current') === 'page')
      .map((b) => b.dataset.testid);
    expect(current).toEqual(['tab-tracks']);
  });
  it('marks exactly one tab current, and none for a view it has no tab for', async () => {
    const el = await fixture<Nav>('bottom-nav');
-    activeViewStore.setView('settings', true);
+    document.dispatchEvent(new CustomEvent('navigate', {
      detail: { view: 'settings' },
      bubbles: true,
      composed: true,
    }));
    await update(el, {});
    // Settings lives in the drawer, so nothing in the bar is current.
    // Leaving Home highlighted would be a tab bar lying about where
    // the user is.
-    expect(current(el)).toEqual([]);
+    expect(
-  });
+      tabs(el).filter((b) => b.getAttribute('aria-current') === 'page'),
-
+    ).toHaveLength(0);
  it('keeps the parent tab lit while a detail view is open', async () => {
    const el = await fixture<Nav>('bottom-nav');
    activeViewStore.setView('albums', true);
    // A detail view reports itself and is not primary, so it changes
    // nothing. This is the first half of #72: the bar used to take the
    // name, match it against no tab, and light nothing at all — while
    // `app-sidebar`, which guarded on its own item list, kept the
    // highlight. Neither was deliberate and the two disagreed.
    activeViewStore.setView('explore-album-details', false);
    await update(el, {});
    expect(current(el)).toEqual(['tab-albums']);
  });
  it('follows the back path, which dispatches no navigate event', async () => {
    const el = await fixture<Nav>('bottom-nav');
    activeViewStore.setView('albums', true);
    activeViewStore.setView('tracks', true);
    await update(el, {});
    expect(current(el)).toEqual(['tab-tracks']);
    // What `popstate` does: the shell replays the entry through
    // `handleNavigate` without dispatching `navigate`. A bar listening
    // for the event stayed on Tracks — the view just left, confidently
    // wrong rather than merely blank.
    activeViewStore.setView('albums', true);
    await update(el, {});
    expect(current(el)).toEqual(['tab-albums']);
  });
  it('closes the drawer when a navigation happens', async () => {
@@ -10,7 +10,6 @@ import '@components/sidebar/app-sidebar';
 import '@components/library-filter/library-filter';
 import '@components/library-status-indicator/library-status-indicator';
 import { Events } from '../../src/events';
 import { activeViewStore } from '@store/active-view-store';
 import { emit, stub, flush, calls, lastArgs } from '@test/support/harness';
 import {
  fixture,
@@ -50,8 +49,6 @@ describe('<app-sidebar>', () => {
  });
  it('marks exactly one item as the current page', async () => {
    activeViewStore.setView('home', true);
    const el = await fixture('app-sidebar');
    const current = shadowAll(el, 'li button').filter(
@@ -75,49 +72,17 @@ describe('<app-sidebar>', () => {
    expect(seen).toEqual(['artists']);
  });
-  it('moves aria-current with the shell, not with the click', async () => {
+  it('moves aria-current to the clicked destination', async () => {
    activeViewStore.setView('home', true);
    const el = await fixture('app-sidebar');
    shadow<HTMLElement>(el, '[data-testid="nav-genres"]')?.click();
    await el.updateComplete;
    // The click asks; it does not answer. The sidebar used to move its
    // own highlight optimistically, which is the second opinion #72
    // removed -- one component deciding where the user is, while the
    // shell decided separately and `bottom-nav` decided a third way.
    expect(
      shadow(el, '[data-testid="nav-genres"]')?.getAttribute('aria-current'),
    ).toBe('false');
    // What the shell does with that event, in one line.
    activeViewStore.setView('genres', true);
    await update(el, {});
    expect(
      shadow(el, '[data-testid="nav-genres"]')?.getAttribute('aria-current'),
    ).toBe('page');
  });
  it('follows the back path, which dispatches no navigate event', async () => {
    activeViewStore.setView('albums', true);
    const el = await fixture('app-sidebar');
    // `popstate` replays an entry through `handleNavigate` directly, so
    // there is no `navigate` event to hear -- which is why the sidebar
    // stayed on the view the user had just left (#72).
    activeViewStore.setView('tracks', true);
    await update(el, {});
    expect(
      shadowAll(el, 'li button')
        .filter((item) => item.getAttribute('aria-current') === 'page')
        .map((item) => item.getAttribute('data-testid')),
    ).toEqual(['nav-tracks']);
  });
  it('looks the way it did last time', async () => {
    const el = await fixture('app-sidebar');
@@ -1,85 +0,0 @@
 /**
 * A hover affordance is gated on the device having hover.
 *
 * The home page's cover cards reveal a play button on :hover. A touch
 * long-press synthesises a hover state in the WebView, so on a phone
 * that button flashed into view during the 500ms hold that
 * utils/long-press.ts is measuring for a context menu — a control
 * appearing because the user was reaching for a different one.
 *
 * This is asserted against the *parsed stylesheet* rather than by
 * emulating a touch device, and that is a limitation worth stating
 * rather than hiding. CDP's Emulation.setEmulatedMedia does not reach
 * this tier's iframe — matchMedia still answers `hover: hover` after it
 * is set — so there is no way here to render the component as a phone
 * would and read the computed style. What can be checked is the shape
 * the browser actually built from the css`` literal: that the reveal
 * lives inside a hover media query and that the default is display:none.
 *
 * Which is the regression worth catching anyway. The failure mode is
 * someone hoisting the rule back out of the query for a one-line tidy —
 * a change nothing renders differently on a desktop, so every other
 * assertion in this repo passes and the phone silently regresses.
 */
 import { describe, expect, it } from 'vitest';
 import '@components/home-view/home-view';
 import { fixture } from '@test/support/render';
 /** Every rule in the element's own adopted stylesheets, flattened. */
 function rulesOf(host: Element): { text: string; condition: string | null }[] {
  const sheets = host.shadowRoot?.adoptedStyleSheets ?? [];
  const out: { text: string; condition: string | null }[] = [];
  for (const sheet of sheets) {
    for (const rule of Array.from(sheet.cssRules)) {
      if (rule instanceof CSSMediaRule) {
        for (const inner of Array.from(rule.cssRules)) {
          out.push({ text: inner.cssText, condition: rule.conditionText });
        }
        continue;
      }
      out.push({ text: rule.cssText, condition: null });
    }
  }
  return out;
 }
 describe('the home card play button', () => {
  it('reveals itself only where the device has hover', async () => {
    const el = await fixture('home-view', {});
    const rules = rulesOf(el);
    // The sweep is worth nothing if it read no rules at all — the same
    // first assertion icon-language.test.ts makes for the same reason.
    expect(rules.length).toBeGreaterThan(0);
    const reveals = rules.filter(
      (r) => r.text.includes('.play') && /opacity:\s*1/.test(r.text),
    );
    expect(reveals.length).toBeGreaterThan(0);
    for (const rule of reveals) {
      expect(rule.condition).toMatch(/hover:\s*hover/);
      expect(rule.condition).toMatch(/pointer:\s*fine/);
    }
  });
  it('is display:none rather than transparent where it is absent', async () => {
    const el = await fixture('home-view', {});
    // opacity:0 alone would leave a button that still takes taps and is
    // still in the accessibility tree, so a phone would keep the hit
    // area for a control it can never see.
    const unconditional = rulesOf(el).filter(
      (r) => r.condition === null && r.text.startsWith('.play'),
    );
    expect(unconditional.length).toBeGreaterThan(0);
    expect(unconditional.some((r) => /display:\s*none/.test(r.text))).toBe(true);
  });
 });
@@ -1,166 +0,0 @@
 /**
 * The mini player's links are a desktop affordance.
 *
 * `utils/explore-link.ts` makes every track and artist name navigate,
 * and `utils/queue-source-link.ts` makes "Playing from X" navigate — in
 * the bottom bar those are a few characters of text at a font size
 * chosen for a bar, which is not a touch target. Worse, explore-link
 * holds the navigation for one double-click interval and drops it if a
 * second click arrives: a gesture that exists so double-clicking a row
 * can play it, and which means nothing at all on touch.
 *
 * So below the shell's phone breakpoint the three render as plain text
 * and the whole bar's cover art opens the full-screen Now Playing view,
 * which is where the links live.
 *
 * The breakpoint is stubbed rather than emulated for the reason
 * track-list-phone.test.ts states: this tier's viewport is fixed at
 * 1280x800 by the runner, and the component reads matchMedia in
 * connectedCallback precisely so a test can answer it first.
 */
 import { describe, expect, it, beforeEach } from 'vitest';
 import '@components/now-playing/now-playing';
 import { Events } from '../../src/events';
 import { emit, flush } from '@test/support/harness';
 import { fixture, shadow, shadowAll, text } from '@test/support/render';
 import type { TrackInfo } from '@store/player-store';
 import type { QueueTrack } from '@store/queue-store';
 const TRACK: TrackInfo = {
  fileName: 'ashes.mp3',
  filePath: '/music/ashes.mp3',
  trackLength: 215,
  seekPosition: 0,
  state: 'playing',
  title: 'Ashes to Ashes',
  artist: 'David Bowie',
  album: 'Scary Monsters',
  coverArt: '',
  coverArtSmall: '',
  coverArtMedium: '',
  coverArtLarge: '',
  trackChangeId: 1,
  artistMbid: '',
  releaseGroupMbid: '',
  recordingMbid: '',
 };
 function queueTrack(n: number, title: string): QueueTrack {
  return {
    id: n,
    audioFileId: n,
    filePath: `/music/${n}.mp3`,
    position: n,
    title,
    artist: 'David Bowie',
    album: 'Scary Monsters',
    coverArtPath: '',
    artistMbid: '',
    releaseGroupMbid: '',
    recordingMbid: '',
  };
 }
 /** Mount the bar with the phone breakpoint answering `matches`. */
 async function mountAt(phone: boolean) {
  const real = window.matchMedia.bind(window);
  window.matchMedia = ((q: string) =>
    q.includes('max-width: 599px')
      ? {
          matches: phone,
          media: q,
          addEventListener() {},
          removeEventListener() {},
        }
      : real(q)) as typeof window.matchMedia;
  try {
    const el = await fixture('now-playing');
    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 20 });
    emit(Events.QueueChanged, {
      tracks: [queueTrack(1, 'Ashes to Ashes')],
      currentIndex: 0,
      source: { type: 'album', id: 7, label: 'Scary Monsters' },
    });
    await flush();
    await el.updateComplete;
    return el;
  } finally {
    window.matchMedia = real;
  }
 }
 describe('the mini player on a phone', () => {
  beforeEach(() => {
    emit(Events.TrackChanged, { ...TRACK, trackChangeId: 1 });
  });
  it('renders the title and artist as plain text', async () => {
    const el = await mountAt(true);
    expect(shadowAll(el, '.explore-link').length).toBe(0);
    // The words are unchanged — this is about what they are, not about
    // hiding them. A fix that dropped the text would pass an assertion
    // about links alone.
    expect(text(el, '[data-testid="now-playing-title"]')).toContain(
      'Ashes to Ashes',
    );
    expect(text(el, '[data-testid="now-playing-artist"]')).toContain(
      'David Bowie',
    );
  });
  it('does not navigate from the source line', async () => {
    const el = await mountAt(true);
    const source = shadow<HTMLElement>(el, '[data-testid="now-playing-source"]');
    expect(source?.classList.contains('navigable')).toBe(false);
    let navigated = false;
    el.addEventListener('navigate', () => {
      navigated = true;
    });
    source?.click();
    expect(navigated).toBe(false);
  });
  it('still says where the queue came from', async () => {
    const el = await mountAt(true);
    // Dropping the *link* is the change; dropping the information would
    // be a different and worse one.
    expect(text(el, '[data-testid="now-playing-source"]')).toBe(
      'Playing from Scary Monsters',
    );
  });
  it('leaves the desktop bar exactly as it was', async () => {
    const el = await mountAt(false);
    expect(shadowAll(el, '.explore-link').length).toBeGreaterThan(0);
    const source = shadow<HTMLElement>(el, '[data-testid="now-playing-source"]');
    expect(source?.classList.contains('navigable')).toBe(true);
    let detail: unknown;
    el.addEventListener('navigate', (e) => {
      detail = (e as CustomEvent).detail;
    });
    source?.click();
    expect(detail).toEqual({
      view: 'explore-album-details',
      localAlbumId: 7,
      albumName: 'Scary Monsters',
    });
  });
 });
@@ -1,13 +1,11 @@
 /**
- * The small stores behind view chrome: the global search term, the
+ * The three small stores behind view chrome: the global search term,
- * active view both navs highlight, the track list's column set, and
+ * the track list's column set, and the explore cache that keeps detail
- * the explore cache that keeps detail pages from re-fetching what a
+ * pages from re-fetching what a search already returned.
 * search already returned.
 */
 import { describe, expect, it, beforeEach } from 'vitest';
 import { searchStore } from '@store/search-store';
 import { activeViewStore } from '@store/active-view-store';
 import { trackListStore } from '@store/tracklist-store';
 import { exploreCache, ARTIST_IMAGE_CACHE_LIMIT } from '@store/explore-cache';
 import { Events } from '../../src/events';
@@ -82,57 +80,6 @@ describe('search store', () => {
  });
 });
 describe('active view store', () => {
  beforeEach(() => {
    activeViewStore.setView('home', true);
  });
  it('holds the primary view the shell navigated to', () => {
    activeViewStore.setView('albums', true);
    expect(activeViewStore.get()).toBe('albums');
    expect(activeViewStore.isActive('albums')).toBe(true);
    expect(activeViewStore.isActive('tracks')).toBe(false);
  });
  it('leaves the primary view lit while a detail view is open', () => {
    activeViewStore.setView('albums', true);
    activeViewStore.setView('explore-album-details', false);
    // #72's third finding, made deliberate: a detail view is not a
    // destination in either nav, and the tab it was opened from is
    // where the user still is. `app-sidebar` did this by accident (it
    // guarded on its own item list) and `bottom-nav` did not do it at
    // all, which is why one looked right and the other looked broken.
    expect(activeViewStore.get()).toBe('albums');
  });
  it('does not notify when the view is unchanged', () => {
    let notifications = 0;
    const off = activeViewStore.subscribe(() => {
      notifications += 1;
    });
    activeViewStore.setView('albums', true);
    activeViewStore.setView('albums', true);
    activeViewStore.setView('explore-album-details', false);
    off();
    expect(notifications).toBe(1);
  });
  it('lights nothing for a view with no name', () => {
    // The store starts empty rather than defaulting to a view, because
    // a written-down default is right only while `GetDefaultPage()`
    // agrees with it. That is only safe if the empty value matches
    // nothing: `isActive` compares strings, and a component asking
    // about an id it does not have must not light up.
    activeViewStore.setView('', true);
    expect(activeViewStore.isActive('')).toBe(false);
  });
 });
 describe('track list store', () => {
  it('starts from the default column set', () => {
    expect(trackListStore.getState().columnIds.length).toBeGreaterThan(0);
@@ -20,14 +20,19 @@ pre-commit:
      glob: "*.go"
      run: go tool golangci-lint run --timeout 5m ./...
    # Snapshots the tree either side of the generators and reports only
    # what moved across them.  This used to be `go generate` plus a bare
    # `git diff --name-only`, which is the *whole unstaged worktree* — so
    # any unrelated edit sitting there was reported as stale generated
    # code, and `make generate` then fixed nothing.  See the script.
    codegen-check:
      glob: "*.{go,sql,templ}"
-      run: ./scripts/codegen-check.sh
+      run: |
        go generate ./...
        if [ -n "$(git diff --name-only)" ]; then
          echo "Generated code is out of date. Run 'make generate' and stage the changes."
          # --no-pager, or this blocks forever on `less` waiting for a
          # keypress that a hook run without a tty will never get: the
          # commit hangs at exactly the moment it is trying to tell you
          # why it failed.
          git --no-pager diff --stat
          exit 1
        fi
    # frontend/bindings is generated by `wails3`, not `go generate`, so
    # the check above does not cover it.  ~3.5s warm, ~20s on a cold
@@ -1,81 +0,0 @@
 #!/usr/bin/env bash
 #
 # Fails when `go generate ./...` would change something that is not staged.
 #
 # The obvious spelling of this is `go generate && git diff --name-only`,
 # which is what the hook used to be, and it answers the wrong question:
 # that diff is the *whole unstaged worktree*, so any unrelated edit — a
 # note, a plan document, the next commit's files sitting there while this
 # one lands — was reported as
 #
 #     Generated code is out of date. Run 'make generate' and stage the changes.
 #
 # Running `make generate` then does nothing, because nothing generated is
 # stale, and the message sends you looking for a codegen problem that does
 # not exist.  Splitting one piece of work into several commits is exactly
 # the shape that triggers it, so the workaround was a constraint on commit
 # order for no real reason.
 #
 # So the tree is snapshotted either side of the generators and only what
 # *moved across them* is reported.  That is deliberately not a list of
 # generated paths: sqlcgen, `*_templ.go` and `frontend/src/events.ts` are
 # today's answer, a fourth generator is one `//go:generate` line away, and
 # a path list is a second place to remember it — the same reasoning that
 # keeps staleshape.go parsing sql/schemas/ rather than restating it.
 #
 # Content, not names: a generated file that is *already* dirty and is then
 # rewritten further keeps its name in both snapshots and would otherwise
 # slip through.
 set -euo pipefail
 cd "$(dirname "$0")/.."
 # name + worktree blob hash for every file that differs from the index.
 # A file listed but absent (a deletion) hashes as "gone" rather than
 # aborting the pipeline.
 snapshot() {
 	git diff --name-only | while IFS= read -r f; do
 		if [ -f "$f" ]; then
 			printf '%s %s\n' "$f" "$(git hash-object -- "$f")"
 		else
 			printf '%s gone\n' "$f"
 		fi
 	done
 }
 # A brand-new generated file is not in either diff, because it is not
 # tracked at all — the same blind spot bindings-check.sh names.  Both
 # snapshots are taken before the generators run.
 before="$(snapshot)"
 before_untracked="$(git ls-files --others --exclude-standard)"
 go generate ./...
 after="$(snapshot)"
 after_untracked="$(git ls-files --others --exclude-standard)"
 # Symmetric difference, and the symmetry is the whole point.  Generation
 # can push a file *into* the unstaged set (it was current, now it is not)
 # or *out* of it (someone hand-edited generated output and the generator
 # put it back) — and the second is stale generated code just as much as
 # the first.  Comparing one direction only reports "current" for it,
 # which is the failure this script was written to stop.
 moved="$(comm -3 <(printf '%s\n' "$before" | sort) <(printf '%s\n' "$after" | sort) |
 	cut -d' ' -f1 | tr -d '\t' | sort -u | grep -v '^$' || true)"
 if [ -n "$moved" ]; then
 	echo "codegen-check: generated code is out of date." >&2
 	echo "Run 'make generate' and stage:" >&2
 	printf '  %s\n' $moved >&2
 	exit 1
 fi
 if [ "$after_untracked" != "$before_untracked" ]; then
 	echo "codegen-check: generation produced new files. Stage them:" >&2
 	comm -13 <(printf '%s\n' "$before_untracked" | sort) \
 		<(printf '%s\n' "$after_untracked" | sort) >&2
 	exit 1
 fi
 echo "codegen-check: generated code is current"
@@ -97,55 +97,6 @@ if [ -f "$PID_FILE" ] && kill -0 "$(cat "$PID_FILE")" 2>/dev/null; then
 fi
 rm -f "$PID_FILE"
 # ── Refuse to inherit somebody else's port ───────────────────────────
 # The PID check above only knows about *this* worktree: `make dev-stop`
 # kills the pid in this .dev/app.pid and nothing else.  Several worktrees
 # of this repo share the default port, so an app orphaned by a deleted
 # worktree goes on listening with nothing left to stop it.
 #
 # Without this check the new app starts, fails to bind, exits — and every
 # curl and playwright-cli call afterwards goes to the *other* process, so
 # the harness reports facts about an app nobody asked for.  That is not a
 # quiet wrongness either: it presented as
 # "no such table: libraries" against a freshly created YJ_HOME, which
 # reads exactly like applySchema or staleshape.go having gone wrong and
 # is a frightening place to start looking.
 #
 # The startup wait below cannot catch it, because the health check is
 # satisfied by *any* app on the port — which is precisely the failure.
 # So it is refused here, before anything is launched, rather than warned
 # about.  --port already exists for the legitimate second-app case.
 port_holder() {
 	command -v ss >/dev/null || return 0
 	ss -lptn "sport = :$PORT" 2>/dev/null | grep -oP 'pid=\K[0-9]+' | head -n 1
 }
 if curl -sf -o /dev/null --max-time 2 "http://localhost:$PORT/" ||
 	[ -n "$(port_holder)" ]; then
 	holder="$(port_holder)"
 	echo "dev-headless: :$PORT is already in use; refusing to start" >&2
 	if [ -n "$holder" ]; then
 		# /proc/<pid>/cwd names the checkout it belongs to, and says
 		# "(deleted)" for the orphaned-worktree case that is the whole
 		# reason this is worth a check.
 		cwd="$(readlink "/proc/$holder/cwd" 2>/dev/null || echo unknown)"
 		cmd="$(tr '\0' ' ' <"/proc/$holder/cmdline" 2>/dev/null || echo unknown)"
 		echo "  pid  $holder  ($cmd)" >&2
 		echo "  cwd  $cwd" >&2
 		# The PID-file check above has already passed, so whatever this
 		# is, `make dev-stop` does not know about it — saying otherwise
 		# sends you to a command that will report success and change
 		# nothing.  Never `pkill -f` here either: the pattern would
 		# match this script's own command line.
 		echo "  'make dev-stop' will not touch it (it is not in" >&2
 		echo "  ${PID_FILE#"$REPO_ROOT"/}): kill $holder, or pass --port." >&2
 	else
 		echo "  The holder could not be identified (no ss, or it belongs" >&2
 		echo "  to another user). Try: ss -lptn 'sport = :$PORT'" >&2
 	fi
 	exit 1
 fi
 # ── Choose the YJ_HOME ───────────────────────────────────────────────
 # A seed is a YJ_HOME that a previous run of the app produced, tarred
 # up (see scripts/seed-sandbox.sh).  Restoring it means starting *in*
@@ -249,20 +200,6 @@ until curl -sf -o /dev/null "http://localhost:$PORT/"; do
 	sleep 0.25
 done
 # The loop above exits on the first answer from the port, and "something
 # answered" is not "the app we started answered".  The pre-launch guard
 # makes that unlikely rather than impossible — a race, or a listener
 # started in between — and the check is one signal, so it is worth making
 # here too.  An empty log beside a dead pid is the "it exited immediately
 # and nothing said so" case that the original report spent its time on.
 if ! kill -0 "$APP_PID" 2>/dev/null; then
 	echo "dev-headless: :$PORT answered, but the app we started (pid" >&2
 	echo "  $APP_PID) is gone — something else holds the port." >&2
 	tail -n 30 "$LOG_FILE" >&2
 	rm -f "$PID_FILE"
 	exit 1
 fi
 cat <<EOF
 dev-headless: up
  url      http://localhost:$PORT
@@ -38,10 +38,8 @@
 # Where a body is taken and no --body-file is given, it is read from stdin.
 #
 # Environment:
-#   GITEA_TOKEN   a PAT with write:issue.  `claim` and `mine` additionally
+#   GITEA_TOKEN   a PAT with write:issue (plus write:repository and read:user,
-#                 need to know your username: set GITEA_USER, or give the
+#                 which the rest of this repo's tooling reaches for)
 #                 token read:user and it is looked up.
 #   GITEA_USER    your Gitea login.  Optional; see above.
 #   GITEA_URL     defaults to https://git.ljones.me
 #   GITEA_REPO    defaults to yonlu/yellowjacket
 set -euo pipefail
@@ -83,29 +81,7 @@ read_body() {
 	if [ "$file" = "-" ]; then cat; else cat "$file"; fi
 }
-# The one lookup in this script that needs a scope beyond write:issue.
+me() { curl -sS -H "Authorization: token $GITEA_TOKEN" "$server/api/v1/user" | python3 "$py" login; }
 # `GET /user` requires read:user, and it is reached for exactly two reasons:
 # to name the assignee in `claim`, and to filter in `mine`.  A token scoped to
 # the work this script does — write:issue — therefore failed at `claim`, which
 # is the one step the workflow requires before the first edit, so the whole
 # documented process was blocked by its own tooling.
 #
 # GITEA_USER short-circuits it, which is what lets a least-privilege token do
 # the job.  The lookup stays as the fallback because it is right when the
 # scope is there and needs no setup at all.
 me() {
 	if [ -n "${GITEA_USER:-}" ]; then
 		printf '%s' "$GITEA_USER"
 		return
 	fi
 	curl -sS -H "Authorization: token $GITEA_TOKEN" "$server/api/v1/user" |
 		python3 "$py" login ||
 		{
 			echo "issue.sh: could not resolve your username. Set GITEA_USER, or" >&2
 			echo "issue.sh: re-issue GITEA_TOKEN with read:user." >&2
 			exit 1
 		}
 }
 label_id() { call GET "/labels?limit=100" | python3 "$py" label-id "$1"; }