fix(admin): complete media manager

app/admin/medien/page.tsx

@@ -1,26 +1,12 @@
-import Image from "next/image";
 import { redirect } from "next/navigation";
 import AdminShell from "@/components/admin/AdminShell";
+import MediaManager from "@/components/admin/MediaManager";
 import { requireAdminSession } from "@/lib/admin/auth";
 import { listMediaFiles } from "@/lib/admin/media";
 
-function formatBytes(size: number) {
+export default async function AdminMediaPage() {
-  if (size < 1024) return `${size} B`;
-  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
-  return `${(size / 1024 / 1024).toFixed(1)} MB`;
-}
-
-function uploadErrorMessage(error?: string) {
-  if (!error) return "";
-  if (error === "missing-file") return "Bitte wählen Sie eine Datei aus.";
-  if (error === "storage") return "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen.";
-  return error;
-}
-
-export default async function AdminMediaPage({ searchParams }: { searchParams: Promise<{ uploaded?: string; error?: string }> }) {
   if (!await requireAdminSession()) redirect("/admin/login");
-  const [files, params] = await Promise.all([listMediaFiles(), searchParams]);
+  const files = await listMediaFiles();
-  const error = uploadErrorMessage(params.error);
 
   return (
     <AdminShell>
@@ -28,41 +14,7 @@ export default async function AdminMediaPage({ searchParams }: { searchParams: P
         <p className="eyebrow">Assets</p>
         <h1>Medienverwaltung</h1>
       </div>
-      {params.uploaded === "1" && <p className="success">Datei wurde erfolgreich hochgeladen.</p>}
+      <MediaManager initialFiles={files} />
-      {error && <p className="error admin-message">Upload fehlgeschlagen: {error}</p>}
-      <form className="admin-card admin-upload" action="/api/admin/media" method="post" encType="multipart/form-data">
-        <label>Datei hochladen<input name="file" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" /></label>
-        <button className="button" type="submit">Datei hochladen</button>
-      </form>
-      <section className="admin-card">
-        <h2>Uploads</h2>
-        {files.length === 0 ? (
-          <div className="media-empty">
-            <h3>Noch keine Medien vorhanden</h3>
-            <p>Hochgeladene Bilder und PDF-Dateien erscheinen hier mit Vorschau und Metadaten.</p>
-          </div>
-        ) : (
-          <div className="media-list">
-            {files.map((file) => (
-              <article key={file.name} className="media-row">
-                <a className="media-preview" href={file.url} target="_blank" rel="noreferrer">
-                  {file.isImage
-                    ? <Image src={file.url} alt={file.name} width={220} height={140} />
-                    : <span>{file.type}</span>}
-                </a>
-                <div>
-                  <h3>{file.name}</h3>
-                  <dl className="media-meta">
-                    <div><dt>Typ</dt><dd>{file.type}</dd></div>
-                    <div><dt>Größe</dt><dd>{formatBytes(file.size)}</dd></div>
-                    <div><dt>Upload</dt><dd>{new Date(file.uploadedAt).toLocaleString("de-DE")}</dd></div>
-                  </dl>
-                </div>
-              </article>
-            ))}
-          </div>
-        )}
-      </section>
     </AdminShell>
   );
 }

app/api/admin/media/route.ts

@@ -1,13 +1,6 @@
 import { NextResponse } from "next/server";
 import { requireAdminSession } from "@/lib/admin/auth";
-import { listMediaFiles, saveMediaFile } from "@/lib/admin/media";
+import { deleteMediaFile, listMediaFiles, saveMediaFile } from "@/lib/admin/media";
-
-function relativeRedirect(target: string) {
-  return new NextResponse(null, {
-    status: 303,
-    headers: { Location: target },
-  });
-}
 
 export async function GET() {
   if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
@@ -20,15 +13,27 @@ export async function POST(request: Request) {
   const file = form.get("file");
 
   if (!(file instanceof File)) {
-    return relativeRedirect("/admin/medien?error=missing-file");
+    return NextResponse.json({ message: "Bitte wählen Sie eine Datei aus." }, { status: 400 });
   }
 
   try {
     const result = await saveMediaFile(file);
-    if (result.error) return relativeRedirect(`/admin/medien?error=${encodeURIComponent(result.error)}`);
+    if (result.error) return NextResponse.json({ message: result.error }, { status: 400 });
   } catch {
-    return relativeRedirect("/admin/medien?error=storage");
+    return NextResponse.json({ message: "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen." }, { status: 500 });
   }
 
-  return relativeRedirect("/admin/medien?uploaded=1");
+  return NextResponse.json({ message: "Datei erfolgreich hochgeladen.", files: await listMediaFiles() });
+}
+
+export async function DELETE(request: Request) {
+  if (!await requireAdminSession()) return NextResponse.json({ message: "Nicht autorisiert." }, { status: 401 });
+
+  const body = await request.json() as { name?: string };
+  if (!body.name) return NextResponse.json({ message: "Dateiname fehlt." }, { status: 400 });
+
+  const result = await deleteMediaFile(body.name);
+  if (result.error) return NextResponse.json({ message: result.error }, { status: 400 });
+
+  return NextResponse.json({ message: "Datei gelöscht.", files: await listMediaFiles() });
 }

app/globals.css

@@ -754,26 +754,29 @@ h3 {
   margin-bottom: 18px;
 }
 
-.media-grid {
+.media-toolbar {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 150px 150px auto;
-  gap: 12px;
+  gap: 14px;
+  align-items: end;
 }
 
-.media-item {
+.media-toolbar label {
   display: grid;
-  min-height: 130px;
+  gap: 7px;
-  place-items: center;
+  color: var(--ink);
-  border: 1px solid var(--line);
+  font-size: 14px;
-  border-radius: 8px;
+  font-weight: 800;
-  background: #f8fafc;
-  overflow: hidden;
 }
 
-.media-item img {
+.media-toolbar input,
+.media-toolbar select {
   width: 100%;
-  height: 150px;
+  border: 1px solid #cfd8e5;
-  object-fit: cover;
+  border-radius: 8px;
+  background: #fff;
+  padding: 11px 12px;
+  color: var(--ink);
 }
 
 .media-empty {
@@ -787,47 +790,81 @@ h3 {
   color: var(--muted);
 }
 
-.media-list {
+.media-card-grid {
   display: grid;
-  gap: 14px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
 }
 
-.media-row {
+.media-card {
   display: grid;
-  grid-template-columns: 180px minmax(0, 1fr);
-  gap: 16px;
-  align-items: center;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
-  padding: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 26px rgba(8, 42, 96, 0.06);
 }
 
-.media-preview {
+.media-card-preview {
   display: grid;
-  min-height: 110px;
+  width: 100%;
+  aspect-ratio: 16 / 10;
   place-items: center;
-  border: 1px solid var(--line);
+  border: 0;
-  border-radius: 8px;
+  border-bottom: 1px solid var(--line);
   background: #f8fafc;
   color: var(--navy);
   font-weight: 800;
   overflow: hidden;
+  cursor: pointer;
+  padding: 0;
 }
 
-.media-preview img {
+.media-card-preview img {
   width: 100%;
-  height: 110px;
+  height: 100%;
   object-fit: cover;
 }
 
+.pdf-icon {
+  display: grid;
+  width: 72px;
+  height: 92px;
+  place-items: center;
+  border: 2px solid var(--navy);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--navy);
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.media-card-body {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+}
+
+.media-card-body h3 {
+  overflow: hidden;
+  margin: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .media-meta {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: 1fr;
   gap: 10px;
   margin: 0;
 }
 
+.media-meta div {
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 8px;
+}
+
 .media-meta dt {
   color: var(--muted);
   font-size: 13px;
@@ -839,6 +876,91 @@ h3 {
   overflow-wrap: anywhere;
 }
 
+.media-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.media-actions button,
+.media-actions a {
+  display: inline-flex;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--navy);
+  font-weight: 800;
+  padding: 0 10px;
+  text-align: center;
+}
+
+.media-actions .danger {
+  border-color: #f1b5ad;
+  color: #b42318;
+}
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  background: rgba(5, 16, 32, 0.9);
+  color: #fff;
+}
+
+.lightbox-toolbar {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(5, 16, 32, 0.96);
+  padding: 12px 18px;
+}
+
+.lightbox-toolbar div {
+  display: flex;
+  gap: 8px;
+}
+
+.lightbox-toolbar button {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+  font-weight: 800;
+  padding: 8px 10px;
+}
+
+.lightbox-backdrop {
+  position: fixed;
+  inset: 0;
+  border: 0;
+  background: transparent;
+}
+
+.lightbox-stage {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  overflow: auto;
+  padding: 28px;
+}
+
+.lightbox-stage img {
+  max-width: min(92vw, 1400px);
+  max-height: 82vh;
+  transform-origin: center;
+  transition: transform 140ms ease;
+}
+
 .system-list {
   display: grid;
   gap: 0;
@@ -963,7 +1085,8 @@ h3 {
     display: grid;
   }
 
-  .media-row,
+  .media-toolbar,
+  .media-card-grid,
   .media-meta {
     grid-template-columns: 1fr;
   }

components/admin/MediaManager.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+
+import { useEffect, useMemo, useState, type ChangeEvent } from "react";
+import type { MediaFile } from "@/lib/admin/media";
+
+type SortKey = "date" | "name" | "size";
+type FilterKey = "all" | "images" | "pdf";
+
+type ApiResponse = {
+  message?: string;
+  files?: MediaFile[];
+};
+
+function formatBytes(size: number) {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function sortFiles(files: MediaFile[], sort: SortKey) {
+  return [...files].sort((left, right) => {
+    if (sort === "name") return left.name.localeCompare(right.name);
+    if (sort === "size") return right.size - left.size;
+    return right.uploadedAt.localeCompare(left.uploadedAt);
+  });
+}
+
+export default function MediaManager({ initialFiles }: { initialFiles: MediaFile[] }) {
+  const [files, setFiles] = useState(initialFiles);
+  const [filter, setFilter] = useState<FilterKey>("all");
+  const [sort, setSort] = useState<SortKey>("date");
+  const [query, setQuery] = useState("");
+  const [toast, setToast] = useState("");
+  const [error, setError] = useState("");
+  const [pending, setPending] = useState(false);
+  const [preview, setPreview] = useState<MediaFile | null>(null);
+  const [zoom, setZoom] = useState(1);
+
+  useEffect(() => {
+    function closeOnEscape(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setPreview(null);
+        setZoom(1);
+      }
+    }
+
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, []);
+
+  const visibleFiles = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    const filtered = files.filter((file) => {
+      if (filter === "images" && !file.isImage) return false;
+      if (filter === "pdf" && !file.isPdf) return false;
+      if (!normalizedQuery) return true;
+      return file.name.toLowerCase().includes(normalizedQuery) || file.extension.toLowerCase().includes(normalizedQuery);
+    });
+    return sortFiles(filtered, sort);
+  }, [files, filter, query, sort]);
+
+  async function upload(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.currentTarget.files?.[0];
+    if (!file) return;
+
+    setPending(true);
+    setToast("");
+    setError("");
+
+    const form = new FormData();
+    form.set("file", file);
+
+    try {
+      const response = await fetch("/api/admin/media", { method: "POST", body: form });
+      const result = await response.json() as ApiResponse;
+      if (!response.ok) throw new Error(result.message ?? "Upload fehlgeschlagen.");
+      if (result.files) setFiles(result.files);
+      setToast(result.message ?? "Datei erfolgreich hochgeladen.");
+      event.currentTarget.value = "";
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload fehlgeschlagen.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function refresh() {
+    const response = await fetch("/api/admin/media", { method: "GET" });
+    const result = await response.json() as ApiResponse;
+    if (response.ok && result.files) setFiles(result.files);
+  }
+
+  async function remove(file: MediaFile) {
+    if (!window.confirm(`Datei wirklich löschen?\n\n${file.name}`)) return;
+    setToast("");
+    setError("");
+
+    try {
+      const response = await fetch("/api/admin/media", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: file.name }),
+      });
+      const result = await response.json() as ApiResponse;
+      if (!response.ok) throw new Error(result.message ?? "Datei konnte nicht gelöscht werden.");
+      if (result.files) setFiles(result.files);
+      setToast(result.message ?? "Datei gelöscht.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Datei konnte nicht gelöscht werden.");
+    }
+  }
+
+  async function copyUrl(file: MediaFile) {
+    try {
+      await navigator.clipboard.writeText(file.url);
+      setToast("Relative URL wurde kopiert.");
+      setError("");
+    } catch {
+      setError("URL konnte nicht kopiert werden.");
+    }
+  }
+
+  function openPreview(file: MediaFile) {
+    if (file.isImage) {
+      setPreview(file);
+      setZoom(1);
+      return;
+    }
+
+    window.open(file.url, "_blank", "noopener,noreferrer");
+  }
+
+  return (
+    <>
+      {toast && <p className="success admin-message">{toast}</p>}
+      {error && <p className="error admin-message">{error}</p>}
+
+      <section className="admin-card media-toolbar">
+        <label>
+          Datei hochladen
+          <input type="file" accept="image/jpeg,image/png,image/webp,application/pdf" onChange={upload} disabled={pending} />
+        </label>
+        <label>
+          Suche
+          <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Dateiname oder Typ" />
+        </label>
+        <label>
+          Filter
+          <select value={filter} onChange={(event) => setFilter(event.target.value as FilterKey)}>
+            <option value="all">Alle</option>
+            <option value="images">Bilder</option>
+            <option value="pdf">PDF</option>
+          </select>
+        </label>
+        <label>
+          Sortierung
+          <select value={sort} onChange={(event) => setSort(event.target.value as SortKey)}>
+            <option value="date">Datum</option>
+            <option value="name">Name</option>
+            <option value="size">Größe</option>
+          </select>
+        </label>
+        <button className="button light" type="button" onClick={refresh}>Aktualisieren</button>
+      </section>
+
+      <section className="admin-card">
+        <h2>Uploads</h2>
+        {visibleFiles.length === 0 ? (
+          <div className="media-empty">
+            <h3>Noch keine Medien vorhanden</h3>
+            <p>Hochgeladene Bilder und PDF-Dateien erscheinen hier mit Vorschau, Metadaten und Aktionen.</p>
+          </div>
+        ) : (
+          <div className="media-card-grid">
+            {visibleFiles.map((file) => (
+              <article key={file.name} className="media-card">
+                <button className="media-card-preview" type="button" onClick={() => openPreview(file)}>
+                  {file.isImage ? <img src={file.url} alt={file.name} /> : <span className="pdf-icon">PDF</span>}
+                </button>
+                <div className="media-card-body">
+                  <h3 title={file.name}>{file.name}</h3>
+                  <dl className="media-meta">
+                    <div><dt>Typ</dt><dd>{file.extension}</dd></div>
+                    <div><dt>Größe</dt><dd>{formatBytes(file.size)}</dd></div>
+                    <div><dt>Upload</dt><dd>{new Date(file.uploadedAt).toLocaleString("de-DE")}</dd></div>
+                  </dl>
+                  <div className="media-actions">
+                    <button type="button" onClick={() => openPreview(file)}>Vorschau</button>
+                    <a href={file.url} download={file.name}>Download</a>
+                    <button type="button" onClick={() => copyUrl(file)}>URL kopieren</button>
+                    <button type="button" className="danger" onClick={() => remove(file)}>Löschen</button>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {preview && (
+        <div className="lightbox" role="dialog" aria-modal="true" aria-label={`Vorschau ${preview.name}`}>
+          <div className="lightbox-toolbar">
+            <strong>{preview.name}</strong>
+            <div>
+              <button type="button" onClick={() => setZoom((value) => Math.max(0.5, value - 0.25))}>Zoom -</button>
+              <button type="button" onClick={() => setZoom((value) => Math.min(3, value + 0.25))}>Zoom +</button>
+              <button type="button" onClick={() => { setPreview(null); setZoom(1); }}>Schließen</button>
+            </div>
+          </div>
+          <button className="lightbox-backdrop" type="button" aria-label="Vorschau schließen" onClick={() => { setPreview(null); setZoom(1); }} />
+          <div className="lightbox-stage">
+            <img src={preview.url} alt={preview.name} style={{ transform: `scale(${zoom})` }} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

lib/admin/media.ts

@@ -15,10 +15,12 @@ const allowedMimeTypes = new Map([
 export type MediaFile = {
   name: string;
   url: string;
-  type: string;
+  type: "image" | "pdf";
+  extension: string;
   size: number;
   uploadedAt: string;
   isImage: boolean;
+  isPdf: boolean;
 };
 
 export async function ensureUploadDirectory() {
@@ -72,21 +74,31 @@ export function resolveUploadTarget(fileName: string) {
   return target;
 }
 
+function isAllowedStoredFile(fileName: string) {
+  const extension = path.extname(fileName).toLowerCase();
+  const allowedExtensions = [...allowedMimeTypes.values()].flat();
+  return !fileName.startsWith(".") && allowedExtensions.includes(extension);
+}
+
 export async function listMediaFiles(): Promise<MediaFile[]> {
   await mkdir(uploadDirectory, { recursive: true });
   const entries = await readdir(uploadDirectory);
-  const visibleEntries = entries.filter((entry) => !entry.startsWith("."));
+  const visibleEntries = entries.filter(isAllowedStoredFile);
   const files = await Promise.all(visibleEntries.map(async (entry) => {
     const fileStat = await stat(path.join(uploadDirectory, entry));
     const extension = path.extname(entry).toLowerCase();
+    const isImage = [".jpg", ".jpeg", ".png", ".webp"].includes(extension);
+    const isPdf = extension === ".pdf";
 
     return {
       name: entry,
       url: `/uploads/images/${encodeURIComponent(entry)}`,
-      type: extension.replace(".", "").toUpperCase() || "Datei",
+      type: isPdf ? "pdf" as const : "image" as const,
+      extension: extension.replace(".", "").toUpperCase() || "Datei",
       size: fileStat.size,
       uploadedAt: fileStat.birthtime.toISOString(),
-      isImage: [".jpg", ".jpeg", ".png", ".webp"].includes(extension),
+      isImage,
+      isPdf,
     };
   }));
 
@@ -104,3 +116,12 @@ export async function saveMediaFile(file: File) {
 
   return { fileName: safeName };
 }
+
+export async function deleteMediaFile(fileName: string) {
+  if (!isAllowedStoredFile(fileName) || path.basename(fileName) !== fileName) {
+    return { error: "Ungültiger Dateiname." };
+  }
+
+  await rm(resolveUploadTarget(fileName), { force: true });
+  return {};
+}