siftlode/frontend/src/components/VirtualFeed.tsx

import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { useVirtualizer } from "@tanstack/react-virtual";
import type { Video } from "../lib/api";
import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
import VideoCard from "./VideoCard";

// Column sizing mirrors the CSS the feed used before virtualization
// (grid-cols-[repeat(auto-fill,minmax(260px,1fr))] with a gap-4 / 1rem gutter). The per-view
// minimum column width lives with the rest of the view matrix in lib/feedView.ts.
const GRID_GAP = 16;
const LIST_GAP = 4;
// Estimated row heights before measurement; real heights are measured per-row so these only affect
// the very first paint and the scrollbar's initial guess. Taken from measuring each mode in the
// browser rather than guessed — a bad estimate makes the scrollbar jump as you scroll in.
// RE-MEASURE these when a mode's layout changes: they have gone stale twice already, most recently
// when the bare row became a single line and halved (82 -> 46). The card figures are the roughest
// of the set by nature — a card's height follows its column width (measured ~307 at 3 columns,
// ~301 at 4, taller still at 2), so no single constant is right for every window.
const ROW_EST: Record<FeedView, number> = {
  cards: 340,
  cardsSmall: 257,
  rows: 115,
  rowsCompact: 46,
  tiles: 132,
};

/** Columns that fit `width`, or 1 for the single-column views. */
function columnsFor(view: FeedView, width: number): number {
  const { minCol } = FEED_VIEW_SPEC[view];
  if (minCol == null) return 1;
  return Math.max(1, Math.floor((width + GRID_GAP) / (minCol + GRID_GAP)));
}
// Start fetching the next page this many rows before the end scrolls into view
// (keeps the old IntersectionObserver's generous prefetch feel).
const PREFETCH_ROWS = 4;

function chunk<T>(arr: T[], size: number): T[][] {
  if (size <= 1) return arr.map((x) => [x]);
  const out: T[][] = [];
  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
  return out;
}

// The feed scrolls inside the app's <main overflow-y-auto>, not the window, so the
// virtualizer needs that element. Walk up to the nearest scrollable ancestor.
function getScrollParent(node: HTMLElement | null): HTMLElement {
  let el = node?.parentElement ?? null;
  while (el) {
    const oy = getComputedStyle(el).overflowY;
    if (oy === "auto" || oy === "scroll") return el;
    el = el.parentElement;
  }
  return document.documentElement;
}

export interface VirtualFeedProps {
  items: Video[];
  view: FeedView;
  onState: (id: string, status: string) => void;
  onToggleSave: (id: string, saved: boolean) => void;
  onResetState: (id: string) => void;
  onOpen: (v: Video, startAt?: number | null) => void;
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
  fetchNextPage: () => void;
}

export default function VirtualFeed({
  items,
  view,
  onState,
  onToggleSave,
  onResetState,
  onOpen,
  hasNextPage,
  isFetchingNextPage,
  fetchNextPage,
}: VirtualFeedProps) {
  const listRef = useRef<HTMLDivElement>(null);
  const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null);
  const { minCol, maxCol } = FEED_VIEW_SPEC[view];
  const singleCol = minCol == null;
  const [colCount, setColCount] = useState(singleCol ? 1 : 4);
  // Distance from the scroll element's content top to where this list starts (the
  // feed toolbar sits above it inside the same scroll area).
  const [scrollMargin, setScrollMargin] = useState(0);
  // How wide ONE row/card actually renders. The one-line row drops columns as this shrinks, and it
  // has to be the real width, not the viewport: the nav rail (56 slim / ~230 pinned) and the filter
  // panel (~80 tab / ~256 pinned) move it by ~430px between them. A viewport breakpoint got this
  // wrong — at 1280 with both pinned every column still showed while the row had 762px for 766px of
  // them, which squeezed the title to nothing. This is measured here anyway, for colCount.
  const [itemWidth, setItemWidth] = useState(0);

  useLayoutEffect(() => {
    if (listRef.current) setScrollEl(getScrollParent(listRef.current));
  }, []);

  // Re-measure the column count and start offset on container/scroll-area resize.
  useLayoutEffect(() => {
    const node = listRef.current;
    if (!node) return;
    const measure = () => {
      if (scrollEl) {
        const m =
          node.getBoundingClientRect().top -
          scrollEl.getBoundingClientRect().top +
          scrollEl.scrollTop;
        setScrollMargin(m);
      }
      const w = node.clientWidth;
      const cols = columnsFor(view, w);
      setColCount(cols);
      const { minCol: min, maxCol: max } = FEED_VIEW_SPEC[view];
      setItemWidth(
        min == null ? Math.min(w, max ?? w) : Math.floor((w - GRID_GAP * (cols - 1)) / cols)
      );
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(node);
    if (scrollEl) ro.observe(scrollEl);
    return () => ro.disconnect();
  }, [scrollEl, view]);

  const rows = useMemo(() => chunk(items, colCount), [items, colCount]);

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => scrollEl,
    estimateSize: () => ROW_EST[view],
    overscan: 4,
    gap: singleCol ? LIST_GAP : GRID_GAP,
    scrollMargin,
  });

  const virtualRows = virtualizer.getVirtualItems();

  // Infinite-scroll trigger: once the last rendered row is within PREFETCH_ROWS of
  // the end, pull the next keyset page.
  useEffect(() => {
    const last = virtualRows[virtualRows.length - 1];
    if (!last) return;
    if (last.index >= rows.length - 1 - PREFETCH_ROWS && hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [virtualRows, rows.length, hasNextPage, isFetchingNextPage, fetchNextPage]);

  return (
    <div ref={listRef} style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
      {virtualRows.map((vr) => {
        const row = rows[vr.index];
        if (!row) return null;
        return (
          <div
            key={vr.key}
            data-index={vr.index}
            ref={virtualizer.measureElement}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              transform: `translateY(${vr.start - virtualizer.options.scrollMargin}px)`,
            }}
          >
            {/* One branch for both shapes: the single-column views just chunk to colCount 1 and
                get their reading-width cap instead of grid columns. */}
            <div
              className={singleCol ? "mx-auto pb-1" : "grid gap-4"}
              style={
                singleCol
                  ? { maxWidth: maxCol ?? undefined }
                  : { gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }
              }
            >
              {row.map((v) => (
                <VideoCard
                  key={v.id}
                  video={v}
                  view={view}
                  // Only the one-line row reads its own width (it stands columns down as it
                  // narrows). Everything else takes a stable 0, so a resize — which changes
                  // itemWidth every frame — doesn't blow past VideoCard's memo for views that
                  // wouldn't do anything with it.
                  width={FEED_VIEW_SPEC[view].thumb ? 0 : itemWidth}
                  onState={onState}
                  onToggleSave={onToggleSave}
                  onResetState={onResetState}
                  onOpen={onOpen}
                />
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
}