@fonderie/react-courier-admin-screens 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,7 +1,9 @@
 // src/screens/TemplateEditorScreen.tsx
 import {
   createAdminT,
-  formatAdminDate
+  formatAdminDate,
+  groupTemplatesByType,
+  missingTemplateLocales
 } from "@fonderie/client";
 import {
   useTemplate,
@@ -21,11 +23,13 @@ function TemplateEditorScreen({
   system = false,
   onDeleted,
   onAddLocale,
+  onSelectLocale,
   uiLocale
 }) {
   const t = useMemo(() => createAdminT(uiLocale), [uiLocale]);
   const { template, isLoading, error, refresh } = useTemplate(client, type, locale);
-  const { saveTemplate, removeTemplate } = useTemplates(client);
+  const { templates, saveTemplate, removeTemplate } = useTemplates(client);
+  const siblings = groupTemplatesByType(templates).find((g) => g.type === type)?.entries ?? [];
   const [isDeleting, setIsDeleting] = useState(false);
   const { revisions, rollback } = useTemplateRevisions(client, type, locale);
   const [isSaving, setIsSaving] = useState(false);
@@ -96,6 +100,10 @@ function TemplateEditorScreen({
       setIsSaving(false);
     }
   };
+  const switchTo = (entry) => {
+    if (dirty && !window.confirm(t("templates.editor.discardChanges"))) return;
+    onSelectLocale?.(entry);
+  };
   const handleDelete = async () => {
     const message = locale ? t("templates.editor.confirmDeleteLocale", { type, locale }) : t("templates.editor.confirmDelete", { type });
     if (!window.confirm(message)) return;
@@ -114,18 +122,40 @@ function TemplateEditorScreen({
   if (error)
     return /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: error.explanation });
   return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsx("h1", { style: styles.title, children: type }),
-      onAddLocale && !locale ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("h1", { style: styles.title, children: type }),
+    onSelectLocale || onAddLocale ? /* @__PURE__ */ jsxs("div", { style: styles.tabBar, children: [
+      onSelectLocale ? (
+        // Each tab opens another stored row, so this is navigation, not an
+        // ARIA tablist: plain buttons, the open one marked aria-current.
+        /* @__PURE__ */ jsx("nav", { "aria-label": t("templates.editor.locales"), style: styles.tabs, children: siblings.map((entry) => {
+          const selected = entry.locale === (locale ?? null);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-current": selected ? "true" : void 0,
+              onClick: () => selected ? void 0 : switchTo(entry),
+              style: selected ? styles.tabSelected : entry.active ? styles.tab : styles.tabInactive,
+              title: entry.active ? void 0 : t("common.status.inactive"),
+              children: entry.locale ?? t("templates.defaultChip")
+            },
+            entry.locale ?? ""
+          );
+        }) })
+      ) : null,
+      onAddLocale ? /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           style: { ...styles.rollbackButton, marginLeft: "auto" },
-          onClick: () => onAddLocale(type),
+          onClick: () => {
+            if (dirty && !window.confirm(t("templates.editor.discardChanges"))) return;
+            onAddLocale(type, { locales: missingTemplateLocales(templates, type) });
+          },
           children: t("templates.editor.addLocale")
         }
       ) : null
-    ] }),
+    ] }) : null,
     /* @__PURE__ */ jsxs("p", { style: styles.meta, children: [
       /* @__PURE__ */ jsx("strong", { children: locale ?? t("templates.defaultLocale") }),
       " \xB7 v",
@@ -286,8 +316,38 @@ function TemplateEditorScreen({
     ] })
   ] });
 }
