feat: Oberfläche für Universen

Umsortieren geht per Ziehen und über Pfeilknöpfe: reines Drag & Drop wäre mit Tastatur nicht bedienbar und auf dem Handy fummelig — die Knöpfe sind der verlässliche Weg, das Ziehen der bequeme. Die Erscheinungsreihenfolge lässt sich gar nicht erst anfassen, weil sie sich aus den Daten ergibt.
2026-09-01 19:39:32 +02:00
parent 90497ddc3b
commit 5ee6946fd5
6 changed files with 1149 additions and 0 deletions
@@ -0,0 +1,155 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+import { getSessionUser } from "@/lib/auth";
+import {
+  addCollection,
+  addTitle,
+  createOrder,
+  createUniverse,
+  deleteOrder,
+  removeTitle,
+  renameOrder,
+  renameUniverse,
+  setOrderPositions,
+  shareUniverse,
+  trashUniverse,
+  unshareUniverse,
+  UniverseError,
+} from "@/lib/universes";
+
+/** Server-Aktionen für Universen. Zugriffsrechte prüft die Domänenschicht. */
+
+export type UniverseActionResult = { ok: boolean; message?: string; id?: string };
+
+async function run(
+  fn: (userId: string) => Promise<{ message?: string; id?: string } | void>,
+): Promise<UniverseActionResult> {
+  const user = await getSessionUser();
+  if (!user) return { ok: false, message: "Bitte melde dich an." };
+
+  try {
+    const result = (await fn(user.id)) ?? {};
+    revalidatePath("/universen", "layout");
+    revalidatePath("/", "layout");
+    return { ok: true, message: result.message, id: result.id };
+  } catch (error) {
+    if (error instanceof UniverseError) return { ok: false, message: error.message };
+    console.error("Universums-Aktion fehlgeschlagen:", error);
+    return { ok: false, message: "Das hat nicht geklappt. Bitte noch einmal versuchen." };
+  }
+}
+
+const id = z.string().min(1).max(64);
+const name = z.string().trim().min(1).max(120);
+
+export async function createUniverseAction(rawName: string, description?: string) {
+  return run(async (userId) => {
+    const universe = await createUniverse(userId, name.parse(rawName), description);
+    return { message: `„${universe.name}" angelegt`, id: universe.id };
+  });
+}
+
+export async function renameUniverseAction(
+  universeId: string,
+  data: { name?: string; description?: string | null },
+) {
+  return run(async (userId) => {
+    await renameUniverse(userId, id.parse(universeId), {
+      ...(data.name !== undefined ? { name: name.parse(data.name) } : {}),
+      ...(data.description !== undefined
+        ? { description: z.string().max(2000).nullable().parse(data.description) }
+        : {}),
+    });
+    return { message: "Gespeichert" };
+  });
+}
+
+export async function trashUniverseAction(universeId: string) {
+  return run(async (userId) => {
+    await trashUniverse(userId, id.parse(universeId));
+    return { message: "Universum gelöscht" };
+  });
+}
+
+export async function addTitleToUniverseAction(universeId: string, titleId: string) {
+  return run(async (userId) => {
+    await addTitle(userId, id.parse(universeId), id.parse(titleId));
+    return { message: "Aufgenommen" };
+  });
+}
+
+export async function removeFromUniverseAction(universeId: string, itemId: string) {
+  return run(async (userId) => {
+    await removeTitle(userId, id.parse(universeId), id.parse(itemId));
+    return { message: "Aus dem Universum entfernt" };
+  });
+}
+
+export async function addCollectionAction(universeId: string, tmdbCollectionId: number) {
+  return run(async (userId) => {
+    const added = await addCollection(
+      userId,
+      id.parse(universeId),
+      z.number().int().parse(tmdbCollectionId),
+    );
+    return {
+      message:
+        added === 0
+          ? "Alles daraus war schon drin"
+          : `${added} ${added === 1 ? "Titel" : "Titel"} übernommen`,
+    };
+  });
+}
+
+export async function createOrderAction(universeId: string, rawName: string) {
+  return run(async (userId) => {
+    const order = await createOrder(userId, id.parse(universeId), name.parse(rawName));
+    return { message: "Reihenfolge angelegt", id: order.id };
+  });
+}
+
+export async function renameOrderAction(orderId: string, rawName: string) {
+  return run(async (userId) => {
+    await renameOrder(userId, id.parse(orderId), name.parse(rawName));
+    return { message: "Umbenannt" };
+  });
+}
+
+export async function deleteOrderAction(orderId: string) {
+  return run(async (userId) => {
+    await deleteOrder(userId, id.parse(orderId));
+    return { message: "Reihenfolge gelöscht" };
+  });
+}
+
+export async function reorderAction(orderId: string, itemIds: string[]) {
+  return run(async (userId) => {
+    await setOrderPositions(userId, id.parse(orderId), z.array(id).max(1000).parse(itemIds));
+    return { message: "Reihenfolge gespeichert" };
+  });
+}
+
+export async function shareUniverseAction(
+  universeId: string,
+  email: string,
+  permission: "READ" | "WRITE",
+) {
+  return run(async (userId) => {
+    const target = await shareUniverse(
+      userId,
+      id.parse(universeId),
+      z.string().trim().email().parse(email),
+      z.enum(["READ", "WRITE"]).parse(permission),
+    );
+    return { message: `Mit ${target.name} geteilt` };
+  });
+}
+
+export async function unshareUniverseAction(universeId: string, memberId: string) {
+  return run(async (userId) => {
+    await unshareUniverse(userId, id.parse(universeId), id.parse(memberId));
+    return { message: "Freigabe aufgehoben" };
+  });
+}
@@ -0,0 +1,193 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { requireUser } from "@/lib/auth";
+import { getSettings } from "@/lib/settings";
+import { prisma } from "@/lib/db";
+import { getUniverse, suggestCollections } from "@/lib/universes";
+import { formatMinutes } from "@/lib/labels";
+import { AppShell } from "@/components/AppShell";
+import { ProgressBar } from "@/components/ProgressBar";
+import { OrderedList } from "@/components/universes/OrderedList";
+import {
+  AddTitles,
+  DeleteUniverse,
+  OrderTabs,
+  SharePanel,
+} from "@/components/universes/UniverseTools";
+
+type Params = Promise<{ id: string }>;
+type Search = Promise<{ reihenfolge?: string }>;
+
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  const { id } = await params;
+  const universe = await prisma.universe.findUnique({ where: { id }, select: { name: true } });
+  return { title: universe?.name ?? "Universum" };
+}
+
+export default async function UniversePage({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: Search;
+}) {
+  const user = await requireUser();
+  const settings = await getSettings();
+  const { id } = await params;
+  const { reihenfolge } = await searchParams;
+
+  const universe = await getUniverse(user.id, id, reihenfolge);
+  if (!universe) notFound();
+
+  const activeOrder = universe.orders.find((order) => order.id === universe.activeOrderId);
+  const inUniverse = new Set(universe.entries.map((entry) => entry.titleId));
+
+  // Vorschläge zum Aufnehmen: alles aus der eigenen Bibliothek, was noch fehlt.
+  const [libraryTitles, collections] = universe.canWrite
+    ? await Promise.all([
+        prisma.libraryEntry.findMany({
+          where: { userId: user.id, deletedAt: null },
+          orderBy: { title: { title: "asc" } },
+          select: {
+            title: { select: { id: true, title: true, type: true, releaseDate: true } },
+          },
+        }),
+        suggestCollections(user.id),
+      ])
+    : [[], []];
+
+  const candidates = libraryTitles
+    .map((entry) => entry.title)
+    .filter((title) => !inUniverse.has(title.id))
+    .map((title) => ({
+      id: title.id,
+      title: title.title,
+      type: title.type,
+      year: title.releaseDate?.getFullYear() ?? null,
+    }));
+
+  return (
+    <AppShell user={user} instanceName={settings.instanceName}>
+      <header className="mb-5">
+        <p className="text-xs font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
+          Universum
+          {!universe.isOwner && ` · geteilt von ${universe.ownerName}`}
+          {!universe.canWrite && " · nur ansehen"}
+        </p>
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight sm:text-3xl">{universe.name}</h1>
+        {universe.description && (
+          <p className="mt-1 max-w-2xl text-sm text-[var(--fl-muted)]">{universe.description}</p>
+        )}
+      </header>
+
+      <section className="fl-card mb-5 p-5" aria-label="Gesamtfortschritt">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div>
+            <p className="text-2xl font-semibold">
+              {universe.progress.completed}{" "}
+              <span className="text-base font-normal text-[var(--fl-muted)]">
+                von {universe.progress.total} abgeschlossen
+              </span>
+            </p>
+            <p className="mt-1 text-sm text-[var(--fl-muted)]">
+              {formatMinutes(universe.progress.watchedMinutes)} gesehen
+              {universe.progress.remainingMinutes > 0 && (
+                <>
+                  {" · noch "}
+                  <span className="text-[var(--fl-text)]">
+                    {formatMinutes(universe.progress.remainingMinutes)}
+                  </span>
+                  {" bis zum Ende des Universums"}
+                </>
+              )}
+            </p>
+          </div>
+
+          {universe.nextUp && (
+            <div className="text-right">
+              <p className="text-xs font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
+                Als Nächstes dran
+              </p>
+              <Link
+                href={`/titel/${universe.nextUp.titleId}`}
+                className="fl-gradient-text text-lg font-semibold"
+              >
+                {universe.nextUp.title}
+              </Link>
+            </div>
+          )}
+        </div>
+
+        <div className="mt-4">
+          <ProgressBar
+            percent={universe.progress.percent}
+            label={`${universe.progress.percent} Prozent des Universums abgeschlossen`}
+          />
+        </div>
+      </section>
+
+      <div className="mb-4">
+        <OrderTabs universe={universe} canWrite={universe.canWrite} />
+        {activeOrder?.kind === "RELEASE" ? (
+          <p className="mt-2 text-xs text-[var(--fl-faint)]">
+            Diese Reihenfolge ergibt sich aus den Erscheinungsdaten und bleibt damit immer aktuell.
+          </p>
+        ) : universe.canWrite ? (
+          <p className="mt-2 text-xs text-[var(--fl-faint)]">
+            Ziehen oder die Pfeile benutzen, um umzusortieren — gespeichert wird sofort.
+          </p>
+        ) : null}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <div className="order-2 lg:order-1">
+          <OrderedList
+            universeId={universe.id}
+            orderId={universe.activeOrderId}
+            entries={universe.entries}
+            sortable={activeOrder?.kind === "CUSTOM"}
+            canWrite={universe.canWrite}
+            nextUpItemId={universe.nextUp?.itemId ?? null}
+          />
+        </div>
+
+        <aside className="order-1 space-y-5 lg:order-2">
+          {universe.canWrite && (
+            <div className="fl-card p-4">
+              <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
+                Titel aufnehmen
+              </h2>
+              <AddTitles
+                universeId={universe.id}
+                candidates={candidates}
+                collections={collections}
+              />
+            </div>
+          )}
+
+          {universe.isOwner && (
+            <>
+              <div className="fl-card p-4">
+                <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-[var(--fl-faint)]">
+                  Teilen
+                </h2>
+                <SharePanel universe={universe} />
+              </div>
+
+              <div className="fl-card p-4">
+                <DeleteUniverse universeId={universe.id} name={universe.name} />
+              </div>
+            </>
+          )}
+        </aside>
+      </div>
+
+      <p className="mt-8 text-sm">
+        <Link href="/universen" className="text-[var(--fl-faint)] hover:text-[var(--fl-muted)]">
+          ← Alle Universen
+        </Link>
+      </p>
+    </AppShell>
+  );
+}
@@ -0,0 +1,38 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { requireUser } from "@/lib/auth";
+import { getSettings } from "@/lib/settings";
+import { AppShell } from "@/components/AppShell";
+import { NewUniverseForm } from "@/components/universes/UniverseTools";
+
+export const metadata: Metadata = { title: "Neues Universum" };
+
+export default async function NewUniversePage() {
+  const user = await requireUser("/universen/neu");
+  const settings = await getSettings();
+
+  return (
+    <AppShell user={user} instanceName={settings.instanceName}>
+      <div className="mx-auto max-w-xl">
+        <header className="mb-6">
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Neues Universum</h1>
+          <p className="mt-1 text-sm text-[var(--fl-muted)]">
+            Ein Universum bündelt Filme und Serien, die zusammengehören. Die
+            Erscheinungsreihenfolge ist von Anfang an dabei; weitere Reihenfolgen legst du
+            danach an.
+          </p>
+        </header>
+
+        <div className="fl-card p-5 sm:p-6">
+          <NewUniverseForm />
+        </div>
+
+        <p className="mt-6 text-sm">
+          <Link href="/universen" className="text-[var(--fl-faint)] hover:text-[var(--fl-muted)]">
+            ← Zurück zur Übersicht
+          </Link>
+        </p>
+      </div>
+    </AppShell>
+  );
+}
@@ -0,0 +1,90 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { requireUser } from "@/lib/auth";
+import { getSettings } from "@/lib/settings";
+import { listUniverses } from "@/lib/universes";
+import { AppShell } from "@/components/AppShell";
+import { Poster } from "@/components/Poster";
+import { ProgressBar } from "@/components/ProgressBar";
+
+export const metadata: Metadata = { title: "Universen" };
+
+export default async function UniversesPage() {
+  const user = await requireUser("/universen");
+  const settings = await getSettings();
+  const universes = await listUniverses(user.id);
+
+  return (
+    <AppShell user={user} instanceName={settings.instanceName}>
+      <header className="mb-6 flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">Universen</h1>
+          <p className="mt-1 max-w-2xl text-sm text-[var(--fl-muted)]">
+            Filme und Serien, die zusammengehören — mit mehreren Reihenfolgen und einem
+            Gesamtfortschritt.
+          </p>
+        </div>
+        <Link href="/universen/neu" className="fl-btn fl-btn-primary">
+          Neues Universum
+        </Link>
+      </header>
+
+      {universes.length === 0 ? (
+        <div className="fl-card p-8 text-center">
+          <p className="mx-auto max-w-md text-[var(--fl-muted)]">
+            Noch kein Universum angelegt. Ein Universum bündelt zusammengehörige Titel — etwa alle
+            MCU-Filme samt Serien — und zeigt dir, was als Nächstes dran ist.
+          </p>
+          <Link href="/universen/neu" className="fl-btn fl-btn-primary mt-4">
+            Erstes Universum anlegen
+          </Link>
+        </div>
+      ) : (
+        <ul className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {universes.map((universe) => (
+            <li key={universe.id}>
+              <Link
+                href={`/universen/${universe.id}`}
+                className="fl-card fl-poster-card block overflow-hidden p-4"
+              >
+                <div className="mb-3 flex gap-1.5">
+                  {universe.posters.length > 0 ? (
+                    universe.posters.map((path, index) => (
+                      <div key={`${path}-${index}`} className="w-1/5">
+                        <Poster path={path} alt="" size="w154" />
+                      </div>
+                    ))
+                  ) : (
+                    <div className="w-1/5">
+                      <Poster path={null} alt={universe.name} size="w154" />
+                    </div>
+                  )}
+                </div>
+
+                <h2 className="font-semibold">{universe.name}</h2>
+                {universe.description && (
+                  <p className="mt-1 line-clamp-2 text-sm text-[var(--fl-muted)]">
+                    {universe.description}
+                  </p>
+                )}
+
+                <p className="mt-2 text-xs text-[var(--fl-faint)]">
+                  {universe.itemCount} {universe.itemCount === 1 ? "Titel" : "Titel"}
+                  {!universe.isOwner ? ` · geteilt von ${universe.ownerName}` : ""}
+                </p>
+
+                <div className="mt-2">
+                  <ProgressBar
+                    percent={universe.percent}
+                    label={`${universe.completed} von ${universe.itemCount} abgeschlossen`}
+                    showValue
+                  />
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </AppShell>
+  );
+}