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/ReleaseNotes.tsx

@@ -0,0 +1,76 @@
+import { Bug, Sparkles } from "lucide-react";
+import { RELEASE_NOTES } from "../lib/releaseNotes";
+import Modal from "./Modal";
+
+function fmtDate(d: string): string {
+  const t = new Date(d);
+  return isNaN(t.getTime())
+    ? d
+    : t.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}
+
+// Public release notes (chores are intentionally omitted here). `highlight` rings the
+// version the user just updated to when opened from the new-version banner.
+export default function ReleaseNotes({
+  onClose,
+  highlight,
+}: {
+  onClose: () => void;
+  highlight?: string;
+}) {
+  return (
+    <Modal title="Release notes" onClose={onClose} maxWidth="max-w-2xl">
+      <div className="flex flex-col gap-6">
+        {RELEASE_NOTES.map((r) => (
+          <section
+            key={r.version}
+            className={highlight === r.version ? "rounded-xl ring-1 ring-accent/40 p-3 -m-3" : ""}
+          >
+            <div className="flex items-baseline gap-2 flex-wrap">
+              <h3 className="text-base font-semibold">v{r.version}</h3>
+              <span className="text-xs text-muted">{fmtDate(r.date)}</span>
+              {r.sha && (
+                <span className="text-[11px] font-mono text-muted bg-surface px-1.5 py-0.5 rounded">
+                  {r.sha}
+                </span>
+              )}
+            </div>
+            {r.summary && <p className="text-sm text-muted mt-1">{r.summary}</p>}
+
+            {r.features?.length ? (
+              <div className="mt-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-accent">
+                  <Sparkles className="w-3.5 h-3.5" /> New
+                </div>
+                <ul className="mt-1.5 space-y-1.5 text-sm">
+                  {r.features.map((f, i) => (
+                    <li key={i} className="flex gap-2">
+                      <span className="text-accent">•</span>
+                      <span>{f}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ) : null}
+
+            {r.fixes?.length ? (
+              <div className="mt-3">
+                <div className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted">
+                  <Bug className="w-3.5 h-3.5" /> Fixes
+                </div>
+                <ul className="mt-1.5 space-y-1.5 text-sm">
+                  {r.fixes.map((f, i) => (
+                    <li key={i} className="flex gap-2">
+                      <span className="text-muted">•</span>
+                      <span>{f}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ) : null}
+          </section>
+        ))}
+      </div>
+    </Modal>
+  );
+}