feat(feed): add the small-card, compact-row and tile views

Tiles answer the row view's wasted space: the actions move under the meta
into vertical slack the thumbnail already reserves, which frees ~168px of
width, so the block survives in a narrow column and the list can go
multi-column. Rows stay single-column on purpose — reading down one edge
is why that view exists.

The column count now comes from a per-view minimum width, so every
multi-column view reflows on the mechanism the card grid already used.

frontend/src/components/VirtualFeed.tsx

@@ -1,18 +1,30 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import type { Video } from "../lib/api";
-import type { FeedView } from "../lib/feedView";
+import { FEED_VIEW_SPEC, type FeedView } from "../lib/feedView";
 import VideoCard from "./VideoCard";
 
-// Grid column sizing mirrors the CSS the feed used before virtualization
-// (grid-cols-[repeat(auto-fill,minmax(260px,1fr))] with a gap-4 / 1rem gutter).
-const GRID_MIN_COL = 260;
+// 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.
-const GRID_ROW_EST = 340;
-const LIST_ROW_EST = 96;
+const ROW_EST: Record<FeedView, number> = {
+  cards: 340,
+  cardsSmall: 240,
+  rows: 115,
+  rowsCompact: 64,
+  tiles: 124,
+};
+
+/** 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;
@@ -63,7 +75,8 @@ export default function VirtualFeed({
 }: VirtualFeedProps) {
   const listRef = useRef<HTMLDivElement>(null);
   const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null);
-  const [colCount, setColCount] = useState(view === "rows" ? 1 : 4);
+  const singleCol = FEED_VIEW_SPEC[view].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);
@@ -84,11 +97,7 @@ export default function VirtualFeed({
           scrollEl.scrollTop;
         setScrollMargin(m);
       }
-      setColCount(
-        view === "rows"
-          ? 1
-          : Math.max(1, Math.floor((node.clientWidth + GRID_GAP) / (GRID_MIN_COL + GRID_GAP)))
-      );
+      setColCount(columnsFor(view, node.clientWidth));
     };
     measure();
     const ro = new ResizeObserver(measure);
@@ -102,9 +111,9 @@ export default function VirtualFeed({
   const virtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => scrollEl,
-    estimateSize: () => (view === "cards" ? GRID_ROW_EST : LIST_ROW_EST),
+    estimateSize: () => ROW_EST[view],
     overscan: 4,
-    gap: view === "cards" ? GRID_GAP : LIST_GAP,
+    gap: singleCol ? LIST_GAP : GRID_GAP,
     scrollMargin,
   });
 
@@ -138,28 +147,20 @@ export default function VirtualFeed({
               transform: `translateY(${vr.start - virtualizer.options.scrollMargin}px)`,
             }}
           >
-            {view === "cards" ? (
-              <div
-                className="grid gap-4"
-                style={{ gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }}
-              >
-                {row.map((v) => (
-                  <VideoCard
-                    key={v.id}
-                    video={v}
-                    view={view}
-                    onState={onState}
-                    onToggleSave={onToggleSave}
-                    onOpenChannel={onOpenChannel}
-                    onResetState={onResetState}
-                    onOpen={onOpen}
-                  />
-                ))}
-              </div>
-            ) : (
-              <div className="max-w-4xl mx-auto pb-1">
+            {/* One branch for both shapes: the single-column views just chunk to colCount 1 and
+                get the reading-width cap instead of grid columns. */}
+            <div
+              className={singleCol ? "max-w-4xl mx-auto pb-1" : "grid gap-4"}
+              style={
+                singleCol
+                  ? undefined
+                  : { gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }
+              }
+            >
+              {row.map((v) => (
                 <VideoCard
-                  video={row[0]}
+                  key={v.id}
+                  video={v}
                   view={view}
                   onState={onState}
                   onToggleSave={onToggleSave}
@@ -167,8 +168,8 @@ export default function VirtualFeed({
                   onResetState={onResetState}
                   onOpen={onOpen}
                 />
-              </div>
-            )}
+              ))}
+            </div>
           </div>
         );
       })}