Version 1.1.0 mit Anzeige im Fußbereich

Versionsnummer aus package.json wird auf jeder Seite unten rechts
dezent eingeblendet.

.env.example

@@ -9,3 +9,10 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>
 
 # Service-Role-Key (GEHEIM! Nur serverseitig, für die Benutzerverwaltung)
 SUPABASE_SERVICE_ROLE_KEY=<service-role-key>
+
+# Öffentliche URL, unter der die App erreichbar ist (Schema + Domain).
+# Wird für den CSRF-Origin-Check hinter Reverse-Proxies genutzt und ist
+# zugleich die Passkey-Domain: nach einer Änderung einmalig
+#   SUPABASE_ACCESS_TOKEN=<token> node scripts/configure-passkeys.mjs
+# ausführen, damit Passkeys auf der neuen Domain funktionieren.
+APP_URL=http://localhost:3000

README.md

@@ -66,6 +66,7 @@ Beim Webserver/Hoster müssen genau diese drei Variablen hinterlegt werden
 | `NEXT_PUBLIC_SUPABASE_URL` | URL des Supabase-Projekts, z. B. `https://hvzikwjoyhoakedlywhj.supabase.co` | nein |
 | `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Öffentlicher anon-Key (RLS schützt die Daten) | nein |
 | `SUPABASE_SERVICE_ROLE_KEY` | Service-Role-Key für die Benutzerverwaltung | **ja – niemals im Browser/Repo!** |
+| `APP_URL` | Öffentliche URL der App, z. B. `https://menu.example.de` (Origin-Check hinter Reverse-Proxy; zugleich Passkey-Domain) | nein |
 
 Build & Start auf dem Server – **mit Docker** (empfohlen, Node.js und
 PostgreSQL müssen nicht installiert sein):
@@ -87,12 +88,23 @@ npm run start          # Port 3000, bindet an 0.0.0.0 (hinter Reverse-Proxy betr
 ### Passkeys für die Produktions-Domain freischalten
 
 Passkeys sind an die Domain gebunden. Aktuell ist `localhost` konfiguriert.
-Vor dem Livegang in der Supabase-Konfiguration (Management API oder
+Vor dem Livegang: `APP_URL` auf die öffentliche URL setzen und einmalig
-Dashboard → Authentication → Settings) anpassen:
 
