feat(ui): Export und Import in der Oberflaeche

Dashboard: ein Datenmenue neben "Neues Projekt" mit Export aller Projekte
und Import. Projektseite: Ausklappmenue mit JSON und Markdown.
Adminbereich: Abschnitt "Sicherung" mit deutlichem Hinweis, was in der Datei
steht und wie vertraulich sie zu behandeln ist.

Der Import-Dialog fuehrt in zwei Schritten: Datei waehlen, Vorschau ansehen,
erst dann schreiben. Ein Wechsel der Strategie berechnet die Vorschau neu.
Der Ausfuehren-Knopf bleibt gesperrt, solange sich nichts aendern wuerde -
sonst waere er ein Angebot, das ins Leere laeuft. Fehlende Git-Verbindungen
werden gesondert hervorgehoben, mit dem Hinweis, dass Tokens nie in
Exportdateien stehen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/ImportDialog.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CheckCircle2,
+  FileJson,
+  Loader2,
+  Upload,
+} from "lucide-react";
+import { Modal } from "@/components/ui/Modal";
+import { cn } from "@/lib/utils";
+
+type Strategy = "skip" | "rename" | "overwrite";
+
+interface ItemResult {
+  name: string;
+  slug: string;
+  action: "create" | "rename" | "overwrite" | "skip" | "error";
+  newSlug?: string;
+  notes: number;
+  connection: "matched" | "missing" | "none";
+  connectionName?: string;
+  message?: string;
+}
+
+interface ImportResponse {
+  dryRun: boolean;
+  strategy: Strategy;
+  summary: {
+    total: number;
+    created: number;
+    renamed: number;
+    overwritten: number;
+    skipped: number;
+    errors: number;
+    missingConnections: number;
+  };
+  results: ItemResult[];
+}
+
+const STRATEGIES: Array<{ value: Strategy; label: string; hint: string }> = [
+  { value: "skip", label: "Ueberspringen", hint: "Vorhandene bleiben unveraendert." },
+  { value: "rename", label: "Zusaetzlich anlegen", hint: "Doppelte bekommen einen freien Slug." },
+  { value: "overwrite", label: "Ersetzen", hint: "Stammdaten und Notizen werden ueberschrieben." },
+];
+
+const ACTION_LABEL: Record<ItemResult["action"], { text: string; className: string }> = {
+  create: { text: "neu", className: "bg-emerald-500/12 text-emerald-200" },
+  rename: { text: "zusaetzlich", className: "bg-cyan-500/12 text-cyan-200" },
+  overwrite: { text: "ersetzt", className: "bg-amber-500/12 text-amber-200" },
+  skip: { text: "uebersprungen", className: "bg-slate-500/12 text-slate-300" },
+  error: { text: "Fehler", className: "bg-rose-500/12 text-rose-200" },
+};
+
+export function ImportDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const router = useRouter();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [payload, setPayload] = useState<unknown>(null);
+  const [strategy, setStrategy] = useState<Strategy>("skip");
+  const [preview, setPreview] = useState<ImportResponse | null>(null);
+  const [done, setDone] = useState<ImportResponse | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function reset() {
+    setFileName(null);
+    setPayload(null);
+    setPreview(null);
+    setDone(null);
+    setError(null);
+    setStrategy("skip");
+    if (fileRef.current) fileRef.current.value = "";
+  }
+
+  function close() {
+    reset();
+    onClose();
+  }
+
+  async function pickFile(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    setError(null);
+    setPreview(null);
+    setDone(null);
+    setFileName(file.name);
+
+    try {
+      const text = await file.text();
+      const parsed = JSON.parse(text);
+      setPayload(parsed);
+      await run(parsed, strategy, true);
+    } catch {
+      setPayload(null);
+      setError("Die Datei enthaelt kein gueltiges JSON.");
+    }
+  }
+
+  async function run(data: unknown, chosen: Strategy, dryRun: boolean) {
+    setBusy(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/projects/import", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data, strategy: chosen, dryRun }),
+      });
+      const body = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(body.error ?? "Import fehlgeschlagen.");
+
+      if (dryRun) setPreview(body as ImportResponse);
+      else {
+        setDone(body as ImportResponse);
+        router.refresh();
+      }
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function changeStrategy(next: Strategy) {
+    setStrategy(next);
+    if (payload) await run(payload, next, true);
+  }
+
+  const summary = done?.summary ?? preview?.summary;
+  const results = done?.results ?? preview?.results ?? [];
+
+  // Wuerde der Import ueberhaupt etwas veraendern? Sonst waere der Knopf ein
+  // Angebot, das ins Leere laeuft.
+  const wouldChange = preview
+    ? preview.summary.created + preview.summary.renamed + preview.summary.overwritten > 0
+    : false;
+
+  return (
+    <Modal
+      open={open}
+      onClose={close}
+      width="xl"
+      title="Projekte importieren"
+      description="Eine zuvor exportierte JSON-Datei einlesen. Vor dem Schreiben gibt es eine Vorschau."
+    >
+      <div className="space-y-5">
+        {/* Datei */}
+        <div>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="application/json,.json"
+            onChange={pickFile}
+            className="hidden"
+            id="import-file"
+          />
+          <button
+            type="button"
+            className="btn btn-ghost w-full justify-start py-3"
+            onClick={() => fileRef.current?.click()}
+            disabled={busy}
+          >
+            <FileJson className="h-4 w-4 text-violet-300" />
+            {fileName ?? "JSON-Datei auswaehlen…"}
+          </button>
+        </div>
+
+        {/* Strategie */}
+        {payload ? (
+          <div>
+            <span className="field-label">Bei gleichem Slug</span>
+            <div className="grid gap-2 sm:grid-cols-3">
+              {STRATEGIES.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={busy || Boolean(done)}
+                  onClick={() => changeStrategy(option.value)}
+                  className={cn(
+                    "rounded-xl border px-3 py-2.5 text-left transition-all disabled:opacity-60",
+                    strategy === option.value
+                      ? "border-violet-400/60 bg-violet-500/12"
+                      : "border-white/9 hover:border-white/20",
+                  )}
+                >
+                  <span className="block text-sm text-slate-100">{option.label}</span>
+                  <span className="mt-0.5 block text-[11px] leading-snug text-slate-500">
+                    {option.hint}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        {error ? (
+          <p className="rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-sm text-rose-200">
+            {error}
+          </p>
+        ) : null}
+
+        {/* Vorschau oder Ergebnis */}
+        {summary ? (
+          <div className="space-y-3">
+            <div className="flex flex-wrap items-center gap-2 text-xs">
+              <span className="text-slate-400">
+                {done ? "Ergebnis:" : "Vorschau:"} {summary.total} Projekt(e)
+              </span>
+              {summary.created > 0 ? <Chip tone="emerald">{summary.created} neu</Chip> : null}
+              {summary.renamed > 0 ? <Chip tone="cyan">{summary.renamed} zusaetzlich</Chip> : null}
+              {summary.overwritten > 0 ? (
+                <Chip tone="amber">{summary.overwritten} ersetzt</Chip>
+              ) : null}
+              {summary.skipped > 0 ? <Chip tone="slate">{summary.skipped} uebersprungen</Chip> : null}
+              {summary.errors > 0 ? <Chip tone="rose">{summary.errors} Fehler</Chip> : null}
+            </div>
+
+            {summary.missingConnections > 0 ? (
+              <p className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
+                <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                <span>
+                  {summary.missingConnections} Projekt(e) verweisen auf eine Git-Verbindung,
+                  die hier nicht existiert. Sie werden ohne Verknuepfung angelegt – lege die
+                  Verbindung an und waehle sie im Projekt aus. Access Tokens sind in
+                  Exportdateien grundsaetzlich nicht enthalten.
+                </span>
+              </p>
+            ) : null}
+
+            <div className="max-h-64 overflow-y-auto rounded-xl border border-white/8">
+              {results.map((item) => {
+                const label = ACTION_LABEL[item.action];
+                return (
+                  <div
+                    key={`${item.slug}-${item.name}`}
+                    className="flex items-center justify-between gap-3 border-b border-white/5 px-3 py-2 last:border-b-0"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate text-sm text-slate-200">{item.name}</p>
+                      <p className="mt-0.5 flex flex-wrap items-center gap-x-2 font-mono text-[11px] text-slate-500">
+                        <span>{item.slug}</span>
+                        {item.newSlug ? (
+                          <>
+                            <ArrowRight className="h-3 w-3" />
+                            <span className="text-cyan-300">{item.newSlug}</span>
+                          </>
+                        ) : null}
+                        <span className="text-slate-600">· {item.notes} Notizen</span>
+                        {item.connection === "missing" ? (
+                          <span className="text-amber-300/80">
+                            · Verbindung „{item.connectionName}“ fehlt
+                          </span>
+                        ) : null}
+                      </p>
+                      {item.message ? (
+                        <p className="mt-0.5 text-[11px] text-slate-600">{item.message}</p>
+                      ) : null}
+                    </div>
+                    <span
+                      className={cn(
+                        "shrink-0 rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wider",
+                        label.className,
+                      )}
+                    >
+                      {label.text}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
+        {done ? (
+          <p className="flex items-center gap-2 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-200">
+            <CheckCircle2 className="h-4 w-4" />
+            Import abgeschlossen.
+          </p>
+        ) : null}
+
+        <div className="flex justify-end gap-2">
+          <button type="button" className="btn btn-ghost" onClick={close} disabled={busy}>
+            {done ? "Schliessen" : "Abbrechen"}
+          </button>
+          {!done ? (
+            <button
+              type="button"
+              className="btn btn-primary"
+              disabled={busy || !wouldChange}
+              title={
+                preview && !wouldChange
+                  ? "Mit dieser Strategie wuerde sich nichts aendern."
+                  : undefined
+              }
+              onClick={() => payload && run(payload, strategy, false)}
+            >
+              {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+              Import ausfuehren
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+function Chip({
+  tone,
+  children,
+}: {
+  tone: "emerald" | "cyan" | "amber" | "slate" | "rose";
+  children: React.ReactNode;
+}) {
+  const tones = {
+    emerald: "bg-emerald-500/12 text-emerald-200",
+    cyan: "bg-cyan-500/12 text-cyan-200",
+    amber: "bg-amber-500/12 text-amber-200",
+    slate: "bg-slate-500/12 text-slate-300",
+    rose: "bg-rose-500/12 text-rose-200",
+  };
+  return <span className={cn("rounded px-1.5 py-0.5", tones[tone])}>{children}</span>;
+}

src/components/ProjectBoard.tsx

@@ -1,10 +1,22 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
-import { LayoutGrid, ListFilter, Plus, Rows3, Search, X } from "lucide-react";
+import {
+  Database,
+  Download,
+  LayoutGrid,
+  ListFilter,
+  Plus,
+  Rows3,
+  Search,
+  Upload,
+  X,
+} from "lucide-react";
 import type { ProjectStatus } from "@prisma/client";
+import { ImportDialog } from "@/components/ImportDialog";
 import { ProjectCard } from "@/components/ProjectCard";
 import { ProjectDialog } from "@/components/ProjectDialog";
+import { Popover } from "@/components/ui/Popover";
 import { STATUS_META, STATUS_ORDER } from "@/lib/status";
 import { cn } from "@/lib/utils";
 import type { ConnectionSafe, ProjectListItem } from "@/types";
@@ -33,6 +45,9 @@ export function ProjectBoard({
   const [view, setView] = useState<ViewMode>("grid");
   const [showArchived, setShowArchived] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [importOpen, setImportOpen] = useState(false);
+  const [dataMenuOpen, setDataMenuOpen] = useState(false);
+  const dataButtonRef = useRef<HTMLButtonElement>(null);
 
   const counts = useMemo(() => {
     const map = new Map<ProjectStatus, number>();
@@ -165,6 +180,19 @@ export function ProjectBoard({
               </button>
             </div>
 
+            <button
+              ref={dataButtonRef}
+              type="button"
+              onClick={() => setDataMenuOpen((value) => !value)}
+              className="rounded-xl border border-white/9 p-2 text-slate-500 transition-colors hover:text-white"
+              aria-label="Daten exportieren oder importieren"
+              title="Export und Import"
+              aria-haspopup="menu"
+              aria-expanded={dataMenuOpen}
+            >
+              <Database className="h-4 w-4" />
+            </button>
+
             <button type="button" className="btn btn-primary" onClick={() => setDialogOpen(true)}>
               <Plus className="h-4 w-4" />
               <span className="hidden sm:inline">Neues Projekt</span>
@@ -267,11 +295,54 @@ export function ProjectBoard({
         </div>
       )}
 
+      <Popover
+        anchorRef={dataButtonRef}
+        open={dataMenuOpen}
+        onClose={() => setDataMenuOpen(false)}
+        width={260}
+      >
+        <a
+          href="/api/projects/export"
+          download
+          role="menuitem"
+          onClick={() => setDataMenuOpen(false)}
+          className="flex items-start gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-300 transition-colors hover:bg-white/6 hover:text-white"
+        >
+          <Download className="mt-0.5 h-4 w-4 shrink-0 text-violet-300" />
+          <span>
+            Alle Projekte exportieren
+            <span className="mt-0.5 block text-[11px] text-slate-500">
+              JSON mit Notizen, ohne Access Tokens
+            </span>
+          </span>
+        </a>
+
+        <button
+          type="button"
+          role="menuitem"
+          onClick={() => {
+            setDataMenuOpen(false);
+            setImportOpen(true);
+          }}
+          className="flex w-full items-start gap-2.5 rounded-lg px-3 py-2 text-left text-sm text-slate-300 transition-colors hover:bg-white/6 hover:text-white"
+        >
+          <Upload className="mt-0.5 h-4 w-4 shrink-0 text-cyan-300" />
+          <span>
+            Projekte importieren
+            <span className="mt-0.5 block text-[11px] text-slate-500">
+              Mit Vorschau vor dem Schreiben
+            </span>
+          </span>
+        </button>
+      </Popover>
+
       <ProjectDialog
         open={dialogOpen}
         onClose={() => setDialogOpen(false)}
         connections={connections}
       />
+
+      <ImportDialog open={importOpen} onClose={() => setImportOpen(false)} />
     </section>
   );
 }

src/components/ProjectHeader.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import {
   ArrowLeft,
   CalendarDays,
+  Download,
   ExternalLink,
+  FileJson,
+  FileText,
   Loader2,
   Pencil,
   Star,
@@ -14,6 +17,7 @@ import {
 } from "lucide-react";
 import { ProjectDialog } from "@/components/ProjectDialog";
 import { StatusSelect } from "@/components/StatusSelect";
+import { Popover } from "@/components/ui/Popover";
 import { PRIORITY_META, accentOf } from "@/lib/status";
 import { cn, formatDate } from "@/lib/utils";
 import type { ConnectionSafe, ProjectDetail } from "@/types";
@@ -30,6 +34,8 @@ export function ProjectHeader({
   const priority = PRIORITY_META[project.priority] ?? PRIORITY_META[2];
 
   const [editOpen, setEditOpen] = useState(false);
+  const [exportOpen, setExportOpen] = useState(false);
+  const exportButtonRef = useRef<HTMLButtonElement>(null);
   const [favorite, setFavorite] = useState(project.favorite);
   const [progress, setProgress] = useState(project.progress);
   const [deleting, setDeleting] = useState(false);
@@ -162,6 +168,17 @@ export function ProjectHeader({
         <div className="flex flex-col items-end gap-3">
           <StatusSelect projectId={project.id} status={project.status} />
           <div className="flex gap-2">
+            <button
+              ref={exportButtonRef}
+              type="button"
+              className="btn btn-ghost px-2.5 py-1.5 text-xs"
+              onClick={() => setExportOpen((value) => !value)}
+              aria-haspopup="menu"
+              aria-expanded={exportOpen}
+              title="Exportieren"
+            >
+              <Download className="h-3.5 w-3.5" />
+            </button>
             <button
               type="button"
               className="btn btn-ghost px-3 py-1.5 text-xs"
@@ -211,6 +228,44 @@ export function ProjectHeader({
         />
       </div>
 
+      <Popover
+        anchorRef={exportButtonRef}
+        open={exportOpen}
+        onClose={() => setExportOpen(false)}
+        width={250}
+      >
+        <a
+          href={`/api/projects/${project.id}/export`}
+          download
+          role="menuitem"
+          onClick={() => setExportOpen(false)}
+          className="flex items-start gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-300 transition-colors hover:bg-white/6 hover:text-white"
+        >
+          <FileJson className="mt-0.5 h-4 w-4 shrink-0 text-violet-300" />
+          <span>
+            Als JSON
+            <span className="mt-0.5 block text-[11px] text-slate-500">
+              Zum Wiedereinlesen, mit Notizen
+            </span>
+          </span>
+        </a>
+        <a
+          href={`/api/projects/${project.id}/export?format=md`}
+          download
+          role="menuitem"
+          onClick={() => setExportOpen(false)}
+          className="flex items-start gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-300 transition-colors hover:bg-white/6 hover:text-white"
+        >
+          <FileText className="mt-0.5 h-4 w-4 shrink-0 text-cyan-300" />
+          <span>
+            Als Markdown
+            <span className="mt-0.5 block text-[11px] text-slate-500">
+              Lesbar, inklusive Git-Stand
+            </span>
+          </span>
+        </a>
+      </Popover>
+
       <ProjectDialog
         open={editOpen}
         onClose={() => setEditOpen(false)}

src/components/admin/AdminManager.tsx

@@ -5,12 +5,15 @@ import { useRouter } from "next/navigation";
 import {
   Ban,
   CheckCircle2,
+  Database,
+  Download,
   Fingerprint,
   FolderGit2,
   Loader2,
   Lock,
   Plus,
   RefreshCw,
+  ShieldAlert,
   ShieldCheck,
   Trash2,
   User,
@@ -226,6 +229,40 @@ export function AdminManager({ data }: { data: AdminData }) {
         </dl>
       </section>
 
+      {/* ── Sicherung ───────────────────────────────────── */}
+      <section className="glass p-5">
+        <div className="mb-4 flex items-start gap-3">
+          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-amber-500/12 text-amber-300">
+            <Database className="h-4 w-4" />
+          </span>
+          <div>
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-200">
+              Sicherung
+            </h2>
+            <p className="mt-1 max-w-2xl text-sm text-slate-400">
+              Vollstaendige Sicherung der Instanz als JSON: Einstellungen, Konten,
+              Verbindungen, Projekte und Notizen.
+            </p>
+          </div>
+        </div>
+
+        <a href="/api/admin/backup" download className="btn btn-ghost">
+          <Download className="h-4 w-4" />
+          Sicherung herunterladen
+        </a>
+
+        <p className="mt-3 flex items-start gap-2 rounded-lg border border-amber-500/25 bg-amber-500/8 px-3 py-2 text-[11px] leading-snug text-amber-200/90">
+          <ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>
+            Die Datei enthaelt Passwort-Hashes und verschluesselte Git-Tokens. Die Tokens
+            sind nur mit demselben <code>APP_SECRET</code> wieder lesbar, Passwoerter
+            liegen als scrypt-Hash vor – trotzdem vertraulich behandeln. Fuer eine
+            byteweise Sicherung der Datenbank gibt es <code>scripts/backup.ps1</code>{" "}
+            beziehungsweise <code>scripts/backup.sh</code> mit <code>pg_dump</code>.
+          </span>
+        </p>
+      </section>
+
       {/* ── Benutzer ────────────────────────────────────── */}
       <section className="glass p-5">
         <div className="mb-4 flex flex-wrap items-start justify-between gap-3">