feat(ui): About dialog, Release Notes, and new-version banner

About (in the account menu) shows frontend/backend/database versions + build.
Release Notes renders per-version highlights with a commit-SHA reference; a
dismissible banner appears once after the running build's version changes and
links into the notes. Adds a reusable Modal shell and the release-notes data
(detailed v0.1.0).

frontend/src/components/About.tsx

@@ -0,0 +1,73 @@
+import { useQuery } from "@tanstack/react-query";
+import { Info, Sparkles } from "lucide-react";
+import { api } from "../lib/api";
+import { FRONTEND_VERSION, FRONTEND_SHA, FRONTEND_BUILD_DATE } from "../lib/version";
+import Modal from "./Modal";
+
+function fmtDate(d?: string | null): string {
+  if (!d) return "—";
+  const t = new Date(d);
+  return isNaN(t.getTime()) ? d : t.toLocaleString();
+}
+
+// About dialog: app + build + schema versions (frontend/backend/database), plus a
+// shortcut into the release notes.
+export default function About({
+  onClose,
+  onOpenReleaseNotes,
+}: {
+  onClose: () => void;
+  onOpenReleaseNotes: () => void;
+}) {
+  const { data } = useQuery({ queryKey: ["version"], queryFn: api.version, staleTime: 5 * 60_000 });
+
+  const rows: [string, string][] = [
+    ["Frontend", FRONTEND_VERSION + (FRONTEND_SHA !== "unknown" ? ` · ${FRONTEND_SHA}` : "")],
+    [
+      "Backend",
+      data ? data.app_version + (data.git_sha !== "unknown" ? ` · ${data.git_sha}` : "") : "…",
+    ],
+    ["Database", data?.db_revision ?? "…"],
+    ["Build date", fmtDate(data?.build_date ?? FRONTEND_BUILD_DATE)],
+  ];
+
+  return (
+    <Modal
+      title={
+        <span className="flex items-center gap-2">
+          <Info className="w-5 h-5 text-accent" /> About
+        </span>
+      }
+      onClose={onClose}
+    >
+      <div className="flex items-baseline gap-2">
+        <div className="text-2xl font-bold tracking-tight">
+          Sift<span className="text-accent">lode</span>
+        </div>
+        <div className="text-sm text-muted">v{FRONTEND_VERSION}</div>
+      </div>
+      <p className="text-sm text-muted mt-2">
+        Self-hosted, multi-user reader for your own YouTube subscriptions.
+      </p>
+
+      <div className="mt-4 rounded-xl border border-border overflow-hidden text-sm">
+        {rows.map(([k, v], i) => (
+          <div
+            key={k}
+            className={`flex justify-between gap-4 px-3 py-2 ${i % 2 ? "bg-surface/40" : ""}`}
+          >
+            <span className="text-muted">{k}</span>
+            <span className="font-medium text-right break-all">{v}</span>
+          </div>
+        ))}
+      </div>
+
+      <button
+        onClick={onOpenReleaseNotes}
+        className="mt-4 w-full inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
+      >
+        <Sparkles className="w-4 h-4" /> What's new
+      </button>
+    </Modal>
+  );
+}