feat(ui): Dark-Glassmorphism-Designsystem und Grundlayout

Optischer Rahmen der Anwendung: - Hintergrund aus drei langsam driftenden Nebeln, feinem Raster und einer Rauschtextur gegen Farbbanding - .glass / .glass-soft als Grundflaechen, .card-glow fuer den Hover-Effekt mit Farbverlaufsrand je Projektakzent - Buttons, Formularfelder und Scrollbars im gleichen Stil - prefers-reduced-motion schaltet saemtliche Animationen ab Dazu Kopfzeile mit aktiver Navigationsmarkierung, ein wiederverwendbarer Modal-Dialog (Escape schliesst, Scroll wird gesperrt), das SVG-Icon sowie Fehler- und 404-Seiten. Die Fehlerseite erkennt Datenbankprobleme und nennt direkt die drei Befehle, die in dem Fall meistens helfen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-25 19:34:15 +02:00
parent 7690bc87c5
commit 6fcbc04110
7 changed files with 642 additions and 0 deletions
@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle, RotateCcw } from "lucide-react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const isDbError =
+    /database|prisma|ECONNREFUSED|P1001|does not exist/i.test(error.message ?? "");
+
+  return (
+    <div className="glass fade-up mx-auto mt-16 max-w-2xl px-6 py-14">
+      <span className="grid h-12 w-12 place-items-center rounded-2xl bg-rose-500/15 text-rose-300">
+        <AlertTriangle className="h-6 w-6" />
+      </span>
+      <h1 className="mt-4 text-xl font-semibold text-white">Da ist etwas schiefgelaufen</h1>
+      <p className="mt-2 text-sm text-slate-400">{error.message}</p>
+
+      {isDbError ? (
+        <div className="mt-5 rounded-xl border border-white/8 bg-black/30 p-4 text-sm text-slate-400">
+          <p className="font-medium text-slate-200">Sieht nach einem Datenbankproblem aus.</p>
+          <ol className="mt-2 list-decimal space-y-1 pl-5 text-xs">
+            <li>
+              Laeuft PostgreSQL? <code className="text-violet-300">docker compose up -d db</code>
+            </li>
+            <li>
+              Stimmt <code className="text-violet-300">DATABASE_URL</code> in der{" "}
+              <code className="text-violet-300">.env</code>?
+            </li>
+            <li>
+              Migrationen eingespielt? <code className="text-violet-300">npm run db:migrate</code>
+            </li>
+          </ol>
+        </div>
+      ) : null}
+
+      <button type="button" className="btn btn-primary mt-6" onClick={reset}>
+        <RotateCcw className="h-4 w-4" />
+        Erneut versuchen
+      </button>
+    </div>
+  );
+}