@bygghammar/cms-platform 0.25.0 → 0.26.0

package/src/backoffice/EmailSettingsView.tsx

@@ -0,0 +1,772 @@
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+export const PROVIDER_KINDS = ["smtp", "ses", "lovable", "mailgun", "http"] as const;
+export type ProviderKind = (typeof PROVIDER_KINDS)[number];
+
+/** One sending provider row, structurally matching the host's own type. */
+export type EmailProviderLike = {
+  id: string;
+  name: string;
+  kind: ProviderKind;
+  is_active: boolean;
+  sort_order: number;
+  from_name: string | null;
+  from_email: string | null;
+  reply_to: string | null;
+  config: Record<string, unknown>;
+  secret_ref_name: string | null;
+  notes: string | null;
+};
+
+export type EmailSettingsLike = {
+  primary_from_name?: string | null;
+  primary_from_email?: string | null;
+  backup_from_email?: string | null;
+  reply_to?: string | null;
+  admin_notify_to?: string | null;
+  default_provider_id?: string | null;
+  fallback_provider_id?: string | null;
+} | null;
+
+export type EmailAddressesInput = {
+  primary_from_name: string | null;
+  primary_from_email: string | null;
+  backup_from_email: string | null;
+  reply_to: string | null;
+  admin_notify_to: string | null;
+  default_provider_id: string | null;
+  fallback_provider_id: string | null;
+};
+
+/** Host-provided data and actions for the email settings screen. */
+export type EmailSettingsDeps = {
+  settings: EmailSettingsLike;
+  providers: EmailProviderLike[];
+  isSuper: boolean;
+  loadingProviders?: boolean;
+  saveSettings: (input: { data: EmailAddressesInput }) => Promise<unknown>;
+  saveProvider: (input: {
+    data: Omit<EmailProviderLike, "id"> & { id?: string };
+  }) => Promise<unknown>;
+  deleteProvider: (input: { data: { id: string } }) => Promise<unknown>;
+  sendTestEmail: (input: { data: { provider_id: string; to: string } }) => Promise<unknown>;
+  /** Called after settings change, so the host can refetch. */
+  refreshSettings: () => Promise<unknown> | void;
+  /** Called after a provider changes, so the host can refetch. */
+  refreshProviders: () => Promise<unknown> | void;
+  /** Called after a test send, so the host can refetch email logs. */
+  refreshLogs?: () => Promise<unknown> | void;
+  /** Example addresses shown as placeholders — site specific. */
+  placeholders?: { fromEmail?: string; notifyTo?: string };
+};
+
+const KIND_LABEL: Record<ProviderKind, string> = {
+  smtp: "SMTP",
+  ses: "Amazon SES",
+  lovable: "Lovable Emails",
+  mailgun: "Mailgun",
+  http: "HTTP / Webhook",
+};
+
+const input =
+  "mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm focus:border-sea focus:outline-none disabled:bg-ink/5";
+const lbl = "text-[0.65rem] uppercase tracking-[0.22em] text-ink/55";
+
+/** Shared Email + providers screen. Data and actions come from the host. */
+export function EmailSettingsView({ deps }: { deps: EmailSettingsDeps }) {
+  const { providers, isSuper } = deps;
+
+  const [addresses, setAddresses] = useState({
+    primary_from_name: "",
+    primary_from_email: "",
+    backup_from_email: "",
+    reply_to: "",
+    admin_notify_to: "",
+  });
+  const [defaultId, setDefaultId] = useState<string>("");
+  const [fallbackId, setFallbackId] = useState<string>("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const d = deps.settings;
+    if (!d) return;
+    setAddresses({
+      primary_from_name: d.primary_from_name ?? "",
+      primary_from_email: d.primary_from_email ?? "",
+      backup_from_email: d.backup_from_email ?? "",
+      reply_to: d.reply_to ?? "",
+      admin_notify_to: d.admin_notify_to ?? "",
+    });
+    setDefaultId(d.default_provider_id ?? "");
+    setFallbackId(d.fallback_provider_id ?? "");
+  }, [deps.settings]);
+
+  const submitSettings = async () => {
+    setBusy(true);
+    try {
+      await deps.saveSettings({
+        data: {
+          primary_from_name: addresses.primary_from_name || null,
+          primary_from_email: addresses.primary_from_email || null,
+          backup_from_email: addresses.backup_from_email || null,
+          reply_to: addresses.reply_to || null,
+          admin_notify_to: addresses.admin_notify_to || null,
+          default_provider_id: defaultId || null,
+          fallback_provider_id: fallbackId || null,
+        },
+      });
+      toast.success("Email settings saved");
+      await deps.refreshSettings();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const [editing, setEditing] = useState<EmailProviderLike | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [duplicating, setDuplicating] = useState<EmailProviderLike | null>(null);
+
+  return (
+    <div className="p-8 md:p-12 w-full space-y-10">
+      <div>
+        <h2 className="font-serif text-xl">Email settings</h2>
+        <p className="mt-2 text-sm text-ink/60">
+          Configure multiple sending providers, pick which one is the default, and set a fallback
+          that takes over if the default fails. Passwords and API keys are stored as server secrets
+          — enter only their secret names here.
+        </p>
+      </div>
+
+      {/* Providers list */}
+      <section className="border border-ink/10 bg-white">
+        <header className="flex items-center justify-between border-b border-ink/10 px-6 py-4">
+          <div>
+            <div className={lbl}>Providers</div>
+            <div className="mt-1 text-sm text-ink/70">{providers.length} configured</div>
+          </div>
+          <button
+            type="button"
+            disabled={!isSuper}
+            onClick={() => setCreating(true)}
+            className="border border-ink bg-ink px-3 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-40"
+          >
+            Add provider
+          </button>
+        </header>
+
+        {deps.loadingProviders ? (
+          <div className="p-6 text-sm text-ink/60">Loading…</div>
+        ) : providers.length === 0 ? (
+          <div className="p-6 text-sm text-ink/60">
+            No providers yet. Add one to start sending email.
+          </div>
+        ) : (
+          <ul className="divide-y divide-ink/10">
+            {providers.map((p) => (
+              <li key={p.id} className="flex items-center justify-between gap-4 px-6 py-4">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{p.name}</span>
+                    <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                      {KIND_LABEL[p.kind]}
+                    </span>
+                    {!p.is_active && (
+                      <span className="text-[0.65rem] uppercase tracking-[0.22em] text-red-600">
+                        inactive
+                      </span>
+                    )}
+                    {p.id === defaultId && (
+                      <span className="border border-sea bg-sea/10 px-1.5 py-0.5 text-[0.6rem] uppercase tracking-[0.2em] text-sea">
+                        default
+                      </span>
+                    )}
+                    {p.id === fallbackId && (
+                      <span className="border border-ink/40 bg-ink/5 px-1.5 py-0.5 text-[0.6rem] uppercase tracking-[0.2em] text-ink/70">
+                        fallback
+                      </span>
+                    )}
+                  </div>
+                  <div className="mt-1 text-xs text-ink/60 truncate">
+                    {p.from_name ? `${p.from_name} · ` : ""}
+                    {p.from_email ?? "—"}
+                  </div>
+                </div>
+                <div className="flex gap-2">
+                  <TestSendButton deps={deps} providerId={p.id} disabled={!isSuper} />
+                  <button
+                    type="button"
+                    disabled={!isSuper}
+                    onClick={() =>
+                      setDuplicating({
+                        ...p,
+                        id: "",
+                        name: `${p.name} (copy)`,
+                        is_active: false,
+                        config: { ...(p.config ?? {}) },
+                      })
+                    }
+                    className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea hover:text-sea disabled:opacity-40"
+                  >
+                    Duplicate
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setEditing(p)}
+                    className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea hover:text-sea"
+                  >
+                    Edit
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {/* Routing */}
+      <section className="border border-ink/10 bg-white p-6 space-y-4">
+        <div className={lbl}>Routing</div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <label className="block">
+            <span className={lbl}>Default provider</span>
+            <select
+              disabled={!isSuper}
+              className={input}
+              value={defaultId}
+              onChange={(e) => setDefaultId(e.target.value)}
+            >
+              <option value="">— none —</option>
+              {providers.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name} · {KIND_LABEL[p.kind]}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="block">
+            <span className={lbl}>Fallback provider</span>
+            <select
+              disabled={!isSuper}
+              className={input}
+              value={fallbackId}
+              onChange={(e) => setFallbackId(e.target.value)}
+            >
+              <option value="">— none —</option>
+              {providers
+                .filter((p) => p.id !== defaultId)
+                .map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.name} · {KIND_LABEL[p.kind]}
+                  </option>
+                ))}
+            </select>
+          </label>
+        </div>
+        <p className="text-xs text-ink/55">
+          The fallback provider is used automatically if a send through the default provider fails.
+        </p>
+      </section>
+
+      {/* Addresses */}
+      <section className="border border-ink/10 bg-white p-6 space-y-4">
+        <div className={lbl}>Addresses</div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <label className="block">
+            <span className={lbl}>From name</span>
+            <input
+              disabled={!isSuper}
+              className={input}
+              value={addresses.primary_from_name}
+              onChange={(e) => setAddresses((f) => ({ ...f, primary_from_name: e.target.value }))}
+            />
+          </label>
+          <label className="block">
+            <span className={lbl}>Primary from email</span>
+            <input
+              disabled={!isSuper}
+              className={input}
+              value={addresses.primary_from_email}
+              onChange={(e) => setAddresses((f) => ({ ...f, primary_from_email: e.target.value }))}
+              placeholder={deps.placeholders?.fromEmail}
+            />
+          </label>
+          <label className="block">
+            <span className={lbl}>Backup from email</span>
+            <input
+              disabled={!isSuper}
+              className={input}
+              value={addresses.backup_from_email}
+              onChange={(e) => setAddresses((f) => ({ ...f, backup_from_email: e.target.value }))}
+            />
+          </label>
+          <label className="block">
+            <span className={lbl}>Reply-to</span>
+            <input
+              disabled={!isSuper}
+              className={input}
+              value={addresses.reply_to}
+              onChange={(e) => setAddresses((f) => ({ ...f, reply_to: e.target.value }))}
+            />
+          </label>
+          <label className="block md:col-span-2">
+            <span className={lbl}>Admin notification to (comma separated)</span>
+            <input
+              disabled={!isSuper}
+              className={input}
+              value={addresses.admin_notify_to}
+              onChange={(e) => setAddresses((f) => ({ ...f, admin_notify_to: e.target.value }))}
+              placeholder={deps.placeholders?.notifyTo}
+            />
+          </label>
+        </div>
+      </section>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={submitSettings}
+          disabled={busy || !isSuper}
+          className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+        >
+          {busy ? "Saving…" : "Save settings"}
+        </button>
+        {!isSuper && (
+          <span className="text-xs text-ink/55">
+            Read-only — only super administrators can change email settings.
+          </span>
+        )}
+      </div>
+
+      {(editing || creating || duplicating) && (
+        <ProviderDialog
+          key={editing?.id ?? (duplicating ? `dup-${duplicating.name}` : "new")}
+          deps={deps}
+          provider={editing}
+          initial={duplicating}
+          onClose={() => {
+            setEditing(null);
+            setCreating(false);
+            setDuplicating(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function TestSendButton({
+  deps,
+  providerId,
+  disabled,
+}: {
+  deps: EmailSettingsDeps;
+  providerId: string;
+  disabled: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [to, setTo] = useState("");
+  const [sending, setSending] = useState(false);
+
+  const run = async () => {
+    setSending(true);
+    try {
+      await deps.sendTestEmail({ data: { provider_id: providerId, to: to.trim() } });
+      toast.success(`Test email sent to ${to.trim()}`);
+      setOpen(false);
+      setTo("");
+      await deps.refreshLogs?.();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Test send failed");
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen(true)}
+        className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-[0.22em] text-ink hover:border-sea hover:text-sea disabled:opacity-40"
+      >
+        Test
+      </button>
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+          onClick={() => !sending && setOpen(false)}
+        >
+          <div
+            className="w-full max-w-md border border-ink/15 bg-white p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="font-serif text-lg">Send test email</h3>
+            <p className="mt-2 text-xs text-ink/60">
+              Sends a short test message through this provider and records the attempt in the email
+              logs.
+            </p>
+            <label className="mt-4 block">
+              <span className={lbl}>Recipient</span>
+              <input
+                type="email"
+                autoFocus
+                className={input}
+                value={to}
+                placeholder="you@example.com"
+                onChange={(e) => setTo(e.target.value)}
+              />
+            </label>
+            <div className="mt-5 flex items-center justify-end gap-2">
+              <button
+                type="button"
+                disabled={sending}
+                onClick={() => setOpen(false)}
+                className="border border-ink/20 px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink hover:border-ink disabled:opacity-40"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                disabled={sending || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(to.trim())}
+                onClick={run}
+                className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-40"
+              >
+                {sending ? "Sending…" : "Send test"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+type ConfigField = {
+  key: string;
+  label: string;
+  placeholder?: string;
+  kind?: "text" | "number" | "checkbox";
+};
+
+const CONFIG_FIELDS: Record<ProviderKind, ConfigField[]> = {
+  smtp: [
+    { key: "host", label: "SMTP host", placeholder: "smtp.example.com" },
+    { key: "port", label: "Port (587 recommended)", placeholder: "587", kind: "number" },
+    { key: "username", label: "Username" },
+    { key: "secure", label: "Use STARTTLS (recommended)", kind: "checkbox" },
+  ],
+  ses: [
+    { key: "region", label: "AWS region", placeholder: "eu-north-1" },
+    { key: "access_key_id", label: "Access key ID" },
+  ],
+  lovable: [],
+  mailgun: [
+    { key: "domain", label: "Mailgun domain", placeholder: "mg.example.com" },
+    { key: "region", label: "Region", placeholder: "us or eu" },
+  ],
+  http: [
+    { key: "endpoint", label: "Webhook endpoint", placeholder: "https://…" },
+    { key: "method", label: "HTTP method", placeholder: "POST" },
+  ],
+};
+
+const SECRET_HINT: Record<ProviderKind, string> = {
+  smtp: "SMTP_PASSWORD (secret holding the mailbox password)",
+  ses: "AWS_SES_SECRET",
+  lovable: "",
+  mailgun: "MAILGUN_API_KEY",
+  http: "HTTP_EMAIL_SECRET",
+};
+
+function ProviderDialog({
+  deps,
+  provider,
+  initial,
+  onClose,
+}: {
+  deps: EmailSettingsDeps;
+  provider: EmailProviderLike | null;
+  initial?: EmailProviderLike | null;
+  onClose: () => void;
+}) {
+  const [form, setForm] = useState<EmailProviderLike>(
+    provider ??
+      initial ?? {
+        id: "",
+        name: "",
+        kind: "smtp",
+        is_active: true,
+        sort_order: 100,
+        from_name: "",
+        from_email: "",
+        reply_to: "",
+        config: {},
+        secret_ref_name: "",
+        notes: "",
+      },
+  );
+
+  const [busy, setBusy] = useState(false);
+  const fields = useMemo(() => CONFIG_FIELDS[form.kind] ?? [], [form.kind]);
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      await deps.saveProvider({
+        data: {
+          id: provider?.id,
+          name: form.name,
+          kind: form.kind,
+          is_active: form.is_active,
+          sort_order: Number(form.sort_order) || 100,
+          from_name: form.from_name || null,
+          from_email: form.from_email || null,
+          reply_to: form.reply_to || null,
+          config: form.config ?? {},
+          secret_ref_name: form.secret_ref_name || null,
+          notes: form.notes || null,
+        },
+      });
+      toast.success(provider ? "Provider updated" : "Provider created");
+      await deps.refreshProviders();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const del = async () => {
+    if (!provider) return;
+    if (!confirm(`Delete provider "${provider.name}"?`)) return;
+    setBusy(true);
+    try {
+      await deps.deleteProvider({ data: { id: provider.id } });
+      toast.success("Provider deleted");
+      await deps.refreshProviders();
+      await deps.refreshSettings();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const setConfig = (k: string, v: unknown) =>
+    setForm((f) => ({ ...f, config: { ...(f.config ?? {}), [k]: v } }));
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-2xl bg-white border border-ink/10 shadow-2xl max-h-[90vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="flex items-center justify-between border-b border-ink/10 px-6 py-4">
+          <h3 className="font-serif text-lg">
+            {provider ? "Edit provider" : initial ? "Duplicate provider" : "New provider"}
+          </h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-xs uppercase tracking-[0.22em] text-ink/60 hover:text-ink"
+          >
+            Close
+          </button>
+        </header>
+
+        <div className="p-6 space-y-5">
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="block">
+              <span className={lbl}>Name</span>
+              <input
+                className={input}
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                placeholder="Primary SMTP"
+              />
+            </label>
+            <label className="block">
+              <span className={lbl}>Kind</span>
+              <select
+                className={input}
+                value={form.kind}
+                onChange={(e) =>
+                  setForm({ ...form, kind: e.target.value as ProviderKind, config: {} })
+                }
+              >
+                {PROVIDER_KINDS.map((k) => (
+                  <option key={k} value={k}>
+                    {KIND_LABEL[k]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="block">
+              <span className={lbl}>From name</span>
+              <input
+                className={input}
+                value={form.from_name ?? ""}
+                onChange={(e) => setForm({ ...form, from_name: e.target.value })}
+              />
+            </label>
+            <label className="block">
+              <span className={lbl}>From email</span>
+              <input
+                className={input}
+                value={form.from_email ?? ""}
+                onChange={(e) => setForm({ ...form, from_email: e.target.value })}
+              />
+            </label>
+            <label className="block">
+              <span className={lbl}>Reply-to</span>
+              <input
+                className={input}
+                value={form.reply_to ?? ""}
+                onChange={(e) => setForm({ ...form, reply_to: e.target.value })}
+              />
+            </label>
+            <label className="block">
+              <span className={lbl}>Priority (lower = earlier)</span>
+              <input
+                type="number"
+                className={input}
+                value={form.sort_order}
+                onChange={(e) => setForm({ ...form, sort_order: Number(e.target.value) || 0 })}
+              />
+            </label>
+          </div>
+
+          {fields.length > 0 && (
+            <div className="border-t border-ink/10 pt-5">
+              <div className={lbl}>{KIND_LABEL[form.kind]} configuration</div>
+              {form.kind === "smtp" && (
+                <p className="text-xs text-ink/60">
+                  Mail is sent over a direct SMTP connection using STARTTLS. Use port 587 (or 2525 /
+                  25). Port 465 (implicit TLS) is not supported — nearly every provider offers 587
+                  as an alternative.
+                </p>
+              )}
+              {form.kind === "smtp" && Number(form.config?.["port"]) === 465 && (
+                <p className="text-xs text-red-600">
+                  Port 465 cannot be used here. Change it to 587 before sending a test email.
+                </p>
+              )}
+              <div className="mt-3 grid gap-4 md:grid-cols-2">
+                {fields.map((f) => {
+                  const v = (form.config ?? {})[f.key];
+                  if (f.kind === "checkbox") {
+                    return (
+                      <label key={f.key} className="inline-flex items-center gap-2 md:col-span-2">
+                        <input
+                          type="checkbox"
+                          checked={Boolean(v)}
+                          onChange={(e) => setConfig(f.key, e.target.checked)}
+                        />
+                        <span className="text-sm">{f.label}</span>
+                      </label>
+                    );
+                  }
+                  return (
+                    <label key={f.key} className="block">
+                      <span className={lbl}>{f.label}</span>
+                      <input
+                        className={input}
+                        type={f.kind === "number" ? "number" : "text"}
+                        value={(v as string | number | undefined) ?? ""}
+                        placeholder={f.placeholder}
+                        onChange={(e) =>
+                          setConfig(
+                            f.key,
+                            f.kind === "number"
+                              ? e.target.value === ""
+                                ? null
+                                : Number(e.target.value)
+                              : e.target.value,
+                          )
+                        }
+                      />
+                    </label>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {form.kind !== "lovable" && (
+            <label className="block">
+              <span className={lbl}>
+                Secret name (server secret storing the API key / password)
+              </span>
+              <input
+                className={input}
+                value={form.secret_ref_name ?? ""}
+                onChange={(e) => setForm({ ...form, secret_ref_name: e.target.value })}
+                placeholder={SECRET_HINT[form.kind]}
+              />
+            </label>
+          )}
+
+          <label className="block">
+            <span className={lbl}>Notes</span>
+            <textarea
+              className={input}
+              rows={2}
+              value={form.notes ?? ""}
+              onChange={(e) => setForm({ ...form, notes: e.target.value })}
+            />
+          </label>
+
+          <label className="inline-flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={form.is_active}
+              onChange={(e) => setForm({ ...form, is_active: e.target.checked })}
+            />
+            <span className="text-sm">Active</span>
+          </label>
+        </div>
+
+        <footer className="flex items-center justify-between border-t border-ink/10 px-6 py-4">
+          <div>
+            {provider && (
+              <button
+                type="button"
+                onClick={del}
+                disabled={busy}
+                className="border border-red-500/40 px-3 py-2 text-xs uppercase tracking-[0.22em] text-red-600 hover:bg-red-50 disabled:opacity-50"
+              >
+                Delete
+              </button>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="border border-ink/20 px-3 py-2 text-xs uppercase tracking-[0.22em] text-ink/70 hover:border-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={submit}
+              disabled={busy || !form.name}
+              className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+            >
+              {busy ? "Saving…" : "Save"}
+            </button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}