Landingpages als eigene Gattung, erster Typ: Mehrere Links

Die sechs noch offenen Typen haben kein fremdes Ziel, auf das man weiterleiten koennte — sie brauchen eine Seite. Dafuer bekommt der Typ-Vertrag `hasLandingPage`: /r/[slug] schickt solche Codes auf /s/[slug], statt `redirectTarget` zu befragen. Die oeffentlichen Seiten duerfen die Navigation der Anwendung nicht zeigen — wer einen Code scannt, hat mit „Verwaltung" nichts zu tun. Deshalb liegt das App-Chrome jetzt in der Routengruppe (app); das Wurzel-Layout traegt nur noch html und body. Die URLs aendern sich dadurch nicht.
2026-08-14 22:27:49 +02:00
parent b3d386b0d2
commit e627f7c372
27 changed files with 678 additions and 124 deletions
@@ -0,0 +1,116 @@
+import Link from "next/link";
+
+import { LogoutButton } from "@/components/auth-forms";
+import { Icon } from "@/components/icons";
+import { actorLabel, getActor, isAuthEnabled } from "@/lib/auth/actor";
+import { can } from "@/lib/auth/policy";
+
+// Der Kopfbereich hängt von der Anmeldung ab und darf nicht vorgerendert
+// werden.
+export const dynamic = "force-dynamic";
+
+const NAV_LINK =
+  "rounded-lg px-3 py-2 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900";
+
+/**
+ * Rahmen der eigentlichen Anwendung: Kopfzeile mit Navigation, Inhalt,
+ * Fußzeile. Die öffentlichen Landingpages liegen bewusst außerhalb dieser
+ * Gruppe und bekommen davon nichts ab.
+ */
+export default async function AppLayout({ children }: LayoutProps<"/">) {
+  const actor = await getActor();
+  const signedIn = actor.kind !== "anonymous";
+  const showAdmin = can(actor, "instance:manage");
+
+  return (
+    <div className="flex min-h-full flex-col">
+      <header className="border-b border-slate-200 bg-white">
+        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3.5 sm:px-6">
+          <Link
+            href="/"
+            className="flex items-center gap-2.5 rounded-lg font-semibold text-slate-900"
+          >
+            <span className="flex size-9 items-center justify-center rounded-lg bg-indigo-600 text-white">
+              <Icon name="qr" className="size-5" />
+            </span>
+            {/* Auf schmalen Geräten reicht das Zeichen — sonst passt die
+                Navigation nicht mehr in eine Zeile. */}
+            <span className="hidden sm:inline">QR-Code-Generator</span>
+          </Link>
+
+          <nav className="flex flex-wrap items-center gap-0.5 text-sm font-medium sm:gap-1">
+            {signedIn ? (
+              <>
+                <Link href="/" className={NAV_LINK}>
+                  Erstellen
+                </Link>
+                <Link href="/meine-codes" className={NAV_LINK}>
+                  Meine Codes
+                </Link>
+                {showAdmin ? (
+                  <Link href="/verwaltung" className={NAV_LINK}>
+                    Verwaltung
+                  </Link>
+                ) : null}
+              </>
+            ) : null}
+
+            {isAuthEnabled() && actor.kind === "user" ? (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+                />
+                <Link
+                  href="/konto"
+                  title={`Konto von ${actor.user.email}`}
+                  className="flex max-w-[13rem] items-center gap-2 rounded-lg px-2.5 py-2 text-slate-700 transition-colors hover:bg-slate-100"
+                >
+                  <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-[0.7rem] font-semibold text-indigo-700 uppercase">
+                    {actorLabel(actor).slice(0, 2)}
+                  </span>
+                  <span className="hidden truncate sm:inline">
+                    {actorLabel(actor)}
+                  </span>
+                </Link>
+                <LogoutButton />
+              </>
+            ) : null}
+
+            {isAuthEnabled() && actor.kind === "anonymous" ? (
+              <Link href="/anmelden" className={NAV_LINK}>
+                Anmelden
+              </Link>
+            ) : null}
+
+            {/* Ohne Anmeldung gibt es kein Konto. Das gehört sichtbar
+                gesagt — sonst sucht man den Abmelden-Knopf vergeblich. */}
+            {!isAuthEnabled() ? (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+                />
+                <Link
+                  href="/konto"
+                  title="Die Anmeldung ist ausgeschaltet — hier steht, wie du sie einschaltest"
+                  className="rounded-lg px-3 py-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                >
+                  Ohne Anmeldung
+                </Link>
+              </>
+            ) : null}
+          </nav>
+        </div>
+      </header>
+
+      <main className="flex-1">{children}</main>
+
+      <footer className="border-t border-slate-200 bg-white">
+        <div className="mx-auto max-w-6xl px-4 py-6 text-sm text-slate-500 sm:px-6">
+          QR-Code-Generator · statische und dynamische QR-Codes
+        </div>
+      </footer>
+    </div>
+  );
+}