From c0fa8ff682a0bb48e53079dfe7a22ef27d387c4c Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 19 Oct 2026 00:45:56 +0200
Subject: [PATCH 1/6] fix(plugins): label the canvas world in the store like in
 the installed list

The store card kept its own copy of the world-to-label table, written
before the canvas world existed, so a canvas plugin in the store showed
the raw waveflow:canvas/v1 string while the installed list already
called it Canvas. Both cards now render one shared PluginWorldBadge, so
a world added later is labelled in both places or in neither.
---
 .../views/settings/PluginStoreCard.tsx        | 19 ++-----------
 .../views/settings/PluginWorldBadge.tsx       | 28 +++++++++++++++++++
 src/components/views/settings/PluginsCard.tsx | 26 ++---------------
 3 files changed, 32 insertions(+), 41 deletions(-)
 create mode 100644 src/components/views/settings/PluginWorldBadge.tsx

diff --git a/src/components/views/settings/PluginStoreCard.tsx b/src/components/views/settings/PluginStoreCard.tsx
index b8834d293..fef3b6009 100644
--- a/src/components/views/settings/PluginStoreCard.tsx
+++ b/src/components/views/settings/PluginStoreCard.tsx
@@ -20,6 +20,7 @@ import {
 } from "../../../lib/tauri/plugins";
 import { PLUGIN_AVAILABILITY_EVENT } from "../../../hooks/usePluginAvailability";
 import { useLocalizedText } from "../../../hooks/useLocalizedText";
+import { PluginWorldBadge } from "./PluginWorldBadge";
 
 /**
  * Settings → Plugins → Store (Phase 2). Browses the curated registry
@@ -217,7 +218,7 @@ function StoreRow({
             <span className="text-xs text-zinc-500 dark:text-zinc-400">
               v{entry.version}
             </span>
-            <WorldBadge world={entry.world} />
+            <PluginWorldBadge world={entry.world} />
             {entry.official && (
               <span className="flex items-center gap-1 text-[10px] uppercase tracking-wide font-medium px-1.5 py-0.5 rounded bg-sky-50 text-sky-700 dark:bg-sky-950/30 dark:text-sky-400">
                 <BadgeCheck size={11} aria-hidden="true" />
@@ -316,22 +317,6 @@ function InstallButton({
   );
 }
 
-function WorldBadge({ world }: { world: string }) {
-  const { t } = useTranslation();
-  const label = world.startsWith("waveflow:source")
-    ? t("settings.plugins.worlds.source")
-    : world.startsWith("waveflow:metadata")
-      ? t("settings.plugins.worlds.metadata")
-      : world.startsWith("waveflow:ui")
-        ? t("settings.plugins.worlds.ui")
-        : world;
-  return (
-    <span className="text-[10px] uppercase tracking-wide font-medium px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
-      {label}
-    </span>
-  );
-}
-
 /**
  * The permission ask, shown BEFORE install so the user sees exactly what
  * the plugin can reach. The host enforces this allowlist at runtime, so
diff --git a/src/components/views/settings/PluginWorldBadge.tsx b/src/components/views/settings/PluginWorldBadge.tsx
new file mode 100644
index 000000000..6f78f847f
--- /dev/null
+++ b/src/components/views/settings/PluginWorldBadge.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+
+/** WIT world prefix → the `settings.plugins.worlds.*` key naming the
+ *  role it plays. The prefixes are disjoint, so order does not matter.
+ *  A world with no entry falls back to its raw WIT label — which is
+ *  how `waveflow:canvas/v1` reached the screen as `WAVEFLOW:CANVAS/V1`
+ *  for as long as the Canvas world has existed, and then again in the
+ *  store, whose own copy of this table had been left behind. One table
+ *  for both cards, so a new world is labelled everywhere or nowhere. */
+const WORLD_LABEL_KEYS: [string, string][] = [
+  ["waveflow:source", "source"],
+  ["waveflow:metadata", "metadata"],
+  ["waveflow:ui", "ui"],
+  ["waveflow:canvas", "canvas"],
+];
+
+/** The world chip shown next to a plugin's name, in the installed list
+ *  ({@link PluginsCard}) and in the store ({@link PluginStoreCard}). */
+export function PluginWorldBadge({ world }: { world: string }) {
+  const { t } = useTranslation();
+  const entry = WORLD_LABEL_KEYS.find(([prefix]) => world.startsWith(prefix));
+  const label = entry ? t(`settings.plugins.worlds.${entry[1]}`) : world;
+  return (
+    <span className="text-[10px] uppercase tracking-wide font-medium px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
+      {label}
+    </span>
+  );
+}
diff --git a/src/components/views/settings/PluginsCard.tsx b/src/components/views/settings/PluginsCard.tsx
index d815e97f9..000f76c19 100644
--- a/src/components/views/settings/PluginsCard.tsx
+++ b/src/components/views/settings/PluginsCard.tsx
@@ -25,6 +25,7 @@ import { PLUGIN_AVAILABILITY_EVENT } from "../../../hooks/usePluginAvailability"
 import { useLocalizedText } from "../../../hooks/useLocalizedText";
 import { PluginOptions } from "./PluginOptions";
 import { ToggleSwitch } from "../../common/ToggleSwitch";
+import { PluginWorldBadge } from "./PluginWorldBadge";
 
 /// Fire the cross-component "plugin availability changed" bus so
 /// Sidebar + WebRadioView refresh their conditional rendering.
