Initial commit — YT Hub

Self-hosted personal YouTube management app.
FastAPI + SQLite backend, React + Vite + Tailwind frontend.
Dockerfiles and compose included for Portainer deployment.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/History.jsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getHistory } from "../api";
+import VideoCard from "../components/VideoCard";
+
+const PAGE_SIZE = 25;
+
+export default function History() {
+  const [page, setPage] = useState(0);
+
+  const { data: videos = [], isLoading } = useQuery({
+    queryKey: ["history", page],
+    queryFn: () => getHistory(page, PAGE_SIZE).then(r => r.data),
+    staleTime: 60_000,
+    placeholderData: (prev) => prev,
+  });
+
+  const hasNext = videos.length === PAGE_SIZE;
+
+  return (
+    <div className="flex flex-col gap-6 max-w-screen-xl mx-auto">
+      <div className="flex items-center justify-between">
+        <h1 className="font-display font-bold text-2xl text-white">Watch History</h1>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-24">
+          <div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+        </div>
+      ) : videos.length === 0 ? (
+        <div className="flex flex-col items-center gap-3 py-20 text-center">
+          <p className="text-zinc-400 text-sm">No watch history yet. Start watching some videos!</p>
+        </div>
+      ) : (
+        <>
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+            {videos.map((v) => (
+              <VideoCard key={v.youtube_video_id} video={v} />
+            ))}
+          </div>
+          <div className="flex items-center justify-center gap-3 pt-2">
+            <button
+              onClick={() => { setPage(p => p - 1); window.scrollTo({ top: 0, behavior: "smooth" }); }}
+              disabled={page === 0}
+              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            >
+              ← Prev
+            </button>
+            <span className="text-zinc-500 text-sm tabular-nums">Page {page + 1}</span>
+            <button
+              onClick={() => { setPage(p => p + 1); window.scrollTo({ top: 0, behavior: "smooth" }); }}
+              disabled={!hasNext}
+              className="px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm font-medium hover:bg-zinc-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+            >
+              Next →
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}