@xiwebdesign/xicms-core 7.1.0 → 7.3.0

package/dist/admin/settings/SettingsPanel.js

@@ -1,10 +1,9 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { doc, onSnapshot } from "firebase/firestore";
-import { getFunctions, httpsCallable } from "firebase/functions";
+import { callable } from "../../firebase/functionsClient.js";
 import { getDb, getFirebaseApp } from "../../firebase/client.js";
-import { functionsRegion } from "../../firebase/region.js";
 import { SiteSettingsSchema } from "../../schema/settings.js";
 import { useModules } from "../../modules/context.js";
 import { builtinThemePresets } from "../../theme/presets.js";
@@ -31,10 +30,7 @@ function SettingsPanel({ siteId }) {
     if (!app) return false;
     setExporting(true);
     try {
-      const fn = httpsCallable(
-        getFunctions(app, functionsRegion()),
-        "exportSite"
-      );
+      const fn = callable(app, "exportSite");
       const res = await fn({ siteId });
       const blob = new Blob([JSON.stringify(res.data, null, 2)], { type: "application/json" });
       const url = URL.createObjectURL(blob);
@@ -88,7 +84,7 @@ function SettingsPanel({ siteId }) {
       }
       const app = getFirebaseApp();
       if (!app) throw new Error("Firebase niet geconfigureerd.");
-      const fn = httpsCallable(getFunctions(app, functionsRegion()), "restoreSite");
+      const fn = callable(app, "restoreSite");
       await fn({ siteId, backup });
       toast({ title: "Back-up teruggezet", description: "Herlaad de pagina om alles bij te werken.", tone: "success" });
     } catch (e) {
@@ -97,6 +93,7 @@ function SettingsPanel({ siteId }) {
       setRestoring(false);
     }
   }
+  const [sectie, setSectie] = useState("algemeen");
   useEffect(() => {
     const db = getDb();
     if (!db) {
@@ -119,7 +116,7 @@ function SettingsPanel({ siteId }) {
     try {
       const app = getFirebaseApp();
       if (!app) throw new Error("Firebase is niet geconfigureerd.");
-      const fn = httpsCallable(getFunctions(app, functionsRegion()), "saveSiteSettings");
+      const fn = callable(app, "saveSiteSettings");
       const res = await fn({ siteId, settings: parsed.data });
       toast({ title: "Opgeslagen", description: res.data?.message ?? "Wijzigingen zijn live.", tone: "success" });
     } catch (e) {
@@ -137,235 +134,263 @@ function SettingsPanel({ siteId }) {
     return { enabled: raw?.enabled ?? defaultEnabled, config: raw?.config ?? {} };
   };
   const setModule = (id, next) => setS({ ...s, modules: { ...s.modules, [id]: next } });
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "Algemeen" }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Sitenaam", children: /* @__PURE__ */ jsx(Input, { value: s.name ?? "", onChange: (e) => setS({ ...s, name: e.target.value }) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Domein", children: /* @__PURE__ */ jsx(Input, { value: s.domain ?? "", onChange: (e) => setS({ ...s, domain: e.target.value }) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Contact-e-mail", children: /* @__PURE__ */ jsx(Input, { value: s.contactEmail ?? "", onChange: (e) => setS({ ...s, contactEmail: e.target.value }) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "Huisstijl" }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Thema-preset", hint: "Vult kleuren, lettertype en afronding in \xE9\xE9n keer in.", children: /* @__PURE__ */ jsx(
-          Select,
-          {
-            value: "",
-            placeholder: "Kies een preset\u2026",
-            onValueChange: (id) => {
-              const preset = builtinThemePresets.find((p) => p.id === id);
-              if (preset) setS({ ...s, theme: { ...theme, ...preset.theme } });
-            },
-            options: builtinThemePresets.map((p) => ({ value: p.id, label: p.label }))
-          }
-        ) }),
+  const SECTIES = [
+    { sleutel: "algemeen", label: "Algemeen" },
+    { sleutel: "huisstijl", label: "Huisstijl" },
+    { sleutel: "seo", label: "SEO" },
+    { sleutel: "footer", label: "Footer" },
+    { sleutel: "modules", label: "Modules" },
+    { sleutel: "mail", label: "E-mail" },
+    { sleutel: "backup", label: "Back-up" }
+  ];
+  return (
+    /* Een formulier leest niet op 1300px breed; een invoerveld hoort niet breder te zijn dan de
+       tekst die erin komt. Vandaar een leesbreedte in plaats van het hele werkblad vullen. */
+    /* @__PURE__ */ jsxs("div", { className: "grid max-w-4xl gap-4", children: [
+      /* @__PURE__ */ jsx("nav", { "aria-label": "Onderdelen van de instellingen", className: "flex flex-wrap gap-1", children: SECTIES.map((x) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-current": sectie === x.sleutel ? "page" : void 0,
+          onClick: () => setSectie(x.sleutel),
+          className: "rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-200 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none aria-[current=page]:bg-slate-200 aria-[current=page]:text-slate-900",
+          children: x.label
+        },
+        x.sleutel
+      )) }),
+      sectie === "algemeen" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "Algemeen" }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsx(Field, { label: "Primaire kleur", children: /* @__PURE__ */ jsx(Input, { value: theme.primary, onChange: (e) => setS({ ...s, theme: { ...theme, primary: e.target.value } }) }) }),
-          /* @__PURE__ */ jsx(Field, { label: "Accentkleur", children: /* @__PURE__ */ jsx(Input, { value: theme.accent ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, accent: e.target.value } }) }) }),
-          /* @__PURE__ */ jsx(Field, { label: "Achtergrondkleur", children: /* @__PURE__ */ jsx(Input, { value: theme.background ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, background: e.target.value } }), placeholder: "#ffffff" }) }),
-          /* @__PURE__ */ jsx(Field, { label: "Tekstkleur", children: /* @__PURE__ */ jsx(Input, { value: theme.foreground ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, foreground: e.target.value } }), placeholder: "#0f172a" }) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Field,
-          {
-            label: "Donkere modus",
-            hint: donkerModus === "auto" ? "Volgt de voorkeur van de bezoeker: wie zijn telefoon of computer op donker heeft staan, ziet de site donker." : donkerModus === "dark" ? "De site is voor iedereen donker, ongeacht de voorkeur van de bezoeker." : "De site is voor iedereen licht.",
-            children: /* @__PURE__ */ jsx(
-              Select,
-              {
-                value: donkerModus,
-                onValueChange: (v) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, mode: v } } }),
-                options: [
-                  { value: "light", label: "Altijd licht" },
-                  { value: "dark", label: "Altijd donker" },
-                  { value: "auto", label: "Automatisch \u2014 volg de bezoeker" }
-                ]
-              }
-            )
-          }
-        ),
-        donkerModus !== "light" && /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [
-          /* @__PURE__ */ jsx(Field, { label: "Donkere achtergrond", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: theme.dark?.background ?? "",
-              onChange: (e) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, background: e.target.value } } }),
-              placeholder: "#0f172a"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Field, { label: "Donkere tekstkleur", children: /* @__PURE__ */ jsx(
-            Input,
+          /* @__PURE__ */ jsx(Field, { label: "Sitenaam", children: /* @__PURE__ */ jsx(Input, { value: s.name ?? "", onChange: (e) => setS({ ...s, name: e.target.value }) }) }),
+          /* @__PURE__ */ jsx(Field, { label: "Domein", children: /* @__PURE__ */ jsx(Input, { value: s.domain ?? "", onChange: (e) => setS({ ...s, domain: e.target.value }) }) }),
+          /* @__PURE__ */ jsx(Field, { label: "Contact-e-mail", children: /* @__PURE__ */ jsx(Input, { value: s.contactEmail ?? "", onChange: (e) => setS({ ...s, contactEmail: e.target.value }) }) })
+        ] })
+      ] }) }),
+      sectie === "huisstijl" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "Huisstijl" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Thema-preset", hint: "Vult kleuren, lettertype en afronding in \xE9\xE9n keer in.", children: /* @__PURE__ */ jsx(
+            Select,
             {
-              value: theme.dark?.foreground ?? "",
-              onChange: (e) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, foreground: e.target.value } } }),
-              placeholder: "#e2e8f0"
+              value: "",
+              placeholder: "Kies een preset\u2026",
+              onValueChange: (id) => {
+                const preset = builtinThemePresets.find((p) => p.id === id);
+                if (preset) setS({ ...s, theme: { ...theme, ...preset.theme } });
+              },
+              options: builtinThemePresets.map((p) => ({ value: p.id, label: p.label }))
             }
           ) }),