@@ -207,7 +208,7 @@ export function PluginsCard() {
                       <span className="text-xs text-zinc-500 dark:text-zinc-400">
                         v{plugin.version}
                       </span>
-                      <WorldBadge world={plugin.world} />
+                      <PluginWorldBadge world={plugin.world} />
                       {plugin.failure && <BrokenBadge />}
                     </div>
                     <div className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 truncate">
@@ -337,29 +338,6 @@ export function PluginsCard() {
   );
 }
 
-/** WIT world prefix → the `settings.plugins.worlds.*` key naming the
- *  role it plays. The prefixes are disjoint, so order does not matter.
- *  A world with no entry falls back to its raw WIT label — which is
- *  how `waveflow:canvas/v1` reached the screen as `WAVEFLOW:CANVAS/V1`
- *  for as long as the Canvas world has existed. */
-const WORLD_LABEL_KEYS: [string, string][] = [
-  ["waveflow:source", "source"],
-  ["waveflow:metadata", "metadata"],
-  ["waveflow:ui", "ui"],
-  ["waveflow:canvas", "canvas"],
-];
-
-function WorldBadge({ world }: { world: string }) {
-  const { t } = useTranslation();
-  const entry = WORLD_LABEL_KEYS.find(([prefix]) => world.startsWith(prefix));
-  const label = entry ? t(`settings.plugins.worlds.${entry[1]}`) : world;
-  return (
-    <span className="text-[10px] uppercase tracking-wide font-medium px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
-      {label}
-    </span>
-  );
-}
-
 function BrokenBadge() {
   const { t } = useTranslation();
   return (

From 938ed10164d442db867cab480d876a1b160b3309 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 19 Oct 2026 00:54:07 +0200
Subject: [PATCH 2/6] fix(ui): virtualize the liked tracks against the page
 scroller

The liked view mapped every liked track into the DOM, artwork and all,
and nothing bounds how many tracks someone likes. The rows now go
through a virtualizer driven by the page scroller, like the playlist
and library tables, with the same 56 px row pitch.

The scrollMargin machinery those tables each copy is now one hook,
usePageVirtualizer, which also re-measures when the view's content
above the list changes size, not only the list or the scroller.

Rows keep their markup, keys, double-click and Enter / Space play,
the keyboard menu, the hover-only unlike button and the now-playing
highlight; the divider moves from divide-y onto each row but the last.
---
 src/components/views/LikedView.tsx | 275 ++++++++++++++++++-----------
 src/hooks/usePageVirtualizer.ts    |  68 +++++++
 2 files changed, 242 insertions(+), 101 deletions(-)
 create mode 100644 src/hooks/usePageVirtualizer.ts

diff --git a/src/components/views/LikedView.tsx b/src/components/views/LikedView.tsx
index 9ea65b488..edc5abd1f 100644
--- a/src/components/views/LikedView.tsx
+++ b/src/components/views/LikedView.tsx
@@ -10,6 +10,7 @@ import { usePlayer } from "../../hooks/usePlayer";
 import { useTrackContextMenu } from "../../hooks/useTrackContextMenu";
 import { useTrackUpdated } from "../../hooks/useTrackUpdated";
 import { useLikedChanged } from "../../hooks/useLikedTracks";
+import { usePageVirtualizer } from "../../hooks/usePageVirtualizer";
 import {
   listLikedTracks,
   toggleLikeTrack,
@@ -153,107 +154,20 @@ export function LikedView({
             </span>
             <span aria-hidden="true" />
           </div>
-          <ul
-            className={`divide-y divide-zinc-100 dark:divide-zinc-800/60 ${
-              isLoading ? "opacity-50" : ""
-            }`}
-          >
-            {tracks.map((track, index) => {
-              const isCurrent = track.id === currentTrack?.id;
-              return (
-                // Row can't be a <button> because it contains action
-                // buttons; nested buttons are invalid HTML. Keyboard
-                // activation still works via tabIndex + onKeyDown.
-                <li
-                  key={track.id}
-                  tabIndex={0}
-                  role="button"
-                  onDoubleClick={() =>
-                    playTracks(tracks, index, { type: "liked", id: null })
-                  }
-                  onKeyDown={(e) => {
-                    // Only play when the row itself is focused — keys
-                    // fired from nested buttons / links would otherwise
-                    // bubble here and double-fire playback.
-                    if (e.target !== e.currentTarget) return;
-                    if (trackContextMenu.openFromKeyboard(e, track)) return;
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      playTracks(tracks, index, { type: "liked", id: null });
-                    }
-                  }}
-                  onKeyUp={(e) => {
-                    if (e.target !== e.currentTarget) return;
-                    if (e.key === " ") e.preventDefault();
-                  }}
-                  onContextMenu={(e) => trackContextMenu.open(e, track)}
-                  className={`group grid grid-cols-[3rem_2.75rem_1fr_1fr_1fr_5rem_2.5rem] gap-4 px-5 py-2 items-center select-none transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 ${
-                    isCurrent
-                      ? "bg-emerald-50 dark:bg-emerald-900/20"
-                      : "hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
-                  }`}
-                >
-                  <span
-                    className={`text-right text-sm tabular-nums ${
-                      isCurrent
-                        ? "text-emerald-500 font-semibold"
-                        : "text-zinc-400"
-                    }`}
-                  >
-                    {index + 1}
-                  </span>
-                  <Artwork
-                    path={track.artwork_path}
-                    className="w-10 h-10"
-                    iconSize={18}
-                    alt={track.album_title ?? track.title}
-                    rounded="md"
-                  />
-                  <span
-                    className={`text-sm truncate flex items-center gap-2 ${
-                      isCurrent
-                        ? "text-emerald-600 dark:text-emerald-400 font-semibold"
-                        : "text-zinc-800 dark:text-zinc-200"
-                    }`}
-                  >
-                    <span className="truncate">{track.title}</span>
-                    <HiResBadge
-                      bitDepth={track.bit_depth}
-                      sampleRate={track.sample_rate}
-                      codec={track.codec}
-                      variant="inline"
-                    />
-                  </span>
-                  <ArtistLink
-                    name={track.artist_name}
-                    artistIds={track.artist_ids}
-                    onNavigate={onNavigateToArtist}
-                    fallback={unknown}
-                    className="text-sm text-zinc-500 truncate"
-                  />
-                  <span className="text-sm text-zinc-500 truncate">
-                    {track.album_title ?? unknown}
-                  </span>
-                  <span className="text-sm tabular-nums text-zinc-400 text-right">
-                    {formatDuration(track.duration_ms)}
-                  </span>
-                  <div className="flex justify-center">
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleUnlike(track.id);
-                      }}
-                      aria-label={t("liked.unlike")}
-                      className="p-1.5 rounded-full text-pink-500 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors opacity-0 group-hover:opacity-100"
-                    >
-                      <Heart size={16} className="fill-current" />
-                    </button>
-                  </div>
-                </li>
-              );
-            })}
-          </ul>
+          <LikedTrackList
+            tracks={tracks}
+            isLoading={isLoading}
+            currentTrackId={currentTrack?.id ?? null}
+            onPlayTrack={(index) =>
+              playTracks(tracks, index, { type: "liked", id: null })
+            }
+            onUnlike={handleUnlike}
+            onNavigateToArtist={onNavigateToArtist}
+            onContextMenuRow={trackContextMenu.open}
+            onRowMenuKey={trackContextMenu.openFromKeyboard}
+            unknownLabel={unknown}
+            unlikeLabel={t("liked.unlike")}
+          />
         </div>
       ) : (
         <EmptyState
@@ -284,6 +198,165 @@ export function LikedView({
   );
 }
 
+/** Row pitch, border included — the 56 px the playlist and library rows
+ *  use, and what a 40 px cover with its padding needed in flow. */
+const LIKED_ROW_HEIGHT = 56;
+
+interface LikedTrackListProps {
+  tracks: Track[];
+  isLoading: boolean;
+  currentTrackId: number | null;
+  onPlayTrack: (index: number) => void;
+  onUnlike: (trackId: number) => void;
+  onNavigateToArtist: (artistId: number) => void;
+  onContextMenuRow: (event: React.MouseEvent, track: Track) => void;
+  /** Keyboard equivalent (Menu / Shift+F10). Returns `true` when it
+   *  opened the menu, so the row's own key handling can stand down. */
+  onRowMenuKey: (event: React.KeyboardEvent, track: Track) => boolean;
+  unknownLabel: string;
+  unlikeLabel: string;
+}
+
+/** The liked rows, virtualized against the page scroller: nothing bounds
+ *  how many tracks someone likes, and every row carries artwork. */
+function LikedTrackList({
+  tracks,
+  isLoading,
+  currentTrackId,
+  onPlayTrack,
+  onUnlike,
+  onNavigateToArtist,
+  onContextMenuRow,
+  onRowMenuKey,
+  unknownLabel,
+  unlikeLabel,
+}: LikedTrackListProps) {
+  "use no memo";
+  const { parentRef, virtualizer, scrollMargin } =
+    usePageVirtualizer<HTMLUListElement>({
+      count: tracks.length,
+      estimateSize: () => LIKED_ROW_HEIGHT,
+    });
+
+  return (
+    <ul
+      ref={parentRef}
+      className={isLoading ? "opacity-50" : ""}
+      style={{
+        height: `${virtualizer.getTotalSize()}px`,
+        position: "relative",
+      }}
+    >
+      {virtualizer.getVirtualItems().map((virtualRow) => {
+        const index = virtualRow.index;
+        const track = tracks[index];
+        if (!track) return null;
+        const isCurrent = track.id === currentTrackId;
+        return (
+          // Row can't be a <button> because it contains action
+          // buttons; nested buttons are invalid HTML. Keyboard
+          // activation still works via tabIndex + onKeyDown.
+          <li
+            key={track.id}
+            tabIndex={0}
+            role="button"
+            onDoubleClick={() => onPlayTrack(index)}
+            onKeyDown={(e) => {
+              // Only play when the row itself is focused — keys
+              // fired from nested buttons / links would otherwise
+              // bubble here and double-fire playback.
+              if (e.target !== e.currentTarget) return;
+              if (onRowMenuKey(e, track)) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onPlayTrack(index);
+              }
+            }}
+            onKeyUp={(e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === " ") e.preventDefault();
+            }}
+            onContextMenu={(e) => onContextMenuRow(e, track)}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: `${virtualRow.size}px`,
+              transform: `translateY(${virtualRow.start - scrollMargin}px)`,
+            }}
+            className={`group grid grid-cols-[3rem_2.75rem_1fr_1fr_1fr_5rem_2.5rem] gap-4 px-5 items-center select-none transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 ${
+              index < tracks.length - 1
+                ? "border-b border-zinc-100 dark:border-zinc-800/60"
+                : ""
+            } ${
+              isCurrent
+                ? "bg-emerald-50 dark:bg-emerald-900/20"
+                : "hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
+            }`}
+          >
+            <span
+              className={`text-right text-sm tabular-nums ${
+                isCurrent ? "text-emerald-500 font-semibold" : "text-zinc-400"
+              }`}
+            >
+              {index + 1}
+            </span>
+            <Artwork
+              path={track.artwork_path}
+              className="w-10 h-10"
+              iconSize={18}
+              alt={track.album_title ?? track.title}
+              rounded="md"
+            />
+            <span
+              className={`text-sm truncate flex items-center gap-2 ${
+                isCurrent
+                  ? "text-emerald-600 dark:text-emerald-400 font-semibold"
+                  : "text-zinc-800 dark:text-zinc-200"
+              }`}
+            >
+              <span className="truncate">{track.title}</span>
+              <HiResBadge
+                bitDepth={track.bit_depth}
+                sampleRate={track.sample_rate}
+                codec={track.codec}
+                variant="inline"
+              />
+            </span>
+            <ArtistLink
+              name={track.artist_name}
+              artistIds={track.artist_ids}
+              onNavigate={onNavigateToArtist}
+              fallback={unknownLabel}
+              className="text-sm text-zinc-500 truncate"
+            />
+            <span className="text-sm text-zinc-500 truncate">
+              {track.album_title ?? unknownLabel}
+            </span>
+            <span className="text-sm tabular-nums text-zinc-400 text-right">
+              {formatDuration(track.duration_ms)}
+            </span>
+            <div className="flex justify-center">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onUnlike(track.id);
+                }}
+                aria-label={unlikeLabel}
+                className="p-1.5 rounded-full text-pink-500 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors opacity-0 group-hover:opacity-100"
+              >
+                <Heart size={16} className="fill-current" />
+              </button>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
 interface LikedSkeletonProps {
   t: (key: string, options?: Record<string, unknown>) => string;
 }
diff --git a/src/hooks/usePageVirtualizer.ts b/src/hooks/usePageVirtualizer.ts
new file mode 100644
index 000000000..110824565
--- /dev/null
+++ b/src/hooks/usePageVirtualizer.ts
@@ -0,0 +1,68 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { usePageScroll } from "./usePageScroll";
+
+interface PageVirtualizerOptions {
+  count: number;
+  estimateSize: (index: number) => number;
+  overscan?: number;
+  /** Ties a measured size to an item rather than to a position, for a
+   *  list whose rows are measured (`measureElement`) and can shift. */
+  getItemKey?: (index: number) => string | number;
+}
+
+/**
+ * A row virtualizer driven by the page scroller (`usePageScroll()`), for
+ * a list that sits somewhere down a view rather than owning a scroller of
+ * its own — the one-scrollbar rule (see `docs/architecture/invariants.md`
+ * § Virtual scroll everywhere).
+ *
+ * Attach `parentRef` to the element the rows are positioned in, give it
+ * `position: relative` and `virtualizer.getTotalSize()` as its height, and
+ * place each row at `virtualRow.start - scrollMargin`. `scrollMargin` is
+ * how far down the scroller that element starts; it is re-measured when
+ * the element, the scroller, or the view's content changes size — the
+ * last one because a header or a section above the list growing (a bio
+ * expanding, a grid loading) moves the list without resizing it.
+ */
+export function usePageVirtualizer<E extends HTMLElement = HTMLDivElement>({
+  count,
+  estimateSize,
+  overscan = 8,
+  getItemKey,
+}: PageVirtualizerOptions) {
+  "use no memo";
+  const pageScrollRef = usePageScroll();
+  const parentRef = useRef<E>(null);
+  const [scrollMargin, setScrollMargin] = useState(0);
+  useLayoutEffect(() => {
+    const parent = parentRef.current;
+    const scroller = pageScrollRef?.current;
+    if (!parent || !scroller) return;
+    const recompute = () => {
+      const parentRect = parent.getBoundingClientRect();
+      const scrollerRect = scroller.getBoundingClientRect();
+      setScrollMargin(parentRect.top - scrollerRect.top + scroller.scrollTop);
+    };
+    recompute();
+    const ro = new ResizeObserver(recompute);
+    ro.observe(parent);
+    ro.observe(scroller);
+    for (const child of Array.from(scroller.children)) ro.observe(child);
+    return () => ro.disconnect();
+    // `count` re-runs this when the list first mounts: a view that shows
+    // an empty state until its rows load has no parent to measure before.
+  }, [pageScrollRef, count]);
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => pageScrollRef?.current ?? null,
+    estimateSize,
+    overscan,
+    scrollMargin,
+    ...(getItemKey ? { getItemKey } : {}),
+  });
+
+  return { parentRef, virtualizer, scrollMargin };
+}

