", subject: "" });
+ const d = draft(key);
+ expect(d.to.map((a) => a.email)).toEqual(["ann@example.com"]);
+ expect(d.showCc).toBe(false);
+ expect(d.showBcc).toBe(false);
+ });
+
+ it("names the template's own recipient in a placeholder", () => {
+ const key = useCompose.getState().open({});
+ useCompose.getState().insertTemplate(key, { html: "
Dear {{recipientName}},
", subject: "", to: [{ name: "Jane Smith", email: "jane@example.com" }] });
+ expect(draft(key).html).toContain("Dear Jane Smith,");
+ });
+});
diff --git a/web/src/store/compose.ts b/web/src/store/compose.ts
index 200a6c9..f5881ae 100644
--- a/web/src/store/compose.ts
+++ b/web/src/store/compose.ts
@@ -13,7 +13,7 @@ import { ensureScheduledMailbox, useScheduled } from "./scheduled";
import { formatScheduleTime, holdUntil } from "@/lib/schedule";
import { t as translate } from "@/lib/i18n";
import { BASE_PATH } from "@/lib/basePath";
-import { settings } from "./settings";
+import { settings, type Template } from "./settings";
import { useContacts } from "./contacts";
import { emlFilename } from "@/lib/text/emlName";
import { fillPlaceholders, type PlaceholderContext } from "@/lib/templatePlaceholders";
@@ -160,7 +160,7 @@ interface ComposeState {
send(key: string): Promise;
undoSend(key: string): void;
setIdentity(key: string, identityId: Id): void;
- insertTemplate(key: string, html: string, subject?: string): void;
+ insertTemplate(key: string, template: Pick): void;
}
const AUTOSAVE_MS = 20_000;
@@ -857,20 +857,34 @@ export const useCompose = create((set, get) => ({
get().update(key, { identityId, html, text, signatureHtml: newSig, ...replyToPatch });
},
- insertTemplate(key, html, subject) {
+ insertTemplate(key, { html, subject, to = [], cc = [], bcc = [] }) {
const d = get().drafts.find((x) => x.key === key);
if (!d) return;
+ // The template's recipients join the ones already there. An address that
+ // is already on the message, in any field, stays where it is rather than
+ // appearing twice.
+ const present = [...d.to, ...d.cc, ...d.bcc];
+ const added = (list: EmailAddress[]) => {
+ const fresh = uniqueAddresses(list).filter((a) => !present.some((p) => sameAddress(p.email, a.email)));
+ present.push(...fresh);
+ return fresh;
+ };
+ const recipients = { to: [...d.to, ...added(to)], cc: [...d.cc, ...added(cc)], bcc: [...d.bcc, ...added(bcc)] };
// Placeholders are filled against the draft as it stands right now, which
// is why this happens on insert rather than on send: what the template is
// filled with is visible and editable afterwards, instead of changing
- // under the message between writing it and sending it.
+ // under the message between writing it and sending it. The template's own
+ // recipients count, so {{recipientName}} can name the person it is for.
const ident = d.identityId ? useMail.getState().identities.find((i) => i.id === d.identityId) : undefined;
- const ctx: PlaceholderContext = { to: d.to, from: ident ? { name: ident.name, email: ident.email } : null, subject: d.subject };
+ const ctx: PlaceholderContext = { to: recipients.to, from: ident ? { name: ident.name, email: ident.email } : null, subject: d.subject };
// The body is filled once as HTML and the plain-text side derived from the
// result, so the two cannot disagree about what a placeholder came to.
const filled = fillPlaceholders(html, ctx, { html: true });
const patch: Partial = { html: `
${sanitizeEditorHtml(filled)}
${d.html}`, text: `${htmlToText(filled)}\n${d.text}` };
if (subject && !d.subject) patch.subject = fillPlaceholders(subject, ctx, { html: false });
+ if (recipients.to.length !== d.to.length) patch.to = recipients.to;
+ if (recipients.cc.length !== d.cc.length) Object.assign(patch, { cc: recipients.cc, showCc: true });
+ if (recipients.bcc.length !== d.bcc.length) Object.assign(patch, { bcc: recipients.bcc, showBcc: true });
get().update(key, patch);
},
}));
diff --git a/web/src/store/settings.ts b/web/src/store/settings.ts
index d805dbc..179206e 100644
--- a/web/src/store/settings.ts
+++ b/web/src/store/settings.ts
@@ -7,6 +7,7 @@ import { pendingSettingsKeys, queueSettingsPush } from "@/lib/settingsSync";
import { policyChanges, policyDefaults, policyEnforced, type PolicyChange } from "@/lib/settingsPolicy";
import { setDateTimePrefs, setUiLanguageForFormatting, type DateFormat, type TimeFormat } from "@/lib/datetime";
import type { SwipeAction } from "@/lib/input/swipe";
+import type { EmailAddress } from "@/jmap/types";
import { resolveUiLanguage } from "@/lib/languages";
import { loadLanguage } from "@/lib/i18n";
@@ -55,6 +56,10 @@ export interface Template {
name: string;
subject: string;
html: string;
+ /** Recipients added to the message when the template is inserted. Older templates have none. */
+ to?: EmailAddress[];
+ cc?: EmailAddress[];
+ bcc?: EmailAddress[];
}
/** A signer remembered for an address. See `knownSigners`. */
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 8628fda..6b3a704 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -1701,6 +1701,9 @@ select optgroup { background-color: var(--bg-elev); color: var(--fg); }
.recipients { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; position: relative; }
.recipients .chip { height: 24px; }
.recipients input { flex: 1; min-width: 120px; border: 0; background: transparent; outline: none; height: 28px; }
+/* A template's recipients, in a settings form: drawn as an input like the fields beside it. */
+.field .recipients { min-height: 38px; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elev); transition: border-color .12s, box-shadow .12s; }
+.field .recipients:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.composer-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Quoted mail lands in the app document, so contain it as .message-body does: its positioning cannot reach past the editor. */
.editor-area { flex: 1; min-height: 120px; overflow-y: auto; contain: layout; padding: 12px 16px; outline: none; line-height: 1.5; font-size: 14px; font-family: var(--font-sans); }
diff --git a/web/src/views/compose/Composer.tsx b/web/src/views/compose/Composer.tsx
index 20050df..bc8cb98 100644
--- a/web/src/views/compose/Composer.tsx
+++ b/web/src/views/compose/Composer.tsx
@@ -382,7 +382,7 @@ export function Composer({ draft }: { draft: Draft }) {
{settings.templates.length > 0 && }
{translate("Templates")}
- {settings.templates.map((t) =>
@@ -394,7 +394,7 @@ export function Composer({ draft }: { draft: Draft }) {
diff --git a/web/src/views/settings/TemplatesSettings.tsx b/web/src/views/settings/TemplatesSettings.tsx
index c48e7d5..2267128 100644
--- a/web/src/views/settings/TemplatesSettings.tsx
+++ b/web/src/views/settings/TemplatesSettings.tsx
@@ -3,6 +3,8 @@ import { Plus, Trash2 } from "lucide-react";
import { useSettings, type Template } from "@/store/settings";
import { Dialog } from "@/ui/dialog";
import { RichEditor } from "../compose/RichEditor";
+import { RecipientInput } from "../compose/RecipientInput";
+import { formatAddress } from "@/lib/address";
import { htmlToText } from "@/lib/text/text";
import { t as translate } from "@/lib/i18n";
import { PLACEHOLDER_NAMES } from "@/lib/templatePlaceholders";
@@ -22,6 +24,7 @@ export function TemplatesSettings() {
{t.subject &&
{translate("Added to the message when you insert the template, beside anyone already on it.")}
@@ -45,6 +63,10 @@ export function TemplatesSettings() {
);
}
+function recipientCount(t: Template): number {
+ return (t.to?.length ?? 0) + (t.cc?.length ?? 0) + (t.bcc?.length ?? 0);
+}
+
/**
* What each placeholder answers, shown under the body so the names are
* discoverable without documentation. Rendered from `PLACEHOLDER_NAMES` rather