perf(frontend): make the lists and grids pay per row, not per library

A list pays per row, and only while scrolling — and none of this is
visible to any test tier: nothing renders differently and nothing
fails, the app is just slower.

- The track list's Art column rendered `CoverArtPath`, the original
  artwork, into a 24 px box while `CoverArtSmall` sat unused on the
  same model, with no `loading="lazy"`. 26 of 26 image requests asked
  for the full-size tier; now 0.
- `artists-view`'s avatar fallback linear-scanned every cached album
  per card per frame, lowercasing two strings per comparison, inside
  the virtualizer's renderItem — the common case, since a locally
  tagged library has no artist images at all. Measured at 5 000 albums
  and 24 visible cards: 1.46 ms/frame -> 0.01 ms/frame.
- Five components resolved selected file paths back to tracks with
  `tracks.find(...)`; they share `utils/track-index.ts` now. "Select
  all -> Edit tags" at 50 000 tracks: 3 051-6 298 ms -> 68 ms.
- "Play this artist", "play these albums" and the album drag cache
  resolve paths in one call instead of one per album.
- The column-resize drag registers its document listeners on mousedown.

Two things here are load-bearing and read as sloppiness. The per-render
arrow functions in `artists-view` and `genres-view` are the *only*
thing changing a property of their virtualizer on a host update, and
therefore the only thing repainting the cards: hoisting them to stable
fields takes a selection from 1 highlighted card to 0. And a row inside
a virtualizer needs `width: 100%`, because the virtualizer positions
its children absolutely and a grid row otherwise shrinks to fit its
content and stops lining up with the header above it.

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

@@ -18,13 +18,16 @@ import {
 import { library } from '@go/models';
 import { LibraryController } from '@store/controllers/library-controller';
 import { SearchController } from '@store/controllers/search-controller';
+import { ViewLifecycleMixin } from '@utils/view-lifecycle';
+import { RovingGridController } from '@utils/roving-grid';
 import { queueStore } from '@store/queue-store';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import type WaPopup from '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/playlist-picker/playlist-picker.js';
-import '@components/track-details/track-details.js';
+import { loadTrackDetails } from '@utils/lazy-track-details.js';
+import { tracksByFilePath, tracksForPaths } from '@utils/track-index.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';
@@ -69,7 +72,7 @@ import type {
 
 @customElement('cover-grid')
 export class CoverGrid
-    extends LitElement
+    extends ViewLifecycleMixin(LitElement)
     implements ContextMenuHost, ScrollManagerHost
 {
     /**
@@ -277,6 +280,18 @@ export class CoverGrid
     @state()
     private loading = true;
 
+    /** One tab stop for the grid, moved with the arrow keys — a card per
+     *  tab stop makes a library-length tab sequence (H-5). */
+    private roving = new RovingGridController(this, {
+        cardSelector: '.album-card',
+        count: () => this.buildGridEntries().length,
+        scrollToIndex: (index) => {
+            this.shadowRoot
+                ?.querySelector<LitVirtualizer>('lit-virtualizer')
+                ?.scrollToIndex(index, 'nearest');
+        },
+    });
+
     private contextMenuTarget: ContextMenuTarget = {
         kind: 'album',
     };
@@ -500,11 +515,6 @@ export class CoverGrid
         this.restoreSortPreferences();
         this.loadAlbums();
 
-        document.addEventListener(
-            'mousedown',
-            this.sortDropdownCloseHandler,
-        );
-
         // error events do not bubble — use capture
         // phase to catch <img> load failures.
         this.addEventListener(
@@ -514,13 +524,17 @@ export class CoverGrid
         );
     }
 
-    override disconnectedCallback() {
-        super.disconnectedCallback();
-
-        document.removeEventListener(
+    protected override onViewActivate(): void {
+        this.listenWhileActive(
+            document,
             'mousedown',
             this.sortDropdownCloseHandler,
         );
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+
         this.removeEventListener(
             'error',
             this.onGridImageError,
@@ -1501,9 +1515,9 @@ export class CoverGrid
                 break;
             case 'track-details':
                 if (filePaths.length === 1) {
-                    this.openTrackDetails(filePaths[0]!);
+                    void this.openTrackDetails(filePaths[0]!);
                 } else {
-                    this.openBatchTrackDetails(filePaths);
+                    void this.openBatchTrackDetails(filePaths);
                 }
                 break;
         }
@@ -1541,13 +1555,19 @@ export class CoverGrid
         }
     }
 
-    private openTrackDetails(filePath: string) {
-        const track = this.expandedTracks.find(
-            (t) => t.FilePath === filePath,
-        );
+    private async openTrackDetails(filePath: string) {
+        const track = tracksByFilePath(
+            this.expandedTracks,
+        ).get(filePath);
 
         if (!track) return;
 
+        const ready = await loadTrackDetails(
+            () => void this.openTrackDetails(filePath),
+        );
+
+        if (!ready) return;
+
         const coverArt =
             this.selMgr.resolveTrackCoverArt(
                 track.Album,
@@ -1560,21 +1580,22 @@ export class CoverGrid
         );
     }
 
-    private openBatchTrackDetails(
+    private async openBatchTrackDetails(
         filePaths: string[],
     ) {
-        const tracks = filePaths
-            .map((fp) =>
-                this.expandedTracks.find(
-                    (t) => t.FilePath === fp,
-                ),
-            )
-            .filter(
-                (t): t is library.Track => t != null,
-            );
+        const tracks = tracksForPaths(
+            this.expandedTracks,
+            filePaths,
+        );
 
         if (tracks.length === 0) return;
 
+        const ready = await loadTrackDetails(
+            () => void this.openBatchTrackDetails(filePaths),
+        );
+
+        if (!ready) return;
+
         const albumNames = new Set(
             tracks.map((t) => t.Album),
         );
@@ -1791,7 +1812,8 @@ export class CoverGrid
         return html`
             <div
                 class=${classes}
-                tabindex="0"
+                tabindex=${this.roving.tabIndexFor(index)}
+                @focus=${() => this.roving.noteFocus(index)}
                 role="button"
                 data-index=${index}
                 aria-label="${album.Name} by ${album.ArtistName}"
@@ -1879,6 +1901,7 @@ export class CoverGrid
             <div
                 class="grid-scroll-container"
                 @click=${this.onGridClick}
+                @keydown=${this.roving.handleKeydown}
             >
                 ${gridContent}
             </div>