feat: Suchseite und Titel-Detailseite

Die Suchanfrage steht in der URL: Treffer sind teilbar, der Zurück-Knopf funktioniert, und die Suche selbst bleibt eine Server-Komponente. Posterkacheln zeigen bei fehlendem Bild die Bildmarke über dem Signaturverlauf. Die Rückfalldarstellung liegt dauerhaft unter dem Bild — ein onError-Handler hilft nicht, wenn das Bild schon vor der Hydration scheitert, und der Browser zeigt dann sein kaputtes Bildsymbol.
2026-09-01 19:00:13 +02:00
parent cc0e498fe6
commit e11cb6abef
6 changed files with 821 additions and 0 deletions
@@ -0,0 +1,97 @@
+import { clsx } from "clsx";
+import { posterUrl, type ImageSize } from "@/lib/images";
+import { FlimmerMark } from "@/components/brand/FlimmerLogo";
+
+/**
+ * Posterbild mit Rückfallebene.
+ *
+ * Nicht jeder Titel hat bei TMDB ein Poster, manuell angelegte schon gar
+ * nicht, und einzelne Pfade verschwinden mit der Zeit.
+ *
+ * Die Rückfallkachel liegt deshalb **dauerhaft darunter**, das Bild darüber:
+ * lädt es, verdeckt es die Kachel; lädt es nicht, bleibt die Kachel stehen.
+ * Bewusst ohne onError-Handler — ein Bild kann schon fehlschlagen, bevor React
+ * den Handler überhaupt angehängt hat. Das leere alt-Attribut sorgt dafür,
+ * dass ein kaputtes Bild in sich zusammenfällt statt ein Symbol zu zeigen;
+ * den Titel trägt der Container als aria-label.
+ */
+export function Poster({
+  path,
+  alt,
+  size = "w342",
+  className,
+  sizes = "(min-width: 1024px) 12rem, 40vw",
+  priority = false,
+}: {
+  path: string | null | undefined;
+  alt: string;
+  size?: ImageSize;
+  className?: string;
+  sizes?: string;
+  priority?: boolean;
+}) {
+  const url = posterUrl(path, size);
+
+  return (
+    <div
+      role="img"
+      aria-label={alt}
+      className={clsx(
+        "relative aspect-[2/3] w-full overflow-hidden rounded-[var(--radius-poster,0.875rem)] bg-[var(--fl-surface-2)]",
+        className,
+      )}
+    >
+      <div
+        aria-hidden
+        className="absolute inset-0 flex flex-col items-center justify-center gap-2 p-3 text-center"
+        style={{ backgroundImage: "var(--fl-gradient-soft)" }}
+      >
+        <FlimmerMark className="h-8 w-8 opacity-70" flat />
+        <span className="line-clamp-3 text-xs text-[var(--fl-muted)]">{alt}</span>
+      </div>
+
+      {url && (
+        // Bewusst <img> statt next/image: die Bilder laufen bereits über den
+        // eigenen Cache-Endpunkt, eine zweite Optimierungsschicht brächte dem
+        // selbst gehosteten Server nur zusätzliche Last.
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={url}
+          alt=""
+          sizes={sizes}
+          loading={priority ? "eager" : "lazy"}
+          decoding="async"
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      )}
+    </div>
+  );
+}
+
+/** Breitbild-Variante für Kopfbereiche (Backdrop). */
+export function Backdrop({
+  path,
+  alt,
+  className,
+}: {
+  path: string | null | undefined;
+  alt: string;
+  className?: string;
+}) {
+  const url = posterUrl(path, "w1280");
+  if (!url) return null;
+
+  return (
+    <div className={clsx("absolute inset-0 overflow-hidden", className)} aria-hidden>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={url} alt="" className="h-full w-full object-cover opacity-25" />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "linear-gradient(to top, var(--fl-bg) 8%, color-mix(in oklab, var(--fl-bg) 70%, transparent) 55%, color-mix(in oklab, var(--fl-bg) 30%, transparent) 100%)",
+        }}
+      />
+    </div>
+  );
+}