feat: M4 (part 2) — React reader UI with theming

- Vite + React + TS + Tailwind SPA served by FastAPI (multi-stage Docker build)
- Four color schemes (Midnight default, Forest, Slate, YouTube) x dark/light,
  adjustable text size; persisted to user preferences and localStorage
- Header search, grid/list toggle, theme menu; sidebar filters (show state,
  sort, include Shorts/live, language + topic tag chips with any/all matching)
- Infinite-scroll feed of video cards; click opens youtube.com in a new tab;
  per-video watched / saved / hidden actions with optimistic updates
- SPA fallback routing; login screen for unauthenticated users

frontend/src/components/Feed.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { api, type FeedFilters, type Video } from "../lib/api";
+import VideoCard from "./VideoCard";
+
+const PAGE = 60;
+
+export default function Feed({
+  filters,
+  view,
+}: {
+  filters: FeedFilters;
+  view: "grid" | "list";
+}) {
+  const [overrides, setOverrides] = useState<Record<string, string>>({});
+
+  const query = useInfiniteQuery({
+    queryKey: ["feed", filters],
+    queryFn: ({ pageParam }) => api.feed(filters, pageParam as number, PAGE),
+    initialPageParam: 0,
+    getNextPageParam: (last) => (last.has_more ? last.offset + last.limit : undefined),
+  });
+
+  useEffect(() => setOverrides({}), [filters]);
+
+  const sentinel = useRef<HTMLDivElement | null>(null);
+  const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
+  useEffect(() => {
+    const el = sentinel.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { rootMargin: "800px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  function onState(id: string, status: string) {
+    setOverrides((o) => ({ ...o, [id]: status }));
+    api.setState(id, status).catch(() => {});
+  }
+
+  const items: Video[] = (query.data?.pages ?? [])
+    .flatMap((p) => p.items)
+    .map((v) => (overrides[v.id] ? { ...v, status: overrides[v.id] } : v))
+    .filter((v) => overrides[v.id] !== "hidden");
+
+  if (query.isLoading) return <div className="p-8 text-muted">Loading feed…</div>;
+  if (query.isError) return <div className="p-8 text-muted">Couldn't load the feed.</div>;
+  if (items.length === 0)
+    return <div className="p-8 text-muted">No videos match these filters.</div>;
+
+  return (
+    <div className="p-4">
+      {view === "grid" ? (
+        <div className="grid gap-x-4 gap-y-6 grid-cols-[repeat(auto-fill,minmax(260px,1fr))]">
+          {items.map((v) => (
+            <VideoCard key={v.id} video={v} view="grid" onState={onState} />
+          ))}
+        </div>
+      ) : (
+        <div className="max-w-4xl mx-auto flex flex-col gap-1">
+          {items.map((v) => (
+            <VideoCard key={v.id} video={v} view="list" onState={onState} />
+          ))}
+        </div>
+      )}
+      <div ref={sentinel} className="h-10" />
+      {isFetchingNextPage && (
+        <div className="text-center text-muted py-4">Loading more…</div>
+      )}
+    </div>
+  );
+}