-          /* @__PURE__ */ jsx(Field, { label: "Donkere merkkleur", hint: "Laat leeg om dezelfde te gebruiken.", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              value: theme.dark?.primary ?? "",
-              onChange: (e) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, primary: e.target.value } } }),
-              placeholder: theme.primary
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(Field, { label: "Logo-URL (e-mail & factuur)", hint: "Absolute https-URL naar een PNG/JPG. Verschijnt in de mail-header en op de factuur-PDF.", children: /* @__PURE__ */ jsx(Input, { value: theme.logo ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, logo: e.target.value } }), placeholder: "https://\u2026/logo.png" }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "SEO (standaard)" }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Standaard-omschrijving", children: /* @__PURE__ */ jsx(Input, { value: s.seoDefaults?.description ?? "", onChange: (e) => setS({ ...s, seoDefaults: { ...s.seoDefaults, description: e.target.value } }) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "OG-afbeelding (URL)", children: /* @__PURE__ */ jsx(Input, { value: s.seoDefaults?.ogImage ?? "", onChange: (e) => setS({ ...s, seoDefaults: { ...s.seoDefaults, ogImage: e.target.value } }) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Footer" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Kolommen met links, social-links en copyright. Wijzigingen zijn direct live." }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Kolommen" }),
-          /* @__PURE__ */ jsx(
-            ArrayEditor,
-            {
-              items: footer.columns ?? [],
-              onChange: (columns) => setS({ ...s, footer: { ...footer, columns } }),
-              newItem: () => ({ heading: "", links: [] }),
-              addLabel: "+ Kolom",
-              emptyLabel: "Nog geen kolommen.",
-              renderRow: (col, update) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-                /* @__PURE__ */ jsx(Field, { label: "Kop", children: /* @__PURE__ */ jsx(Input, { value: col.heading ?? "", onChange: (e) => update({ heading: e.target.value }) }) }),
-                /* @__PURE__ */ jsx(
-                  ArrayEditor,
-                  {
-                    items: col.links ?? [],
-                    onChange: (links) => update({ links }),
-                    newItem: () => ({ label: "", href: "" }),
-                    addLabel: "+ Link",
-                    renderRow: (link, updL) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-                      /* @__PURE__ */ jsx(Input, { value: link.label, placeholder: "Label", onChange: (e) => updL({ label: e.target.value }) }),
-                      /* @__PURE__ */ jsx(Input, { value: link.href, placeholder: "/pad of https://\u2026", onChange: (e) => updL({ href: e.target.value }) })
-                    ] })
-                  }
-                )
-              ] })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Social-links" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Primaire kleur", children: /* @__PURE__ */ jsx(Input, { value: theme.primary, onChange: (e) => setS({ ...s, theme: { ...theme, primary: e.target.value } }) }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Accentkleur", children: /* @__PURE__ */ jsx(Input, { value: theme.accent ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, accent: e.target.value } }) }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Achtergrondkleur", children: /* @__PURE__ */ jsx(Input, { value: theme.background ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, background: e.target.value } }), placeholder: "#ffffff" }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Tekstkleur", children: /* @__PURE__ */ jsx(Input, { value: theme.foreground ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, foreground: e.target.value } }), placeholder: "#0f172a" }) })
+          ] }),
           /* @__PURE__ */ jsx(
-            ArrayEditor,
+            Field,
             {
-              items: footer.social ?? [],
-              onChange: (social) => setS({ ...s, footer: { ...footer, social } }),
-              newItem: () => ({ platform: "", href: "" }),
-              addLabel: "+ Social-link",
-              renderRow: (link, update) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-                /* @__PURE__ */ jsx(Input, { value: link.platform, placeholder: "bv. Instagram", onChange: (e) => update({ platform: e.target.value }) }),
-                /* @__PURE__ */ jsx(Input, { value: link.href, placeholder: "https://\u2026", onChange: (e) => update({ href: e.target.value }) })
-              ] })
+              label: "Donkere modus",
+              hint: donkerModus === "auto" ? "Volgt de voorkeur van de bezoeker: wie zijn telefoon of computer op donker heeft staan, ziet de site donker." : donkerModus === "dark" ? "De site is voor iedereen donker, ongeacht de voorkeur van de bezoeker." : "De site is voor iedereen licht.",
+              children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: donkerModus,
+                  onValueChange: (v) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, mode: v } } }),
+                  options: [
+                    { value: "light", label: "Altijd licht" },
+                    { value: "dark", label: "Altijd donker" },
+                    { value: "auto", label: "Automatisch \u2014 volg de bezoeker" }
+                  ]
+                }
+              )
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsx(Field, { label: "Copyright (leeg = automatisch)", children: /* @__PURE__ */ jsx(Input, { value: footer.copyright ?? "", onChange: (e) => setS({ ...s, footer: { ...footer, copyright: e.target.value } }) }) }),
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 self-end text-sm", children: [
-            /* @__PURE__ */ jsx(Switch, { checked: footer.showAdminLink !== false, onCheckedChange: (v) => setS({ ...s, footer: { ...footer, showAdminLink: v } }) }),
-            "\u201CBeheer\u201D-link tonen"
+          ),
+          donkerModus !== "light" && /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-3", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Donkere achtergrond", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: theme.dark?.background ?? "",
+                onChange: (e) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, background: e.target.value } } }),
+                placeholder: "#0f172a"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Donkere tekstkleur", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: theme.dark?.foreground ?? "",
+                onChange: (e) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, foreground: e.target.value } } }),
+                placeholder: "#e2e8f0"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Donkere merkkleur", hint: "Laat leeg om dezelfde te gebruiken.", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: theme.dark?.primary ?? "",
+                onChange: (e) => setS({ ...s, theme: { ...theme, dark: { ...theme.dark ?? {}, primary: e.target.value } } }),
+                placeholder: theme.primary
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(Field, { label: "Logo-URL (e-mail & factuur)", hint: "Absolute https-URL naar een PNG/JPG. Verschijnt in de mail-header en op de factuur-PDF.", children: /* @__PURE__ */ jsx(Input, { value: theme.logo ?? "", onChange: (e) => setS({ ...s, theme: { ...theme, logo: e.target.value } }), placeholder: "https://\u2026/logo.png" }) })
+        ] })
+      ] }) }),
+      sectie === "seo" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "SEO (standaard)" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Standaard-omschrijving", children: /* @__PURE__ */ jsx(Input, { value: s.seoDefaults?.description ?? "", onChange: (e) => setS({ ...s, seoDefaults: { ...s.seoDefaults, description: e.target.value } }) }) }),
+          /* @__PURE__ */ jsx(Field, { label: "OG-afbeelding (URL)", children: /* @__PURE__ */ jsx(Input, { value: s.seoDefaults?.ogImage ?? "", onChange: (e) => setS({ ...s, seoDefaults: { ...s.seoDefaults, ogImage: e.target.value } }) }) })
+        ] })
+      ] }) }),
+      sectie === "footer" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Footer" }),
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Kolommen met links, social-links en copyright. Wijzigingen zijn direct live." }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Kolommen" }),
+            /* @__PURE__ */ jsx(
+              ArrayEditor,
+              {
+                items: footer.columns ?? [],
+                onChange: (columns) => setS({ ...s, footer: { ...footer, columns } }),
+                newItem: () => ({ heading: "", links: [] }),
+                addLabel: "+ Kolom",
+                emptyLabel: "Nog geen kolommen.",
+                renderRow: (col, update) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+                  /* @__PURE__ */ jsx(Field, { label: "Kop", children: /* @__PURE__ */ jsx(Input, { value: col.heading ?? "", onChange: (e) => update({ heading: e.target.value }) }) }),
+                  /* @__PURE__ */ jsx(
+                    ArrayEditor,
+                    {
+                      items: col.links ?? [],
+                      onChange: (links) => update({ links }),
+                      newItem: () => ({ label: "", href: "" }),
+                      addLabel: "+ Link",
+                      renderRow: (link, updL) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                        /* @__PURE__ */ jsx(Input, { value: link.label, placeholder: "Label", onChange: (e) => updL({ label: e.target.value }) }),
+                        /* @__PURE__ */ jsx(Input, { value: link.href, placeholder: "/pad of https://\u2026", onChange: (e) => updL({ href: e.target.value }) })
+                      ] })
+                    }
+                  )
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Social-links" }),
+            /* @__PURE__ */ jsx(
+              ArrayEditor,
+              {
+                items: footer.social ?? [],
+                onChange: (social) => setS({ ...s, footer: { ...footer, social } }),
+                newItem: () => ({ platform: "", href: "" }),
+                addLabel: "+ Social-link",
+                renderRow: (link, update) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsx(Input, { value: link.platform, placeholder: "bv. Instagram", onChange: (e) => update({ platform: e.target.value }) }),
+                  /* @__PURE__ */ jsx(Input, { value: link.href, placeholder: "https://\u2026", onChange: (e) => update({ href: e.target.value }) })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Copyright (leeg = automatisch)", children: /* @__PURE__ */ jsx(Input, { value: footer.copyright ?? "", onChange: (e) => setS({ ...s, footer: { ...footer, copyright: e.target.value } }) }) }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 self-end text-sm", children: [
+              /* @__PURE__ */ jsx(Switch, { checked: footer.showAdminLink !== false, onCheckedChange: (v) => setS({ ...s, footer: { ...footer, showAdminLink: v } }) }),
+              "\u201CBeheer\u201D-link tonen"
+            ] })
           ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Modules" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Zet functies aan/uit en stel ze in. Uitgezette modules verbergen hun blokken en beheer-paneel." }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: defs.filter((d) => !d.core).map((d) => {
-        const st = moduleState(d.id, d.defaultEnabled ?? true);
-        return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200 p-3", children: [
-          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              /* @__PURE__ */ jsx("strong", { className: "text-sm", children: d.label }),
-              d.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-slate-500", children: d.description })
+      ] }) }),
+      sectie === "modules" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Modules" }),
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Zet functies aan/uit en stel ze in. Uitgezette modules verbergen hun blokken en beheer-paneel." }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: defs.filter((d) => !d.core).map((d) => {
+          const st = moduleState(d.id, d.defaultEnabled ?? true);
+          return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200 p-3", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("strong", { className: "text-sm", children: d.label }),
+                d.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-slate-500", children: d.description })
+              ] }),
+              /* @__PURE__ */ jsx(Switch, { checked: st.enabled, onCheckedChange: (v) => setModule(d.id, { enabled: v, config: st.config }) })
             ] }),
