feat(medien): Übersicht als Pflegewerkzeug statt als Galerie

src/app/_components/media/focal-point-picker.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
+import { Button } from "@/app/_components/ui";
+import { CrosshairIcon } from "lucide-react";
+
+/**
+ * Fokuspunkt eines Bildes setzen: der Punkt, der sichtbar bleibt, wenn das Bild
+ * irgendwo als `object-cover` beschnitten wird (Kartenkopf, Karussell, Kachel).
+ *
+ * Die Spalten gab es schon, nur keinen Weg sie zu setzen — bis hierher blieb
+ * als einziges Mittel, das Bild neu zuzuschneiden und damit das Original zu
+ * verlieren. Der Fokuspunkt lässt die Datei in Ruhe.
+ */
+export function FocalPointPicker({
+  url,
+  alt,
+  x,
+  y,
+  onChange,
+}: {
+  url: string;
+  alt: string;
+  x: number | null;
+  y: number | null;
+  onChange: (next: { x: number | null; y: number | null }) => void;
+}) {
+  const frameRef = useRef<HTMLDivElement>(null);
+
+  const setFromEvent = useCallback(
+    (clientX: number, clientY: number) => {
+      const frame = frameRef.current?.getBoundingClientRect();
+      if (!frame || frame.width === 0 || frame.height === 0) return;
+      const nextX = ((clientX - frame.left) / frame.width) * 100;
+      const nextY = ((clientY - frame.top) / frame.height) * 100;
+      onChange({
+        x: Math.round(Math.min(100, Math.max(0, nextX))),
+        y: Math.round(Math.min(100, Math.max(0, nextY))),
+      });
+    },
+    [onChange],
+  );
+
+  const hasFocalPoint = x != null && y != null;
+
+  return (
+    <div className="space-y-2">
+      <div
+        ref={frameRef}
+        // Kein <button>: der Klick trägt eine Position, keine Ja/Nein-Auswahl.
+        // Für die Tastatur stehen darunter die beiden Zahlenfelder.
+        onClick={(event) => setFromEvent(event.clientX, event.clientY)}
+        className="dark:border-dark-border relative aspect-video w-full cursor-crosshair overflow-hidden rounded-lg border border-gray-200 bg-gray-100 dark:bg-gray-800"
+        title="Klicken, um den Bildmittelpunkt zu setzen"
+      >
+        <ImageWithFallback
+          src={url}
+          alt={alt}
+          fill
+          className="object-contain"
+          sizes="(max-width: 768px) 90vw, 420px"
+        />
+        {hasFocalPoint && (
+          <span
+            className="pointer-events-none absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-black/40 ring-2 ring-black/50"
+            style={{ left: `${x}%`, top: `${y}%` }}
+            aria-hidden
+          />
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-end gap-2">
+        <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+          X&nbsp;%
+          <input
+            type="number"
+            min={0}
+            max={100}
+            value={x ?? ""}
+            onChange={(event) =>
+              onChange({
+                x:
+                  event.target.value === "" ? null : Number(event.target.value),
+                y: y ?? 50,
+              })
+            }
+            className="dark:border-dark-border dark:bg-dark-background-secondary dark:text-dark-text w-16 rounded-md border border-gray-300 px-2 py-1 tabular-nums"
+          />
+        </label>
+        <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+          Y&nbsp;%
+          <input
+            type="number"
+            min={0}
+            max={100}
+            value={y ?? ""}
+            onChange={(event) =>
+              onChange({
+                x: x ?? 50,
+                y:
+                  event.target.value === "" ? null : Number(event.target.value),
+              })
+            }
+            className="dark:border-dark-border dark:bg-dark-background-secondary dark:text-dark-text w-16 rounded-md border border-gray-300 px-2 py-1 tabular-nums"
+          />
+        </label>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={!hasFocalPoint}
+          onClick={() => onChange({ x: null, y: null })}
+        >
+          <CrosshairIcon className="mr-1.5 h-4 w-4" />
+          Zurücksetzen
+        </Button>
+      </div>
+      <p className="dark:text-dark-muted text-xs text-gray-500">
+        Bestimmt, welcher Bildausschnitt sichtbar bleibt, wenn das Bild
+        beschnitten dargestellt wird. Ohne Fokuspunkt wird die Bildmitte
+        verwendet.
+      </p>
+    </div>
+  );
+}

src/app/_components/media/media-delete-dialog.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { api } from "@/trpc/react";
+import ImageWithFallback from "@/app/_components/ui/image-with-fallback";
+import { Button } from "@/app/_components/ui";
+import {
+  ScrollableModal,
+  ScrollableModalCard,
+  ScrollableModalBody,
+  ScrollableModalFooter,
+} from "@/app/_components/ui/scrollable-modal";
+import { AlertTriangleIcon } from "lucide-react";
+import {
+  formatFileSize,
+  getMimeTypeIcon,
+  type MediaItem,
+} from "./media-shared";
+
+/**
+ * Löschdialog mit Verwendungsnachweis.
+ *
+ * Der vorherige Dialog fragte nur „bist du sicher?“ und nannte nicht einmal die
+ * Datei. Das war vor allem deshalb heikel, weil zwei Beziehungen auf
+ * `onDelete: Cascade` stehen: mit dem Bild verschwand stillschweigend das ganze
+ * Bläserheft bzw. die Karussell-Folie.
+ */
+export function MediaDeleteDialog({
+  media,
+  onClose,
+  onConfirm,
+  isDeleting,
+}: {
+  media: MediaItem;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting: boolean;
+}) {
+  const { data: usage, isLoading } = api.media.getUsage.useQuery({
+    id: media.id,
+  });
+
+  const cascades = usage?.usages.filter((entry) => entry.cascade) ?? [];
+  const references = usage?.usages.filter((entry) => !entry.cascade) ?? [];
+
+  return (
+    <ScrollableModal onClose={isDeleting ? undefined : onClose}>
+      <ScrollableModalCard maxW="lg">
+        <ScrollableModalBody className="space-y-4">
+          <h3 className="dark:text-dark-text text-lg font-semibold text-gray-900">
+            Medium löschen
+          </h3>
+
+          <div className="dark:border-dark-border flex items-center gap-3 rounded-lg border border-gray-200 p-3">
+            <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded bg-gray-100 dark:bg-gray-800">
+              {media.mimeType.startsWith("image/") ? (
+                <ImageWithFallback
+                  src={media.url}
+                  alt={media.name}
+                  fill
+                  className="object-cover"
+                  sizes="56px"
+                />
+              ) : (
+                <span className="flex h-full items-center justify-center text-2xl">
+                  {getMimeTypeIcon(media.mimeType)}
+                </span>
+              )}
+            </div>
+            <div className="min-w-0">
+              <p className="dark:text-dark-text truncate font-medium text-gray-900">
+                {media.name}
+              </p>
+              <p className="dark:text-dark-muted text-xs text-gray-500">
+                {formatFileSize(media.size)}
+              </p>
+            </div>
+          </div>
+
+          {isLoading ? (
+            <p className="dark:text-dark-muted text-sm text-gray-500">
+              Verwendung wird geprüft …
+            </p>
+          ) : cascades.length > 0 ? (
+            <div className="rounded-lg border border-red-300 bg-red-50 p-3 dark:border-red-900/50 dark:bg-red-900/20">
+              <p className="flex items-start gap-2 text-sm font-semibold text-red-800 dark:text-red-300">
+                <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                Achtung: Es werden weitere Einträge mitgelöscht
+              </p>
+              <ul className="mt-2 space-y-1 text-sm text-red-800 dark:text-red-300">
+                {cascades.map((entry, index) => (
+                  <li key={`${entry.kind}-${index}`}>
+                    <span className="font-medium">{entry.kind}:</span>{" "}
+                    {entry.label}
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 text-xs text-red-700 dark:text-red-400">
+                Diese Einträge hängen unmittelbar an der Datei und verschwinden
+                mit ihr. Tausche das Bild dort zuerst aus, wenn der Eintrag
+                bleiben soll.
+              </p>
+            </div>
+          ) : null}
+
+          {references.length > 0 && (
+            <div className="dark:border-dark-border dark:bg-dark-background rounded-lg border border-gray-200 bg-gray-50 p-3">
+              <p className="dark:text-dark-text text-sm font-medium text-gray-900">
+                Wird an {references.length}{" "}
+                {references.length === 1 ? "Stelle" : "Stellen"} verwendet
+              </p>
+              <ul className="dark:text-dark-muted mt-1.5 space-y-1 text-sm text-gray-600">
+                {references.slice(0, 8).map((entry, index) => (
+                  <li key={`${entry.kind}-${index}`}>
+                    <span className="font-medium">{entry.kind}:</span>{" "}
+                    {entry.label}
+                  </li>
+                ))}
+                {references.length > 8 && (
+                  <li>… und {references.length - 8} weitere</li>
+                )}
+              </ul>
+              <p className="dark:text-dark-muted mt-2 text-xs text-gray-500">
+                Dort bleibt der Eintrag bestehen, verliert aber sein Bild.
+              </p>
+            </div>
+          )}
+
+          {!isLoading && usage?.total === 0 && (
+            <p className="dark:text-dark-muted text-sm text-gray-600">
+              Das Medium wird derzeit nirgendwo verwendet.
+            </p>
+          )}
+
+          <p className="dark:text-dark-muted text-sm text-gray-600">
+            Die Datei wird auch von der Festplatte entfernt. Diese Aktion kann
+            nicht rückgängig gemacht werden.
+          </p>
+        </ScrollableModalBody>
+
+        <ScrollableModalFooter>
+          <div className="flex justify-end gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onClose}
+              disabled={isDeleting}
+            >
+              Abbrechen
+            </Button>
+            <Button
+              variant="danger"
+              size="sm"
+              onClick={onConfirm}
+              disabled={isDeleting || isLoading}
+              isLoading={isDeleting}
+            >
+              Endgültig löschen
+            </Button>
+          </div>
+        </ScrollableModalFooter>
+      </ScrollableModalCard>
+    </ScrollableModal>
+  );
+}