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>

src/app/error.tsx

@@ -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>
+  );
+}

src/app/globals.css

@@ -0,0 +1,365 @@
+@import "tailwindcss";
+
+/* ─────────────────────────────────────────────────────────────
+   Nebula – Designsystem
+   Dark Glassmorphism mit Neon-Akzenten.
+   ───────────────────────────────────────────────────────────── */
+
+@theme {
+  --color-void: #05060f;
+  --color-void-soft: #0a0c1a;
+  --color-haze: #12142b;
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
+
+  --radius-card: 1.25rem;
+}
+
+:root {
+  color-scheme: dark;
+  --glass-bg: rgba(255, 255, 255, 0.035);
+  --glass-border: rgba(255, 255, 255, 0.09);
+  --glass-highlight: rgba(255, 255, 255, 0.16);
+}
+
+* {
+  border-color: var(--glass-border);
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  background-color: var(--color-void);
+  color: #e6e8f5;
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+}
+
+/* ── Hintergrund: langsam driftende Nebel ───────────────────── */
+
+.aurora {
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.aurora::after {
+  /* feines Rauschen, damit die Verlaeufe nicht bandieren */
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0.35;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  background-size: 3px 3px;
+  mix-blend-mode: overlay;
+}
+
+.aurora-blob {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(90px);
+  opacity: 0.5;
+  will-change: transform;
+}
+
+.aurora-blob--one {
+  width: 46rem;
+  height: 46rem;
+  top: -18rem;
+  left: -12rem;
+  background: radial-gradient(circle at 30% 30%, #7c3aed, transparent 65%);
+  animation: drift-a 26s ease-in-out infinite alternate;
+}
+
+.aurora-blob--two {
+  width: 40rem;
+  height: 40rem;
+  top: -10rem;
+  right: -14rem;
+  background: radial-gradient(circle at 60% 40%, #0ea5e9, transparent 65%);
+  animation: drift-b 32s ease-in-out infinite alternate;
+}
+
+.aurora-blob--three {
+  width: 38rem;
+  height: 38rem;
+  bottom: -20rem;
+  left: 28%;
+  background: radial-gradient(circle at 50% 50%, #db2777, transparent 68%);
+  animation: drift-c 38s ease-in-out infinite alternate;
+  opacity: 0.35;
+}
+
+.aurora-grid {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
+}
+
+@keyframes drift-a {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
+}
+@keyframes drift-b {
+  from { transform: translate3d(0, 0, 0) scale(1.05); }
+  to { transform: translate3d(-7rem, 5rem, 0) scale(0.95); }
+}
+@keyframes drift-c {
+  from { transform: translate3d(0, 0, 0) scale(0.95); }
+  to { transform: translate3d(4rem, -6rem, 0) scale(1.1); }
+}
+
+/* ── Glasflaechen ───────────────────────────────────────────── */
+
+.glass {
+  position: relative;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(18px) saturate(140%);
+  -webkit-backdrop-filter: blur(18px) saturate(140%);
+  border-radius: var(--radius-card);
+  box-shadow:
+    0 1px 0 0 var(--glass-highlight) inset,
+    0 24px 60px -30px rgba(0, 0, 0, 0.9);
+}
+
+.glass-soft {
+  background: rgba(255, 255, 255, 0.025);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 0.9rem;
+}
+
+/* Karte mit Akzent-Glow. --accent-from/--accent-to setzt die Komponente. */
+.card-glow {
+  transition:
+    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.35s ease,
+    border-color 0.35s ease;
+}
+
+.card-glow::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--accent-from, #8b5cf6), var(--accent-to, #d946ef));
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  pointer-events: none;
+}
+
+.card-glow:hover {
+  transform: translateY(-4px);
+  box-shadow:
+    0 1px 0 0 var(--glass-highlight) inset,
+    0 30px 70px -30px rgba(0, 0, 0, 0.95),
+    0 0 46px -12px var(--accent-from, #8b5cf6);
+}
+
+.card-glow:hover::before {
+  opacity: 0.85;
+}
+
+/* ── Text & Akzente ─────────────────────────────────────────── */
+
+.text-gradient {
+  background: linear-gradient(120deg, #c4b5fd 0%, #67e8f9 45%, #f0abfc 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.accent-bar {
+  background: linear-gradient(90deg, var(--accent-from, #8b5cf6), var(--accent-to, #d946ef));
+}
+
+.accent-dot {
+  box-shadow: 0 0 12px 1px currentColor;
+}
+
+/* ── Buttons ────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.55rem 1rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: linear-gradient(120deg, #7c3aed, #c026d3);
+  color: #fff;
+  box-shadow: 0 10px 30px -12px rgba(168, 85, 247, 0.9);
+}
+
+.btn-primary:hover:not(:disabled) {
+  filter: brightness(1.12);
+  box-shadow: 0 14px 36px -12px rgba(168, 85, 247, 1);
+}
+
+.btn-ghost {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #cbd5f5;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.09);
+  color: #fff;
+}
+
+.btn-danger {
+  background: rgba(244, 63, 94, 0.12);
+  border-color: rgba(244, 63, 94, 0.35);
+  color: #fda4af;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(244, 63, 94, 0.22);
+  color: #fff;
+}
+
+/* ── Formularfelder ─────────────────────────────────────────── */
+
+.field {
+  width: 100%;
+  border-radius: 0.75rem;
+  background: rgba(8, 10, 24, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  padding: 0.6rem 0.85rem;
+  font-size: 0.875rem;
+  color: #e6e8f5;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.field::placeholder {
+  color: rgba(148, 163, 184, 0.6);
+}
+
+.field:focus {
+  outline: none;
+  border-color: rgba(167, 139, 250, 0.6);
+  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
+}
+
+.field-label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(148, 163, 184, 0.85);
+  margin-bottom: 0.4rem;
+}
+
+select.field option {
+  background: #0a0c1a;
+  color: #e6e8f5;
+}
+
+/* ── Sonstiges ──────────────────────────────────────────────── */
+
+.shimmer {
+  background: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2.2s linear infinite;
+}
+
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+.fade-up {
+  animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.pulse-ring {
+  animation: pulse-ring 2.4s ease-out infinite;
+}
+
+@keyframes pulse-ring {
+  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.7; }
+  70% { box-shadow: 0 0 0 8px transparent; opacity: 0; }
+  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.22);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(167, 139, 250, 0.5);
+  background-clip: content-box;
+}
+
+::selection {
+  background: rgba(139, 92, 246, 0.35);
+  color: #fff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}

src/app/icon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#8b5cf6" />
+      <stop offset="55%" stop-color="#d946ef" />
+      <stop offset="100%" stop-color="#22d3ee" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="16" fill="#05060f" />
+  <circle cx="32" cy="32" r="17" fill="url(#g)" opacity="0.9" />
+  <circle cx="32" cy="32" r="17" fill="none" stroke="#ffffff" stroke-opacity="0.25" stroke-width="1.5" />
+  <circle cx="46" cy="18" r="3" fill="#ffffff" opacity="0.9" />
+  <circle cx="16" cy="44" r="2" fill="#ffffff" opacity="0.7" />
+  <circle cx="20" cy="18" r="1.5" fill="#ffffff" opacity="0.55" />
+</svg>

src/app/layout.tsx

@@ -0,0 +1,51 @@
+import type { Metadata, Viewport } from "next";
+import { TopNav } from "@/components/TopNav";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: {
+    default: "Nebula – Vibe Coding Dashboard",
+    template: "%s · Nebula",
+  },
+  description:
+    "Uebersicht ueber alle Vibe-Coding Projekte: Status, Notizen und Live-Daten aus GitHub, GitLab und Gitea.",
+  applicationName: "Nebula",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#05060f",
+  width: "device-width",
+  initialScale: 1,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="de" suppressHydrationWarning>
+      <body className="min-h-screen antialiased">
+        <div className="aurora" aria-hidden="true">
+          <div className="aurora-blob aurora-blob--one" />
+          <div className="aurora-blob aurora-blob--two" />
+          <div className="aurora-blob aurora-blob--three" />
+        </div>
+        <div className="aurora-grid" aria-hidden="true" />
+
+        <TopNav />
+
+        <main className="mx-auto w-full max-w-[1400px] px-4 pb-24 pt-6 sm:px-6 lg:px-8">
+          {children}
+        </main>
+
+        <footer className="mx-auto w-full max-w-[1400px] px-4 pb-10 text-xs text-slate-500 sm:px-6 lg:px-8">
+          <div className="flex flex-wrap items-center justify-between gap-2 border-t border-white/5 pt-6">
+            <span>
+              Nebula · lokal betrieben, Daten bleiben in deiner PostgreSQL.
+            </span>
+            <span className="font-mono text-slate-600">v0.1.0</span>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import { Compass } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="glass fade-up mx-auto mt-16 max-w-lg px-6 py-16 text-center">
+      <span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-violet-500/25 to-cyan-400/20 text-violet-200">
+        <Compass className="h-6 w-6" />
+      </span>
+      <h1 className="mt-4 text-2xl font-semibold text-white">Nichts gefunden</h1>
+      <p className="mt-2 text-sm text-slate-400">
+        Diese Seite existiert nicht (mehr). Vielleicht wurde das Projekt geloescht.
+      </p>
+      <Link href="/" className="btn btn-primary mt-6">
+        Zurueck zum Dashboard
+      </Link>
+    </div>
+  );
+}

src/components/TopNav.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { GitBranch, LayoutDashboard, Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const LINKS = [
+  { href: "/", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/connections", label: "Git-Verbindungen", icon: GitBranch },
+];
+
+export function TopNav() {
+  const pathname = usePathname();
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-white/5 bg-[#05060f]/70 backdrop-blur-xl">
+      <div className="mx-auto flex w-full max-w-[1400px] items-center gap-6 px-4 py-3 sm:px-6 lg:px-8">
+        <Link href="/" className="group flex items-center gap-3">
+          <span className="relative grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-violet-500 via-fuchsia-500 to-cyan-400 shadow-[0_8px_28px_-10px_rgba(168,85,247,0.9)] transition-transform group-hover:scale-105">
+            <Sparkles className="h-4 w-4 text-white" strokeWidth={2.4} />
+          </span>
+          <span className="flex flex-col leading-none">
+            <span className="text-gradient text-lg font-semibold tracking-tight">
+              Nebula
+            </span>
+            <span className="mt-0.5 text-[10px] uppercase tracking-[0.2em] text-slate-500">
+              Vibe Coding
+            </span>
+          </span>
+        </Link>
+
+        <nav className="flex items-center gap-1">
+          {LINKS.map(({ href, label, icon: Icon }) => {
+            const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={cn(
+                  "flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
+                  active
+                    ? "bg-white/8 text-white"
+                    : "text-slate-400 hover:bg-white/5 hover:text-slate-100",
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                <span className="hidden sm:inline">{label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </header>
+  );
+}

src/components/ui/Modal.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ModalProps {
+  open: boolean;
+  title: string;
+  description?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  width?: "md" | "lg" | "xl";
+}
+
+export function Modal({
+  open,
+  title,
+  description,
+  onClose,
+  children,
+  footer,
+  width = "lg",
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previous;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-8">
+      <button
+        type="button"
+        aria-label="Dialog schliessen"
+        onClick={onClose}
+        className="fixed inset-0 cursor-default bg-[#03040c]/80 backdrop-blur-sm"
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className={cn(
+          "glass fade-up relative z-10 my-auto w-full p-6",
+          width === "md" && "max-w-lg",
+          width === "lg" && "max-w-2xl",
+          width === "xl" && "max-w-4xl",
+        )}
+      >
+        <div className="mb-5 flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-lg font-semibold text-white">{title}</h2>
+            {description ? (
+              <p className="mt-1 text-sm text-slate-400">{description}</p>
+            ) : null}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-white/8 hover:text-white"
+            aria-label="Schliessen"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {children}
+
+        {footer ? <div className="mt-6 flex justify-end gap-2">{footer}</div> : null}
+      </div>
+    </div>
+  );
+}