Web frontend: perf panel, cover warmup, incremental browse rendering

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/hooks/useCoverWarmup.ts

@@ -0,0 +1,55 @@
+/** Pull every card thumbnail into the browser's caches once, while the kiosk is idle.
+ *
+ * Cover URLs carry a version and are served `immutable`, so once a thumbnail has been
+ * fetched the browser never asks for it again - but the *first* search over the whole
+ * library would otherwise fetch, and decode, hundreds of them while the user waits. This
+ * does that work up front, a few at a time in idle periods. The `Image`s are held so
+ * their decoded bitmaps stay resident: RAM is not the constraint on the machine this is
+ * for (`?pi=1`, see lib/lowPower.ts), the main thread during a keystroke is.
+ */
+
+import { useEffect } from "react";
+
+import { coverUrl } from "../api/client";
+import type { Album } from "../api/types";
+
+const BATCH = 6;
+
+const idle = (run: () => void): void => {
+  if (typeof requestIdleCallback === "function") requestIdleCallback(run, { timeout: 2000 });
+  else setTimeout(run, 50);
+};
+
+/** Module-level on purpose: dropping these would let the browser discard what they hold. */
+const held = new Map<string, HTMLImageElement>();
+
+export function useCoverWarmup(albums: Album[], enabled: boolean): void {
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    const pending = albums.filter((a) => a.has_cover && !a.locked);
+    let next = 0;
+
+    const step = () => {
+      if (cancelled || next >= pending.length) return;
+      const batch = pending.slice(next, next + BATCH);
+      next += BATCH;
+      void Promise.all(
+        batch.map((album) => {
+          const url = coverUrl(album.id, { size: "thumb", version: album.cover_v });
+          if (held.has(url)) return undefined;
+          const img = new Image();
+          img.decoding = "async";
+          img.src = url;
+          held.set(url, img);
+          return img.decode().catch(() => undefined);
+        }),
+      ).then(() => idle(step));
+    };
+    idle(step);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [albums, enabled]);
+}