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).
2026-06-15 00:06:57 +02:00 · 2026-06-15 00:06:57 +02:00 · 31591d8ff1
commit 31591d8ff1
parent 882429d6af
9 changed files with 347 additions and 1 deletions
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@ -0,0 +1,56 @@
+import { useEffect, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+
+// Small centered modal shell (portaled to <body>): backdrop + ESC + scroll-lock close.
+export default function Modal({
+  title,
+  onClose,
+  children,
+  maxWidth = "max-w-lg",
+}: {
+  title: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  maxWidth?: string;
+}) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className={`glass-card relative w-full ${maxWidth} max-h-full overflow-y-auto rounded-2xl shadow-2xl`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-start justify-between gap-3 p-5 pb-3">
+          <h2 className="text-lg font-semibold leading-snug">{title}</h2>
+          <button
+            onClick={onClose}
+            title="Close"
+            className="shrink-0 p-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="px-5 pb-5">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+}