Merge feature/v1.8: Umschaltbarer Hinweismodus für Allergene/Zusatzstoffe

Neue Migration 0002_labeling_notice.sql: settings.labeling_mode
("detailed"/"notice") + labeling_notice(_en/_pl). Auf der Seite
"Allergene & Zusatzstoffe" (LabelingNoticeEditor) kann zwischen der
detaillierten Auswahl je Gericht und einem editierbaren Hinweistext
umgeschaltet werden. Im Hinweismodus entfällt auf der öffentlichen
Speisekarte (Desktop + Mobile) die Legende und die Kürzel an den
Gerichten, in der Gerichte-Verwaltung wird die Chip-Auswahl beim
Bearbeiten ausgeblendet. Umschalten/Bearbeiten ist für staff und admin
freigegeben, Farben in /api/settings bleiben admin-only.

Version 1.8.0.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

CHANGELOG.md

@@ -4,6 +4,21 @@ Alle nennenswerten Änderungen an diesem Projekt werden hier dokumentiert.
 Format angelehnt an [Keep a Changelog](https://keepachangelog.com/de/1.1.0/),
 Versionierung nach [Semantic Versioning](https://semver.org/lang/de/).
 
+## [1.8.0] – 2026-07-19
+
+### Hinzugefügt
+- Umschaltbarer Hinweismodus für Allergene/Zusatzstoffe: Auf der Seite
+  „Allergene & Zusatzstoffe“ kann zwischen der bisherigen detaillierten
+  Auswahl je Gericht und einem einfachen, in Deutsch/Englisch/Polnisch
+  editierbaren Hinweistext (z. B. „Bei Fragen zu Allergenen und
+  Zusatzstoffen wenden Sie sich bitte an das Kantinen-Team.“)
+  umgeschaltet werden. Im Hinweismodus entfällt auf der öffentlichen
+  Speisekarte die Legende und die Kürzel an den Gerichten, und in der
+  Gerichte-Verwaltung wird die Allergen-/Zusatzstoff-Auswahl beim
+  Bearbeiten ausgeblendet (bereits zugeordnete Daten bleiben in der
+  Datenbank erhalten). Umschalten und Hinweistext bearbeiten dürfen
+  sowohl Kantinenpersonal als auch Admins.
+
 ## [1.7.0] – 2026-07-19
 
 ### Hinzugefügt

app/api/settings/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
 import { query } from "@/lib/db";
-import { getSettings } from "@/lib/db/settings";
+import { getSettings, type LabelingMode } from "@/lib/db/settings";
 import { authErrorResponse, requireRole } from "@/lib/auth/session";
 import { isSameOrigin } from "@/lib/origin";
 
@@ -8,14 +8,58 @@ export async function GET() {
   return NextResponse.json(await getSettings());
 }
 
+interface SettingsPatchBody {
+  colors?: Record<string, string>;
+  labeling_mode?: LabelingMode;
+  labeling_notice?: string;
+  labeling_notice_en?: string | null;
+  labeling_notice_pl?: string | null;
+}
+
 export async function PATCH(request: Request) {
   if (!isSameOrigin(request)) {
     return NextResponse.json({ error: "Nicht erlaubt." }, { status: 403 });
   }
   try {
-    await requireRole(["admin"]);
+    // Farben bleiben admin-only wie bisher; die Allergen-/Zusatzstoff-
-    const { colors } = (await request.json()) as { colors: Record<string, string> };
+    // Anzeige darf auch Kantinenpersonal umschalten/bearbeiten.
-    await query("update settings set colors = $1 where id = 1", [JSON.stringify(colors)]);
+    const session = await requireRole(["staff", "admin"]);
+    const body = (await request.json()) as SettingsPatchBody;
+
+    const sets: string[] = [];
+    const params: unknown[] = [];
+
+    if (body.colors !== undefined) {
+      if (session.user.role !== "admin") {
+        return NextResponse.json({ error: "forbidden" }, { status: 403 });
+      }
+      params.push(JSON.stringify(body.colors));
+      sets.push(`colors = $${params.length}`);
+    }
+    if (body.labeling_mode !== undefined) {
+      if (body.labeling_mode !== "detailed" && body.labeling_mode !== "notice") {
+        return NextResponse.json({ error: "invalid_input" }, { status: 400 });
+      }
+      params.push(body.labeling_mode);
+      sets.push(`labeling_mode = $${params.length}`);
+    }
+    if (body.labeling_notice !== undefined) {
+      params.push(body.labeling_notice);
+      sets.push(`labeling_notice = $${params.length}`);
+    }
+    if (body.labeling_notice_en !== undefined) {
+      params.push(body.labeling_notice_en);
+      sets.push(`labeling_notice_en = $${params.length}`);
+    }
+    if (body.labeling_notice_pl !== undefined) {
+      params.push(body.labeling_notice_pl);
+      sets.push(`labeling_notice_pl = $${params.length}`);
+    }
+
+    if (sets.length === 0) {
+      return NextResponse.json({ error: "invalid_input" }, { status: 400 });
+    }
+    await query(`update settings set ${sets.join(", ")} where id = 1`, params);
     return NextResponse.json({ ok: true });
   } catch (err) {
     const res = authErrorResponse(err);

app/intern/kennzeichnung/page.tsx

@@ -1,11 +1,15 @@
 import CodeListManager from "@/components/CodeListManager";
+import LabelingNoticeEditor from "@/components/LabelingNoticeEditor";
 
 export default function KennzeichnungPage() {
   const translateEnabled = !!process.env.DEEPL_API_KEY;
   return (
+    <div className="flex flex-col gap-6">
+      <LabelingNoticeEditor />
       <div className="grid gap-6 lg:grid-cols-2">
         <CodeListManager table="allergens" translateEnabled={translateEnabled} />
         <CodeListManager table="additives" translateEnabled={translateEnabled} />
       </div>
+    </div>
   );
 }

app/page.tsx

@@ -42,6 +42,7 @@ export default async function Home({
   ]);
 
   const logo = logoUrl(settings?.logo_path);
+  const labelingDetailed = (settings?.labeling_mode ?? "detailed") !== "notice";
 
   return (
     <div className="flex-1 px-4 py-6 max-w-[1600px] mx-auto w-full">
@@ -99,7 +100,12 @@ export default async function Home({
       </header>
 
       {/* Mobil: Tag (Standard) oder Woche umschaltbar */}
-      <PublicMobileMenu monday={monday} sections={sections} entries={entries} />
+      <PublicMobileMenu
+        monday={monday}
+        sections={sections}
+        entries={entries}
+        showLabeling={labelingDetailed}
+      />
 
       {/* Ab "sm": klassische Wochentabelle */}
       <div className="hidden sm:block">
@@ -148,7 +154,9 @@ export default async function Home({
                             <span className="font-bold">
                               {localized(e.dish, locale)}
                             </span>
-                            {codes && <sup className="dish-codes">{codes}</sup>}
+                            {labelingDetailed && codes && (
+                              <sup className="dish-codes">{codes}</sup>
+                            )}
                             {" – "}
                             {formatPrice(e.dish.price)}
                           </div>
@@ -163,7 +171,9 @@ export default async function Home({
         </div>
       </div>
 
-      {/* Allergene & Zusatzstoffe: Legende zu den Kürzeln bei den Gerichten */}
+      {/* Allergene & Zusatzstoffe: entweder Legende zu den Kürzeln bei den
+          Gerichten, oder – falls im Hinweismodus – nur ein Hinweistext. */}
+      {labelingDetailed ? (
         <section className="mt-8 grid gap-6 sm:grid-cols-2 text-sm text-gray-700">
           <div>
             <h2 className="font-bold text-[var(--c-primary)] mb-2">
@@ -192,6 +202,25 @@ export default async function Home({
             </ul>
           </div>
         </section>
+      ) : (
+        settings && (
+          <section className="mt-8 text-sm text-gray-700">
+            <h2 className="font-bold text-[var(--c-primary)] mb-2">
+              {dict.publicMenu.labelingNoticeTitle}
+            </h2>
+            <p>
+              {localized(
+                {
+                  name: settings.labeling_notice,
+                  name_en: settings.labeling_notice_en,
+                  name_pl: settings.labeling_notice_pl,
+                },
+                locale
+              )}
+            </p>
+          </section>
+        )
+      )}
     </div>
   );
 }

components/DishManager.tsx

@@ -46,6 +46,7 @@ export default function DishManager({
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [bulkBusy, setBulkBusy] = useState(false);
   const [search, setSearch] = useState("");
+  const [labelingDetailed, setLabelingDetailed] = useState(true);
   const [translateState, setTranslateState] = useState<"idle" | "busy" | "done">(
     "idle"
   );
@@ -57,10 +58,11 @@ export default function DishManager({
   }, [dishes, search]);
 
   const load = useCallback(async () => {
-    const [dishesRes, allergensRes, additivesRes] = await Promise.all([
+    const [dishesRes, allergensRes, additivesRes, settingsRes] = await Promise.all([
       fetch("/api/dishes"),
       fetch("/api/allergens"),
       fetch("/api/additives"),
+      fetch("/api/settings"),
     ]);
     if (!dishesRes.ok || !allergensRes.ok || !additivesRes.ok) {
       setError(formatMessage(dict.dishManager.loadError, { message: "load failed" }));
@@ -69,6 +71,10 @@ export default function DishManager({
       setAllergens(await allergensRes.json());
       setAdditives(await additivesRes.json());
     }
+    if (settingsRes.ok) {
+      const settings = await settingsRes.json();
+      setLabelingDetailed((settings?.labeling_mode ?? "detailed") !== "notice");
+    }
     setLoading(false);
   }, [dict]);
 
@@ -390,6 +396,8 @@ export default function DishManager({
             </div>
           )}
 
+          {labelingDetailed ? (
+            <>
               <ChipPicker
                 label={dict.codeList.allergensTitle}
                 items={allergens}
@@ -402,6 +410,10 @@ export default function DishManager({
                 selected={form.additives}
                 onToggle={toggleAdditive}
               />
+            </>
+          ) : (
+            <p className="text-sm text-gray-500">{dict.dishManager.labelingDisabledHint}</p>
+          )}
           <div className="flex gap-2">
             <button type="submit" className="btn btn-add">
               {dict.common.save}

components/LabelingNoticeEditor.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+// Umschaltung zwischen der detaillierten Allergen-/Zusatzstoff-Auswahl
+// je Gericht und einem einfachen, editierbaren Hinweistext.
+
+import { useCallback, useEffect, useState } from "react";
+import { formatMessage } from "@/lib/i18n/shared";
+import { useDict } from "@/components/i18n/LocaleProvider";
+import type { LabelingMode } from "@/lib/db/settings";
+
+export default function LabelingNoticeEditor() {
+  const dict = useDict();
+  const [mode, setMode] = useState<LabelingMode>("detailed");
+  const [noticeDe, setNoticeDe] = useState("");
+  const [noticeEn, setNoticeEn] = useState("");
+  const [noticePl, setNoticePl] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    const res = await fetch("/api/settings");
+    if (!res.ok) {
+      setError(formatMessage(dict.labelingNotice.loadError, { message: String(res.status) }));
+      setLoading(false);
+      return;
+    }
+    const data = await res.json();
+    setMode(data.labeling_mode ?? "detailed");
+    setNoticeDe(data.labeling_notice ?? "");
+    setNoticeEn(data.labeling_notice_en ?? "");
+    setNoticePl(data.labeling_notice_pl ?? "");
+    setLoading(false);
+  }, [dict]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function save() {
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+    const res = await fetch("/api/settings", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        labeling_mode: mode,
+        labeling_notice: noticeDe.trim(),
+        labeling_notice_en: noticeEn.trim() || null,
+        labeling_notice_pl: noticePl.trim() || null,
+      }),
+    });
+    setBusy(false);
+    if (!res.ok) {
+      setError(formatMessage(dict.labelingNotice.saveError, { message: String(res.status) }));
+      return;
+    }
+    setInfo(dict.labelingNotice.saved);
+  }
+
+  if (loading) return null;
+
+  return (
+    <section className="card">
+      <h2 className="font-semibold mb-2">{dict.labelingNotice.title}</h2>
+      <p className="text-sm text-gray-600 mb-3">{dict.labelingNotice.hint}</p>
+
+      {error && (
+        <p className="mb-3 text-sm text-[var(--c-del)]" role="alert">
+          {error}
+        </p>
+      )}
+      {info && <p className="mb-3 text-sm text-green-700">{info}</p>}
+
+      <div className="flex flex-col gap-2 mb-4">
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="radio"
+            name="labeling-mode"
+            checked={mode === "detailed"}
+            onChange={() => setMode("detailed")}
+          />
+          {dict.labelingNotice.modeDetailed}
+        </label>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="radio"
+            name="labeling-mode"
+            checked={mode === "notice"}
+            onChange={() => setMode("notice")}
+          />
+          {dict.labelingNotice.modeNotice}
+        </label>
+      </div>
+
+      <div className="space-y-3 mb-4">
+        <div>
+          <label className="label" htmlFor="labeling-notice-de">
+            {dict.labelingNotice.noticeDeLabel}
+          </label>
+          <textarea
+            id="labeling-notice-de"
+            className="input"
+            rows={2}
+            value={noticeDe}
+            onChange={(e) => setNoticeDe(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="label" htmlFor="labeling-notice-en">
+            {dict.labelingNotice.noticeEnLabel}
+          </label>
+          <textarea
+            id="labeling-notice-en"
+            className="input"
+            rows={2}
+            value={noticeEn}
+            onChange={(e) => setNoticeEn(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="label" htmlFor="labeling-notice-pl">
+            {dict.labelingNotice.noticePlLabel}
+          </label>
+          <textarea
+            id="labeling-notice-pl"
+            className="input"
+            rows={2}
+            value={noticePl}
+            onChange={(e) => setNoticePl(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <button type="button" className="btn btn-add" onClick={save} disabled={busy}>
+        {dict.labelingNotice.save}
+      </button>
+    </section>
+  );
+}

components/PublicMobileMenu.tsx

@@ -27,10 +27,12 @@ export default function PublicMobileMenu({
   monday,
   sections,
   entries,
+  showLabeling,
 }: {
   monday: string;
   sections: Section[];
   entries: MenuEntry[];
+  showLabeling: boolean;
 }) {
   const router = useRouter();
   const dict = useDict();
@@ -86,7 +88,9 @@ export default function PublicMobileMenu({
                           <span className="font-semibold">
                             {localized(e.dish, locale)}
                           </span>
-                          {codes && <sup className="dish-codes">{codes}</sup>}{" "}
+                          {showLabeling && codes && (
+                            <sup className="dish-codes">{codes}</sup>
+                          )}{" "}
                           – {formatPrice(e.dish.price)}
                         </p>
                       );

db/migrations/0002_labeling_notice.sql

@@ -0,0 +1,11 @@
+-- Umschaltbare Anzeige der Allergene/Zusatzstoffe: entweder die
+-- detaillierte Auswahl je Gericht (bisheriges Verhalten) oder
+-- stattdessen nur ein von Personal/Admin editierbarer Hinweistext
+-- (z. B. "Bei Fragen bitte das Kantinen-Team fragen").
+alter table settings
+  add column labeling_mode text not null default 'detailed'
+    check (labeling_mode in ('detailed', 'notice')),
+  add column labeling_notice text not null default
+    'Bei Fragen zu Allergenen und Zusatzstoffen wenden Sie sich bitte an das Kantinen-Team.',
+  add column labeling_notice_en text,
+  add column labeling_notice_pl text;

lib/db/settings.ts

@@ -1,14 +1,22 @@
 import "server-only";
 import { queryOne } from "@/lib/db";
 
+export type LabelingMode = "detailed" | "notice";
+
 export interface Settings {
   colors: Record<string, string>;
   logo_path: string | null;
   favicon_path: string | null;
+  labeling_mode: LabelingMode;
+  labeling_notice: string;
+  labeling_notice_en: string | null;
+  labeling_notice_pl: string | null;
 }
 
 export async function getSettings(): Promise<Settings | null> {
   return queryOne<Settings>(
-    "select colors, logo_path, favicon_path from settings where id = 1"
+    `select colors, logo_path, favicon_path, labeling_mode,
+            labeling_notice, labeling_notice_en, labeling_notice_pl
+     from settings where id = 1`
   );
 }

lib/i18n/dictionaries.ts

@@ -63,6 +63,7 @@ const de = {
     weekTab: "Woche",
     allergens: "Allergene",
     additives: "Zusatzstoffe",
+    labelingNoticeTitle: "Allergene & Zusatzstoffe",
     suggestDish: "Rezept vorschlagen",
     noEntry: "–",
     rssFeed: "RSS-Feed abonnieren",
@@ -113,6 +114,8 @@ const de = {
     importSuccess: "{created} neu angelegt, {updated} aktualisiert.",
     importSkipped: "{count} Zeile(n) übersprungen: {reasons}",
     importSkippedRow: "Zeile {row}: {reason}",
+    labelingDisabledHint:
+      "Allergene/Zusatzstoffe sind aktuell deaktiviert (Hinweismodus aktiv, siehe „Allergene & Zusatzstoffe“).",
   },
   codeList: {
     allergensTitle: "Allergene",
@@ -199,6 +202,20 @@ const de = {
     confirmRemoveLogo: "Logo wirklich entfernen?",
     confirmRemoveFavicon: "Favicon wirklich entfernen?",
   },
+  labelingNotice: {
+    title: "Anzeige von Allergenen & Zusatzstoffen",
+    hint:
+      "Standardmäßig sieht jeder Gast eine detaillierte Auswahl der Allergene/Zusatzstoffe je Gericht. Alternativ kann stattdessen nur ein Hinweistext angezeigt werden – die Auswahl je Gericht wird dann auch in der Gerichte-Verwaltung ausgeblendet.",
+    modeDetailed: "Detaillierte Auswahl je Gericht anzeigen",
+    modeNotice: "Nur Hinweistext anzeigen",
+    noticeDeLabel: "Hinweistext (Deutsch)",
+    noticeEnLabel: "Hinweistext (Englisch)",
+    noticePlLabel: "Hinweistext (Polnisch)",
+    save: "Speichern",
+    saved: "Gespeichert.",
+    loadError: "Laden fehlgeschlagen: {message}",
+    saveError: "Speichern fehlgeschlagen: {message}",
+  },
   passkeys: {
     title: "Passkeys",
     hint: "Mit einem Passkey (Fingerabdruck, Gesichtserkennung oder Sicherheitsschlüssel) kannst du dich künftig ohne Passwort anmelden. Passkeys gelten pro Domain – nach einem Domainwechsel müssen sie neu registriert werden.",
@@ -333,6 +350,7 @@ const en: Dict = {
     weekTab: "Week",
     allergens: "Allergens",
     additives: "Additives",
+    labelingNoticeTitle: "Allergens & additives",
     suggestDish: "Suggest a dish",
     noEntry: "–",
     rssFeed: "Subscribe to RSS feed",
@@ -383,6 +401,8 @@ const en: Dict = {
     importSuccess: "{created} created, {updated} updated.",
     importSkipped: "{count} row(s) skipped: {reasons}",
     importSkippedRow: "Row {row}: {reason}",
+    labelingDisabledHint:
+      "Allergens/additives are currently disabled (notice mode active, see \"Allergens & additives\").",
   },
   codeList: {
     allergensTitle: "Allergens",
@@ -469,6 +489,20 @@ const en: Dict = {
     confirmRemoveLogo: "Really remove the logo?",
     confirmRemoveFavicon: "Really remove the favicon?",
   },
+  labelingNotice: {
+    title: "Allergen & additive display",
+    hint:
+      "By default every guest sees a detailed allergen/additive selection per dish. Alternatively, only a notice text can be shown instead – the per-dish selection is then also hidden in the dish manager.",
+    modeDetailed: "Show detailed selection per dish",
+    modeNotice: "Show only notice text",
+    noticeDeLabel: "Notice text (German)",
+    noticeEnLabel: "Notice text (English)",
+    noticePlLabel: "Notice text (Polish)",
+    save: "Save",
+    saved: "Saved.",
+    loadError: "Loading failed: {message}",
+    saveError: "Saving failed: {message}",
+  },
   passkeys: {
     title: "Passkeys",
     hint: "With a passkey (fingerprint, face recognition, or a security key) you can sign in without a password in the future. Passkeys are bound to a domain – after a domain change they need to be registered again.",
@@ -601,6 +635,7 @@ const pl: Dict = {
     weekTab: "Tydzień",
     allergens: "Alergeny",
     additives: "Dodatki",
+    labelingNoticeTitle: "Alergeny i dodatki",
     suggestDish: "Zaproponuj danie",
     noEntry: "–",
     rssFeed: "Subskrybuj kanał RSS",
@@ -651,6 +686,8 @@ const pl: Dict = {
     importSuccess: "Utworzono: {created}, zaktualizowano: {updated}.",
     importSkipped: "Pominięto wierszy: {count}: {reasons}",
     importSkippedRow: "Wiersz {row}: {reason}",
+    labelingDisabledHint:
+      "Alergeny/dodatki są obecnie wyłączone (aktywny tryb komunikatu, patrz „Alergeny i dodatki”).",
   },
   codeList: {
     allergensTitle: "Alergeny",
@@ -737,6 +774,20 @@ const pl: Dict = {
     confirmRemoveLogo: "Czy na pewno usunąć logo?",
     confirmRemoveFavicon: "Czy na pewno usunąć favicon?",
   },
+  labelingNotice: {
+    title: "Wyświetlanie alergenów i dodatków",
+    hint:
+      "Domyślnie każdy gość widzi szczegółowy wybór alergenów/dodatków dla każdego dania. Alternatywnie można zamiast tego wyświetlić tylko komunikat – wybór dla poszczególnych dań zostanie wtedy również ukryty w zarządzaniu daniami.",
+    modeDetailed: "Pokaż szczegółowy wybór dla każdego dania",
+    modeNotice: "Pokaż tylko komunikat",
+    noticeDeLabel: "Tekst komunikatu (niemiecki)",
+    noticeEnLabel: "Tekst komunikatu (angielski)",
+    noticePlLabel: "Tekst komunikatu (polski)",
+    save: "Zapisz",
+    saved: "Zapisano.",
+    loadError: "Wczytywanie nie powiodło się: {message}",
+    saveError: "Zapisywanie nie powiodło się: {message}",
+  },
   passkeys: {
     title: "Klucze dostępu",
     hint: "Dzięki kluczowi dostępu (odcisk palca, rozpoznawanie twarzy lub klucz bezpieczeństwa) możesz w przyszłości logować się bez hasła. Klucze dostępu są przypisane do domeny – po zmianie domeny trzeba je zarejestrować ponownie.",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "canteen-menu",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "canteen-menu",
-      "version": "1.7.0",
+      "version": "1.8.0",
       "dependencies": {
         "@simplewebauthn/browser": "^13.3.0",
         "@simplewebauthn/server": "^13.3.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canteen-menu",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "predev": "node --env-file-if-exists=.env.local db/migrate.mjs && node --env-file-if-exists=.env.local scripts/bootstrap-admin.mjs",