Recycle grid cards instead of rebuilding them

Scrolling the grid did nothing but destroy cards and build near-identical
ones back: a template string parsed as innerHTML, ten querySelectors, and
a listener per interactive element, every time a card entered the window.
The virtualizer now keeps a pool and rebinds a card it already has --
18us against 136us to build one, and 74-83% of mounts are served from it.

Two things had to change first. Nothing on a card may close over the
video it is showing, because the card outlives the video, so every
interaction moved to one delegated listener per event type on the grid.
And every card now has the same shape whatever it shows: the optional
parts are always present and hidden when unused, so any pooled card fits
any video. That needed a global [hidden] rule, since .live-badge and
.video-tags carry their own display.

The rest is the release path, which is where this design lives or dies.
A thumbnail carries a generation, so a race or a proxy fallback settling
after the card moved on cannot paint over the video now showing. The
player stamps the card it was opened from, so a recycled element stops
answering for it. The reveal handler, the entrance-animation listener and
the hover preview are all taken back off. Anything missed here surfaces
as one video's title, thumbnail or heart on another video's card, which
is what the smoke suite scrolls back and forth to catch.

Two incidental fixes found while measuring: bindCard no longer writes a
data-tag per tag button (dataset is a proxy, and that alone cost more
than the rest of a rebind put together -- the handler reads the label off
the button), and favorites.has no longer parses a URL for every card that
isn't a favorite by key.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd

tests/smoke_grid.py

@@ -96,15 +96,31 @@ def boot(page):
     page.wait_for_timeout(3000)
 
 
-def scroll_around(page, downs=8):
+def grow(page, want=80, tries=14):
+    """Load enough videos that the grid is taller than the mount window.
+
+    The virtualizer keeps everything within 1.2 viewports of the screen mounted,
+    so a short list never unmounts anything and never exercises recycling.
+    """
+    for _ in range(tries):
+        if page.evaluate("() => App.state.loadedVideos.length") >= want:
+            break
+        page.evaluate("() => window.scrollTo(0, document.documentElement.scrollHeight)")
+        page.wait_for_timeout(2000)
+    return page.evaluate("() => App.state.loadedVideos.length")
+
+
+def scroll_around(page, downs=10):
     """Churn the mount/unmount path: far down, then back to the top."""
     for _ in range(downs):
         page.evaluate("() => window.scrollBy(0, window.innerHeight * 1.5)")
-        page.wait_for_timeout(700)
-    page.wait_for_timeout(1500)
-    for _ in range(downs):
-        page.evaluate("() => window.scrollBy(0, -window.innerHeight * 1.5)")
         page.wait_for_timeout(500)
+    page.wait_for_timeout(1200)
+    page.evaluate("() => window.scrollTo(0, 0)")
+    page.wait_for_timeout(1200)
+    for _ in range(downs // 2):
+        page.evaluate("() => window.scrollBy(0, window.innerHeight * 2.5)")
+        page.wait_for_timeout(400)
     page.wait_for_timeout(1500)
 
 
@@ -152,6 +168,11 @@ def main():
 
         check_cards(c, page.evaluate(INSPECT), "on first render")
 
+        # Informational: how many videos it took to outgrow the mount window
+        # varies with viewport and page size. Whether that was *enough* is
+        # asserted properly at the end, on the pool's hit rate.
+        print(f"\ngrew the listing to {grow(page)} videos")
+
         scroll_around(page)
         check_cards(c, page.evaluate(INSPECT), "after scrolling down and back")
 
@@ -176,13 +197,28 @@ def main():
         }""")
         c.ok("the card menu opens after recycling", opened)
 
-        stats = page.evaluate(
-            "() => (App.virtualGrid.stats && App.virtualGrid.stats()) || null")
+        # Tag clicks read the button's own text now, not a data attribute.
+        searched = page.evaluate("""() => {
+            const tag = document.querySelector('#video-grid .video-card .video-tag');
+            if (!tag) return 'no-tags';
+            const label = tag.textContent;
+            tag.click();
+            return document.getElementById('search-input').value === label ? 'ok' : 'mismatch';
+        }""")
+        c.ok("clicking a tag searches for it", searched in ("ok", "no-tags"), searched)
+        page.wait_for_timeout(1500)
+
+        stats = page.evaluate("""
+            () => (App.virtualGrid.stats && App.virtualGrid.stats()) || null
+        """)
         if stats:
             total = (stats.get("built", 0) + stats.get("recycled", 0)) or 1
+            rate = 100 * stats.get("recycled", 0) // total
             print(f"\npool: {stats.get('recycled', 0)} recycled / {total} mounts "
-                  f"({100 * stats.get('recycled', 0) // total}% hit rate), "
-                  f"{stats.get('pooled', 0)} idle in pool")
+                  f"({rate}% hit rate), {stats.get('pooled', 0)} idle in pool")
+            # A hit rate near zero means cards are still being built per mount,
+            # so none of the checks above actually exercised a recycled card.
+            c.ok("cards are actually being recycled", rate >= 50, f"{rate}% hit rate")
 
         browser.close()