@fonderie/react-courier-admin-screens 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,11 +1,17 @@
 // src/screens/TemplateEditorScreen.tsx
+import {
+  createAdminT,
+  formatAdminDate,
+  groupTemplatesByType,
+  missingTemplateLocales
+} from "@fonderie/client";
 import {
   useTemplate,
   useTemplatePreview,
   useTemplateRevisions,
   useTemplates
 } from "@fonderie/react-courier-admin";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var IMPLICIT = /* @__PURE__ */ new Set(["subject", "preheader", "brandName"]);
 var PREVIEW_DEBOUNCE_MS = 500;
@@ -16,10 +22,14 @@ function TemplateEditorScreen({
   onSaved,
   system = false,
   onDeleted,
-  onAddLocale
+  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);
@@ -43,13 +53,13 @@ function TemplateEditorScreen({
     try {
       const parsed = JSON.parse(sampleJson || "{}");
       if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-        setSampleError("Sample data must be a JSON object.");
+        setSampleError(t("templates.editor.sampleNotObject"));
         return;
       }
       data = parsed;
       setSampleError(null);
     } catch {
-      setSampleError("Sample data is not valid JSON.");
+      setSampleError(t("templates.editor.sampleInvalid"));
       return;
     }
     const result = await renderPreview(
@@ -62,7 +72,7 @@ function TemplateEditorScreen({
       const seeded = { ...data, ...Object.fromEntries(missing.map((v) => [v, v])) };
       setSampleJson(JSON.stringify(seeded, null, 2));
     }
-  }, [renderPreview, type, text, subject, html, locale, sampleJson]);
+  }, [renderPreview, type, text, subject, html, locale, sampleJson, t]);
   const runRef = useRef(run);
   runRef.current = run;
   const loadedType = template ? `${type}:${locale ?? ""}` : null;
@@ -90,10 +100,13 @@ function TemplateEditorScreen({
       setIsSaving(false);
     }
   };
+  const switchTo = (entry) => {
+    if (dirty && !window.confirm(t("templates.editor.discardChanges"))) return;
+    onSelectLocale?.(entry);
+  };
   const handleDelete = async () => {
-    const which = locale ? `the ${locale} version of "${type}"` : `"${type}"`;
-    const fallback = locale ? " People in that locale will receive the default version." : "";
-    if (!window.confirm(`Delete ${which}?${fallback}`)) return;
+    const message = locale ? t("templates.editor.confirmDeleteLocale", { type, locale }) : t("templates.editor.confirmDelete", { type });
+    if (!window.confirm(message)) return;
     setIsDeleting(true);
     setSaveError(null);
     try {
@@ -105,32 +118,54 @@ function TemplateEditorScreen({
       setIsDeleting(false);
     }
   };
-  if (isLoading) return /* @__PURE__ */ jsx("p", { style: styles.status, children: "Loading template\u2026" });
+  if (isLoading) return /* @__PURE__ */ jsx("p", { style: styles.status, children: t("templates.editor.loading") });
   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),
-          children: "+ Add locale"
+          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 ?? "default locale" }),
+      /* @__PURE__ */ jsx("strong", { children: locale ?? t("templates.defaultLocale") }),
       " \xB7 v",
       template?.version ?? 1,