From d48d041a18d374e108c302c8d10e12198cbad3f5 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 19 Oct 2026 00:54:08 +0200
Subject: [PATCH 3/6] fix(ui): virtualize the genre, year and artist track
 tables

These detail tables mapped every row on the grounds that one entity
bounds its own list. That holds for an album, not for a genre, which
can be a third of the library, nor for a year or a prolific artist.
DetailTrackTable (genre and year) and ArtistTrackTable now go through
usePageVirtualizer; the album view stays in flow.

Row markup, keys, play-from-here indexing, the playing indicator, the
like toggle, the album link and the keyboard menu are unchanged.
---
 src/components/views/ArtistDetailView.tsx | 44 +++++++++++++++++++---
 src/components/views/GenreDetailView.tsx  | 45 +++++++++++++++++++----
 2 files changed, 76 insertions(+), 13 deletions(-)

diff --git a/src/components/views/ArtistDetailView.tsx b/src/components/views/ArtistDetailView.tsx
index c7e4e2197..21b44378a 100644
--- a/src/components/views/ArtistDetailView.tsx
+++ b/src/components/views/ArtistDetailView.tsx
@@ -27,6 +27,7 @@ import { ShareImageButton } from "../common/ShareImageButton";
 import { renderCollectionCard } from "../../lib/collectionCard";
 import { useTrackContextMenu } from "../../hooks/useTrackContextMenu";
 import { useTrackUpdated } from "../../hooks/useTrackUpdated";