+var tab = {
+  height: 32,
+  padding: "0 10px",
+  background: "none",
+  border: "none",
+  borderBottom: "2px solid transparent",
+  color: "var(--fonderie-text-muted,#5c5c5c)",
+  fontSize: 13,
+  fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  cursor: "pointer"
+};
 var styles = {
   container: { padding: "8px 40px 64px", maxWidth: 1400, boxSizing: "border-box" },
+  // One tab per locale of this email, underlined like a document's tabs.
+  tabBar: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: 12,
+    borderBottom: "1px solid var(--fonderie-border,#e0e0e0)",
+    margin: "4px 0 12px",
+    paddingBottom: 6
+  },
+  tabs: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: -7 },
+  tab,
+  tabSelected: {
+    ...tab,
+    color: "var(--fonderie-text,#171717)",
+    fontWeight: 600,
+    borderBottomColor: "var(--fonderie-text,#171717)",
+    cursor: "default"
+  },
+  tabInactive: { ...tab, opacity: 0.55, textDecoration: "line-through" },
   // Two columns, always: the editor on the left, the rendered result on the
   // right. Stacking the preview under a long form hid it below the fold.
   split: {
@@ -456,7 +516,8 @@ var styles = {
 
 // src/screens/TemplateListScreen.tsx
 import {
-  createAdminT as createAdminT2
+  createAdminT as createAdminT2,
+  groupTemplatesByType as groupTemplatesByType2
 } from "@fonderie/client";
 import { useTemplates as useTemplates2 } from "@fonderie/react-courier-admin";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -468,6 +529,7 @@ function TemplateListScreen({
 }) {
   const t = createAdminT2(locale);
   const { templates, isLoading, error } = useTemplates2(client);
+  const groups = groupTemplatesByType2(templates);
   return /* @__PURE__ */ jsxs2("div", { style: styles2.container, children: [
     /* @__PURE__ */ jsxs2(
       "div",
@@ -492,23 +554,39 @@ function TemplateListScreen({
       }
     ),
     /* @__PURE__ */ jsx2("p", { style: styles2.hint, children: t("templates.list.hint") }),
-    isLoading ? /* @__PURE__ */ jsx2("p", { style: styles2.status, children: t("templates.list.loading") }) : error ? /* @__PURE__ */ jsx2("p", { style: styles2.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsx2("ul", { style: styles2.list, children: templates.map((template) => /* @__PURE__ */ jsx2("li", { style: styles2.row, children: /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        onClick: () => onSelectTemplate?.(template),
-        style: styles2.rowButton,
-        children: [
-          /* @__PURE__ */ jsx2("span", { style: styles2.type, children: template.type }),
-          /* @__PURE__ */ jsx2("span", { style: styles2.locale, children: template.locale ?? t("templates.defaultLocale") }),
-          template.system ? /* @__PURE__ */ jsx2("span", { style: styles2.builtIn, children: t("templates.builtInBadge") }) : null,
-          /* @__PURE__ */ jsxs2("span", { style: template.active ? styles2.active : styles2.inactive, children: [
-            /* @__PURE__ */ jsx2("span", { style: styles2.dot }),
-            template.active ? t("common.status.active") : t("common.status.inactive")
-          ] })
-        ]
-      }
-    ) }, `${template.type}:${template.locale ?? "base"}`)) })
+    isLoading ? /* @__PURE__ */ jsx2("p", { style: styles2.status, children: t("templates.list.loading") }) : error ? /* @__PURE__ */ jsx2("p", { style: styles2.error, role: "alert", children: error.explanation }) : /* @__PURE__ */ jsx2("ul", { style: styles2.list, children: groups.map((group) => /* @__PURE__ */ jsxs2("li", { style: styles2.row, children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelectTemplate?.(group.primary),
+          style: styles2.rowButton,
+          children: [
+            /* @__PURE__ */ jsx2("span", { style: styles2.type, children: group.type }),
+            group.system ? /* @__PURE__ */ jsx2("span", { style: styles2.builtIn, children: t("templates.builtInBadge") }) : null,
+            /* @__PURE__ */ jsxs2("span", { style: group.primary.active ? styles2.active : styles2.inactive, children: [
+              /* @__PURE__ */ jsx2("span", { style: styles2.dot }),
+              group.primary.active ? t("common.status.active") : t("common.status.inactive")
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { style: styles2.chips, children: group.entries.map((entry) => {
+        const name = entry.locale ?? t("templates.defaultChip");
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelectTemplate?.(entry),
+            style: entry.active ? styles2.chip : styles2.chipInactive,
+            "aria-label": t("templates.list.openLocale", { type: group.type, locale: name }),
+            title: entry.active ? void 0 : t("common.status.inactive"),
+            children: name
+          },
+          entry.locale ?? ""
+        );
+      }) })
+    ] }, group.type)) })
   ] });
 }
 var pill = {
@@ -522,6 +600,18 @@ var pill = {
   lineHeight: 1.5,
   minWidth: 64
 };
+var chip = {
+  height: 24,
+  boxSizing: "border-box",
+  padding: "0 8px",
+  borderRadius: 6,
+  border: "1px solid var(--fonderie-border,#e0e0e0)",
+  background: "var(--fonderie-surface,#fff)",
+  color: "var(--fonderie-text,#171717)",
+  fontSize: 12,
+  fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)',
+  cursor: "pointer"
+};
 var styles2 = {
   container: { padding: "32px 40px 64px", maxWidth: 1160, boxSizing: "border-box" },
   title: {
@@ -544,9 +634,16 @@ var styles2 = {
     overflow: "hidden",
     boxShadow: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))"
   },
-  row: { borderBottom: "1px solid var(--fonderie-border-light,#f5f5f5)" },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    paddingRight: 16,
+    borderBottom: "1px solid var(--fonderie-border-light,#f5f5f5)"
+  },
   rowButton: {
-    width: "100%",
+    flex: 1,
+    minWidth: 0,
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
@@ -565,7 +662,9 @@ var styles2 = {
     flex: 1,
     fontFamily: 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)'
   },
-  locale: { fontSize: 12.5, color: "var(--fonderie-text-muted,#5c5c5c)" },
+  chips: { display: "flex", flexWrap: "wrap", justifyContent: "flex-end", gap: 6 },
+  chip,
+  chipInactive: { ...chip, opacity: 0.5, textDecoration: "line-through" },
   dot: { width: 6, height: 6, borderRadius: 999, background: "currentColor" },
   builtIn: {
     fontSize: 11,
@@ -607,10 +706,13 @@ import {
   FonderieApiError,
   createAdminT as createAdminT3
 } from "@fonderie/client";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useTemplatePreview as useTemplatePreview2 } from "@fonderie/react-courier-admin";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TYPE_RE = /^[a-z0-9][a-z0-9_-]{0,80}$/;
 var LOCALE_RE = /^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$/;
+var IMPLICIT2 = /* @__PURE__ */ new Set(["subject", "preheader", "brandName"]);
+var PREVIEW_DEBOUNCE_MS2 = 500;
 function TemplateCreateScreen({
   client,
   type,
@@ -627,14 +729,48 @@ function TemplateCreateScreen({
   const [text, setText] = useState2("");
   const [error, setError] = useState2(null);
   const [busy, setBusy] = useState2(false);
+  const [source, setSource] = useState2(
+    null
+  );
+  const { preview, isPreviewing, error: previewError, renderPreview } = useTemplatePreview2(client);
+  const variables = useRef2([]);
   useEffect2(() => {
     if (!type) return;
     client.getTemplate(type, null).then(({ result }) => {
       setSubject(result.subject ?? "");
       setHtml(result.html ?? "");
       setText(result.text);
+      setSource({ subject: result.subject ?? "", html: result.html ?? "", text: result.text });
     }).catch(() => void 0);
   }, [client, type]);
+  const previewType = addingLocale ? type : newType.trim();
+  const previewLocale = LOCALE_RE.test(targetLocale.trim()) ? targetLocale.trim() : null;
+  useEffect2(() => {
+    if (!TYPE_RE.test(previewType) || !text.trim()) return;
+    const timer = setTimeout(async () => {
+      const input = { text, ...subject ? { subject } : {}, ...html ? { html } : {} };
+      const render = () => renderPreview(
+        previewType,
+        { ...input, data: Object.fromEntries(variables.current.map((v) => [v, v])) },
+        previewLocale
+      );
+      try {
+        const result = await render();
+        const used = result.variables.filter((v) => !IMPLICIT2.has(v));
+        if (used.some((v) => !variables.current.includes(v))) {
+          variables.current = used;
+          await render();
+        }
+      } catch {
+      }
+    }, PREVIEW_DEBOUNCE_MS2);
+    return () => clearTimeout(timer);
+  }, [renderPreview, previewType, previewLocale, subject, html, text]);
+  const untranslated = source ? [
+    subject && subject === source.subject ? tr("templates.subject") : null,
+    html && html === source.html ? tr("templates.htmlBody") : null,
+    text === source.text ? tr("templates.textBody") : null
+  ].filter((f) => f !== null) : [];
   const submit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -670,75 +806,140 @@ function TemplateCreateScreen({
   return /* @__PURE__ */ jsxs3("div", { style: styles3.container, children: [
     /* @__PURE__ */ jsx3("h1", { style: styles3.title, children: addingLocale ? tr("templates.create.titleLocale", { type }) : tr("templates.create.titleNew") }),
     /* @__PURE__ */ jsx3("p", { style: styles3.meta, children: addingLocale ? tr("templates.create.hintLocale") : tr("templates.create.hintNew") }),
-    /* @__PURE__ */ jsxs3("form", { style: styles3.form, onSubmit: (e) => void submit(e), children: [
-      !addingLocale ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-type", children: tr("templates.create.type") }),
+    /* @__PURE__ */ jsxs3("div", { style: styles3.split, children: [
+      /* @__PURE__ */ jsxs3("form", { style: styles3.form, onSubmit: (e) => void submit(e), children: [
+        !addingLocale ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-type", children: tr("templates.create.type") }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              id: "new-template-type",
+              style: styles3.input,
+              value: newType,
+              placeholder: "weekly-digest",
+              autoComplete: "off",
+              spellCheck: false,
+              onChange: (e) => setNewType(e.target.value)
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-locale", children: addingLocale ? tr("templates.create.locale") : tr("templates.create.localeOptional") }),
         /* @__PURE__ */ jsx3(
           "input",
           {
-            id: "new-template-type",
+            id: "new-template-locale",
             style: styles3.input,
-            value: newType,
-            placeholder: "weekly-digest",
+            value: targetLocale,
+            placeholder: "fr",
+            list: "new-template-locales",
             autoComplete: "off",
             spellCheck: false,
-            onChange: (e) => setNewType(e.target.value)
+            onChange: (e) => setTargetLocale(e.target.value)
           }
-        )
-      ] }) : null,
-      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-locale", children: addingLocale ? tr("templates.create.locale") : tr("templates.create.localeOptional") }),
-      /* @__PURE__ */ jsx3(
-        "input",
-        {
-          id: "new-template-locale",
-          style: styles3.input,
-          value: targetLocale,
-          placeholder: "fr",
-          list: "new-template-locales",
-          autoComplete: "off",
-          spellCheck: false,
-          onChange: (e) => setTargetLocale(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx3("datalist", { id: "new-template-locales", children: [...new Set(locales)].map((l) => /* @__PURE__ */ jsx3("option", { value: l }, l)) }),
-      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-subject", children: tr("templates.subject") }),
-      /* @__PURE__ */ jsx3(
-        "input",
-        {
-          id: "new-template-subject",
-          style: styles3.input,
-          value: subject,
-          onChange: (e) => setSubject(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-html", children: tr("templates.htmlBody") }),
-      /* @__PURE__ */ jsx3(
-        "textarea",
-        {
-          id: "new-template-html",
-          style: { ...styles3.textarea, minHeight: 160 },
-          value: html,
-          onChange: (e) => setHtml(e.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-text", children: tr("templates.textBody") }),
-      /* @__PURE__ */ jsx3(
-        "textarea",
-        {
-          id: "new-template-text",
-          style: { ...styles3.textarea, minHeight: 100 },
-          value: text,
-          onChange: (e) => setText(e.target.value)
-        }
-      ),
-      error ? /* @__PURE__ */ jsx3("p", { style: styles3.error, role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: busy, style: styles3.button, children: busy ? tr("templates.create.creating") : addingLocale ? tr("templates.create.submitLocale") : tr("templates.create.submitNew") })
+        ),
+        /* @__PURE__ */ jsx3("datalist", { id: "new-template-locales", children: [...new Set(locales)].map((l) => /* @__PURE__ */ jsx3("option", { value: l }, l)) }),
+        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-subject", children: tr("templates.subject") }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            id: "new-template-subject",
+            style: styles3.input,
+            value: subject,
+            onChange: (e) => setSubject(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-html", children: tr("templates.htmlBody") }),
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            id: "new-template-html",
+            style: { ...styles3.textarea, minHeight: 160 },
+            value: html,
+            onChange: (e) => setHtml(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-text", children: tr("templates.textBody") }),
+        /* @__PURE__ */ jsx3(
+          "textarea",
+          {
+            id: "new-template-text",
+            style: { ...styles3.textarea, minHeight: 100 },
+            value: text,
+            onChange: (e) => setText(e.target.value)
+          }
+        ),
+        untranslated.length > 0 ? /* @__PURE__ */ jsx3("p", { style: styles3.notice, children: tr("templates.create.untranslated", { fields: untranslated.join(", ") }) }) : null,
+        error ? /* @__PURE__ */ jsx3("p", { style: styles3.error, role: "alert", children: error }) : null,
+        /* @__PURE__ */ jsx3("button", { type: "submit", disabled: busy, style: styles3.button, children: busy ? tr("templates.create.creating") : addingLocale ? tr("templates.create.submitLocale") : tr("templates.create.submitNew") })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { style: styles3.previewColumn, children: [
+        /* @__PURE__ */ jsxs3("div", { style: styles3.previewHeader, children: [
+          /* @__PURE__ */ jsx3("span", { style: styles3.label, children: tr("templates.editor.preview") }),
+          /* @__PURE__ */ jsx3("span", { style: styles3.meta, children: isPreviewing ? tr("templates.editor.rendering") : tr("templates.editor.live") })
+        ] }),
+        previewError ? /* @__PURE__ */ jsx3("p", { style: styles3.error, role: "alert", children: previewError.explanation }) : null,
+        preview?.subject ? /* @__PURE__ */ jsx3("p", { style: styles3.previewSubject, children: preview.subject }) : null,
+        preview?.html ? (
+          // sandbox="" — no scripts, no same-origin: operator-authored HTML must
+          // never execute in the console's origin.
+          /* @__PURE__ */ jsx3(
+            "iframe",
+            {
+              title: tr("templates.editor.previewTitle"),
+              style: styles3.previewFrame,
+              sandbox: "",
+              srcDoc: preview.html
+            }
+          )
+        ) : preview ? /* @__PURE__ */ jsx3("pre", { style: styles3.previewText, children: preview.text }) : /* @__PURE__ */ jsx3("p", { style: styles3.meta, children: tr("templates.editor.nothingRendered") })
+      ] })
     ] })
   ] });
 }
 var MONO = 'var(--fonderie-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)';
 var styles3 = {
-  container: { padding: "8px 40px 64px", maxWidth: 760, boxSizing: "border-box" },
+  container: { padding: "8px 40px 64px", maxWidth: 1400, boxSizing: "border-box" },
+  // The editor's layout: the form on the left, the render pinned on the right.
+  split: {
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+    gap: 24,
+    alignItems: "start"
+  },
+  previewColumn: {
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    position: "sticky",
+    top: 16
+  },
+  previewHeader: { display: "flex", justifyContent: "space-between", alignItems: "center" },
+  previewSubject: { fontSize: 14, fontWeight: 600, margin: "8px 0" },
+  previewFrame: {
+    boxShadow: "var(--fonderie-shadow-card,0 2px 3px 0 rgba(0,0,0,.05))",
+    width: "100%",
+    height: 520,
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: 8,
+    background: "var(--fonderie-surface,#fff)"
+  },
+  previewText: {
+    whiteSpace: "pre-wrap",
+    border: "1px solid var(--fonderie-border,#e0e0e0)",
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 13,
+    fontFamily: MONO
+  },
+  // The console's warning token (the shell's amber), readable in both themes.
+  notice: {
+    fontSize: 13,
+    color: "var(--fonderie-text,#171717)",
+    background: "color-mix(in srgb, var(--fonderie-warning,#f5a623) 16%, transparent)",
+    borderRadius: 6,
+    padding: "8px 12px",
+    margin: "12px 0 0"
+  },
   title: {
     fontSize: 22,
     fontWeight: 600,