From 996e448b0343b14b8c61aa3aef3c5197bb77a500 Mon Sep 17 00:00:00 2001
From: 0xBuooy <aaron.lee@buooy.com>
Date: Mon, 18 May 2026 16:34:06 +0800
Subject: [PATCH] Add HTML signature settings

Add a mailbox settings UI for enabling HTML email signatures, editing the signature markup, and previewing the sanitized rendered output.

Persist the signature through the existing mailbox settings shape and initialize new mailboxes with an explicit html signature field so compose flows can use the existing getSignatureBlock support.
---
 app/routes/settings.tsx | 53 +++++++++++++++++++++++++++++++++++++++++
 workers/index.ts        |  2 +-
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/app/routes/settings.tsx b/app/routes/settings.tsx
index a4634cda..5274bb0a 100644
--- a/app/routes/settings.tsx
+++ b/app/routes/settings.tsx
@@ -4,6 +4,7 @@
 
 import { Badge, Button, Input, Loader, useKumoToastManager } from "@cloudflare/kumo";
 import { RobotIcon, ArrowCounterClockwiseIcon } from "@phosphor-icons/react";
+import DOMPurify from "dompurify";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { useMailbox, useUpdateMailbox } from "~/queries/mailboxes";
@@ -20,12 +21,16 @@ export default function SettingsRoute() {
 
 	const [displayName, setDisplayName] = useState("");
 	const [agentPrompt, setAgentPrompt] = useState("");
+	const [signatureEnabled, setSignatureEnabled] = useState(false);
+	const [signatureHtml, setSignatureHtml] = useState("");
 	const [isSaving, setIsSaving] = useState(false);
 
 	useEffect(() => {
 		if (mailbox) {
 			setDisplayName(mailbox.settings?.fromName || mailbox.name || "");
 			setAgentPrompt(mailbox.settings?.agentSystemPrompt || "");
+			setSignatureEnabled(mailbox.settings?.signature?.enabled || false);
+			setSignatureHtml(mailbox.settings?.signature?.html || "");
 		}
 	}, [mailbox]);
 
@@ -36,6 +41,12 @@ export default function SettingsRoute() {
 			...mailbox.settings,
 			fromName: displayName,
 			agentSystemPrompt: agentPrompt.trim() || undefined,
+			signature: {
+				...mailbox.settings?.signature,
+				enabled: signatureEnabled,
+				text: mailbox.settings?.signature?.text || "",
+				html: signatureHtml.trim() || undefined,
+			},
 		};
 		try {
 			await updateMailboxMutation.mutateAsync({ mailboxId, settings });
@@ -63,6 +74,7 @@ export default function SettingsRoute() {
 	}
 
 	const isCustomPrompt = agentPrompt.trim().length > 0;
+	const signaturePreviewHtml = DOMPurify.sanitize(signatureHtml);
 
 	return (
 		<div className="max-w-2xl px-4 py-4 md:px-8 md:py-6 h-full overflow-y-auto">
@@ -84,6 +96,47 @@ export default function SettingsRoute() {
 					</div>
 				</div>
 
+				{/* Signature */}
+				<div className="rounded-lg border border-kumo-line bg-kumo-base p-5">
+					<div className="text-sm font-medium text-kumo-default mb-4">
+						Signature
+					</div>
+					<div className="space-y-4">
+						<label className="flex items-center gap-2 text-sm text-kumo-default">
+							<input
+								type="checkbox"
+								checked={signatureEnabled}
+								onChange={(e) => setSignatureEnabled(e.target.checked)}
+								className="h-4 w-4 rounded border-kumo-line text-kumo-brand focus:ring-kumo-ring"
+							/>
+							<span>Use signature</span>
+						</label>
+						<div>
+							<label className="mb-2 block text-xs font-medium text-kumo-subtle">
+								HTML
+							</label>
+							<textarea
+								value={signatureHtml}
+								onChange={(e) => setSignatureHtml(e.target.value)}
+								placeholder="<p>Best Regards,<br><strong>Your Name</strong></p>"
+								rows={7}
+								className="w-full resize-y rounded-lg border border-kumo-line bg-kumo-recessed px-3 py-2 text-xs text-kumo-default placeholder:text-kumo-subtle focus:outline-none focus:ring-1 focus:ring-kumo-ring font-mono leading-relaxed"
+							/>
+						</div>
+						{signatureHtml.trim() ? (
+							<div>
+								<div className="mb-2 text-xs font-medium text-kumo-subtle">
+									Preview
+								</div>
+								<div
+									className="rounded-lg border border-kumo-line bg-kumo-recessed p-3 text-sm text-kumo-default"
+									dangerouslySetInnerHTML={{ __html: signaturePreviewHtml }}
+								/>
+							</div>
+						) : null}
+					</div>
+				</div>
+
 				{/* Agent System Prompt */}
 				<div className="rounded-lg border border-kumo-line bg-kumo-base p-5">
 					<div className="flex items-center justify-between mb-4">
diff --git a/workers/index.ts b/workers/index.ts
index fd3359ce..a960d728 100644
--- a/workers/index.ts
+++ b/workers/index.ts
@@ -108,7 +108,7 @@ app.post("/api/v1/mailboxes", async (c) => {
 	}
 	const key = `mailboxes/${email}.json`;
 	if (await c.env.BUCKET.head(key)) return c.json({ error: "Mailbox already exists" }, 409);
-	const defaultSettings = { fromName: name, forwarding: { enabled: false, email: "" }, signature: { enabled: false, text: "" }, autoReply: { enabled: false, subject: "", message: "" } };
+	const defaultSettings = { fromName: name, forwarding: { enabled: false, email: "" }, signature: { enabled: false, text: "", html: "" }, autoReply: { enabled: false, subject: "", message: "" } };
 	const finalSettings = { ...defaultSettings, ...settings };
 	await c.env.BUCKET.put(key, JSON.stringify(finalSettings));
 	const stub = c.env.MAILBOX.get(c.env.MAILBOX.idFromName(email));