-      system ? " \xB7 built-in email: edit or roll back, it cannot be deleted" : ""
+      system ? ` \xB7 ${t("templates.editor.builtInNote")}` : ""
     ] }),
     /* @__PURE__ */ jsxs("div", { style: styles.split, children: [
       /* @__PURE__ */ jsxs("div", { style: styles.column, children: [
         /* @__PURE__ */ jsxs("form", { style: styles.form, onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-subject", children: "Subject" }),
+          /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-subject", children: t("templates.subject") }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -140,7 +175,7 @@ function TemplateEditorScreen({
               onChange: (event) => setSubject(event.target.value)
             }
           ),
-          /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-html", children: "HTML body" }),
+          /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-html", children: t("templates.htmlBody") }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -151,7 +186,7 @@ function TemplateEditorScreen({
               rows: 8
             }
           ),
-          /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-text", children: "Plain-text body" }),
+          /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-text", children: t("templates.textBody") }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -172,10 +207,10 @@ function TemplateEditorScreen({
                 onChange: (event) => setActive(event.target.checked)
               }
             ),
-            "Active"
+            t("templates.editor.active")
           ] }),
           saveError?.reason === "VERSION_CONFLICT" ? /* @__PURE__ */ jsxs("p", { style: styles.error, role: "alert", children: [
-            "Someone changed this template since you opened it. Reload to see their change, then edit again.",
+            t("templates.editor.conflict"),
             " ",
             /* @__PURE__ */ jsx(
               "button",
@@ -186,7 +221,7 @@ function TemplateEditorScreen({
                   setSaveError(null);
                   void refresh();
                 },
-                children: "Reload"
+                children: t("common.reload")
               }
             )
           ] }) : saveError ? /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: saveError.explanation }) : null,
@@ -197,10 +232,10 @@ function TemplateEditorScreen({
                 type: "submit",
                 disabled: isSaving || !dirty,
                 style: dirty ? styles.button : styles.buttonDisabled,
-                children: isSaving ? "Saving\u2026" : "Save"
+                children: isSaving ? t("common.saving") : t("common.save")
               }
             ),
-            !dirty && !isSaving && /* @__PURE__ */ jsx("span", { style: styles.meta, children: "No changes to save" }),
+            !dirty && !isSaving && /* @__PURE__ */ jsx("span", { style: styles.meta, children: t("templates.editor.noChanges") }),
             !system ? /* @__PURE__ */ jsx(
               "button",
               {
@@ -214,12 +249,12 @@ function TemplateEditorScreen({
                   color: "var(--fonderie-danger,#e00)",
                   borderColor: "color-mix(in srgb, var(--fonderie-danger,#e00) 40%, transparent)"
                 },
-                children: isDeleting ? "Deleting\u2026" : "Delete"
+                children: isDeleting ? t("common.deleting") : t("common.delete")
               }
             ) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-sample", children: "Sample data" }),
+        /* @__PURE__ */ jsx("label", { style: styles.label, htmlFor: "template-sample", children: t("templates.editor.sampleData") }),
         /* @__PURE__ */ jsx(
           "textarea",
           {
@@ -235,8 +270,8 @@ function TemplateEditorScreen({
       ] }),
       /* @__PURE__ */ jsxs("div", { style: styles.previewColumn, children: [
         /* @__PURE__ */ jsxs("div", { style: styles.previewHeader, children: [
-          /* @__PURE__ */ jsx("span", { style: styles.label, children: "Preview" }),
-          /* @__PURE__ */ jsx("span", { style: styles.meta, children: isPreviewing ? "Rendering\u2026" : "Live" })
+          /* @__PURE__ */ jsx("span", { style: styles.label, children: t("templates.editor.preview") }),
+          /* @__PURE__ */ jsx("span", { style: styles.meta, children: isPreviewing ? t("templates.editor.rendering") : t("templates.editor.live") })
         ] }),
         previewError && /* @__PURE__ */ jsx("p", { style: styles.error, role: "alert", children: previewError.explanation }),
         preview?.subject && /* @__PURE__ */ jsx("p", { style: styles.previewSubject, children: preview.subject }),
@@ -247,26 +282,26 @@ function TemplateEditorScreen({
           /* @__PURE__ */ jsx(
             "iframe",
             {
-              title: "Template preview",
+              title: t("templates.editor.previewTitle"),
               style: styles.previewFrame,
               sandbox: "",
               srcDoc: preview.html
             }
           )
-        ) : preview ? /* @__PURE__ */ jsx("pre", { style: styles.previewText, children: preview.text }) : /* @__PURE__ */ jsx("p", { style: styles.meta, children: "Nothing rendered yet." })
+        ) : preview ? /* @__PURE__ */ jsx("pre", { style: styles.previewText, children: preview.text }) : /* @__PURE__ */ jsx("p", { style: styles.meta, children: t("templates.editor.nothingRendered") })
       ] })
     ] }),
     revisions.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.revisions, children: [
-      /* @__PURE__ */ jsx("h2", { style: styles.subtitle, children: "History" }),
+      /* @__PURE__ */ jsx("h2", { style: styles.subtitle, children: t("templates.editor.history") }),
       /* @__PURE__ */ jsx("ul", { style: styles.list, children: revisions.map((rev) => /* @__PURE__ */ jsxs("li", { style: styles.row, children: [
         /* @__PURE__ */ jsxs("span", { children: [
           "v",
           rev.version,
           " \u2014 ",
-          rev.actor ?? "unknown",
+          rev.actor ?? t("templates.editor.unknownActor"),
           " \u2014",
           " ",
-          new Date(rev.createdAt).toLocaleString()
+          formatAdminDate(rev.createdAt, uiLocale)
         ] }),
         /* @__PURE__ */ jsx(
           "button",
@@ -274,15 +309,45 @@ function TemplateEditorScreen({
             type: "button",
             onClick: () => rollback(rev.version),
             style: styles.rollbackButton,
-            children: "Roll back"
+            children: t("templates.editor.rollBack")
           }
         )
       ] }, rev.version)) })
     ] })
   ] });
 }