+import { usePageVirtualizer } from "../../hooks/usePageVirtualizer";
 import { useArtistBioCollapsed } from "../../hooks/useArtistBioCollapsed";
 import { useArtistHero } from "../../hooks/useArtistHero";
 import {
@@ -922,6 +923,13 @@ export function ArtistDetailView({
 
 // ── Track table ─────────────────────────────────────────────────────
 
+/** Row pitch, border included — the 56 px the playlist and library rows
+ *  use, and what a 40 px cover with its padding needed in flow. */
+const ARTIST_ROW_HEIGHT = 56;
+
+/** Every track of the artist, virtualized against the page scroller: an
+ *  album is small by nature, a discography is not — a prolific composer
+ *  or a long-running act runs to hundreds of rows. */
 function ArtistTrackTable({
   tracks,
   isLoading,
@@ -947,7 +955,13 @@ function ArtistTrackTable({
   onRowMenuKey: (event: React.KeyboardEvent, track: Track) => boolean;
   t: (key: string, opts?: Record<string, unknown>) => string;
 }) {
+  "use no memo";
   const gridCols = "grid-cols-[3rem_2.75rem_1fr_1fr_5rem_2rem]";
+  const { parentRef, virtualizer, scrollMargin } =
+    usePageVirtualizer<HTMLUListElement>({
+      count: tracks.length,
+      estimateSize: () => ARTIST_ROW_HEIGHT,
+    });
   return (
     <div className="rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-800/40 overflow-hidden">
       <div
@@ -967,11 +981,17 @@ function ArtistTrackTable({
       </div>
 
       <ul
-        className={`divide-y divide-zinc-100 dark:divide-zinc-800/60 ${
-          isLoading ? "opacity-50" : ""
-        }`}
+        ref={parentRef}
+        className={isLoading ? "opacity-50" : ""}
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          position: "relative",
+        }}
       >
-        {tracks.map((track, index) => {
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const index = virtualRow.index;
+          const track = tracks[index];
+          if (!track) return null;
           const isCurrent = track.id === currentTrackId;
           return (
             // Row can't be a <button> because it contains action
@@ -985,7 +1005,7 @@ function ArtistTrackTable({
               onKeyDown={(e) => {
                 // Only play when the row itself is focused — see LibraryView.
                 if (e.target !== e.currentTarget) return;
-                if (onRowMenuKey(e, tracks[index])) return;
+                if (onRowMenuKey(e, track)) return;
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
                   onPlayTrack(index);
@@ -996,7 +1016,19 @@ function ArtistTrackTable({
                 if (e.key === " ") e.preventDefault();
               }}
               onContextMenu={(e) => onContextMenuRow(e, track)}
-              className={`grid ${gridCols} gap-4 px-5 py-2 items-center select-none transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 ${
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start - scrollMargin}px)`,
+              }}
+              className={`grid ${gridCols} gap-4 px-5 items-center select-none transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 ${
+                index < tracks.length - 1
+                  ? "border-b border-zinc-100 dark:border-zinc-800/60"
+                  : ""
+              } ${
                 isCurrent
                   ? "bg-emerald-50 dark:bg-emerald-900/20"
                   : "hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
diff --git a/src/components/views/GenreDetailView.tsx b/src/components/views/GenreDetailView.tsx
index d1d292586..3fa873158 100644
--- a/src/components/views/GenreDetailView.tsx
+++ b/src/components/views/GenreDetailView.tsx
@@ -20,6 +20,7 @@ import { PlayingIndicator } from "../common/PlayingIndicator";
 import { usePlayer } from "../../hooks/usePlayer";
 import { useTrackContextMenu } from "../../hooks/useTrackContextMenu";
 import { useTrackUpdated } from "../../hooks/useTrackUpdated";
+import { usePageVirtualizer } from "../../hooks/usePageVirtualizer";
 import { getGenreDetail, type GenreDetail } from "../../lib/tauri/detail";
 import {
   formatDuration,
@@ -263,8 +264,14 @@ export function GenreDetailView({
 
 // ── Track table ─────────────────────────────────────────────────────
 
+/** Row pitch, border included — the 56 px the playlist and library rows
+ *  use, and what a 40 px cover with its padding needed in flow. */
+const DETAIL_ROW_HEIGHT = 56;
+
 /** The track table of a detail page that lists tracks across albums: a
- *  genre, a year. */
+ *  genre, a year. Virtualized against the page scroller, because unlike
+ *  an album neither is small by nature — a genre can be a third of the
+ *  library. */
 export function DetailTrackTable({
   tracks,
   isLoading,
@@ -294,7 +301,13 @@ export function DetailTrackTable({
   onRowMenuKey: (event: React.KeyboardEvent, track: Track) => boolean;
   t: (key: string, opts?: Record<string, unknown>) => string;
 }) {
+  "use no memo";
   const gridCols = "grid-cols-[3rem_2.75rem_1.5fr_1fr_1fr_5rem_2rem]";
+  const { parentRef, virtualizer, scrollMargin } =
+    usePageVirtualizer<HTMLUListElement>({
+      count: tracks.length,
+      estimateSize: () => DETAIL_ROW_HEIGHT,
+    });
   return (
     <div className="rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-800/40 overflow-hidden">
       <div
@@ -315,11 +328,17 @@ export function DetailTrackTable({
       </div>
 
       <ul
-        className={`divide-y divide-zinc-100 dark:divide-zinc-800/60 ${
-          isLoading ? "opacity-50" : ""
-        }`}
+        ref={parentRef}
+        className={isLoading ? "opacity-50" : ""}
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          position: "relative",
+        }}
       >
-        {tracks.map((track, index) => {
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const index = virtualRow.index;
+          const track = tracks[index];
+          if (!track) return null;
           const isCurrent = track.id === currentTrackId;
           return (
             // Row can't be a <button> because it contains action
@@ -333,7 +352,7 @@ export function DetailTrackTable({
               onKeyDown={(e) => {
                 // Only play when the row itself is focused — see LibraryView.
                 if (e.target !== e.currentTarget) return;
-                if (onRowMenuKey(e, tracks[index])) return;
+                if (onRowMenuKey(e, track)) return;
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
                   onPlayTrack(index);
@@ -344,7 +363,19 @@ export function DetailTrackTable({
                 if (e.key === " ") e.preventDefault();
               }}
               onContextMenu={(e) => onContextMenuRow(e, track)}
-              className={`grid ${gridCols} gap-4 px-5 py-2 items-center select-none transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 ${
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start - scrollMargin}px)`,
+              }}
+              className={`grid ${gridCols} gap-4 px-5 items-center select-none transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500 ${
+                index < tracks.length - 1
+                  ? "border-b border-zinc-100 dark:border-zinc-800/60"
+                  : ""
+              } ${
                 isCurrent
                   ? "bg-emerald-50 dark:bg-emerald-900/20"
                   : "hover:bg-zinc-50 dark:hover:bg-zinc-800/60"

From 2c424b72e3d62bee5a7321e0ac2e080c064a5a6e Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 19 Oct 2026 00:54:08 +0200
Subject: [PATCH 4/6] fix(ui): virtualize the play history by day

The history appends a page of 100 plays each time the sentinel comes
into view and never drops one, so a long scroll back kept every row it
passed mounted. It now virtualizes days against the page scroller: each
day stays a whole, measured section, so its sticky header still docks
under the top bar and is pushed off by the next day's, and the
infinite-scroll sentinel still follows the list.

Jumping to a month also meant to scroll back to the top, but it
scrolled the window, which never scrolls; it now scrolls the page.
---
 src/components/views/HistoryView.tsx | 146 +++++++++++++++++++++------
 1 file changed, 113 insertions(+), 33 deletions(-)

diff --git a/src/components/views/HistoryView.tsx b/src/components/views/HistoryView.tsx
index 8759bcebe..c206ce17a 100644
--- a/src/components/views/HistoryView.tsx
+++ b/src/components/views/HistoryView.tsx
@@ -8,6 +8,8 @@ import { CreatePlaylistModal } from "../common/CreatePlaylistModal";
 import { usePlayer } from "../../hooks/usePlayer";
 import { useTrackContextMenu } from "../../hooks/useTrackContextMenu";
 import { useTrackUpdated } from "../../hooks/useTrackUpdated";
+import { usePageScroll } from "../../hooks/usePageScroll";
+import { usePageVirtualizer } from "../../hooks/usePageVirtualizer";
 import {
   listPlayHistory,
   playHistoryMonths,
@@ -139,6 +141,7 @@ export function HistoryView({
   const [cursor, setCursor] = useState<number | null>(null);
 
   const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const pageScrollRef = usePageScroll();
 
   // ── Initial / refetch loaders ──────────────────────────────────
   const afterMs = useMemo(() => rangeStartMs(range), [range]);
@@ -229,7 +232,7 @@ export function HistoryView({
 
   // ── Group consecutive rows by day key ──────────────────────────
   const dayGroups = useMemo(() => {
-    const groups: { key: string; ts: number; rows: PlayHistoryRow[] }[] = [];
+    const groups: HistoryDay[] = [];
     for (const row of rows) {
       const key = dayKey(row.played_at);
       const last = groups[groups.length - 1];
@@ -274,9 +277,10 @@ export function HistoryView({
         setCursor(list.length > 0 ? list[list.length - 1].played_at : null);
         setHasMore(list.length === PAGE_SIZE);
         // Scroll the page to the top so the user lands at the start
-        // of the requested month rather than wherever they were.
+        // of the requested month rather than wherever they were. The
+        // page scroller, not the window — the window never scrolls.
         window.requestAnimationFrame(() => {
-          window.scrollTo({ top: 0, behavior: "smooth" });
+          pageScrollRef?.current?.scrollTo({ top: 0, behavior: "smooth" });
         });
       } catch (err) {
         console.error("[HistoryView] jump-to-month failed", err);
@@ -284,7 +288,7 @@ export function HistoryView({
         setIsLoading(false);
       }
     },
-    [afterMs],
+    [afterMs, pageScrollRef],
   );
 
   return (
@@ -338,34 +342,36 @@ export function HistoryView({
           />
         ) : (
           <div>
-            {dayGroups.map((group) => (
-              <DayGroup
-                key={group.key}
-                group={group}
-                locale={locale}
-                currentTrackId={currentTrack?.id ?? null}
-                onNavigateToArtist={onNavigateToArtist}
-                onContextMenu={(e, row) =>
-                  trackContextMenu.open(e, rowToTrack(row))
-                }
-                onRowMenuKey={(e, row) =>
-                  trackContextMenu.openFromKeyboard(e, rowToTrack(row))
-                }
-                onPlay={(row) =>
-                  // The clicked play, then the rest of the history as it
-                  // is listed — further back in time — so playback carries
-                  // on instead of stopping after one track. Each track
-                  // once: a song played ten times is one entry in the
-                  // queue, at its first place from here. Source type is
-                  // "manual" because the user clicked from a chronological
-                  // list, not a playlist or radio.
-                  playTracks(historyQueueFrom(rows, row), 0, {
-                    type: "manual",
-                    id: null,
-                  })
-                }
-              />
-            ))}
+            <HistoryDayList
+              dayGroups={dayGroups}
+              renderGroup={(group) => (
+                <DayGroup
+                  group={group}
+                  locale={locale}
+                  currentTrackId={currentTrack?.id ?? null}
+                  onNavigateToArtist={onNavigateToArtist}
+                  onContextMenu={(e, row) =>
+                    trackContextMenu.open(e, rowToTrack(row))
+                  }
+                  onRowMenuKey={(e, row) =>
+                    trackContextMenu.openFromKeyboard(e, rowToTrack(row))
+                  }
+                  onPlay={(row) =>
+                    // The clicked play, then the rest of the history as it
+                    // is listed — further back in time — so playback carries
+                    // on instead of stopping after one track. Each track
+                    // once: a song played ten times is one entry in the
+                    // queue, at its first place from here. Source type is
+                    // "manual" because the user clicked from a chronological
+                    // list, not a playlist or radio.
+                    playTracks(historyQueueFrom(rows, row), 0, {
+                      type: "manual",
+                      id: null,
+                    })
+                  }
+                />
+              )}
+            />
             {/* Infinite-scroll sentinel + spinner */}
             <div ref={sentinelRef} className="py-6 text-center">
               {isLoading && (
@@ -445,8 +451,82 @@ function timeLabel(ts: number, locale: string): string {
   }).format(new Date(ts));
 }
 
+/** One day of plays, as the list groups them. */
+interface HistoryDay {
+  key: string;
+  ts: number;
+  rows: PlayHistoryRow[];
+}
+
+/** First guesses for a day's height before it is measured: the sticky
+ *  header, then one row per play (40 px cover, its padding, the divider). */
+const DAY_HEADER_ESTIMATE = 29;
+const HISTORY_ROW_ESTIMATE = 57;
+
+/**
+ * The days, virtualized against the page scroller. Each page the infinite
+ * scroll appends stays mounted otherwise, so a long session back through
+ * the history kept every row it ever passed in the DOM.
+ *
+ * The unit is the day, not the row: a day is a `<section>` whose header
+ * sticks inside it, and keeping the section whole keeps that — each
+ * header still docks under the TopBar and is pushed off by the next day's,
+ * which a flat list of rows would have to rebuild by hand. A day is
+ * bounded by how much one person listens in a day, so mounting one whole
+ * is cheap. Days are measured, since their height is their play count.
+ * Positioned with `top`, not a transform, so nothing in the way of the
+ * sticky header is transformed.
+ */
+function HistoryDayList({
+  dayGroups,
+  renderGroup,
+}: {
+  dayGroups: HistoryDay[];
+  renderGroup: (group: HistoryDay) => React.ReactNode;
+}) {
+  "use no memo";
+  const { parentRef, virtualizer, scrollMargin } = usePageVirtualizer({
+    count: dayGroups.length,
+    estimateSize: (index) =>
+      DAY_HEADER_ESTIMATE +
+      (dayGroups[index]?.rows.length ?? 0) * HISTORY_ROW_ESTIMATE,
+    overscan: 2,
+    getItemKey: (index) => dayGroups[index]?.key ?? index,
+  });
+
+  return (
+    <div
+      ref={parentRef}
+      style={{
+        height: `${virtualizer.getTotalSize()}px`,
+        position: "relative",
+      }}
+    >
+      {virtualizer.getVirtualItems().map((item) => {
+        const group = dayGroups[item.index];
+        if (!group) return null;
+        return (
+          <div
+            key={group.key}
+            data-index={item.index}
+            ref={virtualizer.measureElement}
+            style={{
+              position: "absolute",
+              top: `${item.start - scrollMargin}px`,
+              left: 0,
+              width: "100%",
+            }}
+          >
+            {renderGroup(group)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 interface DayGroupProps {
-  group: { key: string; ts: number; rows: PlayHistoryRow[] };
+  group: HistoryDay;
   locale: string;
   currentTrackId: number | null;
   onContextMenu: (e: React.MouseEvent, row: PlayHistoryRow) => void;

From e95098c9d0f8ec2141a82571b1a2b1172bffcd62 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 19 Oct 2026 00:54:08 +0200
Subject: [PATCH 5/6] docs(ui): move the virtual scroll line to lists bounded
 by nature

The invariant exempted every detail view of one entity, which covered
genres and artists whose lists are not small. Only the album stays in
flow now. Name usePageVirtualizer as the way a new list gets the page
scroller, say how the history keeps its day groups, and drop the claim
that statistics rows are virtualized: they are top-ten lists.
---
 docs/architecture/invariants.md | 2 +-
 docs/features/ui.md             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/architecture/invariants.md b/docs/architecture/invariants.md
index d9b64b7dd..5c136a80e 100644
--- a/docs/architecture/invariants.md
+++ b/docs/architecture/invariants.md
@@ -245,7 +245,7 @@ Wider topology: [audio architecture](audio.md).
 
 `TrackTable` uses `@tanstack/react-virtual` for 6000+ track performance. Virtualized tables consume `usePageScroll()` for the scroll element instead of nesting their own `overflow-y-auto` — that drives a single Spotify-style page scrollbar.
 
-**Where the line is.** "Everywhere" means every list whose length has no natural bound: the library's tracks, albums, artists and playlist grids, and `PlaylistView` — a playlist can hold six thousand tracks because someone put them there. A **detail view of one entity** is bounded by that entity and is not virtualized: `AlbumDetailView`, `ArtistDetailView` and `GenreDetailView` all render their lists directly, and an album is a dozen or two tracks by nature. The distinction is worth stating because the cost is not free — a virtualizer needs a measured scroll element, a `scrollMargin` recomputed against the page scroller, and a re-measure on every column change, which is real machinery to carry for a list that fits on a screen.
+**Where the line is.** "Everywhere" means every list whose length has no natural bound: the library's tracks, albums, artists and playlist grids, `PlaylistView` — a playlist can hold six thousand tracks because someone put them there — the liked tracks, the play history, and the track tables of a genre, a year and an artist. Only a list its entity bounds by nature renders directly: `AlbumDetailView`, because an album is a dozen or two tracks. The line used to be drawn at "a detail view of one entity", which left `GenreDetailView`, `YearDetailView` and `ArtistDetailView` mapping every row, though a genre can be a third of the library and a prolific artist runs to hundreds of tracks. The machinery a page-driven list needs — the scroll element from `usePageScroll()`, a `scrollMargin` re-measured against the page scroller whenever the list, the scroller or the content above it changes size — is one hook, [`usePageVirtualizer`](../../src/hooks/usePageVirtualizer.ts), so a new list takes it rather than copying it (the library tables and `PlaylistView` predate it and still carry their own copy). A grouped list keeps its groups whole: the history virtualizes **days**, each a measured `<section>` whose sticky header still docks under the TopBar and is pushed off by the next day's, and a day is bounded by how much one person listens in one.
 
 The **sidebar** is the deliberate exception on the other side: it is a fixed column with its own scroller, so it neither uses `usePageScroll()` nor virtualizes. Pointing a virtualizer at its nested `overflow-y-auto` would introduce, inside the one component that legitimately has one, exactly the pattern this invariant exists to keep out of the page.
 
diff --git a/docs/features/ui.md b/docs/features/ui.md
index 91196f8b3..9006c8e15 100644
--- a/docs/features/ui.md
+++ b/docs/features/ui.md
@@ -427,7 +427,7 @@ Track tables themselves are **borderless** — no `rounded-2xl border bg-white`
 
 ## Performance
 
-- **Virtual scroll** — `@tanstack/react-virtual` on every long list (tracks, queue, playlist contents, statistics rows). Tables share the page-level scroller via [`usePageScroll()`](../../src/hooks/usePageScroll.ts) and compute `scrollMargin` from the parent's offset so the virtualiser knows where its content begins. Single Spotify-style scrollbar, no nested overflow.
+- **Virtual scroll** — `@tanstack/react-virtual` on every long list (tracks, queue, playlist contents, liked tracks, play history, the genre / year / artist track tables). Tables share the page-level scroller via [`usePageScroll()`](../../src/hooks/usePageScroll.ts) and compute `scrollMargin` from the parent's offset so the virtualiser knows where its content begins — packaged for new lists as [`usePageVirtualizer`](../../src/hooks/usePageVirtualizer.ts). The history virtualizes whole days, so its sticky day headers behave as before. An album's track list is the one track list left in flow: an album is short by nature, and the statistics top lists are ten rows. One page scrollbar, no nested overflow. Where the line sits and why: [invariants § Virtual scroll everywhere](../architecture/invariants.md#virtual-scroll-everywhere).
 - **Image cache** — in-memory LRU (`lib/imageCache.ts`) for `convertFileSrc` results so the same artwork URL isn't recomputed on every render.
 - **Thumbnails** — 1× and 2× covers generated by [`thumbnails.rs`](../../src-tauri/crates/core/src/artwork/thumbnails.rs) with `fast_image_resize` (SIMD AVX/SSE/NEON depending on host) and served via the asset protocol.
 

From 0799463543543c328f0ed374e9e70d46c33bc5e9 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Mon, 19 Oct 2026 01:16:23 +0200
Subject: [PATCH 6/6] fix(ui): show the unlike button to keyboard and touch
 users too

It only appeared on mouse hover, so a keyboard user tabbing to it, or a
touch screen with no hover, had an invisible control. It now also shows
when the row holds focus and on devices without hover, with a visible
focus ring, like the other row actions.
---
 src/components/views/LikedView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/LikedView.tsx b/src/components/views/LikedView.tsx
index edc5abd1f..cb9de93f9 100644
--- a/src/components/views/LikedView.tsx
+++ b/src/components/views/LikedView.tsx
@@ -345,7 +345,7 @@ function LikedTrackList({
                   onUnlike(track.id);
                 }}
                 aria-label={unlikeLabel}
-                className="p-1.5 rounded-full text-pink-500 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors opacity-0 group-hover:opacity-100"
+                className="p-1.5 rounded-full text-pink-500 hover:text-pink-600 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-500/60"
               >
                 <Heart size={16} className="fill-current" />
               </button>