-            /* @__PURE__ */ jsx(Switch, { checked: st.enabled, onCheckedChange: (v) => setModule(d.id, { enabled: v, config: st.config }) })
+            st.enabled && d.settingsSchema && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+              ModuleSettingsForm,
+              {
+                schema: d.settingsSchema,
+                value: st.config,
+                onChange: (config) => setModule(d.id, { enabled: st.enabled, config })
+              }
+            ) })
+          ] }, d.id);
+        }) })
+      ] }) }),
+      sectie === "mail" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MailSettings, { siteId }),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "E-mailteksten" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-600", children: [
+            "De teksten van automatische e-mails bewerk je bij het onderdeel zelf: formulier-mails onder",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: "Formulieren" }),
+            ", webwinkel-mails onder ",
+            /* @__PURE__ */ jsx("strong", { children: "Webwinkel \u2192 E-mails" }),
+            ". Provider en opmaak (logo, huisstijlkleur) gelden site-breed en stel je hier in."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Formulier-afzender" }),
+          /* @__PURE__ */ jsxs("p", { className: "mb-3 text-xs text-slate-500", children: [
+            "De afzender-identiteit die formulier-notificaties gebruiken. Kies de XiCMS-afzender (werkt direct) of het eigen domein van de klant (vereist domeinverificatie). De provider waarmee daadwerkelijk verstuurd wordt, stel je hierboven bij ",
+            /* @__PURE__ */ jsx("strong", { children: "E-mail" }),
+            " in."
           ] }),