+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: {
@@ -450,55 +515,78 @@ var styles = {
 };
 
 // src/screens/TemplateListScreen.tsx
+import {
+  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";
 function TemplateListScreen({
   client,
   onSelectTemplate,
-  onCreateTemplate
+  onCreateTemplate,
+  locale
 }) {
+  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",
       {
         style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 },
         children: [
-          /* @__PURE__ */ jsx2("h1", { style: styles2.title, children: "Templates" }),
+          /* @__PURE__ */ jsx2("h1", { style: styles2.title, children: t("templates.list.title") }),
           onCreateTemplate ? /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
               onClick: () => onCreateTemplate({
                 locales: [
-                  ...new Set(templates.map((t) => t.locale).filter((l) => !!l))
+                  ...new Set(templates.map((row) => row.locale).filter((l) => !!l))
                 ]
               }),
               style: styles2.newButton,
-              children: "New template"
+              children: t("templates.list.newTemplate")
             }
           ) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx2("p", { style: styles2.hint, children: "Every email the app sends. Open one to edit its copy and preview it live." }),
-    isLoading ? /* @__PURE__ */ jsx2("p", { style: styles2.status, children: "Loading templates\u2026" }) : 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 ?? "default locale" }),
-          template.system ? /* @__PURE__ */ jsx2("span", { style: styles2.builtIn, children: "built-in" }) : null,
-          /* @__PURE__ */ jsxs2("span", { style: template.active ? styles2.active : styles2.inactive, children: [
-            /* @__PURE__ */ jsx2("span", { style: styles2.dot }),
-            template.active ? "active" : "inactive"
-          ] })
-        ]
-      }
-    ) }, `${template.type}:${template.locale ?? "base"}`)) })
+    /* @__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: 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 = {
@@ -512,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: {
@@ -534,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",
@@ -555,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,
@@ -593,7 +702,10 @@ var styles2 = {
 };
 
 // src/screens/TemplateCreateScreen.tsx
-import { FonderieApiError } from "@fonderie/client";
+import {
+  FonderieApiError,
+  createAdminT as createAdminT3
+} from "@fonderie/client";
 import { useEffect as useEffect2, 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}$/;
@@ -602,11 +714,13 @@ function TemplateCreateScreen({
   client,
   type,
   locales = [],
-  onCreated
+  onCreated,
+  locale
 }) {
+  const tr = createAdminT3(locale);
   const addingLocale = type !== void 0;
   const [newType, setNewType] = useState2("");
-  const [locale, setLocale] = useState2("");
+  const [targetLocale, setTargetLocale] = useState2("");
   const [subject, setSubject] = useState2("");
   const [html, setHtml] = useState2("");
   const [text, setText] = useState2("");
@@ -624,13 +738,11 @@ function TemplateCreateScreen({
     e.preventDefault();
     setError(null);
     const t = addingLocale ? type : newType.trim();
-    const l = locale.trim() || null;
-    if (!TYPE_RE.test(t))
-      return setError("Type: lowercase letters, digits, - and _ (e.g. weekly-digest).");
-    if (addingLocale && !l) return setError("Choose the locale to add, e.g. fr or fr-CA.");
-    if (l && !LOCALE_RE.test(l)) return setError("Locale: a language tag such as fr, es or fr-CA.");
-    if (!text.trim())
-      return setError("The plain-text body is required \u2014 it is what every email client can show.");
+    const l = targetLocale.trim() || null;
+    if (!TYPE_RE.test(t)) return setError(tr("templates.create.errorType"));
+    if (addingLocale && !l) return setError(tr("templates.create.errorLocaleRequired"));
+    if (l && !LOCALE_RE.test(l)) return setError(tr("templates.create.errorLocale"));
+    if (!text.trim()) return setError(tr("templates.create.errorText"));
     setBusy(true);
     try {
       const exists = await client.getTemplate(t, l).then(
@@ -638,7 +750,9 @@ function TemplateCreateScreen({
         (err) => !(err instanceof FonderieApiError && err.status === 404)
       );
       if (exists) {
-        setError(`"${t}"${l ? ` (${l})` : ""} already exists \u2014 open it from the list to edit.`);
+        setError(
+          l ? tr("templates.create.existsLocale", { type: t, locale: l }) : tr("templates.create.exists", { type: t })
+        );
         return;
       }
       const input = { text, active: true };
@@ -653,11 +767,11 @@ function TemplateCreateScreen({
     }
   };
   return /* @__PURE__ */ jsxs3("div", { style: styles3.container, children: [
-    /* @__PURE__ */ jsx3("h1", { style: styles3.title, children: addingLocale ? `Add a locale to ${type}` : "New template" }),
-    /* @__PURE__ */ jsx3("p", { style: styles3.meta, children: addingLocale ? "Starts from the default copy. People whose locale matches receive this version; everyone else keeps the default." : "For an email your app sends that has no stored copy yet. The type must match what the app sends." }),
+    /* @__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: "Type" }),
+        /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-type", children: tr("templates.create.type") }),
         /* @__PURE__ */ jsx3(
           "input",
           {
@@ -671,25 +785,22 @@ function TemplateCreateScreen({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsxs3("label", { style: styles3.label, htmlFor: "new-template-locale", children: [
-        "Locale ",
-        addingLocale ? "" : "(optional \u2014 empty is the default)"
-      ] }),
+      /* @__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: locale,
+          value: targetLocale,
           placeholder: "fr",
           list: "new-template-locales",
           autoComplete: "off",
           spellCheck: false,
-          onChange: (e) => setLocale(e.target.value)
+          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: "Subject" }),
+      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-subject", children: tr("templates.subject") }),
       /* @__PURE__ */ jsx3(
         "input",
         {
@@ -699,7 +810,7 @@ function TemplateCreateScreen({
           onChange: (e) => setSubject(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-html", children: "HTML body" }),
+      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-html", children: tr("templates.htmlBody") }),
       /* @__PURE__ */ jsx3(
         "textarea",
         {
@@ -709,7 +820,7 @@ function TemplateCreateScreen({
           onChange: (e) => setHtml(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-text", children: "Plain-text body" }),
+      /* @__PURE__ */ jsx3("label", { style: styles3.label, htmlFor: "new-template-text", children: tr("templates.textBody") }),
       /* @__PURE__ */ jsx3(
         "textarea",
         {
@@ -720,7 +831,7 @@ function TemplateCreateScreen({
         }
       ),
       error ? /* @__PURE__ */ jsx3("p", { style: styles3.error, role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: busy, style: styles3.button, children: busy ? "Creating\u2026" : addingLocale ? "Add locale" : "Create template" })
+      /* @__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") })
     ] })
   ] });
 }