-- `webauthn_rp_id` = `menu.example.de` (die echte Domain, ohne Protokoll)
+```bash
-- `webauthn_rp_origins` = `https://menu.example.de`
+SUPABASE_ACCESS_TOKEN=<personal-access-token> node scripts/configure-passkeys.mjs
-- `passkey_enabled` = `true` (bereits aktiv)
+```
+
+ausführen (liest `APP_URL` aus der Umgebung; die URL kann alternativ als
+Argument übergeben werden). Ohne lokales Node.js geht es auch über Docker:
+
+```bash
+docker run --rm -v .:/app -w /app \
+  -e SUPABASE_ACCESS_TOKEN=<token> -e APP_URL=https://menu.example.de \
+  node:24-alpine node scripts/configure-passkeys.mjs
+```
+
+Achtung: Bereits registrierte Passkeys der alten Domain verlieren dabei
+ihre Gültigkeit und müssen neu registriert werden.
 
 ## Datenbank
 

app/admin/layout.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
+import AppHeader from "@/components/AppHeader";
 
 export default async function AdminLayout({
   children,
@@ -22,35 +22,10 @@ export default async function AdminLayout({
 
   return (
     <div className="flex-1 flex flex-col">
-      <header className="bg-[var(--c-primary-dark)] text-white">
+      <AppHeader
-        <div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-5 gap-y-2">
+        role="admin"
-          <span className="font-bold">Verwaltung</span>
+        displayName={profile.full_name || user.email || ""}
-          <nav className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+      />
-            <Link href="/admin" className="hover:underline">
-              Benutzer
-            </Link>
-            <Link href="/admin/design" className="hover:underline">
-              Design
-            </Link>
-            <Link href="/intern" className="hover:underline">
-              Kantinen-Bereich
-            </Link>
-            <Link href="/" className="hover:underline">
-              Zur Speisekarte
-            </Link>
-          </nav>
-          <div className="ml-auto flex items-center gap-3 text-sm">
-            <Link href="/konto" className="text-white/70 hover:underline">
-              {profile.full_name || user.email}
-            </Link>
-            <form action="/logout" method="post">
-              <button type="submit" className="btn btn-del">
-                Abmelden
-              </button>
-            </form>
-          </div>
-        </div>
-      </header>
       <main className="max-w-[1600px] mx-auto w-full px-4 py-6 flex-1">
         {children}
       </main>

app/intern/layout.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
 import { redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
+import AppHeader from "@/components/AppHeader";
 
 export default async function InternLayout({
   children,
@@ -22,40 +22,10 @@ export default async function InternLayout({
 
   return (
     <div className="flex-1 flex flex-col">
-      <header className="bg-[var(--c-primary-dark)] text-white">
+      <AppHeader
-        <div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-5 gap-y-2">
+        role={profile.role}
-          <span className="font-bold">Kantinen-Bereich</span>
+        displayName={profile.full_name || user.email || ""}
-          <nav className="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+      />
-            <Link href="/intern" className="hover:underline">
-              Wochenplan
-            </Link>
-            <Link href="/intern/gerichte" className="hover:underline">
-              Gerichte
-            </Link>
-            <Link href="/intern/kennzeichnung" className="hover:underline">
-              Allergene &amp; Zusatzstoffe
-            </Link>
-            {profile.role === "admin" && (
-              <Link href="/admin" className="hover:underline">
-                Verwaltung
-              </Link>
-            )}
-            <Link href="/" className="hover:underline">
-              Zur Speisekarte
-            </Link>
-          </nav>
-          <div className="ml-auto flex items-center gap-3 text-sm">
-            <Link href="/konto" className="text-white/70 hover:underline">
-              {profile.full_name || user.email}
-            </Link>
-            <form action="/logout" method="post">
-              <button type="submit" className="btn btn-del">
-                Abmelden
-              </button>
-            </form>
-          </div>
-        </div>
-      </header>
       <main className="max-w-[1600px] mx-auto w-full px-4 py-6 flex-1">
         {children}
       </main>

app/konto/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
-import Link from "next/link";
 import { createClient } from "@/lib/supabase/server";
+import AppHeader from "@/components/AppHeader";
 import AccountManager from "@/components/AccountManager";
 
 export default async function KontoPage() {
@@ -19,19 +19,10 @@ export default async function KontoPage() {
 
   return (
     <div className="flex-1 flex flex-col">
-      <header className="bg-[var(--c-primary-dark)] text-white">
+      <AppHeader
-        <div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-5 gap-y-2">
+        role={profile.role}
-          <span className="font-bold">Mein Konto</span>
+        displayName={profile.full_name || user.email || ""}
-          <nav className="ml-auto flex flex-wrap gap-x-4 gap-y-1 text-sm">
+      />
-            <Link
-              href={profile.role === "admin" ? "/admin" : "/intern"}
-              className="hover:underline"
-            >
-              ← Zurück
-            </Link>
-          </nav>
-        </div>
-      </header>
       <main className="max-w-[1600px] mx-auto w-full px-4 py-6 flex-1">
         <AccountManager
           role={profile.role}

app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist } from "next/font/google";
 import "./globals.css";
 import { createClient } from "@/lib/supabase/server";
 import { COLOR_VARS, DEFAULT_COLORS } from "@/lib/types";
+import packageJson from "@/package.json";
 
 // Farben/Logo sollen Änderungen sofort widerspiegeln.
 export const dynamic = "force-dynamic";
@@ -41,6 +42,9 @@ export default async function RootLayout({
     <html lang="de" className={`${geistSans.variable} h-full antialiased`}>
       <body style={style} className="min-h-full flex flex-col">
         {children}
+        <footer className="mt-auto px-4 py-2 text-right text-xs text-gray-400 select-none">
+          Version {packageJson.version}
+        </footer>
       </body>
     </html>
   );

app/logout/route.ts

@@ -8,5 +8,11 @@ export async function POST(request: Request) {
   }
   const supabase = await createClient();
   await supabase.auth.signOut();
-  return NextResponse.redirect(new URL("/login", request.url), { status: 303 });
+  // Relative Weiterleitung: bei einer absoluten URL aus request.url landet
+  // sonst die Server-Bindung (0.0.0.0) statt des aufgerufenen Hosts im
+  // Location-Header.
+  return new NextResponse(null, {
+    status: 303,
+    headers: { Location: "/login" },
+  });
 }

components/AppHeader.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+// Gemeinsamer Kopfbereich für alle internen Seiten. Statt zweier
+// getrennter Bereiche (Kantine/Verwaltung) gibt es eine Navigation:
+// Admins sehen zusätzlich die Verwaltungs-Links, der aktive Punkt
+// wird hervorgehoben.
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { Role } from "@/lib/types";
+
+const MENU_LINKS = [
+  { href: "/intern", label: "Wochenplan" },
+  { href: "/intern/gerichte", label: "Gerichte" },
+  { href: "/intern/kennzeichnung", label: "Allergene & Zusatzstoffe" },
+];
+
+const ADMIN_LINKS = [
+  { href: "/admin", label: "Benutzer" },
+  { href: "/admin/design", label: "Design" },
+];
+
+export default function AppHeader({
+  role,
+  displayName,
+}: {
+  role: Role;
+  displayName: string;
+}) {
+  const pathname = usePathname();
+
+  const linkClass = (href: string) =>
+    `rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${
+      pathname === href ? "bg-white/20 font-semibold" : "text-white/90"
+    }`;
+
+  return (
+    <header className="bg-[var(--c-primary-dark)] text-white">
+      <div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
+        <span className="font-bold text-base">Kantine</span>
+
+        <nav
+          className="flex flex-wrap items-center gap-x-1 gap-y-1"
+          aria-label="Speiseplan"
+        >
+          <span className="mr-1 text-xs uppercase tracking-wider text-white/50">
+            Speiseplan
+          </span>
+          {MENU_LINKS.map((l) => (
+            <Link key={l.href} href={l.href} className={linkClass(l.href)}>
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+
+        {role === "admin" && (
+          <nav
+            className="flex flex-wrap items-center gap-x-1 gap-y-1"
+            aria-label="Verwaltung"
+          >
+            <span className="mr-1 text-xs uppercase tracking-wider text-white/50">
+              Verwaltung
+            </span>
+            {ADMIN_LINKS.map((l) => (
+              <Link key={l.href} href={l.href} className={linkClass(l.href)}>
+                {l.label}
+              </Link>
+            ))}
+          </nav>
+        )}
+
+        <Link
+          href="/"
+          className="rounded px-2 py-0.5 text-white/70 hover:bg-white/10"
+        >
+          Speisekarte ansehen
+        </Link>
+
+        <div className="ml-auto flex items-center gap-3">
+          <Link
+            href="/konto"
+            title="Mein Konto"
+            className={`rounded px-2 py-0.5 hover:bg-white/10 ${
+              pathname === "/konto"
+                ? "bg-white/20 font-semibold"
+                : "text-white/80"
+            }`}
+          >
+            {displayName}
+          </Link>
+          <form action="/logout" method="post">
+            <button type="submit" className="btn btn-del">
+              Abmelden
+            </button>
+          </form>
+        </div>
+      </div>
+    </header>
+  );
+}

components/DishManager.tsx

@@ -21,6 +21,13 @@ export default function DishManager() {
   const [loading, setLoading] = useState(true);
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [bulkBusy, setBulkBusy] = useState(false);
+  const [search, setSearch] = useState("");
+
+  // Live-Suche: filtert die Liste bereits während des Tippens
+  const visible = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return q ? dishes.filter((d) => d.name.toLowerCase().includes(q)) : dishes;
+  }, [dishes, search]);
 
   const load = useCallback(async () => {
     const { data, error } = await supabase
@@ -83,10 +90,16 @@ export default function DishManager() {
     });
   }
 
+  // "Alle auswählen" bezieht sich auf die aktuell gefilterte Liste
   function toggleAll() {
-    setSelected((prev) =>
+    setSelected((prev) => {
-      prev.size === dishes.length ? new Set() : new Set(dishes.map((d) => d.id))
+      const next = new Set(prev);
-    );
+      const everyVisibleSelected = visible.every((d) => next.has(d.id));
+      visible.forEach((d) =>
+        everyVisibleSelected ? next.delete(d.id) : next.add(d.id)
+      );
+      return next;
+    });
   }
 
   async function removeSelected() {
@@ -109,7 +122,8 @@ export default function DishManager() {
     await load();
   }
 
-  const allSelected = dishes.length > 0 && selected.size === dishes.length;
+  const allSelected =
+    visible.length > 0 && visible.every((d) => selected.has(d.id));
 
   return (
     <div className="max-w-3xl">
@@ -182,6 +196,16 @@ export default function DishManager() {
         <p className="text-gray-500">Lade Gerichte…</p>
       ) : (
         <>
+          {dishes.length > 0 && (
+            <input
+              type="search"
+              className="input mb-3"
+              placeholder="Gericht suchen…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              aria-label="Gerichte durchsuchen"
+            />
+          )}
           {dishes.length > 0 && (
             <div className="flex items-center gap-3 mb-2 text-sm">
               <label className="flex items-center gap-2 cursor-pointer">
@@ -206,7 +230,7 @@ export default function DishManager() {
             </div>
           )}
           <ul className="divide-y divide-gray-200 border border-gray-200 rounded-md bg-white">
-            {dishes.map((dish) => (
+            {visible.map((dish) => (
               <li key={dish.id} className="flex items-center gap-3 px-4 py-2">
                 <input
                   type="checkbox"
@@ -245,6 +269,11 @@ export default function DishManager() {
                 Noch keine Gerichte angelegt.
               </li>
             )}
+            {dishes.length > 0 && visible.length === 0 && (
+              <li className="px-4 py-3 text-gray-500">
+                Keine Treffer für „{search}“.
+              </li>
+            )}
           </ul>
         </>
       )}

docker-compose.yml

@@ -30,6 +30,10 @@ services:
       NEXT_PUBLIC_SUPABASE_URL: ${NEXT_PUBLIC_SUPABASE_URL}
       NEXT_PUBLIC_SUPABASE_ANON_KEY: ${NEXT_PUBLIC_SUPABASE_ANON_KEY}
       SUPABASE_SERVICE_ROLE_KEY: ${SUPABASE_SERVICE_ROLE_KEY}
+      # Öffentliche URL der App (Domain hinter dem Reverse-Proxy).
+      # Wird für den CSRF-Origin-Check genutzt; dieselbe URL ist die
+      # Passkey-Domain (siehe scripts/configure-passkeys.mjs).
+      APP_URL: ${APP_URL:-http://localhost:3000}
     ports:
       - "0.0.0.0:3000:3000"
     restart: unless-stopped
@@ -63,6 +67,7 @@ services:
       NEXT_PUBLIC_SUPABASE_URL: ${NEXT_PUBLIC_SUPABASE_URL}
       NEXT_PUBLIC_SUPABASE_ANON_KEY: ${NEXT_PUBLIC_SUPABASE_ANON_KEY}
       SUPABASE_SERVICE_ROLE_KEY: ${SUPABASE_SERVICE_ROLE_KEY}
+      APP_URL: ${APP_URL:-http://localhost:3000}
     ports:
       - "0.0.0.0:3000:3000"
     volumes:

lib/origin.ts

@@ -10,7 +10,12 @@ export function isSameOrigin(request: Request): boolean {
   if (!origin) return true;
   const host = request.headers.get("host");
   try {
-    return new URL(origin).host === host;
+    const originUrl = new URL(origin);
+    if (originUrl.host === host) return true;
+    // Hinter einem Reverse-Proxy, der den Host-Header umschreibt, gilt
+    // zusätzlich die öffentlich konfigurierte App-URL als eigene Origin.
+    const appUrl = process.env.APP_URL;
+    return !!appUrl && originUrl.origin === new URL(appUrl).origin;
   } catch {
     return false;
   }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "canteen-menu",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "canteen-menu",
-      "version": "0.1.0",
+      "version": "1.1.0",
       "dependencies": {
         "@supabase/ssr": "^0.12.3",
         "@supabase/supabase-js": "^2.110.7",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canteen-menu",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0",

proxy.ts

@@ -31,10 +31,14 @@ export async function proxy(request: NextRequest) {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    const url = request.nextUrl.clone();
+    // Absolute URL aus dem Host-Header des Browsers bauen: request.nextUrl
-    url.pathname = "/login";
+    // trägt bei "-H 0.0.0.0" die Server-Bindung statt des aufgerufenen
-    url.search = "";
+    // Hosts, und relative Location-Header lehnt die Middleware ab.
-    return NextResponse.redirect(url);
+    const host = request.headers.get("host") ?? request.nextUrl.host;
+    const proto =
+      request.headers.get("x-forwarded-proto") ??
+      request.nextUrl.protocol.replace(":", "");
+    return NextResponse.redirect(`${proto}://${host}/login`, 303);
   }
 
   return response;