-          st.enabled && d.settingsSchema && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
-            ModuleSettingsForm,
-            {
-              schema: d.settingsSchema,
-              value: st.config,
-              onChange: (config) => setModule(d.id, { enabled: st.enabled, config })
-            }
-          ) })
-        ] }, d.id);
-      }) })
-    ] }),
-    /* @__PURE__ */ jsx(MailSettings, { siteId }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "E-mailteksten" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-600", children: [
-        "De teksten van automatische e-mails bewerk je bij het onderdeel zelf: formulier-mails onder",
-        " ",
-        /* @__PURE__ */ jsx("strong", { children: "Formulieren" }),
-        ", webwinkel-mails onder ",
-        /* @__PURE__ */ jsx("strong", { children: "Webwinkel \u2192 E-mails" }),
-        ". Provider en opmaak (logo, huisstijlkleur) gelden site-breed en stel je hier in."
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Formulier-afzender" }),
-      /* @__PURE__ */ jsxs("p", { className: "mb-3 text-xs text-slate-500", children: [
-        "De afzender-identiteit die formulier-notificaties gebruiken. Kies de XiCMS-afzender (werkt direct) of het eigen domein van de klant (vereist domeinverificatie). De provider waarmee daadwerkelijk verstuurd wordt, stel je hierboven bij ",
-        /* @__PURE__ */ jsx("strong", { children: "E-mail" }),
-        " in."
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Afzender-modus", children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: forms.mode,
+                onValueChange: (v) => setS({ ...s, forms: { ...forms, mode: v } }),
+                options: [
+                  { value: "xicms", label: "XiCMS-domein (aanbevolen)" },
+                  { value: "client", label: "Eigen domein van de klant" }
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field, { label: "Van (from) e-mail", hint: "Moet een geverifieerd domein zijn.", children: /* @__PURE__ */ jsx(Input, { value: forms.fromEmail ?? "", onChange: (e) => setS({ ...s, forms: { ...forms, fromEmail: e.target.value } }) }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Van (naam)", children: /* @__PURE__ */ jsx(Input, { value: forms.fromName ?? "", onChange: (e) => setS({ ...s, forms: { ...forms, fromName: e.target.value } }) }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Notificaties naar", hint: "Meestal het mailadres van de klant.", children: /* @__PURE__ */ jsx(Input, { value: forms.notifyTo ?? "", onChange: (e) => setS({ ...s, forms: { ...forms, notifyTo: e.target.value } }) }) })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Afzender-modus", children: /* @__PURE__ */ jsx(
-          Select,
-          {
-            value: forms.mode,
-            onValueChange: (v) => setS({ ...s, forms: { ...forms, mode: v } }),
-            options: [
-              { value: "xicms", label: "XiCMS-domein (aanbevolen)" },
-              { value: "client", label: "Eigen domein van de klant" }
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Field, { label: "Van (from) e-mail", hint: "Moet een geverifieerd domein zijn.", children: /* @__PURE__ */ jsx(Input, { value: forms.fromEmail ?? "", onChange: (e) => setS({ ...s, forms: { ...forms, fromEmail: e.target.value } }) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Van (naam)", children: /* @__PURE__ */ jsx(Input, { value: forms.fromName ?? "", onChange: (e) => setS({ ...s, forms: { ...forms, fromName: e.target.value } }) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Notificaties naar", hint: "Meestal het mailadres van de klant.", children: /* @__PURE__ */ jsx(Input, { value: forms.notifyTo ?? "", onChange: (e) => setS({ ...s, forms: { ...forms, notifyTo: e.target.value } }) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Back-up & herstel" }),
-      /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Sla alle content van deze site (pagina's, nieuws, formulieren, instellingen en je foto-galerij) op in \xE9\xE9n bestand. Bewaar dat veilig; je kunt het later weer terugzetten. De foto-bestanden zelf blijven in de cloud staan \u2014 de back-up bevat de teksten, instellingen en verwijzingen." }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => void downloadBackup(), disabled: exporting || restoring, children: exporting ? "Bezig\u2026" : "Back-up downloaden" }),
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => restoreInput.current?.click(), disabled: restoring || exporting, children: restoring ? "Terugzetten\u2026" : "Back-up terugzetten\u2026" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: restoreInput,
-            type: "file",
-            accept: "application/json,.json",
-            hidden: true,
-            onChange: (e) => {
-              const f = e.target.files?.[0];
-              if (f) void restoreFromFile(f);
-              e.target.value = "";
-            }
-          }
-        )
+      sectie === "backup" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Card, { children: [
+          /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Back-up & herstel" }),
+          /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Sla alle content van deze site (pagina's, nieuws, formulieren, instellingen en je foto-galerij) op in \xE9\xE9n bestand. Bewaar dat veilig; je kunt het later weer terugzetten. De foto-bestanden zelf blijven in de cloud staan \u2014 de back-up bevat de teksten, instellingen en verwijzingen." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => void downloadBackup(), disabled: exporting || restoring, children: exporting ? "Bezig\u2026" : "Back-up downloaden" }),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => restoreInput.current?.click(), disabled: restoring || exporting, children: restoring ? "Terugzetten\u2026" : "Back-up terugzetten\u2026" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: restoreInput,
+                type: "file",
+                accept: "application/json,.json",
+                hidden: true,
+                onChange: (e) => {
+                  const f = e.target.files?.[0];
+                  if (f) void restoreFromFile(f);
+                  e.target.value = "";
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-slate-400", children: "Terugzetten vervangt de huidige content door de back-up. We maken automatisch eerst een back-up van de huidige stand, zodat je nooit iets kwijtraakt." })
+        ] }),
+        /* @__PURE__ */ jsx(SnapshotsCard, { siteId })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-slate-400", children: "Terugzetten vervangt de huidige content door de back-up. We maken automatisch eerst een back-up van de huidige stand, zodat je nooit iets kwijtraakt." })
-    ] }),
-    /* @__PURE__ */ jsx(SnapshotsCard, { siteId }),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { onClick: save, children: "Instellingen opslaan" }) })
-  ] });
+      /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 -mx-4 flex justify-end border-t px-4 py-3", style: { borderColor: "var(--color-border)", background: "var(--admin-canvas)" }, children: /* @__PURE__ */ jsx(Button, { onClick: save, children: "Instellingen opslaan" }) })
+    ] })
+  );
 }
 export {
   SettingsPanel