Mehrsprachige Oberfläche + lokalisierte Gericht-/Bereichsnamen

Alle Seiten und Komponenten (öffentliche Speisekarte, Login, Kantinen-
und Admin-Bereich, eigenes Konto) verwenden jetzt die Wörterbücher aus
lib/i18n statt fest codierter deutscher Texte. Gerichte/Bereiche/
Allergene/Zusatzstoffe zeigen den Namen zur aktuell gewählten Sprache;
Gerichte- und Kennzeichnungs-Formulare bekommen Englisch-/Polnisch-
Felder mit Übersetzen-Button (siehe vorherigen Commit). Datumsformat-
ierung (formatDateLong) nimmt jetzt ein locale-Argument statt fix
'de-DE'.

components/DesignEditor.tsx

@@ -3,7 +3,9 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { createClient } from "@/lib/supabase/client";
-import { COLOR_LABELS, DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
+import { formatMessage } from "@/lib/i18n/shared";
+import { DEFAULT_COLORS, faviconUrl, logoUrl } from "@/lib/types";
+import { useDict } from "@/components/i18n/LocaleProvider";
 
 type AssetKind = "logo" | "favicon";
 
@@ -15,6 +17,17 @@ const ASSET_COLUMN: Record<AssetKind, "logo_path" | "favicon_path"> = {
 export default function DesignEditor() {
   const supabase = useMemo(() => createClient(), []);
   const router = useRouter();
+  const dict = useDict();
+  const colorLabels: Record<string, string> = {
+    primary: dict.designEditor.colorPrimary,
+    primaryDark: dict.designEditor.colorPrimaryDark,
+    accent: dict.designEditor.colorAccent,
+    headerText: dict.designEditor.colorHeaderText,
+    rowBg: dict.designEditor.colorRowBg,
+    rowBgAlt: dict.designEditor.colorRowBgAlt,
+    addBtn: dict.designEditor.colorAddBtn,
+    deleteBtn: dict.designEditor.colorDeleteBtn,
+  };
   const [colors, setColors] = useState<Record<string, string>>(DEFAULT_COLORS);
   const [logoPath, setLogoPath] = useState<string | null>(null);
   const [faviconPath, setFaviconPath] = useState<string | null>(null);
@@ -29,13 +42,13 @@ export default function DesignEditor() {
       .eq("id", 1)
       .maybeSingle();
     if (error) {
-      setError(`Laden fehlgeschlagen: ${error.message}`);
+      setError(formatMessage(dict.designEditor.loadError, { message: error.message }));
       return;
     }
     setColors({ ...DEFAULT_COLORS, ...(data?.colors ?? {}) });
     setLogoPath(data?.logo_path ?? null);
     setFaviconPath(data?.favicon_path ?? null);
-  }, [supabase]);
+  }, [supabase, dict]);
 
   useEffect(() => {
     load();
@@ -49,9 +62,10 @@ export default function DesignEditor() {
       .from("settings")
       .update({ colors })
       .eq("id", 1);
-    if (error) setError(`Speichern fehlgeschlagen: ${error.message}`);
+    if (error)
+      setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
     else {
-      setInfo("Farben gespeichert.");
+      setInfo(dict.designEditor.colorsSaved);
       router.refresh();
     }
     setBusy(false);
@@ -66,7 +80,7 @@ export default function DesignEditor() {
     e.target.value = "";
     if (!file) return;
     if (!/^image\//.test(file.type)) {
-      setError("Bitte eine Bilddatei auswählen (PNG, JPG, SVG, WebP, ICO).");
+      setError(dict.designEditor.invalidImage);
       return;
     }
     setBusy(true);
@@ -80,7 +94,7 @@ export default function DesignEditor() {
       .from("branding")
       .upload(path, file, { contentType: file.type });
     if (uploadError) {
-      setError(`Upload fehlgeschlagen: ${uploadError.message}`);
+      setError(formatMessage(dict.designEditor.uploadError, { message: uploadError.message }));
       setBusy(false);
       return;
     }
@@ -90,7 +104,7 @@ export default function DesignEditor() {
       .update({ [ASSET_COLUMN[kind]]: path })
       .eq("id", 1);
     if (settingsError) {
-      setError(`Speichern fehlgeschlagen: ${settingsError.message}`);
+      setError(formatMessage(dict.designEditor.saveError, { message: settingsError.message }));
       setBusy(false);
       return;
     }
@@ -98,7 +112,7 @@ export default function DesignEditor() {
 
     if (kind === "logo") setLogoPath(path);
     else setFaviconPath(path);
-    setInfo(kind === "logo" ? "Logo aktualisiert." : "Favicon aktualisiert.");
+    setInfo(kind === "logo" ? dict.designEditor.logoUpdated : dict.designEditor.faviconUpdated);
     router.refresh();
     setBusy(false);
   }
@@ -108,7 +122,9 @@ export default function DesignEditor() {
     if (!path) return;
     if (
       !window.confirm(
-        `${kind === "logo" ? "Logo" : "Favicon"} wirklich entfernen?`
+        kind === "logo"
+          ? dict.designEditor.confirmRemoveLogo
+          : dict.designEditor.confirmRemoveFavicon
       )
     )
       return;
@@ -119,12 +135,12 @@ export default function DesignEditor() {
       .update({ [ASSET_COLUMN[kind]]: null })
       .eq("id", 1);
     if (error) {
-      setError(`Speichern fehlgeschlagen: ${error.message}`);
+      setError(formatMessage(dict.designEditor.saveError, { message: error.message }));
     } else {
       await supabase.storage.from("branding").remove([path]);
       if (kind === "logo") setLogoPath(null);
       else setFaviconPath(null);
-      setInfo(kind === "logo" ? "Logo entfernt." : "Favicon entfernt.");
+      setInfo(kind === "logo" ? dict.designEditor.logoRemoved : dict.designEditor.faviconRemoved);
       router.refresh();
     }
     setBusy(false);
@@ -135,7 +151,9 @@ export default function DesignEditor() {
 
   return (
     <div className="max-w-3xl space-y-6">
-      <h1 className="text-xl font-bold text-[var(--c-primary)]">Design</h1>
+      <h1 className="text-xl font-bold text-[var(--c-primary)]">
+        {dict.designEditor.title}
+      </h1>
 
       {error && (
         <p className="text-sm text-[var(--c-del)]" role="alert">
@@ -145,23 +163,21 @@ export default function DesignEditor() {
       {info && <p className="text-sm text-green-700">{info}</p>}
 
       <section className="card">
-        <h2 className="font-semibold mb-3">Logo</h2>
-        <p className="text-sm text-gray-600 mb-3">
-          Das Logo wird zentriert über der Speisekarte angezeigt.
-        </p>
+        <h2 className="font-semibold mb-3">{dict.designEditor.logoTitle}</h2>
+        <p className="text-sm text-gray-600 mb-3">{dict.designEditor.logoHint}</p>
         {currentLogo ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={currentLogo}
-            alt="Aktuelles Logo"
+            alt="Logo"
             className="h-20 object-contain mb-3 border border-gray-200 rounded p-2"
           />
         ) : (
-          <p className="text-sm text-gray-400 mb-3">Kein Logo hinterlegt.</p>
+          <p className="text-sm text-gray-400 mb-3">{dict.designEditor.logoNone}</p>
         )}
         <div className="flex gap-2 items-center">
           <label className="btn btn-primary cursor-pointer">
-            Logo hochladen
+            {dict.designEditor.logoUpload}
             <input
               type="file"
               accept="image/*"
@@ -177,33 +193,28 @@ export default function DesignEditor() {
               onClick={() => removeAsset("logo")}
               disabled={busy}
             >
-              Logo entfernen
+              {dict.designEditor.logoRemove}
             </button>
           )}
         </div>
       </section>
 
       <section className="card">
-        <h2 className="font-semibold mb-3">Favicon</h2>
-        <p className="text-sm text-gray-600 mb-3">
-          Wird als Icon im Browser-Tab angezeigt. Ohne eigenes Favicon gilt
-          das Standard-Icon der Anwendung.
-        </p>
+        <h2 className="font-semibold mb-3">{dict.designEditor.faviconTitle}</h2>
+        <p className="text-sm text-gray-600 mb-3">{dict.designEditor.faviconHint}</p>
         {currentFavicon ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={currentFavicon}
-            alt="Aktuelles Favicon"
+            alt="Favicon"
             className="h-10 w-10 object-contain mb-3 border border-gray-200 rounded p-1"
           />
         ) : (
-          <p className="text-sm text-gray-400 mb-3">
-            Kein eigenes Favicon hinterlegt.
-          </p>
+          <p className="text-sm text-gray-400 mb-3">{dict.designEditor.faviconNone}</p>
         )}
         <div className="flex gap-2 items-center">
           <label className="btn btn-primary cursor-pointer">
-            Favicon hochladen
+            {dict.designEditor.faviconUpload}
             <input
               type="file"
               accept="image/*"
@@ -219,16 +230,16 @@ export default function DesignEditor() {
               onClick={() => removeAsset("favicon")}
               disabled={busy}
             >
-              Favicon entfernen
+              {dict.designEditor.faviconRemove}
             </button>
           )}
         </div>
       </section>
 
       <section className="card">
-        <h2 className="font-semibold mb-3">Farbgebung</h2>
+        <h2 className="font-semibold mb-3">{dict.designEditor.colorsTitle}</h2>
         <div className="grid gap-3 sm:grid-cols-2">
-          {Object.entries(COLOR_LABELS).map(([key, label]) => (
+          {Object.entries(colorLabels).map(([key, label]) => (
             <label key={key} className="flex items-center gap-3 text-sm">
               <input
                 type="color"
@@ -249,7 +260,7 @@ export default function DesignEditor() {
             onClick={saveColors}
             disabled={busy}
           >
-            Farben speichern
+            {dict.designEditor.colorsSave}
           </button>
           <button
             type="button"
@@ -257,7 +268,7 @@ export default function DesignEditor() {
             onClick={resetColors}
             disabled={busy}
           >
-            Auf Standard zurücksetzen
+            {dict.designEditor.colorsReset}
           </button>
         </div>
       </section>