feat: jump-to-current-artwork button

[danmunz]

Summary

Add a button that scrolls the UI to whichever artwork is currently displayed on the TV. When you have hundreds of artworks in a scrollable grid, finding the one that's actually on your Frame right now means scanning for the green "Displayed" badge — this should be one click.

UX

Placement

A small floating action button (FAB) in the bottom-right corner, near existing controls. Icon: a "locate" or crosshair glyph, or a simple ◎. Tooltip: "Jump to current artwork".

Behavior

• Click → smooth-scroll to the .art-card.current card, then briefly pulse/highlight it (e.g. scale bump or ring flash) so the eye lands on it
• Disabled/hidden when currentId is null (no artwork displayed, or TV unreachable)
• Hidden when the current card is already in the viewport (avoid a no-op button)
• If the current artwork is filtered out (e.g. by search or collection filter), either: clear the filter and scroll, or show a toast like "Currently displayed artwork is hidden by your filter"

Polish

• Entrance animation when the button first appears (fade + slide up)
• The button could show a tiny thumbnail of the current artwork instead of an icon — more informative, and makes the FAB feel purposeful

Technical Implementation

What already exists

• currentId global tracks the displayed artwork's content_id
• .art-card.current class already applied with green outline + "Displayed" badge
• data-id="{content_id}" on every card for DOM lookup
• scrollToGroup(slug) pattern exists for group-chip navigation — similar scroll logic

Implementation

function scrollToCurrent() {
  if (!currentId) return;
  const card = document.querySelector(\`.art-card[data-id="\${currentId}"]\`);
  if (!card) {
    // Card filtered out — show toast or clear filter
    return;
  }
  card.scrollIntoView({ behavior: "smooth", block: "center" });
  card.classList.add("pulse");
  card.addEventListener("animationend", () => card.classList.remove("pulse"), { once: true });
}

Viewport visibility (optional)

Use IntersectionObserver on .art-card.current to toggle the FAB — hide it when the current artwork is already visible, show it when it's scrolled off-screen. The app already uses IntersectionObserver for thumbnail lazy-loading, so the pattern is established.

Estimated scope

Small — ~30 lines of JS, ~20 lines of CSS. No backend changes.