scripts/configure-passkeys.mjs

@@ -0,0 +1,47 @@
+// Konfiguriert die Passkey-Domain (WebAuthn Relying Party) des
+// Supabase-Projekts auf die öffentliche App-URL. Passkeys sind an die
+// Domain gebunden – nach einem Domain-Wechsel einmal ausführen.
+//
+// Aufruf:
+//   SUPABASE_ACCESS_TOKEN=... APP_URL=https://menu.example.de node scripts/configure-passkeys.mjs
+// oder mit der URL als Argument:
+//   SUPABASE_ACCESS_TOKEN=... node scripts/configure-passkeys.mjs https://menu.example.de
+
+const PROJECT_REF = "hvzikwjoyhoakedlywhj";
+const token = process.env.SUPABASE_ACCESS_TOKEN;
+const rawUrl = process.argv[2] ?? process.env.APP_URL;
+
+if (!token || !rawUrl) {
+  console.error(
+    "Nutzung: SUPABASE_ACCESS_TOKEN=... [APP_URL=https://…] node scripts/configure-passkeys.mjs [url]"
+  );
+  process.exit(1);
+}
+
+const url = new URL(rawUrl);
+const res = await fetch(
+  `https://api.supabase.com/v1/projects/${PROJECT_REF}/config/auth`,
+  {
+    method: "PATCH",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      passkey_enabled: true,
+      webauthn_rp_id: url.hostname,
+      webauthn_rp_display_name: "Canteen Menu",
+      webauthn_rp_origins: url.origin,
+    }),
+  }
+);
+
+if (!res.ok) {
+  console.error(`Fehler ${res.status}: ${await res.text()}`);
+  process.exit(1);
+}
+
+console.log(`Passkey-Domain gesetzt: rp_id=${url.hostname}, origin=${url.origin}`);
+console.log(
+  "Hinweis: Bereits auf einer anderen Domain registrierte Passkeys verlieren ihre Gültigkeit."
+);