Date: Sat, 11 Jul 2026 09:45:13 +0200
Subject: [PATCH 02/22] fix: open signature links in a new tab instead of
navigating the app away
Signatures render into the main document - the identity form's live preview
and the composer's signature block - rather than the sandboxed iframe used for
message bodies. SIGNATURE_SANITIZE_CONFIG allows no target attribute, so those
anchors were live and target-less: one click navigated the whole app away,
discarding the unsent draft or the unsaved signature with it.
Add sanitizeSignatureHtmlForDisplay, which keeps the storage sanitizer's image
restrictions but forces target="_blank" rel="noopener noreferrer" on every
anchor, and use it at the two render sites. The composer's SignatureBlock
NodeView stamps the target on its rendered DOM instead, because attrs.html is
what serializeEditorContent emits into the sent message - storage and the
recipient's copy stay exactly as the user wrote them.
---
components/email/email-composer.tsx | 4 +-
components/email/signature-block.ts | 32 ++++++++++++++--
components/identity/identity-form.tsx | 4 +-
lib/__tests__/email-sanitization.test.ts | 38 +++++++++++++++++++
lib/email-sanitization.ts | 47 +++++++++++++++++++++---
5 files changed, 112 insertions(+), 13 deletions(-)
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index 4e022d29..df7543bf 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -11,7 +11,7 @@ import { debug } from "@/lib/debug";
import { toast } from "@/stores/toast-store";
import { useContextMenu } from "@/hooks/use-context-menu";
import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
-import { sanitizeSignatureHtml, sanitizeEmailHtml, escapeHtml } from "@/lib/email-sanitization";
+import { sanitizeSignatureHtml, sanitizeSignatureHtmlForDisplay, sanitizeEmailHtml, escapeHtml } from "@/lib/email-sanitization";
import { buildReplySubject, buildForwardSubject } from "@/lib/subject-prefix";
import { isFilePreviewable } from "@/lib/file-preview";
import { buildQuotedHtmlBlock, serializeEditorContent } from "@/components/email/quoted-html";
@@ -823,7 +823,7 @@ export function EmailComposer({
}, [composerClient, plainTextMode, mode]);
const composerSignatureHtml = signatureIdentity?.htmlSignature
- ? `${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}
`
+ ? `${sanitizeSignatureHtmlForDisplay(signatureIdentity.htmlSignature)}
`
: signatureIdentity?.textSignature
? `${getPlainTextSignature(signatureIdentity).replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
`
: '';
diff --git a/components/email/signature-block.ts b/components/email/signature-block.ts
index 231b9f6a..9b0ee3ef 100644
--- a/components/email/signature-block.ts
+++ b/components/email/signature-block.ts
@@ -6,6 +6,23 @@ import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
// so parseHTML can recognise it on the way back in (initial content, drafts).
export const SIGNATURE_BLOCK_MARKER = "data-signature-block-node";
+/**
+ * Force every link in the rendered signature to open in a new tab.
+ *
+ * Applied to the NodeView's DOM only, never to `attrs.html` — that attribute is
+ * what serializeEditorContent emits into the sent message, and the recipient's
+ * copy should stay exactly as the user wrote it. Without this the composer's
+ * signature is a set of live, target-less anchors in the main document (the
+ * message body gets a sandboxed iframe; this does not), so one stray click
+ * navigates the whole app away and takes the unsent draft with it.
+ */
+function forceLinksToNewTab(root: HTMLElement): void {
+ root.querySelectorAll("a[href]").forEach((a) => {
+ a.setAttribute("target", "_blank");
+ a.setAttribute("rel", "noopener noreferrer");
+ });
+}
+
/**
* SignatureBlock — an atomic, NON-editable block node that carries the
* *verbatim* HTML of the user's identity signature in its `html` attribute.
@@ -61,6 +78,7 @@ export const SignatureBlock = TiptapNode.create({
dom.setAttribute(SIGNATURE_BLOCK_MARKER, "");
dom.className = "signature-block-island";
+
// CRITICAL: render the signature inside a Shadow Root. The app's global
// CSS (Tailwind preflight, .tiptap table/td rules, box-sizing resets)
// would otherwise cascade INTO the signature and destroy its layout -
@@ -71,7 +89,12 @@ export const SignatureBlock = TiptapNode.create({
const inner = document.createElement("div");
// Read-only: a signature is inserted/removed as a unit, not edited inline.
inner.contentEditable = "false";
- inner.innerHTML = node.attrs.html || "";
+ // Track what we were given, not what's in the DOM: forceLinksToNewTab
+ // rewrites the markup, so inner.innerHTML no longer round-trips against
+ // attrs.html and comparing the two would rewrite on every transaction.
+ let appliedHtml = node.attrs.html || "";
+ inner.innerHTML = appliedHtml;
+ forceLinksToNewTab(inner);
shadow.appendChild(inner);
return {
@@ -83,8 +106,11 @@ export const SignatureBlock = TiptapNode.create({
stopEvent: () => false,
update: (updatedNode) => {
if (updatedNode.type.name !== "signatureBlock") return false;
- if (inner.innerHTML !== (updatedNode.attrs.html || "")) {
- inner.innerHTML = updatedNode.attrs.html || "";
+ const nextHtml = updatedNode.attrs.html || "";
+ if (nextHtml !== appliedHtml) {
+ appliedHtml = nextHtml;
+ inner.innerHTML = nextHtml;
+ forceLinksToNewTab(inner);
}
return true;
},
diff --git a/components/identity/identity-form.tsx b/components/identity/identity-form.tsx
index 2e083225..0155b7b7 100644
--- a/components/identity/identity-form.tsx
+++ b/components/identity/identity-form.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import type { Identity, EmailAddress } from '@/lib/jmap/types';
-import { sanitizeSignatureHtml } from '@/lib/email-sanitization';
+import { sanitizeSignatureHtml, sanitizeSignatureHtmlForDisplay } from '@/lib/email-sanitization';
import { getEmailValidationError, validateEmailList } from '@/lib/validation';
// Stalwarts JMAP Identity/set caps signature fields at 2047 UTF-8 bytes
@@ -305,7 +305,7 @@ export function IdentityForm({ identity, onSave, onCancel }: IdentityFormProps)
{tDisplay('preview')}
diff --git a/lib/__tests__/email-sanitization.test.ts b/lib/__tests__/email-sanitization.test.ts
index 103d2dcf..910d99d1 100644
--- a/lib/__tests__/email-sanitization.test.ts
+++ b/lib/__tests__/email-sanitization.test.ts
@@ -3,6 +3,7 @@ import DOMPurify from 'dompurify';
import {
sanitizeEmailHtml,
sanitizeSignatureHtml,
+ sanitizeSignatureHtmlForDisplay,
parseHtmlSafely,
hasRichFormatting,
plainTextToSafeHtml,
@@ -582,6 +583,43 @@ describe('email-sanitization', () => {
});
});
+ describe('sanitizeSignatureHtmlForDisplay', () => {
+ // Signatures render into the main document (identity-form preview, composer
+ // block), not the sandboxed iframe, so a target-less anchor navigates the
+ // whole app away and takes the unsaved draft/signature with it.
+ it('forces target=_blank and rel on signature links', () => {
+ const clean = sanitizeSignatureHtmlForDisplay('Site
');
+ expect(clean).toContain('target="_blank"');
+ expect(clean).toContain('rel="noopener noreferrer"');
+ });
+
+ it('overrides a target the user supplied themselves', () => {
+ const clean = sanitizeSignatureHtmlForDisplay('x ');
+ expect(clean).toContain('target="_blank"');
+ expect(clean).not.toContain('_top');
+ });
+
+ it('keeps the image restrictions of the storage sanitizer', () => {
+ const clean = sanitizeSignatureHtmlForDisplay(
+ 'Site
');
+ expect(stored).toContain('href="https://example.com"');
+ expect(stored).not.toContain('target=');
+ });
+
+ it('handles empty input', () => {
+ expect(sanitizeSignatureHtmlForDisplay('')).toBe('');
+ expect(sanitizeSignatureHtmlForDisplay(' ')).toBe('');
+ });
+ });
+
describe('sanitizePlainTextRenderedHtml', () => {
// This branch renders into the main document, not the sandboxed iframe, so
// an anchor that loses target="_blank" navigates the whole app away.
diff --git a/lib/email-sanitization.ts b/lib/email-sanitization.ts
index fe1bbff7..69afdc3d 100644
--- a/lib/email-sanitization.ts
+++ b/lib/email-sanitization.ts
@@ -79,26 +79,61 @@ export const SIGNATURE_SANITIZE_CONFIG = {
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover'],
};
+/** Drop images whose src isn't https: or a base64 raster data: URI. */
+function restrictSignatureImages(node: Element): void {
+ if (node.tagName !== 'IMG') return;
+ const src = node.getAttribute('src');
+ if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
+ node.remove();
+ }
+}
+
/**
- * Sanitize HTML signature for storage and display.
+ * Sanitize an HTML signature for storage and for the outgoing message.
* img src is restricted to https: or base64-embedded raster data: URIs
* (png/jpeg/gif/webp). SVG is excluded because DOMPurify cannot inspect
* bytes inside a data: URI. Images with a disallowed src are removed
* entirely so they don't render as broken-image icons.
+ *
+ * Deliberately does NOT force target="_blank": what we store, and what the
+ * recipient receives, should stay as the user wrote it. Use
+ * `sanitizeSignatureHtmlForDisplay` for anything rendered in our own DOM.
* @param html - User-provided HTML signature
* @returns Sanitized signature (no scripts, no external resources)
*/
export function sanitizeSignatureHtml(html: string): string {
+ if (!html?.trim()) return '';
+ DOMPurify.addHook('afterSanitizeAttributes', restrictSignatureImages);
+ try {
+ return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
+ } finally {
+ DOMPurify.removeAllHooks();
+ }
+}
+
+const SIGNATURE_DISPLAY_CONFIG = {
+ ...SIGNATURE_SANITIZE_CONFIG,
+ ALLOWED_ATTR: [...SIGNATURE_SANITIZE_CONFIG.ALLOWED_ATTR, 'target', 'rel'],
+};
+
+/**
+ * Sanitize an HTML signature for rendering inside our own DOM — the identity
+ * form's live preview and the composer's signature block. Both inject into the
+ * main document rather than the sandboxed iframe used for message bodies, so a
+ * link without target="_blank" navigates the whole app away, taking any unsent
+ * draft or unsaved signature with it. Force every anchor to open a new tab.
+ */
+export function sanitizeSignatureHtmlForDisplay(html: string): string {
if (!html?.trim()) return '';
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
- if (node.tagName !== 'IMG') return;
- const src = node.getAttribute('src');
- if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
- node.remove();
+ restrictSignatureImages(node);
+ if (node.tagName === 'A') {
+ node.setAttribute('target', '_blank');
+ node.setAttribute('rel', 'noopener noreferrer');
}
});
try {
- return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
+ return DOMPurify.sanitize(html, SIGNATURE_DISPLAY_CONFIG);
} finally {
DOMPurify.removeAllHooks();
}
From c1acf58c5fa1d221c56179dd46035a72e03a807f Mon Sep 17 00:00:00 2001
From: Stefan Hildebrandt <695494+hildebrandttk@users.noreply.github.com>
Date: Sat, 11 Jul 2026 18:04:05 +0200
Subject: [PATCH 03/22] test(compose): add findComposeIdentityId to
reply-identity mock
The recipient chip-drag and paste tests render , which since
b716f95a (feat(compose): preselect identity of the active mailbox) calls
findComposeIdentityId() from @/lib/reply-identity in compose mode. Both tests
mock that module but only returned resolveReplyFrom, so vitest threw
"No 'findComposeIdentityId' export is defined on the mock" on mount,
failing all 18 tests. Add the missing export (returns null; the composer
guards with if (composeIdentityId)).
---
components/email/__tests__/recipient-chip-drag.test.tsx | 5 ++++-
components/email/__tests__/recipient-paste.test.tsx | 5 ++++-
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/components/email/__tests__/recipient-chip-drag.test.tsx b/components/email/__tests__/recipient-chip-drag.test.tsx
index 461b4452..68f90dec 100644
--- a/components/email/__tests__/recipient-chip-drag.test.tsx
+++ b/components/email/__tests__/recipient-chip-drag.test.tsx
@@ -148,7 +148,10 @@ vi.mock('@/lib/email-sanitization', () => ({
parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
}));
-vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
+vi.mock('@/lib/reply-identity', () => ({
+ resolveReplyFrom: () => null,
+ findComposeIdentityId: () => null,
+}));
vi.mock('@/lib/email-threading', () => ({
computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
}));
diff --git a/components/email/__tests__/recipient-paste.test.tsx b/components/email/__tests__/recipient-paste.test.tsx
index 1a3ccef6..a8d4d15c 100644
--- a/components/email/__tests__/recipient-paste.test.tsx
+++ b/components/email/__tests__/recipient-paste.test.tsx
@@ -147,7 +147,10 @@ vi.mock('@/lib/email-sanitization', () => ({
parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
}));
-vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
+vi.mock('@/lib/reply-identity', () => ({
+ resolveReplyFrom: () => null,
+ findComposeIdentityId: () => null,
+}));
vi.mock('@/lib/email-threading', () => ({
computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
}));
From 622adc34de11a290c49fe0522593c89db322a7ba Mon Sep 17 00:00:00 2001
From: Paulhenry Saux
Date: Sun, 12 Jul 2026 18:30:50 +0200
Subject: [PATCH 04/22] feat: add onEmailsFetched and onSearchResults hook +
new JMAP method getSomeEmails
---
lib/demo/demo-client.ts | 13 +++
lib/jmap/client-interface.ts | 1 +
lib/jmap/client.ts | 37 +++++++
lib/plugin-hooks.ts | 4 +
stores/email-store.ts | 180 +++++++++++++++++++----------------
5 files changed, 154 insertions(+), 81 deletions(-)
diff --git a/lib/demo/demo-client.ts b/lib/demo/demo-client.ts
index 4e94555e..72436779 100644
--- a/lib/demo/demo-client.ts
+++ b/lib/demo/demo-client.ts
@@ -166,6 +166,19 @@ export class DemoJMAPClient implements IJMAPClient {
return { emails, hasMore: position + limit < total, total };
}
+ async getSomeEmails(emailsId: string[], _accountId?: string): Promise {
+ if (!emailsId || emailsId.length === 0) {
+ return [];
+ }
+ const filtered = this.data.emails.filter(e => emailsId.includes(e.id));
+
+ filtered.sort((a, b) =>
+ new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+ );
+
+ return filtered;
+ }
+
async getEmailsInMailbox(mailboxId: string): Promise {
return this.data.emails.filter(e => e.mailboxIds[mailboxId]);
}
diff --git a/lib/jmap/client-interface.ts b/lib/jmap/client-interface.ts
index 5a7d4223..729c55f6 100644
--- a/lib/jmap/client-interface.ts
+++ b/lib/jmap/client-interface.ts
@@ -83,6 +83,7 @@ export interface IJMAPClient {
getEmails(mailboxId?: string, accountId?: string, limit?: number, position?: number, hasKeyword?: string, pinnedFirst?: boolean): Promise<{ emails: Email[]; hasMore: boolean; total: number }>;
getEmailsInMailbox(mailboxId: string): Promise;
getEmail(emailId: string, accountId?: string): Promise;
+ getSomeEmails(emailsId: string[], accountId?: string): Promise
getTagCounts(tagIds: string[]): Promise>;
searchEmails(query: string, mailboxId?: string, accountId?: string, limit?: number, position?: number): Promise<{ emails: Email[]; hasMore: boolean; total: number }>;
advancedSearchEmails(
diff --git a/lib/jmap/client.ts b/lib/jmap/client.ts
index 387f2393..2b6d2f50 100644
--- a/lib/jmap/client.ts
+++ b/lib/jmap/client.ts
@@ -550,6 +550,43 @@ export class JMAPClient implements IJMAPClient {
this.authHeader = `Bearer ${token}`;
}
+ async getSomeEmails(emailsId: string[], accountId?: string): Promise {
+ try {
+ const targetAccountId = accountId || this.accountId;
+ if (!emailsId || emailsId.length === 0) {
+ return [];
+ }
+
+ const response = await this.request([
+ ["Email/get", {
+ accountId: targetAccountId,
+ ids: emailsId,
+ properties: [...EMAIL_LIST_PROPERTIES],
+ }, "0"],
+ ]);
+
+ const getResponse = response.methodResponses?.[0]?.[1];
+
+ if (response.methodResponses?.[0]?.[0] === "Email/get" && getResponse) {
+ const emails = (getResponse.list || []) as Email[];
+
+ emails.sort((a: Email, b: Email) =>
+ new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
+ );
+
+ if (accountId && accountId !== this.accountId) {
+ namespaceMailboxIds(emails, accountId);
+ }
+
+ return emails;
+ }
+
+ return [];
+ } catch (error) {
+ console.error('Failed to get specific emails:', error);
+ return [];
+ }
+ }
/** Upgrade an existing basic-auth client to bearer-token auth (e.g. after TOTP token exchange). */
upgradeToBearer(accessToken: string, onRefresh?: () => Promise): void {
this.authMode = 'bearer';
diff --git a/lib/plugin-hooks.ts b/lib/plugin-hooks.ts
index 00ccc58c..02fb8107 100644
--- a/lib/plugin-hooks.ts
+++ b/lib/plugin-hooks.ts
@@ -272,6 +272,10 @@ export const emailHooks = {
// normally. This is the send-takeover hook used by the S/MIME plugin to
// replace the former native sign+encrypt+sendRaw pipeline.
onComposeSend: new HookBus(),
+ // Transform hook - receive Email[] or ScheduledEmail[] just after there are fetched to
+ // lets plugin edit emails before they are shown in row. Used to populate preview
+ // field for encryption plugins.
+ onEmailsFetched: new HookBus(),
};
// §7.2 Calendar Hooks
diff --git a/stores/email-store.ts b/stores/email-store.ts
index 0967f670..d44d0414 100644
--- a/stores/email-store.ts
+++ b/stores/email-store.ts
@@ -918,8 +918,9 @@ export const useEmailStore = create((set, get) => ({
for (const email of result.emails) {
email.sourceFolder = resolveSourceFolderName(email, allMailMailboxes);
}
+ const enrichedEmails = await emailHooks.onEmailsFetched.transform(result.emails);
set({
- emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
+ emails: annotateScheduledEmails(enrichedEmails, get().scheduledSubmissionByEmailId),
hasMoreEmails: result.hasMore,
totalEmails: result.total,
isLoading: false,
@@ -946,8 +947,9 @@ export const useEmailStore = create((set, get) => ({
// When filtering by tag, omit the mailbox constraint so emails across
// all folders that carry the tag are returned.
const result = await effectiveClient.getEmails(selectedKeyword ? undefined : jmapMailboxId, accountId, emailsPerPage, 0, keywordFilter, true);
+ const enrichedEmails = await emailHooks.onEmailsFetched.transform(result.emails);
set({
- emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
+ emails: annotateScheduledEmails(enrichedEmails, get().scheduledSubmissionByEmailId),
hasMoreEmails: result.hasMore,
totalEmails: result.total,
// Clear thread caches since the email list was fully replaced
@@ -991,8 +993,9 @@ export const useEmailStore = create((set, get) => ({
const currentEmails = get().emails;
const existingIds = new Set(currentEmails.map(e => e.id));
const newEmails = result.emails.filter(e => !existingIds.has(e.id));
+ const enrichedNewEmails = await emailHooks.onEmailsFetched.transform(newEmails);
set({
- emails: [...currentEmails, ...newEmails],
+ emails: [...currentEmails, ...enrichedNewEmails],
hasMoreEmails: result.hasMore,
totalEmails: result.total,
isLoadingMore: false,
@@ -1034,8 +1037,9 @@ export const useEmailStore = create((set, get) => ({
const currentEmails = get().emails;
const existingIds = new Set(currentEmails.map(e => e.id));
const newEmails = result.emails.filter(e => !existingIds.has(e.id));
+ const enrichedNewEmails = await emailHooks.onEmailsFetched.transform(newEmails);
set({
- emails: [...currentEmails, ...newEmails],
+ emails: [...currentEmails, ...enrichedNewEmails],
hasMoreEmails: result.hasMore,
totalEmails: result.total,
isLoadingMore: false,
@@ -1127,14 +1131,15 @@ export const useEmailStore = create((set, get) => ({
const existingIds = new Set(currentEmails.map(e => e.id));
const newEmails = annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId).filter((e: Email) => !existingIds.has(e.id));
+ const enrichedNewEmails = await emailHooks.onEmailsFetched.transform(newEmails);
set({
- emails: [...currentEmails, ...newEmails],
+ emails: [...currentEmails, ...enrichedNewEmails],
hasMoreEmails: result.hasMore,
totalEmails: result.total,
isLoadingMore: false
});
// Fetch full thread counts for newly loaded threads in the background
- if (newEmails.length > 0) {
+ if (enrichedNewEmails.length > 0) {
void get().fetchThreadEmailCounts(client);
}
} catch (error) {
@@ -1754,60 +1759,66 @@ export const useEmailStore = create((set, get) => ({
searchEmails: async (client, query) => {
set({ isLoading: true, error: null, searchQuery: query, emails: [], hasMoreEmails: false, totalEmails: 0 }); // Clear emails for loading state
try {
- const { isUnifiedView, unifiedRole, crossView } = get();
+ const { isUnifiedView, unifiedRole, crossView, selectedMailbox, searchFilters } = get();
const emailsPerPage = useSettingsStore.getState().emailsPerPage;
+ let result;
+ let accountId;
+ let unifiedErrors;
+
if (isUnifiedView && crossView) {
const includeGroup = useSettingsStore.getState().includeGroupInUnified;
const built = await buildUnifiedAccountClients({ includeGroup });
- const result = await searchCrossViewEmails(built, crossView, query, emailsPerPage, 0);
- const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query, filters: get().searchFilters });
- set({
- emails: result.emails,
- externalSearchResults: externals,
- hasMoreEmails: result.hasMore,
- totalEmails: result.total,
- isLoading: false,
- unifiedErrors: result.errors,
- });
- return;
- }
-
- if (isUnifiedView && unifiedRole) {
+ result = await searchCrossViewEmails(built, crossView, query, emailsPerPage, 0);
+ unifiedErrors = result.errors;
+
+ } else if (isUnifiedView && unifiedRole) {
const includeGroup = useSettingsStore.getState().includeGroupInUnified;
const built = await buildUnifiedAccountClients({ includeGroup });
- const result = await searchUnifiedEmails(built, unifiedRole, query, emailsPerPage, 0);
- const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query, filters: get().searchFilters });
- set({
- emails: result.emails,
- externalSearchResults: externals,
- hasMoreEmails: result.hasMore,
- totalEmails: result.total,
- isLoading: false,
- unifiedErrors: result.errors,
- });
- return;
+ result = await searchUnifiedEmails(built, unifiedRole, query, emailsPerPage, 0);
+ unifiedErrors = result.errors;
+
+ } else {
+ // Get the current mailbox to scope the search. In the All Mail view the
+ // search spans every folder of the account (no inMailbox constraint).
+ const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
+ const mailboxes = resolveActionMailboxes();
+ const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+ // Use originalId for shared mailboxes
+ const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
+ // Only pass accountId for shared mailboxes, not for primary account
+ accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
+
+ result = await resolveActionClient(client).searchEmails(query, jmapMailboxId, accountId, emailsPerPage, 0);
}
- // Get the current mailbox to scope the search. In the All Mail view the
- // search spans every folder of the account (no inMailbox constraint).
- const selectedMailbox = get().selectedMailbox;
- const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
- const mailboxes = resolveActionMailboxes();
- const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
- // Use originalId for shared mailboxes
- const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
- // Only pass accountId for shared mailboxes, not for primary account
- const accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
+ const hookEdit = await emailHooks.onSearchResults.transform({
+ newEmailIds: [] as string[],
+ result: result,
+ query: query,
+ filters: searchFilters
+ });
- const result = await resolveActionClient(client).searchEmails(query, jmapMailboxId, accountId, emailsPerPage, 0);
- const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query, filters: get().searchFilters });
+ result = hookEdit.result;
+ if (hookEdit.newEmailIds.length > 0) {
+ // in unified, accountId will be undefined and we will use the default.
+ const newEmails = await resolveActionClient(client).getSomeEmails(hookEdit.newEmailIds, accountId);
+ result.emails.push(...newEmails);
+ result.total += newEmails.length;
+ }
+
+ const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], {
+ query,
+ filters: searchFilters
+ });
+ result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
set({
emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
externalSearchResults: externals,
hasMoreEmails: result.hasMore,
totalEmails: result.total,
- isLoading: false
+ isLoading: false,
+ ...(unifiedErrors ? { unifiedErrors } : {})
});
} catch (error) {
set({
@@ -1841,60 +1852,64 @@ export const useEmailStore = create((set, get) => ({
try {
const emailsPerPage = useSettingsStore.getState().emailsPerPage;
+ let result;
+ let accountId;
+ let unifiedErrors;
if (isUnifiedView && crossView) {
const includeGroup = useSettingsStore.getState().includeGroupInUnified;
const built = await buildUnifiedAccountClients({ includeGroup });
- const result = await searchCrossViewEmails(built, crossView, searchQuery, emailsPerPage, 0);
- if (controller.signal.aborted) return;
- const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query: searchQuery, filters: searchFilters });
- set({
- emails: result.emails,
- externalSearchResults: externals,
- hasMoreEmails: result.hasMore,
- totalEmails: result.total,
- isLoading: false,
- unifiedErrors: result.errors,
- });
- return;
- }
+ result = await searchCrossViewEmails(built, crossView, searchQuery, emailsPerPage, 0);
+ unifiedErrors = result.errors;
- if (isUnifiedView && unifiedRole) {
+ } else if (isUnifiedView && unifiedRole) {
const includeGroup = useSettingsStore.getState().includeGroupInUnified;
const built = await buildUnifiedAccountClients({ includeGroup });
- const result = await advancedSearchUnifiedEmails(
+ result = await advancedSearchUnifiedEmails(
built,
unifiedRole,
(mailboxId) => buildJMAPFilter(searchQuery, searchFilters, mailboxId),
emailsPerPage,
0,
);
- if (controller.signal.aborted) return;
- const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query: searchQuery, filters: searchFilters });
- set({
- emails: result.emails,
- externalSearchResults: externals,
- hasMoreEmails: result.hasMore,
- totalEmails: result.total,
- isLoading: false,
- searchAbortController: null,
- unifiedErrors: result.errors,
- });
- return;
+ unifiedErrors = result.errors;
+
+ } else {
+ const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
+ const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
+ const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
+ accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
+
+ const filter = buildJMAPFilter(searchQuery, searchFilters, jmapMailboxId);
+ result = await resolveActionClient(client).advancedSearchEmails(filter, accountId, emailsPerPage, 0);
}
- const isAllMail = selectedMailbox === ALL_MAIL_MAILBOX_ID;
- const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
- const jmapMailboxId = isAllMail ? undefined : (mailbox?.originalId || selectedMailbox);
- const accountId = isAllMail ? undefined : (mailbox?.isShared ? mailbox.accountId : undefined);
-
- const filter = buildJMAPFilter(searchQuery, searchFilters, jmapMailboxId);
- const result = await resolveActionClient(client).advancedSearchEmails(filter, accountId, emailsPerPage, 0);
-
if (controller.signal.aborted) return;
- const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], { query: searchQuery, filters: searchFilters });
+ const hookEdit = await emailHooks.onSearchResults.transform({
+ newEmailIds: [] as string[],
+ result: result,
+ query: searchQuery,
+ filters: searchFilters
+ });
+ result = hookEdit.result;
+
+ if (hookEdit.newEmailIds.length > 0) {
+ const newEmails = await resolveActionClient(client).getSomeEmails(hookEdit.newEmailIds, accountId);
+ result.emails.push(...newEmails);
+ result.total += newEmails.length;
+ }
+
+ if (controller.signal.aborted) return;
+
+ const externals = await emailHooks.onProvideSearchResults.transform([] as ExternalSearchResult[], {
+ query: searchQuery,
+ filters: searchFilters
+ });
+
+ if (controller.signal.aborted) return;
+ result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
set({
emails: annotateScheduledEmails(result.emails, get().scheduledSubmissionByEmailId),
externalSearchResults: externals,
@@ -1902,6 +1917,7 @@ export const useEmailStore = create((set, get) => ({
totalEmails: result.total,
isLoading: false,
searchAbortController: null,
+ ...(unifiedErrors ? { unifiedErrors } : {})
});
} catch (error) {
if (controller.signal.aborted) return;
@@ -3284,6 +3300,7 @@ export const useEmailStore = create((set, get) => ({
try {
const emailsPerPage = useSettingsStore.getState().emailsPerPage;
const result = await client.getScheduledEmails(emailsPerPage, 0);
+ result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
const scheduledEmailIds = new Set(result.emails.map(email => email.id));
const scheduledSubmissionByEmailId = new Map(result.emails.map(email => [email.id, {
submissionId: email.emailSubmissionId,
@@ -3324,6 +3341,7 @@ export const useEmailStore = create((set, get) => ({
try {
const emailsPerPage = useSettingsStore.getState().emailsPerPage;
const result = await client.getScheduledEmails(emailsPerPage, scheduledNextPosition);
+ result.emails = await emailHooks.onEmailsFetched.transform(result.emails);
const merged = [...scheduledEmails, ...result.emails.filter(email => !scheduledEmails.some(existing => existing.id === email.id))];
const pendingUndoSend = get().pendingUndoSend;
set({
From a08a9e9ed3f2badf013b42ecadbd12a300362a2e Mon Sep 17 00:00:00 2001
From: Paulhenry Saux
Date: Mon, 13 Jul 2026 17:12:47 +0200
Subject: [PATCH 05/22] feat(plugins) : add new api api method :
webauthn.getOrCreate
---
lib/plugin-sandbox/host-api.ts | 114 +++++++++++++++++++++++++++++++++
lib/plugin-sandbox/protocol.ts | 1 +
lib/plugin-sandbox/runtime.tsx | 3 +
3 files changed, 118 insertions(+)
diff --git a/lib/plugin-sandbox/host-api.ts b/lib/plugin-sandbox/host-api.ts
index 6bcd2870..732c1029 100644
--- a/lib/plugin-sandbox/host-api.ts
+++ b/lib/plugin-sandbox/host-api.ts
@@ -22,6 +22,7 @@ const PRIVILEGED_ONLY_METHODS = new Set([
'jmap.fetchBlob',
'jmap.sendRaw',
'upfiles.get',
+ 'webauthn.getOrCreate',
'upfiles.set',
]);
@@ -47,6 +48,7 @@ const PERM_PER_METHOD: Record = {
// To just read, use jmap.fetchBlob.
'upfiles.get' : 'email:blob-write',
'upfiles.save' : 'email:blob-write',
+ 'webauthn.getOrCreate': 'crypto:full',
// admin
'admin.getConfig': 'admin:config',
'admin.getAllConfig': 'admin:config',
@@ -274,6 +276,117 @@ async function doJmapSendRaw(
);
}
+// ─── WebAuthn (privileged tier) ─────────────────────────────────────────────
+
+// This salt acts as a constant context identifier for key derivation.
+// While hardcoded, security is maintained because the WebAuthn PRF extension
+// mixes this salt with the device's unique, hardware-bound private key.
+// Changing this string will result in a completely different derived secret.
+const PRF_SALT = new TextEncoder().encode("bulwark-plugins-v1");
+
+/**
+ * Retrieves or creates a WebAuthn passkey and extracts its PRF secret.
+ * This secret is typically used as a local master encryption key.
+ */
+async function doGetOrCreatePRF(
+ masterCredentialIdBytes: number[] | undefined,
+ name?: string,
+ displayName?: string
+): Promise<{ credentialId: number[]; prfSecret: number[] } | string> {
+
+ // ─── CASE 1: Credential already exists (Authentication) ──────────────────
+ if (masterCredentialIdBytes && masterCredentialIdBytes.length > 0) {
+ const credentialId = new Uint8Array(masterCredentialIdBytes).buffer;
+
+ // Request an assertion (login) while evaluating the PRF salt
+ const assertion = await navigator.credentials.get({
+ publicKey: {
+ challenge: crypto.getRandomValues(new Uint8Array(32)),
+ allowCredentials: [{ type: "public-key", id: credentialId }],
+ userVerification: "required", // Required to ensure user presence & intent (biometrics/PIN)
+ extensions: { prf: { eval: { first: PRF_SALT } } } as any
+ }
+ }) as PublicKeyCredential;
+
+ // Extract the derived symmetric key from the authenticator's output
+ const outputs = assertion.getClientExtensionResults();
+ const prfSecret = (outputs as any).prf?.results?.first;
+ if (!prfSecret) return 'Cannot get PRF secret from existing credential.';
+
+ return {
+ credentialId: masterCredentialIdBytes,
+ prfSecret: Array.from(new Uint8Array(prfSecret))
+ };
+ }
+
+ // ─── CASE 2: No masterCredentialIdBytes passed, create a new key (Registration) ──────────
+ else if (name && displayName) {
+ // Create the new passkey credential
+ const credential = await navigator.credentials.create({
+ publicKey: {
+ challenge: crypto.getRandomValues(new Uint8Array(32)),
+ rp: { name: "Bulwark Webmail", id: window.location.hostname },
+ user: {
+ id: crypto.getRandomValues(new Uint8Array(16)),
+ name: name,
+ displayName: displayName
+ },
+ // Supported cryptographic algorithms
+ pubKeyCredParams: [
+ { type: "public-key" as const, alg: -7 }, // ES256 (Recommended)
+ { type: "public-key" as const, alg: -257 } // RS256 (Compatibility fallback)
+ ],
+ authenticatorSelection: {
+ authenticatorAttachment: "platform", // Forces the use of hardware/OS-bound passkeys (TouchID, Windows Hello, etc.)
+ userVerification: "required"
+ },
+ extensions: { prf: {} } as any // Request PRF extension support from the authenticator
+ }
+ }) as PublicKeyCredential;
+
+ const outputs = credential.getClientExtensionResults();
+
+ // Ensure the authenticator successfully enabled and supports the PRF extension
+ const isPrfEnabled = (outputs as any).prf?.enabled;
+ if (!isPrfEnabled) {
+ return 'The authenticator does not support or has rejected the PRF extension.';
+ }
+
+ // Note: Since many authenticators do not return the PRF evaluation results
+ // directly during creation, we immediately run an assertion (get) to fetch the initial secret.
+ const assertion = await navigator.credentials.get({
+ publicKey: {
+ challenge: crypto.getRandomValues(new Uint8Array(32)),
+ allowCredentials: [{
+ type: "public-key",
+ id: credential.rawId
+ }],
+ userVerification: "required",
+ extensions: {
+ prf: { eval: { first: PRF_SALT } }
+ } as any
+ }
+ }) as PublicKeyCredential;
+
+ const assertionOutputs = assertion.getClientExtensionResults();
+
+ const prfSecret = (assertionOutputs as any).prf?.results?.first;
+ if (!prfSecret) {
+ return 'Cannot get PRF secret from existing credential.';
+ }
+
+ return {
+ credentialId: Array.from(new Uint8Array(credential.rawId)),
+ prfSecret: Array.from(new Uint8Array(prfSecret))
+ };
+ }
+
+ // ─── CASE 3: Insufficient parameters provided ───────────────────────────
+ else {
+ throw new Error("Provide name and display name if you want to create a new PRF.");
+ }
+}
+
// ─── Uploaded files in IndexedDB (privileged tier) ──────────────────────────
async function getFile(fileID:string): Promise {
@@ -361,6 +474,7 @@ export async function dispatchApiCall(
);
case 'upfiles.get' : return getFile(args[0] as string);
case 'upfiles.save' : return saveFile(args[0] as string, args[1] as File);
+ case 'webauthn.getOrCreate': return doGetOrCreatePRF(args[0] as number[] | undefined, args[1] as string | undefined, args[2] as string | undefined);
case 'admin.getConfig': return adminGet(plugin.id, args[0] as string);
case 'admin.getAllConfig': return adminGetAll(plugin.id);
diff --git a/lib/plugin-sandbox/protocol.ts b/lib/plugin-sandbox/protocol.ts
index fe61555f..6db43b79 100644
--- a/lib/plugin-sandbox/protocol.ts
+++ b/lib/plugin-sandbox/protocol.ts
@@ -241,6 +241,7 @@ export const SANDBOX_PRIVILEGED_PATH = '/plugin-sandbox-privileged';
export const API_METHODS = [
'storage.get', 'storage.set', 'storage.remove', 'storage.keys',
'http.post', 'http.fetch',
+ 'webauthn.getOrCreate',
'jmap.fetchBlob', 'jmap.sendRaw',
'admin.getConfig', 'admin.getAllConfig', 'admin.setConfig', 'admin.deleteConfig',
'toast.success', 'toast.error', 'toast.info', 'toast.warning',
diff --git a/lib/plugin-sandbox/runtime.tsx b/lib/plugin-sandbox/runtime.tsx
index fa9343e5..e39a328d 100644
--- a/lib/plugin-sandbox/runtime.tsx
+++ b/lib/plugin-sandbox/runtime.tsx
@@ -165,6 +165,9 @@ function buildPluginApi(manifest: PluginManifest) {
version: manifest.version,
settings: { ...manifest.settings },
},
+ webauthn: {
+ getOrCreate: (masterCredentialIdBytes?: number[], name?: string, displayName?: string) => callApi('webauthn.getOrCreate', [masterCredentialIdBytes, name, displayName], 0)
+ },
storage: {
get: (key: string) => callApi('storage.get', [key]),
set: (key: string, value: unknown) => callApi('storage.set', [key, value]),
From a679d82cc3b2c09e2d4bf1bd9675058448d3fc7c Mon Sep 17 00:00:00 2001
From: Paulhenry Saux
Date: Mon, 13 Jul 2026 19:22:32 +0200
Subject: [PATCH 06/22] feat: add download file method for files generated by
plugin
---
lib/plugin-sandbox/host-api.ts | 23 +++++++++++++++++++++++
lib/plugin-sandbox/protocol.ts | 2 +-
lib/plugin-sandbox/runtime.tsx | 3 +++
lib/plugin-types.ts | 1 +
4 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/lib/plugin-sandbox/host-api.ts b/lib/plugin-sandbox/host-api.ts
index 732c1029..f9c84323 100644
--- a/lib/plugin-sandbox/host-api.ts
+++ b/lib/plugin-sandbox/host-api.ts
@@ -60,6 +60,7 @@ const PERM_PER_METHOD: Record = {
'ui.prompt': null,
'ui.rerenderEmail': null,
'ui.openExternalUrl': null,
+ 'ui.downloadFile': 'ui:download-file'
};
function hasPermission(plugin: InstalledPlugin, perm: Permission): boolean {
@@ -400,6 +401,24 @@ async function saveFile(formerFileID:string, file: File): Promise {
return fileId;
}
+// ─── Download files generated by the plugin. This is not user's files or attachments ──────────────────────────
+async function downloadFile(args: { content: string; filename: string; contentType?: string }): Promise {
+ const { content, filename, contentType = 'application/json' } = args;
+
+ try {
+ const url = URL.createObjectURL(new Blob([content], { type: contentType }));
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = filename;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ } catch (error) {
+ throw new Error(`Failed to download file: ${error}`);
+ }
+}
+
// ─── admin config (same as before) ────────────────────────────
async function adminGetAll(pluginId: string): Promise> {
@@ -547,6 +566,10 @@ export async function dispatchApiCall(
window.open(parsed.toString(), '_blank', 'noopener,noreferrer');
return undefined;
}
+ case 'ui.downloadFile': {
+ const opts = args[0] as { content: string; filename: string; contentType?: string };
+ return downloadFile(opts);
+ }
default:
throw new Error(`Unhandled method "${method}"`);
diff --git a/lib/plugin-sandbox/protocol.ts b/lib/plugin-sandbox/protocol.ts
index 6db43b79..1cb025fa 100644
--- a/lib/plugin-sandbox/protocol.ts
+++ b/lib/plugin-sandbox/protocol.ts
@@ -245,7 +245,7 @@ export const API_METHODS = [
'jmap.fetchBlob', 'jmap.sendRaw',
'admin.getConfig', 'admin.getAllConfig', 'admin.setConfig', 'admin.deleteConfig',
'toast.success', 'toast.error', 'toast.info', 'toast.warning',
- 'ui.confirm', 'ui.alert', 'ui.prompt', 'ui.rerenderEmail', 'ui.openExternalUrl',
+ 'ui.confirm', 'ui.alert', 'ui.prompt', 'ui.rerenderEmail', 'ui.openExternalUrl', 'ui.downloadFile'
] as const;
export type ApiMethod = (typeof API_METHODS)[number];
diff --git a/lib/plugin-sandbox/runtime.tsx b/lib/plugin-sandbox/runtime.tsx
index e39a328d..9e72b519 100644
--- a/lib/plugin-sandbox/runtime.tsx
+++ b/lib/plugin-sandbox/runtime.tsx
@@ -232,6 +232,9 @@ function buildPluginApi(manifest: PluginManifest) {
/** Opens an http/https URL in a new tab via host `window.open`. */
openExternalUrl: (url: string, target?: string) =>
callApi('ui.openExternalUrl', [url, target]) as Promise,
+ /** Downloads a file generated by the plugin. Not a user's file or attachment. */
+ downloadFile: (opts: { content: string; filename: string; contentType?: string }) =>
+ callApi('ui.downloadFile', [opts]) as Promise,
},
admin: {
getConfig: (key: string) => callApi('admin.getConfig', [key]),
diff --git a/lib/plugin-types.ts b/lib/plugin-types.ts
index 0245054c..32fcb573 100644
--- a/lib/plugin-types.ts
+++ b/lib/plugin-types.ts
@@ -925,6 +925,7 @@ export const ALL_PERMISSIONS = [
'http:post', 'http:fetch',
'ui:observe', 'ui:toolbar', 'ui:app-top-banner', 'ui:email-banner', 'ui:email-footer',
'ui:email-details',
+ 'ui:download-file',
'ui:composer-toolbar', 'ui:composer-sidebar',
'ui:sidebar-widget', 'ui:settings-section',
'ui:context-menu', 'ui:navigation-rail', 'ui:keyboard',
From b1f6758f98bb457ea7e7c1af7c8f593f6482c319 Mon Sep 17 00:00:00 2001
From: Paulhenry Saux
Date: Mon, 13 Jul 2026 19:31:52 +0200
Subject: [PATCH 07/22] fix: add ui:download-file permission to consent screen.
---
lib/plugin-sandbox/consent.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/lib/plugin-sandbox/consent.ts b/lib/plugin-sandbox/consent.ts
index 2a1f9871..d8941732 100644
--- a/lib/plugin-sandbox/consent.ts
+++ b/lib/plugin-sandbox/consent.ts
@@ -86,6 +86,7 @@ const PERMISSION_LABELS: Record = {
'http:post': { title: 'Call same-origin APIs', body: 'Make authenticated requests to the webmail backend on your behalf.' },
'http:fetch': { title: 'Talk to external services', body: 'Make uncredentialled requests to the third-party origins listed in the manifest.' },
'admin:config': { title: 'Read/write admin config', body: 'Access this plugin\'s admin-supplied configuration values.' },
+ 'ui:download-file': { title: 'Download files', body: 'Download custom files generated by the plugin.' },
};
export function describePermission(perm: string): { title: string; body: string } {
From 9072bf8470afb558d9672fcb0ac2481b60b39408 Mon Sep 17 00:00:00 2001
From: honzup <5564623+honzup@users.noreply.github.com>
Date: Sun, 12 Jul 2026 08:22:31 +0200
Subject: [PATCH 08/22] fix: keep sidebar tag counts in step with read/unread
changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Marking mail as read left the sidebar's tag unread counts untouched — the
folder counts cleared, but a tag went on showing "47 unread" in bold until
the page was reloaded.
tagCounts is fetched from the server (Email/query per $label keyword) rather
than derived from state, and no read/unread mutation refreshed or adjusted
it. The per-mailbox unreadEmails counters were kept current by a local delta;
tags simply had no equivalent.
Add applyTagCountReadDelta alongside the existing mailbox-counter helpers and
apply it wherever the affected emails are known locally: markAsRead,
batchMarkAsRead, and setEmailKeywordsLocal. Only a genuine $seen flip moves a
count, so re-marking a read email as read cannot drift it, and unread is
clamped at zero. A tag's total is never touched by a read-state change.
markMailboxAsRead is the exception and refetches instead: it is a server-side
bulk operation over an entire mailbox, so it also marks emails that were never
loaded into state.emails, and a local delta would leave the counts high.
---
.../__tests__/email-store-tag-counts.test.ts | 257 ++++++++++++++++++
stores/email-store.ts | 80 +++++-
2 files changed, 329 insertions(+), 8 deletions(-)
create mode 100644 stores/__tests__/email-store-tag-counts.test.ts
diff --git a/stores/__tests__/email-store-tag-counts.test.ts b/stores/__tests__/email-store-tag-counts.test.ts
new file mode 100644
index 00000000..07fb9eb2
--- /dev/null
+++ b/stores/__tests__/email-store-tag-counts.test.ts
@@ -0,0 +1,257 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useEmailStore } from '../email-store';
+import { useAuthStore } from '../auth-store';
+import { useSettingsStore } from '../settings-store';
+import type { Email, Mailbox } from '@/lib/jmap/types';
+import type { IJMAPClient } from '@/lib/jmap/client-interface';
+
+// Sidebar tag badges render from `tagCounts`, which is fetched from the server
+// (`fetchTagCounts` -> `client.getTagCounts`) rather than derived from
+// `state.emails`. Read/unread mutations therefore have to keep it in step the
+// same way they keep `mailboxes[].unreadEmails` in step, or the tag unread
+// count (and the bold tag name) stays stale until a full page reload.
+
+function makeMailbox(overrides: Partial = {}): Mailbox {
+ return {
+ id: 'inbox',
+ name: 'Inbox',
+ role: 'inbox',
+ sortOrder: 0,
+ totalEmails: 10,
+ unreadEmails: 5,
+ totalThreads: 10,
+ unreadThreads: 5,
+ myRights: {
+ mayReadItems: true,
+ mayAddItems: true,
+ mayRemoveItems: true,
+ maySetSeen: true,
+ maySetKeywords: true,
+ mayCreateChild: true,
+ mayRename: true,
+ mayDelete: true,
+ maySubmit: true,
+ },
+ isSubscribed: true,
+ isShared: false,
+ ...overrides,
+ };
+}
+
+function makeEmail(overrides: Partial = {}): Email {
+ return {
+ id: 'email-1',
+ threadId: 'thread-1',
+ subject: 'Hi',
+ receivedAt: new Date().toISOString(),
+ keywords: {},
+ mailboxIds: { inbox: true },
+ ...overrides,
+ } as Email;
+}
+
+function makeClient() {
+ return {
+ markAsRead: vi.fn().mockResolvedValue(undefined),
+ batchMarkAsRead: vi.fn().mockResolvedValue(undefined),
+ markMailboxAsRead: vi.fn().mockResolvedValue(3),
+ getTagCounts: vi.fn().mockResolvedValue({}),
+ getAccountId: vi.fn().mockReturnValue('account-a'),
+ } as unknown as IJMAPClient;
+}
+
+describe('email-store tag counts stay in step with read state', () => {
+ let client: IJMAPClient;
+
+ beforeEach(() => {
+ client = makeClient();
+
+ useAuthStore.setState({
+ activeAccountId: 'account-a',
+ getClientForAccount: (() => client) as never,
+ } as never);
+
+ useSettingsStore.setState({
+ emailKeywords: [
+ { id: 'ingsel', label: 'Ingsel', color: 'red' },
+ { id: 'work', label: 'Work', color: 'blue' },
+ ],
+ } as never);
+
+ useEmailStore.setState({
+ isUnifiedView: false,
+ viewingAccountId: null,
+ selectedMailbox: 'inbox',
+ mailboxes: [makeMailbox()],
+ accountMailboxes: {},
+ emails: [],
+ selectedEmail: null,
+ selectedEmailIds: new Set(),
+ processingReadStatus: new Set(),
+ threadEmailsCache: new Map(),
+ tagCounts: {
+ ingsel: { total: 1658, unread: 47 },
+ work: { total: 200, unread: 9 },
+ },
+ } as never);
+ });
+
+ it('decrements only the matching tag when a tagged email is marked read', async () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+ } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+ expect(useEmailStore.getState().tagCounts).toEqual({
+ ingsel: { total: 1658, unread: 46 },
+ work: { total: 200, unread: 9 },
+ });
+ });
+
+ it('increments the tag again when the email is marked unread', async () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true, $seen: true } })],
+ } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', false);
+
+ expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 48 });
+ });
+
+ it('updates both tags when an email carries two tags', async () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true, '$label:work': true } })],
+ } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+ expect(useEmailStore.getState().tagCounts).toEqual({
+ ingsel: { total: 1658, unread: 46 },
+ work: { total: 200, unread: 8 },
+ });
+ });
+
+ it('leaves tag counts alone for an untagged email', async () => {
+ useEmailStore.setState({ emails: [makeEmail({ keywords: {} })] } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+ expect(useEmailStore.getState().tagCounts).toEqual({
+ ingsel: { total: 1658, unread: 47 },
+ work: { total: 200, unread: 9 },
+ });
+ });
+
+ it('does not double-decrement when an already-read email is marked read', async () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true, $seen: true } })],
+ } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+ expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 47 });
+ });
+
+ it('never drives a tag unread count negative', async () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+ tagCounts: { ingsel: { total: 3, unread: 0 } },
+ } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', true);
+
+ expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 3, unread: 0 });
+ });
+
+ it('never alters `total` on a read-state change', async () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+ } as never);
+
+ await useEmailStore.getState().markAsRead(client, 'email-1', true);
+ await useEmailStore.getState().markAsRead(client, 'email-1', false);
+
+ expect(useEmailStore.getState().tagCounts.ingsel.total).toBe(1658);
+ expect(useEmailStore.getState().tagCounts.work.total).toBe(200);
+ });
+
+ describe('batchMarkAsRead', () => {
+ it('applies the delta once per tag per changed email', async () => {
+ useEmailStore.setState({
+ emails: [
+ makeEmail({ id: 'e1', keywords: { '$label:ingsel': true } }),
+ makeEmail({ id: 'e2', keywords: { '$label:ingsel': true, '$label:work': true } }),
+ // Already read: must not contribute a delta.
+ makeEmail({ id: 'e3', keywords: { '$label:work': true, $seen: true } }),
+ // Untagged: must not contribute a delta.
+ makeEmail({ id: 'e4', keywords: {} }),
+ ],
+ selectedEmailIds: new Set(['e1', 'e2', 'e3', 'e4']),
+ } as never);
+
+ await useEmailStore.getState().batchMarkAsRead(client, true);
+
+ expect(useEmailStore.getState().tagCounts).toEqual({
+ ingsel: { total: 1658, unread: 45 },
+ work: { total: 200, unread: 8 },
+ });
+ });
+ });
+
+ describe('markMailboxAsRead', () => {
+ it('refetches tag counts from the server rather than applying a local delta', async () => {
+ (client.getTagCounts as ReturnType).mockResolvedValue({
+ ingsel: { total: 1658, unread: 0 },
+ work: { total: 200, unread: 4 },
+ });
+
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+ } as never);
+
+ const count = await useEmailStore.getState().markMailboxAsRead(client, 'inbox');
+ expect(count).toBe(3);
+
+ // The server bulk-marks emails that are not in `state.emails`, so a local
+ // delta would under-count: it has to refetch.
+ expect(client.getTagCounts).toHaveBeenCalledWith(['ingsel', 'work']);
+
+ await vi.waitFor(() => {
+ expect(useEmailStore.getState().tagCounts).toEqual({
+ ingsel: { total: 1658, unread: 0 },
+ work: { total: 200, unread: 4 },
+ });
+ });
+ });
+ });
+
+ describe('setEmailKeywordsLocal', () => {
+ it('adjusts tag unread counts when the local keyword patch flips $seen', () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+ } as never);
+
+ useEmailStore.getState().setEmailKeywordsLocal('email-1', {
+ '$label:ingsel': true,
+ $seen: true,
+ });
+
+ expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 46 });
+ });
+
+ it('leaves tag unread counts alone when $seen is unchanged', () => {
+ useEmailStore.setState({
+ emails: [makeEmail({ keywords: { '$label:ingsel': true } })],
+ } as never);
+
+ // Pin toggle: labels/pin change, read state does not.
+ useEmailStore.getState().setEmailKeywordsLocal('email-1', {
+ '$label:ingsel': true,
+ $pinned: true,
+ });
+
+ expect(useEmailStore.getState().tagCounts.ingsel).toEqual({ total: 1658, unread: 47 });
+ });
+ });
+});
diff --git a/stores/email-store.ts b/stores/email-store.ts
index d44d0414..c2440711 100644
--- a/stores/email-store.ts
+++ b/stores/email-store.ts
@@ -584,6 +584,37 @@ function applyBatchMailboxCounterUpdate(
return { mailboxes, accountMailboxes };
}
+// Sidebar tag badges render from `tagCounts`, which is *fetched from the server*
+// (`fetchTagCounts` -> `getTagCounts`) rather than derived from `state.emails`.
+// So a read/unread mutation has to keep it in step locally, exactly as it does
+// for `mailboxes[].unreadEmails` - otherwise the tag unread count (and the bold
+// tag name) stays stale until a full page reload.
+//
+// `changes` carries one entry per email whose read state *actually changed*
+// (callers already compute that), with delta -1 when it became read and +1 when
+// it became unread. Only `unread` moves: read state never changes tag
+// membership, so `total` is left alone.
+function applyTagCountReadDelta(
+ tagCounts: Record,
+ changes: Array<{ keywords?: Record; delta: number }>,
+): Record {
+ const keywordIds = useSettingsStore.getState().emailKeywords.map(k => k.id);
+ if (keywordIds.length === 0) return tagCounts;
+
+ let next: Record | null = null;
+ for (const { keywords, delta } of changes) {
+ if (!keywords || delta === 0) continue;
+ for (const id of keywordIds) {
+ if (!keywords[`$label:${id}`]) continue;
+ const current = (next ?? tagCounts)[id];
+ if (!current) continue; // Tag not in the fetched counts yet; nothing to adjust.
+ next = next ?? { ...tagCounts };
+ next[id] = { total: current.total, unread: Math.max(0, current.unread + delta) };
+ }
+ }
+ return next ?? tagCounts;
+}
+
// Per-mailbox counter map (for applyBatchMailboxCounterUpdate) for removing a
// group of emails from a folder: decrement total (and unread for unseen) for
// each group email that lives in the mailbox.
@@ -1421,6 +1452,11 @@ export const useEmailStore = create((set, get) => ({
? { ...state.selectedEmail, keywords: { ...state.selectedEmail.keywords, $seen: read } }
: state.selectedEmail,
...mailboxPatch,
+ // Same delta, applied to every tag this email carries, so the sidebar
+ // tag badges track the folder counters instead of going stale.
+ tagCounts: applyTagCountReadDelta(state.tagCounts, [
+ { keywords: emailInState.keywords, delta },
+ ]),
processingReadStatus: newProcessingSet,
// Also update threadEmailsCache so expanded dropdowns reflect the change
threadEmailsCache: (() => {
@@ -1976,14 +2012,24 @@ export const useEmailStore = create((set, get) => ({
},
setEmailKeywordsLocal: (emailId, keywords) => {
- set((state) => ({
- emails: state.emails.map(e =>
- e.id === emailId ? { ...e, keywords: { ...keywords } } : e
- ),
- selectedEmail: state.selectedEmail?.id === emailId
- ? { ...state.selectedEmail, keywords: { ...keywords } }
- : state.selectedEmail,
- }));
+ set((state) => {
+ // This patch replaces the whole keyword map, so it can flip $seen as well
+ // as labels. Only a genuine read-state change moves the tag unread counts.
+ const previous = state.emails.find(e => e.id === emailId) ?? state.selectedEmail;
+ const wasRead = previous?.keywords?.$seen ?? false;
+ const isRead = keywords.$seen ?? false;
+ const delta = wasRead === isRead ? 0 : (isRead ? -1 : 1);
+
+ return {
+ emails: state.emails.map(e =>
+ e.id === emailId ? { ...e, keywords: { ...keywords } } : e
+ ),
+ selectedEmail: state.selectedEmail?.id === emailId
+ ? { ...state.selectedEmail, keywords: { ...keywords } }
+ : state.selectedEmail,
+ tagCounts: applyTagCountReadDelta(state.tagCounts, [{ keywords, delta }]),
+ };
+ });
},
// Batch operations
@@ -2041,9 +2087,19 @@ export const useEmailStore = create((set, get) => ({
};
});
+ // Tag badges follow the same delta as the folder counters, counting only
+ // the emails whose read state actually changed.
+ const tagCounts = applyTagCountReadDelta(
+ get().tagCounts,
+ affectedEmails
+ .filter(email => (email.keywords?.$seen ?? false) !== read)
+ .map(email => ({ keywords: email.keywords, delta: read ? -1 : 1 })),
+ );
+
set({
emails: updatedEmails,
...mailboxPatch,
+ tagCounts,
selectedEmailIds: new Set(),
isLoading: false
});
@@ -3158,6 +3214,14 @@ export const useEmailStore = create((set, get) => ({
),
}));
+ // Tag counts are refetched here rather than adjusted with a local delta
+ // (as markAsRead/batchMarkAsRead do). This is a server-side bulk operation
+ // over the *whole* mailbox, so it also marks emails that were never loaded
+ // into `state.emails` - a local delta would only see the loaded page and
+ // would leave the tag counts drifting high. Fire-and-forget: the folder
+ // counters above already update instantly.
+ void get().fetchTagCounts(client);
+
return count;
} catch (error) {
set({ error: error instanceof Error ? error.message : 'Failed to mark folder as read' });
From 37152504b428f6f28f320cf5cd9f0c266da95e4e Mon Sep 17 00:00:00 2001
From: Stefan Hildebrandt <695494+hildebrandttk@users.noreply.github.com>
Date: Sat, 11 Jul 2026 18:57:19 +0200
Subject: [PATCH 09/22] feat(composer): drag-to-reorder To/Cc/Bcc recipient
chips (#593)
Recipient chips could already be dragged between the To/Cc/Bcc fields, but a
drop always appended and same-field drops were a no-op, so recipients could not
be rearranged without deleting and re-adding them.
Add positional drag-and-drop: while dragging a chip, an insertion caret shows
the gap it would land in (based on which half of the hovered chip the pointer
is over, mirrored for RTL); dropping inserts it there.
- same-field drop reorders the chip locally (via onChipsChange), using the
source index carried in the drag payload (fromIndex) and adjusting for the
removal shift; dropping onto its own position is a no-op;
- cross-field drop inserts at the drop position: handleMoveChip gained an
optional toIndex (omitted = append, e.g. dropping onto a hidden Cc/Bcc
button, preserving existing behaviour);
- per-chip onDragOver computes the target gap; the container handles the
trailing gap (past the last chip / over the input).
No new user-facing strings (the caret is purely visual), so no locale changes.
Tests (components/email/__tests__/recipient-chip-drag.test.tsx): reorder to end
/ front, self-drop no-op, cross-field positional insert, and caret visibility.
Also add the missing findComposeIdentityId export to the reply-identity mock in
the recipient drag/paste suites so mounts in compose mode.
---
.../__tests__/recipient-chip-drag.test.tsx | 121 +++++++++++++++++-
components/email/email-composer.tsx | 111 ++++++++++++++--
2 files changed, 216 insertions(+), 16 deletions(-)
diff --git a/components/email/__tests__/recipient-chip-drag.test.tsx b/components/email/__tests__/recipient-chip-drag.test.tsx
index 68f90dec..f3138b38 100644
--- a/components/email/__tests__/recipient-chip-drag.test.tsx
+++ b/components/email/__tests__/recipient-chip-drag.test.tsx
@@ -230,7 +230,7 @@ describe('RecipientChipInput drag and drop', () => {
fireEvent.dragStart(chipSpan, { dataTransfer: dt });
const payload = JSON.parse(dt.getData('application/x-recipient-chip'));
- expect(payload).toEqual({ recipient: { email: 'alice@example.com' }, fromField: 'to' });
+ expect(payload).toEqual({ recipient: { email: 'alice@example.com' }, fromField: 'to', fromIndex: 0 });
});
it('keeps a display name with a comma in a single chip (array model)', async () => {
@@ -244,7 +244,7 @@ describe('RecipientChipInput drag and drop', () => {
const dt = new MockDataTransfer();
fireEvent.dragStart(chipSpan, { dataTransfer: dt });
const payload = JSON.parse(dt.getData('application/x-recipient-chip'));
- expect(payload).toEqual({ recipient: { name: 'Doo, John', email: 'john@doo.org' }, fromField: 'to' });
+ expect(payload).toEqual({ recipient: { name: 'Doo, John', email: 'john@doo.org' }, fromField: 'to', fromIndex: 0 });
});
it('onDragEnd clears the opacity class on the chip', async () => {
@@ -343,4 +343,121 @@ describe('RecipientChipInput drag and drop', () => {
const ccLabel = await screen.findByText('cc_label');
expect(ccLabel).toBeInTheDocument();
});
+
+ // ─── Reordering within / across fields (#593) ─────────────────────────────────
+ // jsdom ignores `clientX` in fireEvent's init for drag events (it's a
+ // read-only MouseEvent getter) and gives every element a zero-size rect at
+ // (0,0). So we dispatch events with `clientX` forced via defineProperty; with
+ // the rect midpoint at 0, clientX>0 lands AFTER the hovered chip, <0 BEFORE.
+
+ const THREE = { ...BASE_DATA, to: 'alice@example.com, bob@example.com, carol@example.com, ' };
+
+ const chipByText = async (text: string) =>
+ (await screen.findByText(text)).closest('[draggable]') as HTMLElement;
+
+ /** Dispatch a drag event with a real clientX (fireEvent init drops it). */
+ const fireDnd = (type: 'dragover' | 'drop', el: HTMLElement, dt: MockDataTransfer, clientX: number) => {
+ const e = new Event(type, { bubbles: true, cancelable: true });
+ Object.defineProperty(e, 'clientX', { value: clientX });
+ Object.defineProperty(e, 'dataTransfer', { value: dt });
+ act(() => { fireEvent(el, e); });
+ };
+ const BEFORE = -100;
+ const AFTER = 100;
+
+ /** Ordered chip labels of the field-container that holds `anchorText`. */
+ const orderIn = (anchorText: string) => {
+ const containers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
+ const c = containers.find(el =>
+ Array.from(el.querySelectorAll('[draggable]')).some(d => d.textContent?.includes(anchorText))
+ ) as HTMLElement;
+ return Array.from(c.querySelectorAll('[draggable]')).map(el => el.textContent?.trim() ?? '');
+ };
+
+ /** All draggable chips (across fields) whose label contains `text`. */
+ const draggableChipsWith = (text: string) =>
+ Array.from(document.querySelectorAll('[draggable]')).filter(el => el.textContent?.includes(text));
+
+ it('reorders a chip to the end of the same field (drop after the last chip)', async () => {
+ render((null);
+ // Gap (0..chips.length) a dragged chip would drop into; drives the insertion
+ // caret and positional drop for reordering (#593). null when not dragging.
+ const [dropIndex, setDropIndex] = useState(null);
const editInputRef = useRef(null);
// Focus edit input when editing starts
@@ -3060,27 +3072,81 @@ function RecipientChipInput({
onAutoBlur(e, field);
};
+ const isChipDrag = (e: React.DragEvent) =>
+ e.dataTransfer.types.includes('application/x-recipient-chip');
+
+ // Dragging over empty container space (past the last chip / over the input)
+ // targets the end of the list.
const handleContainerDragOver = (e: React.DragEvent) => {
- if (!e.dataTransfer.types.includes('application/x-recipient-chip')) return;
+ if (!isChipDrag(e)) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
setIsDragOver(true);
+ setDropIndex(chips.length);
};
const handleContainerDragLeave = (e: React.DragEvent) => {
if (!e.currentTarget.contains(e.relatedTarget as Node)) {
setIsDragOver(false);
+ setDropIndex(null);
+ }
+ };
+
+ // Dragging over a chip picks the gap before or after it based on which half
+ // the pointer is in (mirrored for RTL). stopPropagation keeps the container
+ // handler from overriding this finer target.
+ const handleChipDragOver = (e: React.DragEvent, index: number) => {
+ if (!isChipDrag(e)) return;
+ e.preventDefault();
+ e.stopPropagation();
+ e.dataTransfer.dropEffect = 'move';
+ const rect = e.currentTarget.getBoundingClientRect();
+ const rtl = typeof window !== 'undefined' &&
+ getComputedStyle(e.currentTarget as Element).direction === 'rtl';
+ const past = rtl
+ ? e.clientX < rect.left + rect.width / 2
+ : e.clientX > rect.left + rect.width / 2;
+ setIsDragOver(true);
+ setDropIndex(past ? index + 1 : index);
+ };
+
+ // Insert the dragged chip at `target`. Same-field is a local reorder;
+ // cross-field routes through onMoveChip with the destination index (#593).
+ const performDrop = (e: React.DragEvent, target: number) => {
+ e.preventDefault();
+ setIsDragOver(false);
+ setDropIndex(null);
+ setDraggingIndex(null);
+ const raw = e.dataTransfer.getData('application/x-recipient-chip');
+ if (!raw) return;
+ let payload: { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc'; fromIndex?: number };
+ try {
+ payload = JSON.parse(raw);
+ } catch {
+ return;
+ }
+ const { recipient, fromField, fromIndex } = payload;
+ const to = Math.max(0, Math.min(target, chips.length));
+
+ if (fromField === field) {
+ const from = typeof fromIndex === 'number'
+ ? fromIndex
+ : chips.findIndex(c => c.email === recipient.email && (c.name ?? '') === (recipient.name ?? ''));
+ if (from < 0 || from >= chips.length) return;
+ // Removing the source before `to` shifts the target left by one.
+ const insertAt = to > from ? to - 1 : to;
+ if (insertAt === from) return; // dropped onto its own position
+ const next = [...chips];
+ const [moved] = next.splice(from, 1);
+ next.splice(insertAt, 0, moved);
+ onChipsChange(next);
+ } else {
+ onMoveChip(recipient, fromField, field, to);
}
};
const handleContainerDrop = (e: React.DragEvent) => {
- e.preventDefault();
- setIsDragOver(false);
- const raw = e.dataTransfer.getData('application/x-recipient-chip');
- if (!raw) return;
- const { recipient, fromField } = JSON.parse(raw) as { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc' };
- if (fromField === field) return;
- onMoveChip(recipient, fromField, field);
+ performDrop(e, dropIndex ?? chips.length);
};
return (
@@ -3100,20 +3166,29 @@ function RecipientChipInput({
const isEditing = editingChip?.index === i;
const chipDisplay = formatChipDisplay(chip);
return (
+
+ {dropIndex === i && (
+ {
e.stopPropagation();
e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('application/x-recipient-chip', JSON.stringify({ recipient: chip, fromField: field }));
+ e.dataTransfer.setData('application/x-recipient-chip', JSON.stringify({ recipient: chip, fromField: field, fromIndex: i }));
// Show the address while dragging, matching the email-list drag preview.
const dragPreview = createChipDragPreview(chip.group ? chipDisplay : chip.email);
e.dataTransfer.setDragImage(dragPreview, 0, 0);
requestAnimationFrame(() => dragPreview.remove());
setDraggingIndex(i);
}}
- onDragEnd={() => setDraggingIndex(null)}
+ onDragEnd={() => { setDraggingIndex(null); setDropIndex(null); }}
+ onDragOver={(e) => handleChipDragOver(e, i)}
+ onDrop={(e) => { e.stopPropagation(); performDrop(e, dropIndex ?? i); }}
className={cn(
"inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-sm border border-border transition-colors",
isEditing
@@ -3179,8 +3254,16 @@ function RecipientChipInput({
)}
+
);
})}
+ {dropIndex === chips.length && chips.length > 0 && (
+
Date: Sun, 12 Jul 2026 18:13:37 +0200
Subject: [PATCH 11/22] fix: add new plugin api methods introduced by #586 to
protocol plugin sandbox
---
lib/plugin-sandbox/protocol.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/lib/plugin-sandbox/protocol.ts b/lib/plugin-sandbox/protocol.ts
index 1cb025fa..33a11f21 100644
--- a/lib/plugin-sandbox/protocol.ts
+++ b/lib/plugin-sandbox/protocol.ts
@@ -243,6 +243,7 @@ export const API_METHODS = [
'http.post', 'http.fetch',
'webauthn.getOrCreate',
'jmap.fetchBlob', 'jmap.sendRaw',
+ 'upfiles.get', 'upfiles.save',
'admin.getConfig', 'admin.getAllConfig', 'admin.setConfig', 'admin.deleteConfig',
'toast.success', 'toast.error', 'toast.info', 'toast.warning',
'ui.confirm', 'ui.alert', 'ui.prompt', 'ui.rerenderEmail', 'ui.openExternalUrl', 'ui.downloadFile'
From 01e5cd69cf19b9170c1aa256635feb7686ca6472 Mon Sep 17 00:00:00 2001
From: Stefan Hildebrandt <695494+hildebrandttk@users.noreply.github.com>
Date: Sat, 27 Jun 2026 13:07:48 +0200
Subject: [PATCH 12/22] fix(identity): sync default sender identity per account
(#507)
The default sender identity (`preferredPrimaryId`) lived only in the
browser-local `identity-storage` store and was never written to the synced
settings, so the choice was lost on clearing site data / switching browsers and
never appeared in exported settings.
Persist it in the synced settings store, keyed **per account**
(`preferredIdentityIds: Record`), mirroring the existing
per-account `allMailFolderIds`. Per-account keying is required because JMAP
identity ids are account-scoped and would otherwise collide across accounts /
the unified mailbox.
This supersedes the earlier username-keyed fix that had landed on main: the
username-keyed map, `loadIdentities()` fallback write, and the
`applyPreferredIdentityOrdering` store action (plus its settings-store hook)
are removed so a single account-keyed mechanism remains.
- settings-store: `preferredIdentityIds` (accountId -> identityId) in state,
defaults, export, import (non-record guard), rehydrate coercion, v6 migration.
- auth-store: `applyPreferredIdentity(accountId?)` reorders the active account's
identities once synced settings load, and performs the one-time migration of
the pre-#507 browser-local default into the synced map (keyed by accountId).
Invoked from every `loadFromServer().finally()` (login / OAuth / SSO / switch
/ restore). `loadIdentities()` now only applies the local fallback ordering.
- identity-manager-modal: the star action writes the choice by `activeAccountId`.
- identity-store: `preferredPrimaryId` kept as a local (sync-off) fallback.
- tests: per-account independence, export/import round-trip, import guard, and
applyPreferredIdentity reorder / active-account gating / local-default
migration.
---
.../identity/identity-manager-modal.tsx | 14 ++-
.../apply-preferred-identity.test.ts | 90 +++++++++++++++
.../settings-store-preferred-identity.test.ts | 58 ++++++++++
stores/auth-store.ts | 104 +++++++++++-------
stores/identity-store.ts | 9 +-
stores/settings-store.ts | 42 ++++---
6 files changed, 249 insertions(+), 68 deletions(-)
create mode 100644 stores/__tests__/apply-preferred-identity.test.ts
create mode 100644 stores/__tests__/settings-store-preferred-identity.test.ts
diff --git a/components/identity/identity-manager-modal.tsx b/components/identity/identity-manager-modal.tsx
index 521ac5f1..5f42a563 100644
--- a/components/identity/identity-manager-modal.tsx
+++ b/components/identity/identity-manager-modal.tsx
@@ -9,6 +9,7 @@ import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { IdentityForm } from './identity-form';
import { useIdentityStore } from '@/stores/identity-store';
import { useAuthStore } from '@/stores/auth-store';
+import { useAccountStore } from '@/stores/account-store';
import { useSettingsStore } from '@/stores/settings-store';
function useSyncIdentities() {
@@ -207,15 +208,16 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
const handleSetPrimary = useCallback((identity: Identity) => {
setPreferredPrimary(identity.id);
- // Persist to the synced settings (keyed by username, matching how
- // loadIdentities reads it back) so the choice survives a new browser /
- // cleared site data and reaches other devices (#507).
- const username = useAuthStore.getState().username || '';
- if (username) {
+ // Persist the choice per account in the synced settings store so it
+ // survives clearing site data, follows the user across devices, and shows
+ // up in exported settings (issue #507). JMAP identity ids are account-
+ // scoped, so the default is keyed by the active account.
+ const activeAccountId = useAccountStore.getState().activeAccountId;
+ if (activeAccountId) {
const current = useSettingsStore.getState().preferredIdentityIds;
useSettingsStore.getState().updateSetting('preferredIdentityIds', {
...current,
- [username]: identity.id,
+ [activeAccountId]: identity.id,
});
}
// Re-sort: move the preferred identity to the front
diff --git a/stores/__tests__/apply-preferred-identity.test.ts b/stores/__tests__/apply-preferred-identity.test.ts
new file mode 100644
index 00000000..6443a65f
--- /dev/null
+++ b/stores/__tests__/apply-preferred-identity.test.ts
@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { applyPreferredIdentity, useAuthStore } from '../auth-store';
+import { useIdentityStore } from '../identity-store';
+import { useAccountStore } from '../account-store';
+import { useSettingsStore } from '../settings-store';
+import type { Identity } from '@/lib/jmap/types';
+
+const makeIdentity = (overrides: Partial = {}): Identity => ({
+ id: 'id-1',
+ name: 'Test User',
+ email: 'test@example.com',
+ mayDelete: true,
+ ...overrides,
+});
+
+const IDS = [
+ makeIdentity({ id: 'id-1', name: 'Alice', email: 'alice@example.com' }),
+ makeIdentity({ id: 'id-2', name: 'Bob', email: 'bob@example.com' }),
+ makeIdentity({ id: 'id-3', name: 'Carol', email: 'carol@example.com' }),
+];
+
+/**
+ * applyPreferredIdentity() is the single mechanism that honours the synced,
+ * per-account default sender identity (#507). These tests drive the real
+ * zustand stores directly (as the other auth-store tests do).
+ */
+describe('applyPreferredIdentity (issue #507)', () => {
+ beforeEach(() => {
+ useIdentityStore.setState({ identities: [...IDS], preferredPrimaryId: null });
+ useAuthStore.setState({ identities: [...IDS], primaryIdentity: IDS[0] });
+ useAccountStore.setState({ activeAccountId: 'acc-1' });
+ useSettingsStore.setState({ preferredIdentityIds: {} });
+ });
+
+ it('reorders the active account so the synced preferred identity is primary', () => {
+ useSettingsStore.setState({ preferredIdentityIds: { 'acc-1': 'id-3' } });
+
+ applyPreferredIdentity('acc-1');
+
+ expect(useAuthStore.getState().identities.map((i) => i.id)).toEqual(['id-3', 'id-1', 'id-2']);
+ expect(useAuthStore.getState().primaryIdentity?.id).toBe('id-3');
+ expect(useIdentityStore.getState().preferredPrimaryId).toBe('id-3');
+ });
+
+ it('defaults to the active account when no accountId is passed', () => {
+ useSettingsStore.setState({ preferredIdentityIds: { 'acc-1': 'id-2' } });
+
+ applyPreferredIdentity();
+
+ expect(useAuthStore.getState().identities[0].id).toBe('id-2');
+ });
+
+ it('is a no-op when the target is not the active account', () => {
+ useSettingsStore.setState({ preferredIdentityIds: { 'acc-2': 'id-3' } });
+
+ applyPreferredIdentity('acc-2');
+
+ // active account's live ordering must be untouched
+ expect(useAuthStore.getState().identities.map((i) => i.id)).toEqual(['id-1', 'id-2', 'id-3']);
+ });
+
+ it('is a no-op when the account has no synced default and no local fallback', () => {
+ applyPreferredIdentity('acc-1');
+
+ expect(useAuthStore.getState().identities.map((i) => i.id)).toEqual(['id-1', 'id-2', 'id-3']);
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({});
+ });
+
+ it('migrates the pre-#507 browser-local default into the synced map, keyed by accountId', () => {
+ // No synced entry, but a local (identity-storage) preferred primary exists.
+ useIdentityStore.setState({ preferredPrimaryId: 'id-2' });
+
+ applyPreferredIdentity('acc-1');
+
+ // adopted, persisted per account, and applied to the live ordering
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acc-1': 'id-2' });
+ expect(useAuthStore.getState().identities[0].id).toBe('id-2');
+ });
+
+ it('prefers the synced value over the local fallback', () => {
+ useIdentityStore.setState({ preferredPrimaryId: 'id-2' });
+ useSettingsStore.setState({ preferredIdentityIds: { 'acc-1': 'id-3' } });
+
+ applyPreferredIdentity('acc-1');
+
+ expect(useAuthStore.getState().identities[0].id).toBe('id-3');
+ // the synced value is not overwritten by the migration
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acc-1': 'id-3' });
+ });
+});
diff --git a/stores/__tests__/settings-store-preferred-identity.test.ts b/stores/__tests__/settings-store-preferred-identity.test.ts
new file mode 100644
index 00000000..230efad1
--- /dev/null
+++ b/stores/__tests__/settings-store-preferred-identity.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useSettingsStore } from '../settings-store';
+
+describe('settings-store per-account preferredIdentityIds (issue #507)', () => {
+ beforeEach(() => {
+ useSettingsStore.setState({ preferredIdentityIds: {} });
+ });
+
+ it('defaults to an empty record (no account has a synced default)', () => {
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({});
+ });
+
+ it('keeps each account default independent', () => {
+ useSettingsStore.setState({
+ preferredIdentityIds: { 'acct-1': 'b', 'acct-2': 'c' },
+ });
+ const map = useSettingsStore.getState().preferredIdentityIds;
+ expect(map['acct-1']).toBe('b');
+ expect(map['acct-2']).toBe('c');
+ expect(map['acct-3']).toBeUndefined();
+ });
+
+ it('round-trips through export -> import so the choice survives clearing site data', () => {
+ useSettingsStore.setState({ preferredIdentityIds: { 'acct-1': 'b' } });
+ const json = useSettingsStore.getState().exportSettings();
+ // Appears in exported JSON (issue #507 acceptance criterion).
+ expect(JSON.parse(json).preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+
+ // Simulate a fresh browser: clear, then import the exported settings.
+ useSettingsStore.setState({ preferredIdentityIds: {} });
+ expect(useSettingsStore.getState().importSettings(json)).toBe(true);
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+ });
+
+ describe('importSettings non-record guard', () => {
+ it('ignores a legacy array shape', () => {
+ useSettingsStore.setState({ preferredIdentityIds: { 'acct-1': 'b' } });
+ const ok = useSettingsStore.getState().importSettings(
+ JSON.stringify({ preferredIdentityIds: ['b'] }),
+ );
+ expect(ok).toBe(true);
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+ });
+
+ it('ignores a null value', () => {
+ useSettingsStore.setState({ preferredIdentityIds: { 'acct-1': 'b' } });
+ useSettingsStore.getState().importSettings(JSON.stringify({ preferredIdentityIds: null }));
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-1': 'b' });
+ });
+
+ it('accepts a proper per-account record', () => {
+ useSettingsStore.getState().importSettings(
+ JSON.stringify({ preferredIdentityIds: { 'acct-9': 'a' } }),
+ );
+ expect(useSettingsStore.getState().preferredIdentityIds).toEqual({ 'acct-9': 'a' });
+ });
+ });
+});
diff --git a/stores/auth-store.ts b/stores/auth-store.ts
index 85b39ec6..c117dffc 100644
--- a/stores/auth-store.ts
+++ b/stores/auth-store.ts
@@ -49,7 +49,6 @@ interface AuthState {
clearError: () => void;
syncIdentities: () => void;
refreshIdentities: () => Promise;
- applyPreferredIdentityOrdering: () => void;
getClientForAccount: (accountId: string) => JMAPClient | undefined;
getAllConnectedClients: () => Map;
}
@@ -198,25 +197,16 @@ function sortIdentities(rawIdentities: Identity[], username: string): Identity[]
}
function loadIdentities(rawIdentities: Identity[], username: string): { identities: Identity[]; primaryIdentity: Identity | null } {
- const settings = useSettingsStore.getState();
- const preferredMap = settings.preferredIdentityIds || {};
- let preferredPrimaryId = preferredMap[username] ?? null;
-
- // One-time migration: builds before #507 stored the preferred identity only
- // in the browser-local identity-storage (never synced). If the synced
- // settings have no entry for this account yet, adopt that legacy local value
- // and write it into the synced settings so it persists across devices.
- if (preferredPrimaryId == null) {
- const legacy = useIdentityStore.getState().preferredPrimaryId;
- if (legacy) {
- preferredPrimaryId = legacy;
- settings.updateSetting('preferredIdentityIds', { ...preferredMap, [username]: legacy });
- }
- }
+ // The synced per-account default sender identity (#507) is keyed by
+ // AccountEntry.id and re-applied by applyPreferredIdentity() once
+ // loadFromServer resolves (the accountId isn't known here). At load time we
+ // only honour the browser-local fallback (identity-storage) so the ordering
+ // is stable before - or entirely without - settings sync.
+ const preferredPrimaryId = useIdentityStore.getState().preferredPrimaryId;
const identities = sortIdentities(rawIdentities, username);
- // If user has a preferred primary, move it to front
+ // If a local preferred primary is set, move it to the front.
if (preferredPrimaryId) {
const idx = identities.findIndex((id) => id.id === preferredPrimaryId);
if (idx > 0) {
@@ -227,12 +217,60 @@ function loadIdentities(rawIdentities: Identity[], username: string): { identiti
const primaryIdentity = identities[0] ?? null;
useIdentityStore.getState().setIdentities(identities);
- // Mirror the resolved choice into the identity store so the identity-manager
- // UI (the ⭐ marker) reflects the active account's preferred identity.
- useIdentityStore.setState({ preferredPrimaryId });
return { identities, primaryIdentity };
}
+/**
+ * Re-apply the per-account default sender identity once synced settings are
+ * available (issue #507). The choice is stored server-side in the settings
+ * store (`preferredIdentityIds`, keyed by AccountEntry.id), so it can only be
+ * applied after `loadFromServer` resolves. It reorders the account's identities
+ * so the preferred one is primary - the composer defaults its `From` to
+ * identities[0]. No-op when nothing is configured for the account.
+ *
+ * Also performs the one-time migration of the pre-#507 browser-local default
+ * (identity-storage) into the synced per-account map, keyed by accountId.
+ *
+ * @param accountId The account to apply for; defaults to the active account.
+ */
+export function applyPreferredIdentity(accountId?: string | null): void {
+ const targetId = accountId ?? useAccountStore.getState().activeAccountId;
+ if (!targetId) return;
+
+ const idStore = useIdentityStore.getState();
+ // Only touch the live identity store when it currently holds this account's
+ // identities (true for the active account). Switching snapshots/restores the
+ // ordering per account, so a background account's order is restored later.
+ // The local fallback below also belongs to the active account, so gate first.
+ if (useAccountStore.getState().activeAccountId !== targetId) return;
+
+ let preferred = useSettingsStore.getState().preferredIdentityIds[targetId] ?? null;
+
+ // One-time migration: before #507 the default lived only in the browser-local
+ // identity-storage (never synced). If the synced map has no entry for this
+ // account yet, adopt that local value and persist it (keyed by accountId) so
+ // it follows the user across devices.
+ if (!preferred) {
+ const legacy = idStore.preferredPrimaryId;
+ if (legacy) {
+ preferred = legacy;
+ const current = useSettingsStore.getState().preferredIdentityIds;
+ useSettingsStore.getState().updateSetting('preferredIdentityIds', { ...current, [targetId]: legacy });
+ }
+ }
+ if (!preferred) return;
+
+ idStore.setPreferredPrimary(preferred);
+ const ids = [...idStore.identities];
+ const idx = ids.findIndex((i) => i.id === preferred);
+ if (idx > 0) {
+ const [p] = ids.splice(idx, 1);
+ ids.unshift(p);
+ idStore.setIdentities(ids);
+ }
+ useAuthStore.setState({ identities: ids, primaryIdentity: ids[0] ?? null });
+}
+
function getLocaleLoginPath(): string {
if (typeof window === 'undefined') return '/en/login';
@@ -638,6 +676,7 @@ export const useAuthStore = create()(
if (!config.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(username, serverUrl).finally(() => {
useSettingsStore.getState().enableSync(username, serverUrl);
+ applyPreferredIdentity(accountId);
});
}).catch(() => {});
@@ -840,6 +879,7 @@ export const useAuthStore = create()(
if (!config.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(username, serverUrl).finally(() => {
useSettingsStore.getState().enableSync(username, serverUrl);
+ applyPreferredIdentity(accountId);
});
}).catch(() => {});
@@ -977,6 +1017,7 @@ export const useAuthStore = create()(
if (!cfg.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(username, ssoServerUrl).finally(() => {
useSettingsStore.getState().enableSync(username, ssoServerUrl);
+ applyPreferredIdentity(accountId);
});
}).catch(() => {});
@@ -1363,6 +1404,7 @@ export const useAuthStore = create()(
if (!config.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(targetAccount.username, targetAccount.serverUrl).finally(() => {
useSettingsStore.getState().enableSync(targetAccount.username, targetAccount.serverUrl);
+ applyPreferredIdentity(targetAccount.id);
});
}).catch(() => {});
},
@@ -1534,6 +1576,7 @@ export const useAuthStore = create()(
if (!config.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(targetAccount.username, targetAccount.serverUrl).finally(() => {
useSettingsStore.getState().enableSync(targetAccount.username, targetAccount.serverUrl);
+ applyPreferredIdentity(targetAccount.id);
});
}).catch(() => {});
return;
@@ -1647,6 +1690,7 @@ export const useAuthStore = create()(
if (!config.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(state.username || '', state.serverUrl!).finally(() => {
useSettingsStore.getState().enableSync(state.username || '', state.serverUrl!);
+ applyPreferredIdentity(accountId);
});
}).catch(() => {});
return;
@@ -1718,6 +1762,7 @@ export const useAuthStore = create()(
if (!config.settingsSyncEnabled) return;
useSettingsStore.getState().loadFromServer(username, serverUrl).finally(() => {
useSettingsStore.getState().enableSync(username, serverUrl);
+ applyPreferredIdentity(accountId);
});
}).catch(() => {});
return;
@@ -1761,25 +1806,6 @@ export const useAuthStore = create()(
set({ identities, primaryIdentity });
},
- // Re-sort the already-loaded identities to honor the active account's
- // synced preferred-primary identity, without a network round-trip. Used
- // after settings load from the server so a fresh browser reflects the
- // synced default (#507).
- applyPreferredIdentityOrdering: () => {
- const { username, identities } = get();
- if (!username || identities.length === 0) return;
- const preferredId = useSettingsStore.getState().preferredIdentityIds?.[username] ?? null;
- useIdentityStore.setState({ preferredPrimaryId: preferredId });
- if (!preferredId) return;
- const idx = identities.findIndex((id) => id.id === preferredId);
- if (idx <= 0) return; // already first, or not present
- const reordered = [...identities];
- const [preferred] = reordered.splice(idx, 1);
- reordered.unshift(preferred);
- useIdentityStore.getState().setIdentities(reordered);
- set({ identities: reordered, primaryIdentity: reordered[0] ?? null });
- },
-
refreshIdentities: async () => {
const { client, username } = get();
if (!client || !username) return;
diff --git a/stores/identity-store.ts b/stores/identity-store.ts
index e34a3223..e233be78 100644
--- a/stores/identity-store.ts
+++ b/stores/identity-store.ts
@@ -123,7 +123,14 @@ export const useIdentityStore = create()(
}),
{
name: 'identity-storage',
- // Only persist sub-addressing data, not identities (they're server-side)
+ // Only persist sub-addressing data, not identities (they're server-side).
+ // The default sender identity (`preferredPrimaryId`) is the per-account
+ // value for the *active* account; it is kept here purely as a local
+ // fallback so the choice survives a reload when settings sync is off.
+ // The durable, cross-device, exportable source of truth is the synced
+ // settings store, keyed per account (`preferredIdentityIds`), which is
+ // re-applied via applyPreferredIdentity() once server settings load and
+ // overrides this value per account (issue #507).
partialize: (state) => ({
subAddress: state.subAddress,
preferredPrimaryId: state.preferredPrimaryId,
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index 1cd4ccc5..21e68627 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -178,13 +178,6 @@ interface SettingsState {
requestReadReceiptDefault: boolean; // Pre-check "request read receipt" in the composer
readReceiptResponse: ReadReceiptResponse; // How to respond to incoming read-receipt requests
- // Identities
- // Per-account default ("preferred primary") sender identity, keyed by
- // username (the same key settings sync uses). A JMAP identity id is only
- // meaningful within its own account, so this must be account-scoped. Synced
- // so the choice survives a new browser / cleared site data (#507).
- preferredIdentityIds: Record;
-
// Privacy & Security
sessionTimeout: number; // minutes (0 = never)
trustedSenders: string[]; // Email addresses that can load external content
@@ -258,6 +251,12 @@ interface SettingsState {
// explicit [] = "no folders". (Replaced the legacy global string[] | null.)
allMailFolderIds: Record;
+ // Per-account default sender identity, keyed by AccountEntry.id -> JMAP
+ // Identity id. Synced (and exported) so the chosen default survives clearing
+ // site data and follows the user across browsers/devices (issue #507). Kept
+ // per account because JMAP identity ids are account-scoped and would collide.
+ preferredIdentityIds: Record;
+
// Email Display
disableThreading: boolean; // Show emails as individual messages instead of grouped by conversation
@@ -396,9 +395,6 @@ const DEFAULT_SETTINGS = {
requestReadReceiptDefault: false,
readReceiptResponse: 'ask' as ReadReceiptResponse,
- // Identities
- preferredIdentityIds: {} as Record,
-
// Privacy & Security
sessionTimeout: 0, // Never
trustedSenders: [] as string[],
@@ -452,6 +448,7 @@ const DEFAULT_SETTINGS = {
// All Mail view (gated)
enableAllMailView: false,
allMailFolderIds: {} as Record,
+ preferredIdentityIds: {} as Record,
enableCrossUnreadView: false,
enableCrossStarredView: false,
@@ -609,7 +606,6 @@ export const useSettingsStore = create()(
signatureSeparatorEnabled: state.signatureSeparatorEnabled,
requestReadReceiptDefault: state.requestReadReceiptDefault,
readReceiptResponse: state.readReceiptResponse,
- preferredIdentityIds: state.preferredIdentityIds,
sessionTimeout: state.sessionTimeout,
emailNotificationsEnabled: state.emailNotificationsEnabled,
emailNotificationSound: state.emailNotificationSound,
@@ -637,6 +633,7 @@ export const useSettingsStore = create()(
includeGroupInUnified: state.includeGroupInUnified,
enableAllMailView: state.enableAllMailView,
allMailFolderIds: state.allMailFolderIds,
+ preferredIdentityIds: state.preferredIdentityIds,
enableCrossUnreadView: state.enableCrossUnreadView,
enableCrossStarredView: state.enableCrossStarredView,
enableCrossAllView: state.enableCrossAllView,
@@ -694,8 +691,8 @@ export const useSettingsStore = create()(
if (key === 'allMailFolderIds' && !isPlainRecord(settings[key])) {
return;
}
- // Defensive: a non-record (e.g. a legacy scalar) would break the
- // per-account map lookups - ignore it.
+ // Per-account map (accountId -> identityId); ignore any legacy
+ // global/non-record value rather than corrupting the map.
if (key === 'preferredIdentityIds' && !isPlainRecord(settings[key])) {
return;
}
@@ -877,14 +874,10 @@ export const useSettingsStore = create()(
get().importSettings(JSON.stringify(settings));
isLoadingFromServer = false;
syncLog('Settings loaded from server successfully');
- // Re-apply the (possibly server-updated) per-account preferred
- // sender identity to the already-loaded identities, so a fresh
- // browser reflects the synced default without waiting for the next
- // identity refresh. Dynamic import avoids a static import cycle
- // (auth-store imports this store). (#507)
- import('./auth-store')
- .then(({ useAuthStore }) => useAuthStore.getState().applyPreferredIdentityOrdering())
- .catch(() => {});
+ // The per-account preferred sender identity (#507) is re-applied by
+ // applyPreferredIdentity() in auth-store, invoked from the
+ // loadFromServer().finally() of every login / switch / restore path,
+ // so no extra hook is needed here.
return true;
}
return false;
@@ -897,7 +890,7 @@ export const useSettingsStore = create()(
}),
{
name: 'settings-storage',
- version: 5,
+ version: 6,
migrate: (persisted, version) => {
const state = persisted as Record;
if (version < 2 && state.listDensity) {
@@ -925,6 +918,11 @@ export const useSettingsStore = create()(
if (version < 5 || !isPlainRecord(state.allMailFolderIds)) {
state.allMailFolderIds = {};
}
+ // v6: introduced the per-account default-identity map (issue #507).
+ // Coerce any missing/legacy value to an empty record.
+ if (version < 6 || !isPlainRecord(state.preferredIdentityIds)) {
+ state.preferredIdentityIds = {};
+ }
return state as unknown as SettingsState;
},
onRehydrateStorage: () => {
From 996fa7eea6594af59e35eeddd1394f3678509358 Mon Sep 17 00:00:00 2001
From: Joe Polastre
Date: Tue, 14 Jul 2026 00:25:01 -0700
Subject: [PATCH 13/22] fix: Generate Message-ID client-side using the sender's
domain
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Bulwark currently sends Email/set create without a messageId property,
leaving Message-ID generation to the JMAP server. Servers typically fall
back to their OS hostname for this (Stalwart, via mail-builder's
`gethostname()`), which produces IDs like:
```
<175234...abc@ip-10-0-12-97.ec2.internal>
```
This is bad for every deployment, in three escalating ways:
1. Information disclosure: the Message-ID travels in every outgoing
message and permanently into archives, quoting, and In-Reply-To /
References of replies. An internal hostname (container name, private
DNS, k8s pod name) is infrastructure detail no recipient should see.
2. Deliverability: spam filters score Message-IDs whose domain part is
not a plausible FQDN or is unrelated to the sender (SpamAssassin
MSGID_FROM_MTA_HEADER and friends). Internal names like
*.ec2.internal or bare container ids read as botnet-ish.
3. Correctness of intent: RFC 5322 §3.6.4 recommends the originator
generate the Message-ID, using a domain it controls, so the id is
meaningful and plausibly unique under that domain's authority. The
sender's own domain is exactly that; the mail server's transient
runtime hostname is exactly not.
Generate the id in `sendEmail()` as `.@`,
taken from the From address (falling back to the login username). The
timestamp prefix keeps ids roughly sortable and adds entropy across
UUID reuse concerns; crypto.randomUUID() is available in every runtime
Bulwark supports (browsers and Node 19+). Per RFC 8621 §4.1.2.3 the
JMAP messageId property carries bare msg-ids (no angle brackets), so
none are added.
Clients that never set messageId also can't thread their own sent mail
reliably until the server echoes the message back; setting it at create
time makes the id known and stable from the start.
No behavior change for servers that honored client-provided ids all
along; servers that previously synthesized an id now simply don't need
to.
---
lib/jmap/client.ts | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/lib/jmap/client.ts b/lib/jmap/client.ts
index 2b6d2f50..89ad0aff 100644
--- a/lib/jmap/client.ts
+++ b/lib/jmap/client.ts
@@ -432,6 +432,17 @@ function stripMessageIdBrackets(id: string): string {
return id.trim().replace(/^<+/, '').replace(/>+$/, '').trim();
}
+// Generate a Message-ID for outgoing mail (bare msg-id, no angle brackets, per
+// RFC 8621 §4.1.2.3). Without one the server synthesizes it from its OS
+// hostname, which leaks internal names (e.g. @ip-10-0-12-97.ec2.internal) into
+// headers — an anti-spam signal and an information disclosure. Use the sender's
+// domain instead, matching what receivers expect a Message-ID to look like.
+function generateMessageId(fromEmail: string): string {
+ const at = fromEmail.lastIndexOf('@');
+ const domain = at > 0 ? fromEmail.slice(at + 1) : 'localhost';
+ return `${Date.now().toString(36)}.${crypto.randomUUID()}@${domain}`;
+}
+
/**
* Build a CalendarEvent/query filter restricting results to the given
* calendars. Stalwart implements the singular `inCalendar` condition (one
@@ -2467,6 +2478,7 @@ export class JMAPClient implements IJMAPClient {
cc: cc?.length ? cc.map(parseRecipientString) : undefined,
bcc: bcc?.length ? bcc.map(parseRecipientString) : undefined,
subject,
+ messageId: [generateMessageId(fromEmail || this.username)],
inReplyTo: normalizedInReplyTo?.length ? normalizedInReplyTo : undefined,
references: normalizedReferences?.length ? normalizedReferences : undefined,
keywords: { "$seen": true, "$draft": true },
From 511f9e5195f3eb3f94c747cead8b3cde89e44b60 Mon Sep 17 00:00:00 2001
From: Jesper Ordrup
Date: Tue, 14 Jul 2026 15:38:51 +0200
Subject: [PATCH 14/22] fix: enable thread expansion in focused list
---
components/email/thread-list-item.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 8e44f2a2..a4fb8ec8 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -660,7 +660,7 @@ export const ThreadListItem = React.forwardRef {
@@ -892,7 +892,7 @@ export const ThreadListItem = React.forwardRef
- {isExpanded && !isMobile && !isFocusedMailLayout && (
+ {isExpanded && !isMobile && (
{isLoading ? (
From cb5d7541136970a117c8b7d1ef13e65b9f815ec1 Mon Sep 17 00:00:00 2001
From: LoneExile
Date: Thu, 16 Jul 2026 11:44:44 +0700
Subject: [PATCH 15/22] fix(oauth): harden OIDC discovery (timeout, retry,
serve-stale)
---
lib/__tests__/oauth-discovery.test.ts | 85 ++++++++++++++++++++-
lib/oauth/discovery.ts | 104 +++++++++++++++++++++-----
2 files changed, 168 insertions(+), 21 deletions(-)
diff --git a/lib/__tests__/oauth-discovery.test.ts b/lib/__tests__/oauth-discovery.test.ts
index 5b8228af..63f95c96 100644
--- a/lib/__tests__/oauth-discovery.test.ts
+++ b/lib/__tests__/oauth-discovery.test.ts
@@ -46,7 +46,8 @@ describe('oauth/discovery', () => {
expect(result).toEqual(VALID_METADATA);
expect(fetch).toHaveBeenCalledTimes(1);
expect(fetch).toHaveBeenCalledWith(
- 'https://mail.example.com/.well-known/oauth-authorization-server'
+ 'https://mail.example.com/.well-known/oauth-authorization-server',
+ expect.objectContaining({ signal: expect.any(AbortSignal) }),
);
});
@@ -64,7 +65,8 @@ describe('oauth/discovery', () => {
expect(fetch).toHaveBeenCalledTimes(2);
expect(fetch).toHaveBeenNthCalledWith(
2,
- 'https://fallback.example.com/.well-known/openid-configuration'
+ 'https://fallback.example.com/.well-known/openid-configuration',
+ expect.objectContaining({ signal: expect.any(AbortSignal) }),
);
});
@@ -176,4 +178,83 @@ describe('oauth/discovery', () => {
expect(second).toEqual(VALID_METADATA);
expect(fetch).toHaveBeenCalledTimes(1);
});
+
+ it('bounds each discovery fetch with an AbortSignal timeout (no hang on unresponsive IdP)', async () => {
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ const fetchMock = vi.fn().mockRejectedValue(
+ Object.assign(new Error('The operation timed out'), { name: 'TimeoutError' }),
+ );
+ vi.stubGlobal('fetch', fetchMock);
+
+ const result = await discoverOAuth('https://unresponsive.example.com', { validateEndpoint });
+
+ expect(result).toBeNull();
+ // Every discovery fetch must carry an AbortSignal so an unresponsive IdP is
+ // aborted (DISCOVERY_TIMEOUT_MS) instead of hanging the request - and, with
+ // it, the login page's SSO button.
+ expect(fetchMock.mock.calls.length).toBeGreaterThan(0);
+ for (const call of fetchMock.mock.calls) {
+ expect(call[1]).toEqual(expect.objectContaining({ signal: expect.any(AbortSignal) }));
+ }
+ });
+
+ it('retries once when the first attempt fails, then succeeds', async () => {
+ // Attempt 1: both well-known URLs fail. Attempt 2: first URL succeeds.
+ vi.stubGlobal('fetch', vi.fn()
+ .mockResolvedValueOnce({ ok: false, status: 503 })
+ .mockResolvedValueOnce({ ok: false, status: 503 })
+ .mockResolvedValueOnce({ ok: true, json: () => Promise.resolve(VALID_METADATA) }));
+
+ const result = await discoverOAuth('https://flaky.example.com', { validateEndpoint });
+
+ expect(result).toEqual(VALID_METADATA);
+ // 2 failures (attempt 1) + 1 success (attempt 2 retry).
+ expect(fetch).toHaveBeenCalledTimes(3);
+ });
+
+ it('serves stale cached metadata when a refresh fails (keeps the SSO button up)', async () => {
+ vi.useFakeTimers();
+ try {
+ const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+ // First call succeeds and caches the metadata.
+ vi.stubGlobal('fetch', vi.fn().mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(VALID_METADATA),
+ }));
+ const first = await discoverOAuth('https://stale.example.com', { validateEndpoint });
+ expect(first).toEqual(VALID_METADATA);
+
+ // Expire the cache (positive TTL is 10 min).
+ vi.advanceTimersByTime(10 * 60 * 1000 + 1);
+
+ // Refresh now fails on every URL/attempt: the stale-but-usable value must
+ // be returned instead of null so the SSO button keeps rendering.
+ vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')));
+ const pending = discoverOAuth('https://stale.example.com', { validateEndpoint });
+ await vi.advanceTimersByTimeAsync(1000); // fire the retry backoff timer
+ const second = await pending;
+
+ expect(second).toEqual(VALID_METADATA);
+ expect(warnSpy).toHaveBeenCalled();
+ } finally {
+ vi.useRealTimers();
+ }
+ });
+
+ it('negative-caches a total failure (no cached value) to avoid hammering the IdP', async () => {
+ vi.spyOn(console, 'error').mockImplementation(() => {});
+ const fetchMock = vi.fn().mockRejectedValue(new Error('network down'));
+ vi.stubGlobal('fetch', fetchMock);
+
+ const first = await discoverOAuth('https://down.example.com', { validateEndpoint });
+ const callsAfterFirst = fetchMock.mock.calls.length;
+ const second = await discoverOAuth('https://down.example.com', { validateEndpoint });
+
+ expect(first).toBeNull();
+ expect(second).toBeNull();
+ // The immediate second call is short-circuited by the negative cache, so no
+ // additional fetches are made.
+ expect(fetchMock).toHaveBeenCalledTimes(callsAfterFirst);
+ });
});
diff --git a/lib/oauth/discovery.ts b/lib/oauth/discovery.ts
index 8a84ac68..75c0e226 100644
--- a/lib/oauth/discovery.ts
+++ b/lib/oauth/discovery.ts
@@ -21,6 +21,26 @@ const CACHE_TTL_MS = 10 * 60 * 1000;
const CACHE_MAX_ENTRIES = 64;
const metadataCache = new Map();
+// --- Discovery hardening ---------------------------------------------------
+// The login page's "Sign in with SSO" button is gated on OIDC discovery
+// succeeding. An un-timed, un-retried fetch that dropped its cached value on
+// failure let a single transient blip to the IdP silently hide the button.
+// A per-fetch timeout, one retry, and serving stale-but-usable metadata on
+// failure keep the button up through a transient blip.
+const DISCOVERY_TIMEOUT_MS = 4000;
+const DISCOVERY_RETRIES = 1;
+const DISCOVERY_RETRY_DELAY_MS = 300;
+// When discovery fails, remember the outcome briefly so repeated login-page
+// loads during an outage don't hammer the IdP. Also throttles re-discovery
+// while serving stale metadata. Kept short so recovery is fast.
+const DISCOVERY_FAILURE_TTL_MS = 15 * 1000;
+
+// Records recent failures for serverUrls that have no cached metadata to serve.
+const negativeCache = new Map();
+
+const sleep = (ms: number): Promise =>
+ new Promise((resolve) => setTimeout(resolve, ms));
+
function rememberMetadata(serverUrl: string, metadata: OAuthMetadata): void {
// Bound the cache so callers that can supply arbitrary serverUrl values
// (e.g. unauthenticated routes that fall back to user input) cannot
@@ -33,6 +53,16 @@ function rememberMetadata(serverUrl: string, metadata: OAuthMetadata): void {
metadataCache.set(serverUrl, { metadata, expiresAt: Date.now() + CACHE_TTL_MS });
}
+function rememberFailure(serverUrl: string): void {
+ // Bound like metadataCache: a user-supplied serverUrl must not grow this map
+ // without limit.
+ if (negativeCache.size >= CACHE_MAX_ENTRIES) {
+ const oldest = negativeCache.keys().next().value;
+ if (oldest !== undefined) negativeCache.delete(oldest);
+ }
+ negativeCache.set(serverUrl, Date.now() + DISCOVERY_FAILURE_TTL_MS);
+}
+
// Endpoints come from an attacker-controllable JSON document when callers pass
// a user-supplied serverUrl (e.g. /api/auth/totp-token-exchange under
// allowCustomJmapEndpoint). Without a validator, a malicious metadata document
@@ -52,24 +82,18 @@ async function endpointsArePublic(
return true;
}
-export async function discoverOAuth(
- serverUrl: string,
- options?: DiscoverOAuthOptions,
+// One pass over the well-known documents. Returns usable metadata, or null
+// (pushing diagnostics into `errors`) when neither URL yields a public,
+// complete document. Each fetch is bounded by a timeout so an unresponsive IdP
+// can never hang the request (and, with it, the login page's SSO button).
+async function attemptDiscovery(
+ urls: string[],
+ validate: EndpointValidator | undefined,
+ errors: string[],
): Promise {
- const cached = metadataCache.get(serverUrl);
- if (cached && cached.expiresAt > Date.now()) return cached.metadata;
- if (cached) metadataCache.delete(serverUrl);
-
- const urls = [
- `${serverUrl}/.well-known/oauth-authorization-server`,
- `${serverUrl}/.well-known/openid-configuration`,
- ];
-
- const errors: string[] = [];
-
for (const url of urls) {
try {
- const response = await fetch(url);
+ const response = await fetch(url, { signal: AbortSignal.timeout(DISCOVERY_TIMEOUT_MS) });
if (!response.ok) {
errors.push(`${url} returned HTTP ${response.status}`);
continue;
@@ -82,20 +106,18 @@ export async function discoverOAuth(
data.token_endpoint,
data.revocation_endpoint,
data.end_session_endpoint,
- ], options?.validateEndpoint);
+ ], validate);
if (!allPublic) {
errors.push(`${url} returned non-public or invalid endpoint URL`);
continue;
}
- const metadata: OAuthMetadata = {
+ return {
issuer: data.issuer,
authorization_endpoint: data.authorization_endpoint,
token_endpoint: data.token_endpoint,
revocation_endpoint: data.revocation_endpoint,
end_session_endpoint: data.end_session_endpoint,
};
- rememberMetadata(serverUrl, metadata);
- return metadata;
}
errors.push(`${url} response missing required endpoints`);
} catch (err) {
@@ -103,7 +125,51 @@ export async function discoverOAuth(
continue;
}
}
+ return null;
+}
+export async function discoverOAuth(
+ serverUrl: string,
+ options?: DiscoverOAuthOptions,
+): Promise {
+ const cached = metadataCache.get(serverUrl);
+ if (cached && cached.expiresAt > Date.now()) return cached.metadata;
+ // A stale entry is deliberately retained (not deleted) so it can be served
+ // as a fallback below if the refresh fails - this keeps the SSO button up
+ // through a transient IdP blip.
+
+ // Nothing to serve and we failed recently: skip hammering the IdP.
+ if (!cached) {
+ const retryAfter = negativeCache.get(serverUrl);
+ if (retryAfter !== undefined && retryAfter > Date.now()) return null;
+ }
+
+ const urls = [
+ `${serverUrl}/.well-known/oauth-authorization-server`,
+ `${serverUrl}/.well-known/openid-configuration`,
+ ];
+
+ const errors: string[] = [];
+ for (let attempt = 0; attempt <= DISCOVERY_RETRIES; attempt++) {
+ if (attempt > 0) await sleep(DISCOVERY_RETRY_DELAY_MS);
+ const metadata = await attemptDiscovery(urls, options?.validateEndpoint, errors);
+ if (metadata) {
+ rememberMetadata(serverUrl, metadata);
+ negativeCache.delete(serverUrl);
+ return metadata;
+ }
+ }
+
+ // Every attempt failed. Prefer stale-but-usable metadata over nothing so the
+ // login page keeps rendering the SSO button during the outage; throttle the
+ // next re-discovery so we don't retry on every request.
+ if (cached) {
+ cached.expiresAt = Date.now() + DISCOVERY_FAILURE_TTL_MS;
+ console.warn(`[OAuth] Discovery refresh failed for ${serverUrl}; serving stale metadata: ${errors.join('; ')}`);
+ return cached.metadata;
+ }
+
+ rememberFailure(serverUrl);
console.error(`[OAuth] Discovery failed for ${serverUrl}: ${errors.join('; ')}`);
return null;
}
From 7da3d4ae80ace2876bcce800142c181f189e5a60 Mon Sep 17 00:00:00 2001
From: Joe Polastre
Date: Wed, 15 Jul 2026 21:02:25 -0700
Subject: [PATCH 16/22] fix(email): show quote bar in email replies
Without the inline style in the serialized wrapper, the email reply quote bar gets lost (becomes invisible). Pull the style out into a const, and then use it in both the editor (NodeView) and the content wrapper for the email content that is sent.
---
components/email/quoted-html.ts | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/components/email/quoted-html.ts b/components/email/quoted-html.ts
index edd5b44b..0350e679 100644
--- a/components/email/quoted-html.ts
+++ b/components/email/quoted-html.ts
@@ -10,6 +10,10 @@ import { buildSignatureBlock } from "@/components/email/signature-block";
// HTML, so parseHTML can recognise it on the way back in.
export const QUOTED_HTML_MARKER = "data-quoted-html";
+// Reusable style for the quote bar when quoting email text (like in a reply).
+const QUOTE_BAR_STYLE =
+ "border-left:2px solid #c5c5c5;padding-left:12px;margin-top:8px;";
+
/**
* QuotedHtml — an atomic block node that carries the *verbatim* HTML of a
* quoted/forwarded original email. The HTML is stored in the `html` attribute
@@ -68,8 +72,7 @@ export const QuotedHtml = TiptapNode.create({
const dom = document.createElement("div");
dom.setAttribute(QUOTED_HTML_MARKER, "");
dom.className = "quoted-html-island";
- dom.style.cssText =
- "border-left:2px solid #c5c5c5;padding-left:12px;margin-top:8px;";
+ dom.style.cssText = QUOTE_BAR_STYLE;
// CRITICAL: render the quoted email inside a Shadow Root. The app's
// global CSS (Tailwind preflight, .tiptap table/td rules, box-sizing
@@ -192,5 +195,5 @@ export function serializeEditorContent(editor: Editor): string {
* must be what serializeEditorContent emits too (round-trip consistency).
*/
export function buildQuotedHtmlBlock(sanitizedInnerHtml: string): string {
- return `${sanitizedInnerHtml}
`;
+ return `${sanitizedInnerHtml}
`;
}
From 04444003b27afec22540aa7990e8fb7e68ce37e7 Mon Sep 17 00:00:00 2001
From: Shuki Vaknin
Date: Wed, 15 Jul 2026 23:19:58 +0300
Subject: [PATCH 17/22] feat(composer): auto-detect paragraph text direction by
default
---
components/email/text-direction.ts | 13 +++++++++----
1 file changed, 9 insertions(+), 4 deletions(-)
diff --git a/components/email/text-direction.ts b/components/email/text-direction.ts
index 7edf34b5..6665c373 100644
--- a/components/email/text-direction.ts
+++ b/components/email/text-direction.ts
@@ -13,7 +13,12 @@ declare module "@tiptap/core" {
/**
* Adds a `dir` attribute to block nodes so the composer can mark individual
- * paragraphs/headings as LTR or RTL (Gmail-style right-to-left editing). The
+ * paragraphs/headings as LTR or RTL (Gmail-style right-to-left editing).
+ *
+ * The default is `"auto"`: each block detects its own direction from its first
+ * strong character, so a paragraph typed in English renders LTR and one typed
+ * in Hebrew renders RTL, per block, as you type. The toolbar toggle still pins
+ * an explicit `ltr`/`rtl` when you want to override the auto-detection, and the
* attribute round-trips to HTML so the direction is preserved in the sent mail.
*/
export const TextDirection = Extension.create({
@@ -29,10 +34,10 @@ export const TextDirection = Extension.create({
types: this.options.types,
attributes: {
dir: {
- default: null,
- parseHTML: (element) => element.getAttribute("dir") || null,
+ default: "auto",
+ parseHTML: (element) => element.getAttribute("dir") || "auto",
renderHTML: (attributes) =>
- attributes.dir ? { dir: attributes.dir } : {},
+ attributes.dir ? { dir: attributes.dir } : { dir: "auto" },
},
},
},
From 4dc76bbb473548dba6a0be80a59a5720e9ed893c Mon Sep 17 00:00:00 2001
From: KazNIISA IT
Date: Wed, 15 Jul 2026 11:43:23 +0500
Subject: [PATCH 18/22] fix(jmap): file post-send message with a full
mailboxIds replacement
Sending mail through Bulwark could leave the delivered message stuck in Drafts
(keeping the $draft keyword) and never file a copy into Sent, with no error
shown, for accounts whose Drafts/Sent mailbox JMAP id is a purely-numeric
string (e.g. "0").
The post-send Drafts->Sent move is expressed as onSuccessUpdateEmail on
EmailSubmission/set using `mailboxIds/` JSON-Pointer patches. Stalwart
up to 0.16.4 (observed on 0.15.5) rejects an Email/set PatchObject whose
pointer token is all digits -- e.g. `mailboxIds/0` -- with invalidProperties
"Invalid patch value", treating the token as a JSON-Pointer array index even
though mailboxIds is a JSON object (cf. RFC 6901 section 4; RFC 8620 section
1.2 warns servers against such interop-hostile ids). Because the move runs
only AFTER the EmailSubmission already succeeded, the message is delivered but
the filing update is silently rejected: the send code inspects only
`notCreated`, not the onSuccessUpdateEmail `notUpdated` result, so nothing
surfaces to the user.
Stalwart fixed the pointer parsing server-side in 0.16.5
(stalwartlabs/stalwart@175f34ea, jmap-tools 0.1.4 -> 0.1.5; a sibling symptom
was stalwartlabs/stalwart#2985). The client-side change is still worthwhile:
earlier Stalwart deployments remain in the wild, and a full-property
replacement both states the actual intent of the move and emits no per-id
pointer token that another server could mishandle.
Replace the per-id pointer patches at every post-send / undo-send move site
(send, scheduled send, raw-import send, reschedule, and restoreEmailToDraft)
with a full `mailboxIds` property replacement via a new mailboxIdsReplacement()
helper. This states the actual intent -- after the move the message should
belong to exactly the target mailbox -- and is immune to the pointer-token
bug. Every one of these sites moves a message that Bulwark itself placed
solely in Drafts (or, for undo, in Sent), so the replacement is
behaviour-equivalent. Note it is a replacement: a membership added to the
message by another client between creation and send is not preserved.
restoreEmailToDraft now always lands the message in Drafts only (previously,
when no Sent mailbox id was passed, it left the Sent copy in place); the demo
client is aligned with the same contract.
Add regression tests for the full-replacement shape, a numeric ("0") Drafts id,
and restoreEmailToDraft.
Follow-up (not included here): the send paths still ignore the implicit
Email/set `notUpdated` result of onSuccessUpdateEmail, so any other post-send
filing failure would remain silent.
---
lib/__tests__/jmap-send-threading.test.ts | 77 ++++++++++++++++++++++-
lib/demo/demo-client.ts | 7 ++-
lib/jmap/client-interface.ts | 1 +
lib/jmap/client.ts | 65 ++++++++++++++-----
4 files changed, 127 insertions(+), 23 deletions(-)
diff --git a/lib/__tests__/jmap-send-threading.test.ts b/lib/__tests__/jmap-send-threading.test.ts
index 10f5dc36..df6dc9bf 100644
--- a/lib/__tests__/jmap-send-threading.test.ts
+++ b/lib/__tests__/jmap-send-threading.test.ts
@@ -55,7 +55,7 @@ interface CapturedRequest {
* Mailbox/get → Identity/get → Email/set + EmailSubmission/set.
* Returns the captured request bodies for assertions.
*/
-function mockSendEmailFlow() {
+function mockSendEmailFlow(draftsId = 'mb-drafts', sentId = 'mb-sent') {
const captured: CapturedRequest[] = [];
const fetchSpy = vi.spyOn(globalThis, 'fetch');
@@ -71,8 +71,8 @@ function mockSendEmailFlow() {
'Mailbox/get',
{
list: [
- { id: 'mb-drafts', name: 'Drafts', role: 'drafts' },
- { id: 'mb-sent', name: 'Sent', role: 'sent' },
+ { id: draftsId, name: 'Drafts', role: 'drafts' },
+ { id: sentId, name: 'Sent', role: 'sent' },
],
},
'0',
@@ -264,3 +264,74 @@ describe('JMAPClient.sendEmail threading headers', () => {
]));
});
});
+
+describe('JMAPClient post-send mailbox filing', () => {
+ beforeEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ function sentFilingPatch(captured: CapturedRequest[]): Record {
+ const submissionCall = captured[2].methodCalls.find(call => call[0] === 'EmailSubmission/set');
+ expect(submissionCall).toBeDefined();
+ const onSuccess = (submissionCall![1] as {
+ onSuccessUpdateEmail: Record>;
+ }).onSuccessUpdateEmail;
+ return Object.values(onSuccess)[0];
+ }
+
+ it('files the sent message via a full mailboxIds replacement, never mailboxIds/ pointers', async () => {
+ const client = createClient();
+ const captured = mockSendEmailFlow();
+
+ await client.sendEmail(
+ ['recipient@example.com'], 'subject', 'body',
+ undefined, undefined, 'identity-1', 'user@example.com',
+ );
+
+ const patch = sentFilingPatch(captured);
+ // A `mailboxIds/` JSON-pointer whose token is purely numeric (e.g. a
+ // Drafts folder whose JMAP id is "0") is rejected by Stalwart, silently
+ // stranding already-delivered mail in Drafts. The move must use a full
+ // `mailboxIds` replacement, which has no per-id pointer token.
+ expect(Object.keys(patch).some(key => key.startsWith('mailboxIds/'))).toBe(false);
+ expect(patch.mailboxIds).toEqual({ 'mb-sent': true });
+ expect(patch['keywords/$draft']).toBeNull();
+ });
+
+ it('files correctly when the Drafts mailbox id is a purely numeric string (Stalwart numeric-id bug)', async () => {
+ const client = createClient();
+ // Drafts id "0", Sent id "e": the old pointer form emitted `mailboxIds/0`,
+ // which Stalwart rejects with invalidProperties "Invalid patch value".
+ const captured = mockSendEmailFlow('0', 'e');
+
+ await client.sendEmail(
+ ['recipient@example.com'], 'subject', 'body',
+ undefined, undefined, 'identity-1', 'user@example.com',
+ );
+
+ const patch = sentFilingPatch(captured);
+ expect(Object.keys(patch).some(key => key.startsWith('mailboxIds/'))).toBe(false);
+ expect(patch.mailboxIds).toEqual({ e: true });
+ });
+
+ it('restoreEmailToDraft places the message in Drafts only via a full mailboxIds replacement', async () => {
+ const client = createClient();
+ let capturedUpdate: Record | undefined;
+ vi.spyOn(client as unknown as { request: JMAPClient['request'] }, 'request')
+ .mockImplementation(async (methodCalls) => {
+ const args = methodCalls[0][1] as { update?: Record> };
+ capturedUpdate = args.update?.['email-1'];
+ return { methodResponses: [['Email/set', { updated: { 'email-1': null } }, '0']] };
+ });
+
+ // Third arg (Sent mailbox id) is intentionally ignored — the message must
+ // end up in Drafts only, with no leftover Sent membership. Drafts id "0"
+ // also exercises the numeric-id path in the reverse direction.
+ await client.restoreEmailToDraft('email-1', '0', 'e');
+
+ expect(capturedUpdate).toBeDefined();
+ expect(Object.keys(capturedUpdate!).some(key => key.startsWith('mailboxIds/'))).toBe(false);
+ expect(capturedUpdate!.mailboxIds).toEqual({ '0': true });
+ expect(capturedUpdate!['keywords/$draft']).toBe(true);
+ });
+});
diff --git a/lib/demo/demo-client.ts b/lib/demo/demo-client.ts
index 72436779..4086fbb5 100644
--- a/lib/demo/demo-client.ts
+++ b/lib/demo/demo-client.ts
@@ -1096,11 +1096,12 @@ export class DemoJMAPClient implements IJMAPClient {
return { scheduled: true, emailId, emailSubmissionId: replacement, sendAt: delayedUntil };
}
- async restoreEmailToDraft(emailId: string, draftMailboxId: string, sentMailboxId?: string): Promise {
+ // Mirrors JMAPClient.restoreEmailToDraft: the third parameter is ignored and
+ // the message ends up in Drafts only (full mailboxIds replacement).
+ async restoreEmailToDraft(emailId: string, draftMailboxId: string, _sentMailboxId?: string): Promise {
const email = this.data.emails.find(e => e.id === emailId);
if (!email) return;
- email.mailboxIds[draftMailboxId] = true;
- if (sentMailboxId) delete email.mailboxIds[sentMailboxId];
+ email.mailboxIds = { [draftMailboxId]: true };
email.keywords.$draft = true;
this.recalcMailboxCounts();
}
diff --git a/lib/jmap/client-interface.ts b/lib/jmap/client-interface.ts
index 729c55f6..2c7849bf 100644
--- a/lib/jmap/client-interface.ts
+++ b/lib/jmap/client-interface.ts
@@ -189,6 +189,7 @@ export interface IJMAPClient {
getScheduledEmails(limit?: number, position?: number): Promise<{ emails: ScheduledEmail[]; hasMore: boolean; total: number; nextPosition: number }>;
cancelEmailSubmission(submissionId: string): Promise;
rescheduleEmailSubmission(submissionId: string, emailId: string, identityId: string, delayedUntil: string): Promise;
+ /** `sentMailboxId` is accepted for backwards compatibility but ignored: the message is placed in Drafts only. */
restoreEmailToDraft(emailId: string, draftMailboxId: string, sentMailboxId?: string): Promise;
sendImipReply(opts: {
diff --git a/lib/jmap/client.ts b/lib/jmap/client.ts
index 89ad0aff..40f9f933 100644
--- a/lib/jmap/client.ts
+++ b/lib/jmap/client.ts
@@ -15,6 +15,41 @@ function parseRecipientString(s: string): { name?: string; email: string } {
return { email: trimmed };
}
+/**
+ * Build the `mailboxIds` portion of an `Email/set` PatchObject as a full-property
+ * replacement — `{ mailboxIds: { : true, ... } }` — instead of per-id
+ * `mailboxIds/` JSON-Pointer patches.
+ *
+ * Two reasons:
+ * 1. It states the actual intent of a post-send / undo-send move: the message
+ * should belong to *exactly* the given mailbox(es).
+ * 2. It avoids per-id JSON-Pointer tokens entirely. Stalwart (observed on
+ * 0.15.5) rejects an `Email/set` PatchObject whose pointer token is a
+ * purely-numeric string — e.g. `mailboxIds/0` for a mailbox whose JMAP id is
+ * "0" — with `invalidProperties: "Invalid patch value"` (it treats the digits
+ * as a JSON-Pointer array index even though `mailboxIds` is a JSON object;
+ * cf. RFC 6901 §4, and RFC 8620 §1.2's warning against interop-hostile ids).
+ * That silently stranded already-delivered mail in Drafts for accounts whose
+ * Drafts/Sent mailbox id happened to be all digits (a full member of `0`,
+ * `1`, … `9`, `10`, … was verified rejected; ids containing a letter work).
+ * Stalwart fixed the parsing in 0.16.5 (stalwartlabs/stalwart@175f34ea,
+ * jmap-tools 0.1.5), but earlier deployments remain in the wild — and not
+ * emitting interop-hostile pointer tokens is the safer shape regardless.
+ *
+ * This is a *replacement*: it drops any other mailbox membership the message
+ * had, so callers must know the complete target set. Do NOT also place a
+ * `mailboxIds/` pointer key in the same PatchObject — a pointer whose prefix
+ * is another key in the object is illegal (RFC 8620 §5.3).
+ */
+function mailboxIdsReplacement(
+ mailboxId: string,
+ ...moreMailboxIds: string[]
+): { mailboxIds: Record } {
+ const mailboxIds: Record = { [mailboxId]: true };
+ for (const id of moreMailboxIds) mailboxIds[id] = true;
+ return { mailboxIds };
+}
+
export class RateLimitError extends Error {
retryAfterMs: number;
constructor(retryAfterMs: number) {
@@ -2522,8 +2557,7 @@ export class JMAPClient implements IJMAPClient {
// issues with servers that encrypt on append (e.g. Stalwart). See #188.
const onSuccessUpdateEmail = {
"#1": {
- [`mailboxIds/${draftsMailbox.id}`]: null,
- [`mailboxIds/${sentMailbox.id}`]: true,
+ ...mailboxIdsReplacement(sentMailbox.id),
"keywords/$draft": null,
},
};
@@ -2797,8 +2831,7 @@ export class JMAPClient implements IJMAPClient {
create: { "sub-1": { emailId: `#${emailId}`, identityId: finalIdentityId } },
onSuccessUpdateEmail: {
"#sub-1": {
- [`mailboxIds/${draftsMailbox.id}`]: null,
- [`mailboxIds/${sentMailbox.id}`]: true,
+ ...mailboxIdsReplacement(sentMailbox.id),
"keywords/$draft": null,
},
},
@@ -2983,8 +3016,7 @@ export class JMAPClient implements IJMAPClient {
create: { "sub-1": { emailId: `#${emailId}`, identityId } },
onSuccessUpdateEmail: {
"#sub-1": {
- [`mailboxIds/${draftsMailbox.id}`]: null,
- [`mailboxIds/${sentMailbox.id}`]: true,
+ ...mailboxIdsReplacement(sentMailbox.id),
"keywords/$draft": null,
},
},
@@ -3138,8 +3170,7 @@ export class JMAPClient implements IJMAPClient {
create: { "sub-1": { emailId: `#${emailId}`, identityId } },
onSuccessUpdateEmail: {
"#sub-1": {
- [`mailboxIds/${draftsMailbox.id}`]: null,
- [`mailboxIds/${sentMailbox.id}`]: true,
+ ...mailboxIdsReplacement(sentMailbox.id),
"keywords/$draft": null,
},
},
@@ -6249,8 +6280,7 @@ export class JMAPClient implements IJMAPClient {
...(draftMailboxId ? {
onSuccessUpdateEmail: {
'#raw-submit': {
- [`mailboxIds/${draftMailboxId}`]: null,
- [`mailboxIds/${sentMailboxId}`]: true,
+ ...mailboxIdsReplacement(sentMailboxId),
'keywords/$draft': null,
},
},
@@ -6417,8 +6447,7 @@ export class JMAPClient implements IJMAPClient {
...(draftsMailbox && sentMailbox ? {
onSuccessUpdateEmail: {
'#replacement': {
- [`mailboxIds/${draftsMailbox.id}`]: null,
- [`mailboxIds/${sentMailbox.id}`]: true,
+ ...mailboxIdsReplacement(sentMailbox.id),
'keywords/$draft': null,
},
},
@@ -6450,15 +6479,17 @@ export class JMAPClient implements IJMAPClient {
return { scheduled: true, emailId, emailSubmissionId: replacementId, sendAt: finalSendAt };
}
- async restoreEmailToDraft(emailId: string, draftMailboxId: string, sentMailboxId?: string): Promise {
+ // The third parameter is intentionally unused: this restores an undo-send /
+ // canceled-scheduled message to be a draft, so it should live in Drafts *only*.
+ // A full mailboxIds replacement (rather than mailboxIds/ pointer patches)
+ // both drops the Sent copy without needing its id and stays safe for numeric
+ // mailbox ids — see mailboxIdsReplacement().
+ async restoreEmailToDraft(emailId: string, draftMailboxId: string, _sentMailboxId?: string): Promise {
const update: Record = {
- [`mailboxIds/${draftMailboxId}`]: true,
+ ...mailboxIdsReplacement(draftMailboxId),
'keywords/$draft': true,
'keywords/$seen': true,
};
- if (sentMailboxId) {
- update[`mailboxIds/${sentMailboxId}`] = null;
- }
const response = await this.request([
['Email/set', {
accountId: this.accountId,
From 8d8bc7cb1356c404260704115b12cc89591004af Mon Sep 17 00:00:00 2001
From: Stefan Hildebrandt <695494+hildebrandttk@users.noreply.github.com>
Date: Tue, 7 Jul 2026 22:51:55 +0200
Subject: [PATCH 19/22] =?UTF-8?q?test(integration):=20dockerized=20webmail?=
=?UTF-8?q?=E2=87=86Stalwart=20Playwright=20sync=20suite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Add an end-to-end integration harness that runs the webmail against a real
Stalwart mail server in Docker and drives it with Playwright, focused on the
mail/folder synchronisation behaviour (unread/total counters, folder-list
sync, account-scoped Unified Mailbox) that the unified-mailbox work touches.
- integration/ stack: Stalwart (declarative bootstrap: alice/bob/carol,
submission + IMAP listeners, permissive CORS) + webmail (dev mode, so the
browser's plaintext cross-origin JMAP calls aren't blocked by the prod CSP).
- Helpers: dependency-free SMTP submit client, JMAP client for seeding /
inspecting server state, and page helpers (login, add/switch account,
locale-independent folder-counter reads).
- Specs: login, single-account sync (receive/read/move/delete/folder-create/
burst) and multi-account (per-account isolation + cross-account Unified
Inbox aggregation + background-account delivery). 12 tests, all green.
- Add focused data-testid hooks to the mail UI (folder rows + counters, email
list items, account switcher, composer) for stable selectors.
- Exclude examples/ and integration/ from tsconfig/eslint/.dockerignore.
---
.dockerignore | 5 +
components/email/email-composer.tsx | 8 +-
components/email/thread-list-item.tsx | 4 +
components/layout/account-switcher.tsx | 6 +
components/layout/sidebar.tsx | 28 ++-
eslint.config.mjs | 2 +
integration/.env.example | 11 ++
integration/.gitignore | 10 +
integration/README.md | 123 ++++++++++++
integration/docker-compose.yml | 78 ++++++++
integration/run-tests.sh | 36 ++++
integration/stalwart/.dockerignore | 2 +
integration/stalwart/Dockerfile | 29 +++
integration/stalwart/entrypoint.sh | 129 +++++++++++++
integration/stalwart/plan-accounts.ndjson.tpl | 8 +
integration/stalwart/plan-bootstrap.ndjson | 1 +
integration/stalwart/prepare-stalwart-cli.sh | 48 +++++
integration/tests/01-login.spec.ts | 37 ++++
integration/tests/02-mail-sync.spec.ts | 125 ++++++++++++
integration/tests/03-multi-account.spec.ts | 104 ++++++++++
integration/tests/global-setup.ts | 64 +++++++
integration/tests/global-teardown.ts | 23 +++
integration/tests/helpers/app.ts | 180 ++++++++++++++++++
integration/tests/helpers/config.ts | 45 +++++
integration/tests/helpers/jmap.ts | 142 ++++++++++++++
integration/tests/helpers/smtp.ts | 128 +++++++++++++
integration/webmail-config/policy.json | 7 +
integration/webmail.Dockerfile | 33 ++++
package.json | 1 +
playwright.integration.config.ts | 32 ++++
tsconfig.json | 4 +-
31 files changed, 1448 insertions(+), 5 deletions(-)
create mode 100644 integration/.env.example
create mode 100644 integration/.gitignore
create mode 100644 integration/README.md
create mode 100644 integration/docker-compose.yml
create mode 100755 integration/run-tests.sh
create mode 100644 integration/stalwart/.dockerignore
create mode 100644 integration/stalwart/Dockerfile
create mode 100755 integration/stalwart/entrypoint.sh
create mode 100644 integration/stalwart/plan-accounts.ndjson.tpl
create mode 100644 integration/stalwart/plan-bootstrap.ndjson
create mode 100755 integration/stalwart/prepare-stalwart-cli.sh
create mode 100644 integration/tests/01-login.spec.ts
create mode 100644 integration/tests/02-mail-sync.spec.ts
create mode 100644 integration/tests/03-multi-account.spec.ts
create mode 100644 integration/tests/global-setup.ts
create mode 100644 integration/tests/global-teardown.ts
create mode 100644 integration/tests/helpers/app.ts
create mode 100644 integration/tests/helpers/config.ts
create mode 100644 integration/tests/helpers/jmap.ts
create mode 100644 integration/tests/helpers/smtp.ts
create mode 100644 integration/webmail-config/policy.json
create mode 100644 integration/webmail.Dockerfile
create mode 100644 playwright.integration.config.ts
diff --git a/.dockerignore b/.dockerignore
index 771c8d7d..509fe74a 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -9,3 +9,8 @@ scripts/
TODO.md
*.md
!README.md
+# Sibling projects / test harness - not part of the webmail image
+examples/
+integration/
+e2e/
+**/node_modules
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index 8d41f476..fb10c866 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -2050,7 +2050,7 @@ export function EmailComposer({
};
return (
-
+
{/* To field */}
-
+
{t('to')}:
{t('subject_label')}
(
ref={ref}
{...dragHandlers}
{...longPressHandlers}
+ data-testid="email-list-item"
+ data-email-id={email.id}
+ data-subject={email.subject || ''}
+ data-unread={isUnread ? 'true' : 'false'}
className={cn(
"relative group cursor-pointer select-none transition-shadow duration-200 border-b border-border overflow-hidden",
resolvedColorTag ? resolvedColorTag : (
diff --git a/components/layout/account-switcher.tsx b/components/layout/account-switcher.tsx
index 8264c991..179aeddd 100644
--- a/components/layout/account-switcher.tsx
+++ b/components/layout/account-switcher.tsx
@@ -151,6 +151,8 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
setOpen(!open)}
+ data-testid="account-switcher"
+ data-active-account-id={activeAccountId ?? undefined}
className={cn(
"flex items-center gap-2 rounded-md transition-colors",
variant === "rail"
@@ -213,6 +215,9 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
>
handleSwitch(account.id)}
+ data-testid="account-option"
+ data-account-id={account.id}
+ data-account-email={account.email || account.username}
className={cn(
"w-full flex items-start gap-3 px-3 py-2.5 text-start transition-colors",
isActive ? "bg-accent/50" : "hover:bg-muted",
@@ -274,6 +279,7 @@ export function AccountSwitcher({ variant = "rail", className }: AccountSwitcher
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 507c0227..3782c779 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -220,8 +220,13 @@ function SidebarRowCounts({
) : null;
return (
- 0 ? `${unreadCount} unread / ${totalCount} total` : `${unreadCount} unread`}>
-
+ 0 ? `${unreadCount} unread / ${totalCount} total` : `${unreadCount} unread`}
+ data-testid="folder-counts"
+ data-unread={unreadCount}
+ data-total={totalCount}
+ >
{unreadNode}
{unreadCount > 0 && totalCount > 0 && (
/
@@ -249,6 +254,10 @@ interface SidebarRowProps {
isValidDropTarget?: boolean;
isInvalidDropTarget?: boolean;
onContextMenu?: (e: React.MouseEvent) => void;
+ /** Stable identifiers for integration tests (not user-visible). */
+ testRole?: string | null;
+ testName?: string;
+ testMailboxId?: string;
}
function SidebarRow({
@@ -269,6 +278,9 @@ function SidebarRow({
isValidDropTarget,
isInvalidDropTarget,
onContextMenu,
+ testRole,
+ testName,
+ testMailboxId,
}: SidebarRowProps) {
const t = useTranslations('sidebar');
const leftPad = isCollapsed ? 0 : ROW_PX_BASE + depth * INDENT_STEP;
@@ -277,6 +289,10 @@ function SidebarRow({
}
label={label}
+ testRole={node.role}
+ testName={node.name}
+ testMailboxId={node.id}
depth={node.depth}
isSelected={isSelected}
isVirtual={isVirtualNode}
@@ -1047,6 +1066,9 @@ export function Sidebar({
key={unifiedId}
icon={ {
+ const deadline = Date.now() + timeoutMs;
+ for (;;) {
+ try {
+ const res = await fetch(url, { headers: { Authorization: 'Basic ' + Buffer.from(`${ACCOUNTS.alice.email}:${ACCOUNT_PASSWORD}`).toString('base64') } });
+ if (check(res)) return;
+ } catch {
+ /* not up yet */
+ }
+ if (Date.now() > deadline) throw new Error(`Timed out waiting for ${label} at ${url}`);
+ await new Promise((r) => setTimeout(r, 2000));
+ }
+}
+
+export default async function globalSetup(): Promise {
+ if (process.env.IT_NO_DOCKER === '1') {
+ console.log('[global-setup] IT_NO_DOCKER=1 — skipping docker compose management');
+ } else {
+ console.log('[global-setup] fetching stalwart-cli');
+ run('bash', [path.join(INTEGRATION_DIR, 'stalwart', 'prepare-stalwart-cli.sh')]);
+
+ if (!existsSync(ENV_FILE)) {
+ console.log('[global-setup] creating integration/.env from .env.example');
+ copyFileSync(path.join(INTEGRATION_DIR, '.env.example'), ENV_FILE);
+ }
+
+ console.log('[global-setup] docker compose up -d --build --wait');
+ run('docker', [
+ 'compose', '-f', COMPOSE_FILE, '--env-file', ENV_FILE,
+ 'up', '-d', '--build', '--wait', '--wait-timeout', '300',
+ ]);
+ }
+
+ console.log('[global-setup] waiting for Stalwart JMAP');
+ await waitFor('Stalwart JMAP', `${JMAP_URL}/jmap/session`, (r) => r.ok);
+
+ console.log('[global-setup] waiting for webmail');
+ await waitFor('webmail', `${WEBMAIL_URL}/api/health`, (r) => r.ok, 240000);
+
+ console.log('[global-setup] stack ready');
+}
diff --git a/integration/tests/global-teardown.ts b/integration/tests/global-teardown.ts
new file mode 100644
index 00000000..256183f4
--- /dev/null
+++ b/integration/tests/global-teardown.ts
@@ -0,0 +1,23 @@
+/**
+ * By default the stack is left running after the suite so re-runs are fast and
+ * the state can be inspected (webmail on :3000, Stalwart admin on :8025).
+ * Set IT_TEARDOWN=1 to tear the containers (and volumes) down instead.
+ */
+import { execFileSync } from 'node:child_process';
+import path from 'node:path';
+
+const INTEGRATION_DIR = path.resolve(__dirname, '..');
+const COMPOSE_FILE = path.join(INTEGRATION_DIR, 'docker-compose.yml');
+const ENV_FILE = path.join(INTEGRATION_DIR, '.env');
+
+export default async function globalTeardown(): Promise {
+ if (process.env.IT_TEARDOWN !== '1' || process.env.IT_NO_DOCKER === '1') {
+ console.log('[global-teardown] leaving stack up (set IT_TEARDOWN=1 to remove it)');
+ return;
+ }
+ console.log('[global-teardown] docker compose down -v');
+ execFileSync('docker', ['compose', '-f', COMPOSE_FILE, '--env-file', ENV_FILE, 'down', '-v'], {
+ cwd: INTEGRATION_DIR,
+ stdio: 'inherit',
+ });
+}
diff --git a/integration/tests/helpers/app.ts b/integration/tests/helpers/app.ts
new file mode 100644
index 00000000..2d859c18
--- /dev/null
+++ b/integration/tests/helpers/app.ts
@@ -0,0 +1,180 @@
+/**
+ * Page-level helpers for driving the Bulwark webmail in integration tests.
+ *
+ * Selectors rely on the data-testid hooks added to the mail UI (sidebar folder
+ * rows + counters, account switcher, composer). Folder counters are read from
+ * the `data-unread` / `data-total` attributes on `[data-testid=folder-counts]`
+ * rather than parsing rendered text, so assertions are locale-independent.
+ */
+import { expect, type Page, type Locator } from '@playwright/test';
+import type { TestAccount } from './config';
+
+/**
+ * The account switcher renders twice (collapsed nav rail + expanded sidebar);
+ * both carry the same data-testid and state, so always target the first.
+ */
+export function accountSwitcher(page: Page): Locator {
+ return page.locator('[data-testid="account-switcher"]').first();
+}
+
+/**
+ * The Next.js dev-mode overlay (``) sits in the bottom-left
+ * corner and intercepts pointer events over the account switcher. Disable
+ * pointer events on the portal host (light DOM) so it can't swallow clicks.
+ * Registered as an init script so it survives navigations within the test.
+ */
+export async function neutralizeDevOverlay(page: Page): Promise {
+ await page.addInitScript(() => {
+ const inject = () => {
+ const s = document.createElement('style');
+ s.textContent = 'nextjs-portal{pointer-events:none!important}';
+ document.documentElement.appendChild(s);
+ };
+ if (document.documentElement) inject();
+ else document.addEventListener('DOMContentLoaded', inject);
+ });
+}
+
+/**
+ * Enable the cross-account Unified Mailbox before the app boots by seeding the
+ * persisted settings store. Requires the `unifiedCrossAccountEnabled` admin
+ * feature gate (provided by integration/webmail-config/policy.json). Must be
+ * called before {@link login} so the init script is registered before the
+ * first navigation.
+ */
+export async function seedUnifiedSettings(page: Page): Promise {
+ await page.addInitScript(() => {
+ localStorage.setItem(
+ 'settings-storage',
+ JSON.stringify({
+ state: { enableUnifiedMailbox: true, unifiedCrossAccount: true, includeGroupInUnified: true },
+ version: 7,
+ }),
+ );
+ });
+}
+
+/** Fill and submit the login form (works for first login and add-account). */
+async function submitCredentials(page: Page, account: TestAccount): Promise {
+ await page.locator('#username').waitFor({ state: 'visible', timeout: 30000 });
+ await page.fill('#username', account.email);
+ await page.fill('#password', account.password);
+ await page.click('button[type="submit"]');
+}
+
+/** Log in as `account` from a clean context and wait for the mailbox to load. */
+export async function login(page: Page, account: TestAccount): Promise {
+ await neutralizeDevOverlay(page);
+ await page.goto('/');
+ await submitCredentials(page, account);
+ // Landed in the app once the account switcher (sidebar chrome) is present.
+ await accountSwitcher(page).waitFor({ state: 'visible', timeout: 30000 });
+}
+
+/** Add a second (or later) account via the account switcher + login form. */
+export async function addAccount(page: Page, account: TestAccount): Promise {
+ await accountSwitcher(page).click();
+ await page.locator('[data-testid="add-account"]').click();
+ await submitCredentials(page, account);
+ // Wait until the switcher reports the newly added account as active.
+ await expect
+ .poll(async () => activeAccountEmail(page), { timeout: 30000 })
+ .toBe(account.email);
+}
+
+/** Email of the currently active account, read from the switcher option list. */
+export async function activeAccountEmail(page: Page): Promise {
+ const switcher = accountSwitcher(page);
+ const id = await switcher.getAttribute('data-active-account-id');
+ if (!id) return null;
+ await switcher.click();
+ const email = await page
+ .locator(`[data-testid="account-option"][data-account-id="${id}"]`)
+ .first()
+ .getAttribute('data-account-email');
+ // Close the popover again.
+ await page.keyboard.press('Escape');
+ return email;
+}
+
+/** Switch the active account to the one matching `email`. */
+export async function switchAccount(page: Page, email: string): Promise {
+ await accountSwitcher(page).click();
+ await page.locator(`[data-testid="account-option"][data-account-email="${email}"]`).first().click();
+ await expect.poll(async () => activeAccountEmail(page), { timeout: 30000 }).toBe(email);
+}
+
+/**
+ * Nudge the app to reconcile mailbox state immediately.
+ *
+ * The JMAP client refetches on `visibilitychange` (tab focus) via
+ * checkForStateChanges(). Dispatching it makes reconciliation deterministic
+ * after an *external* mutation, sidestepping the small window right after
+ * login where a change can land before the SSE push channel has settled.
+ * Mirrors what happens when a real user tabs back to the mailbox.
+ */
+export async function forceSync(page: Page): Promise {
+ await page.evaluate(() => document.dispatchEvent(new Event('visibilitychange')));
+}
+
+export interface FolderSelector {
+ role?: string;
+ name?: string;
+ mailboxId?: string;
+}
+
+/** Locator for a sidebar folder row. */
+export function folderRow(page: Page, sel: FolderSelector): Locator {
+ let s = '[data-testid="folder-row"]';
+ if (sel.role) s += `[data-folder-role="${sel.role}"]`;
+ if (sel.name) s += `[data-folder-name="${sel.name}"]`;
+ if (sel.mailboxId) s += `[data-mailbox-id="${sel.mailboxId}"]`;
+ return page.locator(s);
+}
+
+export interface FolderCounts {
+ unread: number;
+ total: number;
+}
+
+/**
+ * Read a folder's unread/total counts. When both are zero the counts element
+ * is not rendered, so a missing element is reported as {0,0}.
+ */
+export async function folderCounts(page: Page, sel: FolderSelector): Promise {
+ const row = folderRow(page, sel).first();
+ const counts = row.locator('[data-testid="folder-counts"]');
+ if ((await counts.count()) === 0) return { unread: 0, total: 0 };
+ const unread = await counts.getAttribute('data-unread');
+ const total = await counts.getAttribute('data-total');
+ return { unread: Number(unread ?? 0), total: Number(total ?? 0) };
+}
+
+/** Poll until a folder's unread count reaches `expected`. */
+export async function expectFolderUnread(page: Page, sel: FolderSelector, expected: number, timeout = 30000): Promise {
+ await expect
+ .poll(async () => (await folderCounts(page, sel)).unread, { timeout })
+ .toBe(expected);
+}
+
+/** Poll until a folder's total count reaches `expected`. */
+export async function expectFolderTotal(page: Page, sel: FolderSelector, expected: number, timeout = 30000): Promise {
+ await expect
+ .poll(async () => (await folderCounts(page, sel)).total, { timeout })
+ .toBe(expected);
+}
+
+/** Click a folder row to select it. */
+export async function openFolder(page: Page, sel: FolderSelector): Promise {
+ await folderRow(page, sel).first().click();
+}
+
+/** Locator for an email row by (exact) subject. */
+export function emailItem(page: Page, subject: string): Locator {
+ return page.locator(`[data-testid="email-list-item"][data-subject="${subject}"]`);
+}
+
+/** Poll until an email with `subject` is present in the list. */
+export async function expectEmailVisible(page: Page, subject: string, timeout = 20000): Promise {
+ await expect(emailItem(page, subject).first()).toBeVisible({ timeout });
+}
diff --git a/integration/tests/helpers/config.ts b/integration/tests/helpers/config.ts
new file mode 100644
index 00000000..cf87436e
--- /dev/null
+++ b/integration/tests/helpers/config.ts
@@ -0,0 +1,45 @@
+/**
+ * Shared configuration for the integration tests. Values mirror the Stalwart
+ * bootstrap (integration/stalwart/*) and the docker-compose port mappings.
+ * Everything is overridable via env so the suite can run against a differently
+ * mapped stack (e.g. remote CI) without code changes.
+ */
+
+export const DOMAIN = process.env.IT_DOMAIN ?? 'example.org';
+
+/** Shared password for every test mailbox (TEST_ACCOUNT_PASSWORD in .env). */
+export const ACCOUNT_PASSWORD = process.env.IT_ACCOUNT_PASSWORD ?? 'test-pass-123';
+
+/** Webmail app origin (containerised, published on the host). */
+export const WEBMAIL_URL = process.env.IT_WEBMAIL_URL ?? 'http://localhost:3000';
+
+/** Stalwart JMAP + admin base URL (host-published). */
+export const JMAP_URL = process.env.IT_JMAP_URL ?? 'http://localhost:8025';
+
+/** Stalwart SMTP submission listener (host-published, maps to container 587). */
+export const SMTP_HOST = process.env.IT_SMTP_HOST ?? 'localhost';
+export const SMTP_PORT = Number(process.env.IT_SMTP_PORT ?? 1025);
+
+/** Recovery admin — `user:password`, used for stalwart-cli style admin JMAP. */
+export const ADMIN_CREDENTIALS = process.env.IT_ADMIN ?? 'admin:bootstrap-secret';
+
+export interface TestAccount {
+ /** Local part, e.g. "alice". */
+ user: string;
+ /** Full address, e.g. "alice@example.org". */
+ email: string;
+ password: string;
+}
+
+function acct(user: string): TestAccount {
+ return { user, email: `${user}@${DOMAIN}`, password: ACCOUNT_PASSWORD };
+}
+
+/** The mailboxes provisioned by the Stalwart bootstrap plan. */
+export const ACCOUNTS = {
+ alice: acct('alice'),
+ bob: acct('bob'),
+ carol: acct('carol'),
+} as const;
+
+export type AccountKey = keyof typeof ACCOUNTS;
diff --git a/integration/tests/helpers/jmap.ts b/integration/tests/helpers/jmap.ts
new file mode 100644
index 00000000..e7a1dbe8
--- /dev/null
+++ b/integration/tests/helpers/jmap.ts
@@ -0,0 +1,142 @@
+/**
+ * Minimal JMAP client for test setup/inspection against Stalwart.
+ *
+ * Uses global fetch (Node 18+). Not a full JMAP implementation — just the
+ * pieces the integration tests need: authenticate, read/reset mailboxes,
+ * create folders, and poll for delivery. Assertions on *server* state (via
+ * this client) are kept separate from assertions on *UI* state (via the page),
+ * so a failing test can tell whether the bug is in delivery or in the webmail's
+ * sync.
+ */
+import { JMAP_URL } from './config';
+
+const CORE = 'urn:ietf:params:jmap:core';
+const MAIL = 'urn:ietf:params:jmap:mail';
+
+interface JmapMailbox {
+ id: string;
+ name: string;
+ role: string | null;
+ parentId: string | null;
+ totalEmails: number;
+ unreadEmails: number;
+}
+
+type MethodCall = [string, Record, string];
+
+export class JmapClient {
+ private authHeader: string;
+ private apiUrl: string;
+ accountId = '';
+
+ private constructor(private email: string, password: string) {
+ this.authHeader = 'Basic ' + Buffer.from(`${email}:${password}`).toString('base64');
+ // Stalwart advertises apiUrl on its configured hostname (mail.example.org);
+ // rewrite onto the reachable origin, exactly as the app client does.
+ this.apiUrl = `${JMAP_URL}/jmap/`;
+ }
+
+ static async connect(email: string, password: string): Promise {
+ const c = new JmapClient(email, password);
+ const res = await fetch(`${JMAP_URL}/jmap/session`, {
+ headers: { Authorization: c.authHeader },
+ });
+ if (!res.ok) throw new Error(`JMAP session failed for ${email}: ${res.status}`);
+ const session = await res.json();
+ const primary = session.primaryAccounts?.[MAIL];
+ if (!primary) throw new Error(`No mail account for ${email} in JMAP session`);
+ c.accountId = primary;
+ return c;
+ }
+
+ async request(methodCalls: MethodCall[]): Promise {
+ const res = await fetch(this.apiUrl, {
+ method: 'POST',
+ headers: { Authorization: this.authHeader, 'Content-Type': 'application/json' },
+ body: JSON.stringify({ using: [CORE, MAIL], methodCalls }),
+ });
+ if (!res.ok) throw new Error(`JMAP request failed: ${res.status} ${await res.text()}`);
+ return res.json();
+ }
+
+ async mailboxes(): Promise {
+ const r = await this.request([['Mailbox/get', { accountId: this.accountId }, '0']]);
+ return r.methodResponses[0][1].list as JmapMailbox[];
+ }
+
+ async mailboxByRole(role: string): Promise {
+ return (await this.mailboxes()).find((m) => m.role === role);
+ }
+
+ async mailboxByName(name: string): Promise {
+ return (await this.mailboxes()).find((m) => m.name === name);
+ }
+
+ /** Create a folder (top-level) and return its id. Idempotent by name. */
+ async createMailbox(name: string, parentId: string | null = null): Promise {
+ const existing = await this.mailboxByName(name);
+ if (existing) return existing.id;
+ const r = await this.request([
+ ['Mailbox/set', { accountId: this.accountId, create: { new: { name, parentId } } }, '0'],
+ ]);
+ const created = r.methodResponses[0][1].created?.new;
+ if (!created) throw new Error(`Mailbox/set create failed: ${JSON.stringify(r.methodResponses[0][1])}`);
+ return created.id;
+ }
+
+ async deleteMailboxByName(name: string): Promise {
+ const mb = await this.mailboxByName(name);
+ if (!mb) return;
+ await this.request([
+ ['Mailbox/set', { accountId: this.accountId, onDestroyRemoveEmails: true, destroy: [mb.id] }, '0'],
+ ]);
+ }
+
+ private async allEmailIds(): Promise {
+ const r = await this.request([['Email/query', { accountId: this.accountId, limit: 5000 }, '0']]);
+ return r.methodResponses[0][1].ids as string[];
+ }
+
+ /**
+ * Reset a mailbox to a clean slate: destroy every message and delete any
+ * non-system (custom) folder. System folders (Inbox/Sent/Trash/…) are kept.
+ */
+ async reset(): Promise {
+ const ids = await this.allEmailIds();
+ if (ids.length) {
+ await this.request([['Email/set', { accountId: this.accountId, destroy: ids }, '0']]);
+ }
+ const custom = (await this.mailboxes()).filter((m) => !m.role);
+ if (custom.length) {
+ await this.request([
+ ['Mailbox/set', { accountId: this.accountId, onDestroyRemoveEmails: true, destroy: custom.map((m) => m.id) }, '0'],
+ ]);
+ }
+ }
+
+ /** Look up an email id by subject within an optional mailbox. */
+ async findEmailBySubject(subject: string, mailboxId?: string): Promise {
+ const filter: Record = { subject };
+ if (mailboxId) filter.inMailbox = mailboxId;
+ const r = await this.request([
+ ['Email/query', { accountId: this.accountId, filter }, '0'],
+ ['Email/get', {
+ accountId: this.accountId,
+ '#ids': { resultOf: '0', name: 'Email/query', path: '/ids' },
+ properties: ['id', 'subject', 'keywords', 'mailboxIds', 'from', 'preview'],
+ }, '1'],
+ ]);
+ return r.methodResponses[1][1].list[0];
+ }
+
+ /** Poll until a message with `subject` is delivered (or throw on timeout). */
+ async waitForEmail(subject: string, opts: { mailboxId?: string; timeoutMs?: number } = {}): Promise {
+ const deadline = Date.now() + (opts.timeoutMs ?? 15000);
+ for (;;) {
+ const found = await this.findEmailBySubject(subject, opts.mailboxId);
+ if (found) return found;
+ if (Date.now() > deadline) throw new Error(`Timed out waiting for email "${subject}" (${this.email})`);
+ await new Promise((r) => setTimeout(r, 500));
+ }
+ }
+}
diff --git a/integration/tests/helpers/smtp.ts b/integration/tests/helpers/smtp.ts
new file mode 100644
index 00000000..d81c6bcd
--- /dev/null
+++ b/integration/tests/helpers/smtp.ts
@@ -0,0 +1,128 @@
+/**
+ * Dependency-free SMTP submission client.
+ *
+ * Speaks just enough SMTP to authenticate against Stalwart's plaintext
+ * submission listener (AUTH LOGIN, no STARTTLS) and inject a message. Used to
+ * simulate real inbound mail so the webmail's sync behaviour can be observed.
+ * A raw socket keeps the test harness free of a nodemailer dependency.
+ */
+import net from 'node:net';
+import { SMTP_HOST, SMTP_PORT } from './config';
+
+interface SendOptions {
+ host?: string;
+ port?: number;
+ /** Envelope + auth sender, e.g. "alice@example.org". */
+ from: string;
+ /** Auth username; defaults to `from`. */
+ authUser?: string;
+ authPass: string;
+ /** One or more envelope recipients. */
+ to: string | string[];
+ subject: string;
+ /** Plain-text body. */
+ body: string;
+ /** Extra headers (e.g. custom Message-ID / In-Reply-To for threading). */
+ headers?: Record;
+}
+
+class SmtpError extends Error {}
+
+function crlf(s: string): string {
+ return s.replace(/\r?\n/g, '\r\n');
+}
+
+/**
+ * Submit a single message. Resolves once the server has accepted it (250 after
+ * end-of-DATA). Rejects on any non-2xx/3xx reply or socket error.
+ */
+export async function sendMail(opts: SendOptions): Promise {
+ const host = opts.host ?? SMTP_HOST;
+ const port = opts.port ?? SMTP_PORT;
+ const recipients = Array.isArray(opts.to) ? opts.to : [opts.to];
+ const authUser = opts.authUser ?? opts.from;
+
+ const socket = net.createConnection({ host, port });
+ socket.setEncoding('utf8');
+ socket.setTimeout(15000);
+
+ let buffer = '';
+ let resolveLine: ((line: string) => void) | null = null;
+ let pendingError: Error | null = null;
+
+ socket.on('data', (chunk: string) => {
+ buffer += chunk;
+ // A complete reply ends with " ...\r\n" (space, not hyphen, after code).
+ const lines = buffer.split('\r\n');
+ for (let i = 0; i < lines.length - 1; i++) {
+ const line = lines[i];
+ if (/^\d{3} /.test(line) && resolveLine) {
+ const r = resolveLine;
+ resolveLine = null;
+ buffer = lines.slice(i + 1).join('\r\n');
+ r(line);
+ return;
+ }
+ }
+ });
+ socket.on('timeout', () => { pendingError = new SmtpError('SMTP timeout'); socket.destroy(); });
+ socket.on('error', (e) => { pendingError = e; });
+
+ const waitReply = (expect: string): Promise =>
+ new Promise((resolve, reject) => {
+ if (pendingError) return reject(pendingError);
+ resolveLine = (line) => {
+ if (!line.startsWith(expect)) {
+ reject(new SmtpError(`Expected ${expect}, got: ${line}`));
+ } else {
+ resolve(line);
+ }
+ };
+ });
+
+ const send = (line: string): void => { socket.write(line + '\r\n'); };
+ const b64 = (s: string) => Buffer.from(s).toString('base64');
+
+ try {
+ await new Promise((resolve, reject) => {
+ socket.once('connect', resolve);
+ socket.once('error', reject);
+ });
+ await waitReply('220');
+ send('EHLO integration-tests');
+ await waitReply('250');
+ send('AUTH LOGIN');
+ await waitReply('334');
+ send(b64(authUser));
+ await waitReply('334');
+ send(b64(opts.authPass));
+ await waitReply('235');
+ send(`MAIL FROM:<${opts.from}>`);
+ await waitReply('250');
+ for (const rcpt of recipients) {
+ send(`RCPT TO:<${rcpt}>`);
+ await waitReply('250');
+ }
+ send('DATA');
+ await waitReply('354');
+
+ const headers: Record = {
+ From: opts.from,
+ To: recipients.join(', '),
+ Subject: opts.subject,
+ 'Content-Type': 'text/plain; charset=utf-8',
+ ...opts.headers,
+ };
+ const headerBlock = Object.entries(headers)
+ .map(([k, v]) => `${k}: ${v}`)
+ .join('\r\n');
+ // Dot-stuff any line that begins with '.'
+ const safeBody = crlf(opts.body).replace(/\r\n\./g, '\r\n..');
+ send(`${headerBlock}\r\n\r\n${safeBody}\r\n.`);
+ await waitReply('250');
+ send('QUIT');
+ await waitReply('221').catch(() => { /* some servers drop before 221 */ });
+ } finally {
+ socket.destroy();
+ }
+}
diff --git a/integration/webmail-config/policy.json b/integration/webmail-config/policy.json
new file mode 100644
index 00000000..32c2e803
--- /dev/null
+++ b/integration/webmail-config/policy.json
@@ -0,0 +1,7 @@
+{
+ "features": {
+ "unifiedCrossAccountEnabled": true,
+ "crossUnreadViewEnabled": true,
+ "crossAllViewEnabled": true
+ }
+}
diff --git a/integration/webmail.Dockerfile b/integration/webmail.Dockerfile
new file mode 100644
index 00000000..fdb97f48
--- /dev/null
+++ b/integration/webmail.Dockerfile
@@ -0,0 +1,33 @@
+# Webmail image for integration testing — runs Next.js in DEVELOPMENT mode.
+#
+# Why dev mode rather than the production Dockerfile at the repo root?
+# The browser talks JMAP directly to Stalwart at http://localhost:8025 (plain
+# HTTP, cross-origin). The app's production Content-Security-Policy pins
+# connect-src to `'self' https:`, which would block that plaintext cross-origin
+# fetch. In development mode proxy.ts widens connect-src to `'self' http:
+# https: ws: wss:` — exactly what a local, TLS-less Stalwart needs. Running
+# from source also ships the integration-test data-testid hooks without a
+# production rebuild.
+#
+# Build context is the repo root (see docker-compose.yml `context: ..`), so the
+# root .dockerignore keeps examples/, integration/ and node_modules out.
+
+FROM node:24-alpine
+WORKDIR /app
+
+# Install dependencies first for layer caching.
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# App source (data-testid hooks included).
+COPY . .
+
+ENV NODE_ENV=development
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+
+EXPOSE 3000
+
+# Bind to 0.0.0.0 so the published port is reachable from the host/browser.
+CMD ["npx", "next", "dev", "-H", "0.0.0.0", "-p", "3000"]
diff --git a/package.json b/package.json
index a3d719c3..d7baba27 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"test:translations": "vitest run --no-isolate lib/__tests__/translations.test.ts",
+ "test:integration": "bash integration/run-tests.sh",
"prepare": "husky",
"typecheck": "tsc --noEmit"
},
diff --git a/playwright.integration.config.ts b/playwright.integration.config.ts
new file mode 100644
index 00000000..4fabdadd
--- /dev/null
+++ b/playwright.integration.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig } from '@playwright/test';
+
+/**
+ * Integration test config: drives the containerised webmail (+ Stalwart) stack
+ * managed by integration/tests/global-setup.ts. Distinct from the root
+ * playwright.config.ts (fast UI smoke tests against `npm run dev`).
+ *
+ * Run: npx playwright test -c playwright.integration.config.ts
+ */
+const WEBMAIL_URL = process.env.IT_WEBMAIL_URL ?? 'http://localhost:3000';
+
+export default defineConfig({
+ testDir: './integration/tests',
+ // next dev compiles routes lazily and each test logs in fresh, so give
+ // individual tests and their polling assertions generous headroom.
+ timeout: 90_000,
+ expect: { timeout: 20_000 },
+ fullyParallel: false,
+ workers: 1,
+ retries: process.env.CI ? 1 : 0,
+ reporter: [['list'], ['html', { open: 'never', outputFolder: 'integration/playwright-report' }]],
+ outputDir: 'integration/test-results',
+ globalSetup: './integration/tests/global-setup.ts',
+ globalTeardown: './integration/tests/global-teardown.ts',
+ use: {
+ baseURL: WEBMAIL_URL,
+ screenshot: 'only-on-failure',
+ trace: 'retain-on-failure',
+ video: 'retain-on-failure',
+ },
+ projects: [{ name: 'chromium', use: { browserName: 'chromium' } }],
+});
diff --git a/tsconfig.json b/tsconfig.json
index 315f280c..74c5f7c8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,6 +37,8 @@
],
"exclude": [
"node_modules",
- "repos"
+ "repos",
+ "examples",
+ "integration"
]
}
From 578339c400e57aa14dd769551d5453fb575890da Mon Sep 17 00:00:00 2001
From: Stefan Hildebrandt <695494+hildebrandttk@users.noreply.github.com>
Date: Wed, 15 Jul 2026 00:14:05 +0200
Subject: [PATCH 20/22] test(integration): composer From offers shared/group
identities (#569)
Provision a Stalwart group (team@example.org) with carol as a member before her
first login, and assert the composer's From selector offers the group address.
This confirms the group-membership scenario of #569 already works out of the
box: Stalwart returns the group's send-as identity on the member's own account,
so the app's normal single-account identity load surfaces it (identities.length
> 1 -> the From renders with team@).
- stalwart: create the `team` Group in plan-accounts and add carol via
User.memberGroupIds in the entrypoint (id resolved after apply, like
DOMAIN_ID). carol, not alice/bob, so the sync specs stay unshared.
- helpers: GROUP config, openComposer/composerFromOptions, and JmapClient
accounts + sharedAccountNames (Identity/get needs the submission capability).
- composer: add data-testid="composer-from" to the From and its
single-identity fallback.
Ref: https://github.com/bulwarkmail/webmail/issues/569
---
components/email/email-composer.tsx | 3 +-
integration/stalwart/entrypoint.sh | 25 ++++++++
integration/stalwart/plan-accounts.ndjson.tpl | 1 +
integration/tests/04-shared-identity.spec.ts | 59 +++++++++++++++++++
integration/tests/helpers/app.ts | 25 ++++++++
integration/tests/helpers/config.ts | 11 ++++
integration/tests/helpers/jmap.ts | 18 +++++-
7 files changed, 140 insertions(+), 2 deletions(-)
create mode 100644 integration/tests/04-shared-identity.spec.ts
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index fb10c866..ae937fc5 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -2143,6 +2143,7 @@ export function EmailComposer({
) : identities.length > 1 ? (
setSelectedIdentityId(e.target.value)}
className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors min-w-0 truncate"
@@ -2174,7 +2175,7 @@ export function EmailComposer({
})}
) : (
-
+
{subAddressTag ? (
{generateSubAddress(primaryIdentity?.email || '', subAddressTag, subAddressDelimiter)}
diff --git a/integration/stalwart/entrypoint.sh b/integration/stalwart/entrypoint.sh
index ea45f91e..61cdc8fc 100755
--- a/integration/stalwart/entrypoint.sh
+++ b/integration/stalwart/entrypoint.sh
@@ -108,6 +108,31 @@ if [ ! -f "${MARKER}" ]; then
"${STALWART_CLI}" apply --file "${PLAN_ACCOUNTS}" --quiet
rm -f "${PLAN_ACCOUNTS}"
+ # Make 'carol' a member of the 'team' group *before her first login*, so she
+ # already has the shared group mailbox (its folders show under "Shared") and
+ # the team@ send-as identity. This provisions the issue #569 scenario: the
+ # composer's From dropdown should then offer the group address. Membership is
+ # a set keyed by the group's server-assigned account id (see the User schema's
+ # memberGroupIds), so the ids are resolved here, mirroring DOMAIN_ID above.
+ # carol (not alice/bob) is used so the single-/multi-account sync specs, which
+ # drive alice and bob, keep a clean unshared environment.
+ q_account_id() {
+ STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+ "${STALWART_CLI}" query Account --json 2>/dev/null \
+ | grep "\"emailAddress\":\"$1\"" \
+ | sed -E 's/.*"id":"([^"]+)".*/\1/'
+ }
+ CAROL_ID=$(q_account_id "carol@example.org")
+ TEAM_ID=$(q_account_id "team@example.org")
+ if [ -n "${CAROL_ID}" ] && [ -n "${TEAM_ID}" ]; then
+ log "Adding carol (${CAROL_ID}) to the team group (${TEAM_ID}) [issue #569]"
+ STALWART_URL=${LOCAL_URL} STALWART_USER=admin STALWART_PASSWORD=${ADMIN_PASS} \
+ "${STALWART_CLI}" update Account "${CAROL_ID}" \
+ --field "memberGroupIds={\"${TEAM_ID}\":true}" >/dev/null
+ else
+ log "WARNING: could not resolve account ids (carol='${CAROL_ID}' team='${TEAM_ID}'); skipping group membership"
+ fi
+
# Default inbound throttles (sender->recipient + sender-IP) otherwise trip
# 452 4.4.5 when a test blasts many messages. Stalwart re-seeds the defaults
# on every start when absent, so deleting is useless; disable them instead,
diff --git a/integration/stalwart/plan-accounts.ndjson.tpl b/integration/stalwart/plan-accounts.ndjson.tpl
index 43d6fa48..aaf58263 100644
--- a/integration/stalwart/plan-accounts.ndjson.tpl
+++ b/integration/stalwart/plan-accounts.ndjson.tpl
@@ -1,6 +1,7 @@
{"@type":"create","object":"Account","value":{"alice":{"@type":"User","name":"alice","domainId":"${DOMAIN_ID}","description":"Integration test mailbox alice","credentials":{"0":{"@type":"Password","secret":"${TEST_ACCOUNT_PASSWORD}"}}}}}
{"@type":"create","object":"Account","value":{"bob":{"@type":"User","name":"bob","domainId":"${DOMAIN_ID}","description":"Integration test mailbox bob","credentials":{"0":{"@type":"Password","secret":"${TEST_ACCOUNT_PASSWORD}"}}}}}
{"@type":"create","object":"Account","value":{"carol":{"@type":"User","name":"carol","domainId":"${DOMAIN_ID}","description":"Integration test mailbox carol","credentials":{"0":{"@type":"Password","secret":"${TEST_ACCOUNT_PASSWORD}"}}}}}
+{"@type":"create","object":"Account","value":{"team":{"@type":"Group","name":"team","domainId":"${DOMAIN_ID}","description":"Team shared mailbox"}}}
{"@type":"create","object":"NetworkListener","value":{"submission":{"name":"submission","protocol":"smtp","bind":{"[::]:587":true},"tlsImplicit":false,"useTls":false,"socketReuseAddress":true,"socketNoDelay":true}}}
{"@type":"create","object":"NetworkListener","value":{"imap":{"name":"imap","protocol":"imap","bind":{"[::]:143":true},"tlsImplicit":false,"useTls":false,"socketReuseAddress":true,"socketNoDelay":true}}}
{"@type":"update","object":"MtaStageAuth","value":{"saslMechanisms":{"match":{"0":{"if":"local_port != 25","then":"[plain, login, oauthbearer, xoauth2]"}},"else":"false"}}}
diff --git a/integration/tests/04-shared-identity.spec.ts b/integration/tests/04-shared-identity.spec.ts
new file mode 100644
index 00000000..a47a7250
--- /dev/null
+++ b/integration/tests/04-shared-identity.spec.ts
@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+import { ACCOUNTS, GROUP } from './helpers/config';
+import { JmapClient } from './helpers/jmap';
+import { login, forceSync, openComposer, composerFromOptions } from './helpers/app';
+
+/**
+ * Issue #569 — the composer's "From" dropdown should include identities from
+ * shared/group accounts, not only the logged-in (connected) accounts.
+ *
+ * Scenario under test (the one expected to already work): a Stalwart *group*
+ * mailbox `team@example.org` is provisioned and `carol` is made a member of it
+ * *before her first login* (integration/stalwart/plan-accounts.ndjson.tpl +
+ * entrypoint.sh). As a member she gets the group's shared folders (shown under
+ * "Shared") and — per Stalwart — a `team@` send-as identity (Stalwart returns
+ * it among the member's own account identities). The composer should therefore
+ * offer `team@example.org` as a sender alongside her own address.
+ */
+const member = ACCOUNTS[GROUP.team.memberOf];
+const { team } = GROUP;
+
+test.describe('Composer From: shared/group identities (issue #569)', () => {
+ test('the pre-provisioned group account is reachable in the member’s JMAP session', async () => {
+ // Server-side guard for the UI expectation below: if this fails, the
+ // bootstrap group provisioning is broken (not the app). The member must see
+ // the group account in her session, and it must expose a team@ identity she
+ // can send as.
+ const memberClient = await JmapClient.connect(member.email, member.password);
+ expect(memberClient.sharedAccountNames()).toContain(team.email);
+
+ const groupAccountId = Object.entries(memberClient.accounts).find(
+ ([, name]) => name === team.email,
+ )?.[0];
+ expect(groupAccountId).toBeTruthy();
+
+ const res = await memberClient.request([
+ ['Identity/get', { accountId: groupAccountId! }, '0'],
+ ]);
+ const groupIdentityEmails = (res.methodResponses[0][1].list as { email: string }[]).map(
+ (i) => i.email,
+ );
+ expect(groupIdentityEmails).toContain(team.email);
+ });
+
+ test('the composer From selector offers the group address', async ({ page }) => {
+ await login(page, member);
+ // Shared accounts/identities are discovered from the JMAP session; give the
+ // client a beat to settle them after the first render.
+ await forceSync(page);
+
+ await openComposer(page);
+
+ // The group address alice can send as should be one of the From choices.
+ // If #569 is unaddressed the control collapses to her own address only and
+ // this poll times out — which is the point: it pins the expected behaviour.
+ await expect
+ .poll(async () => (await composerFromOptions(page)).join(' | '), { timeout: 15000 })
+ .toContain(team.email);
+ });
+});
diff --git a/integration/tests/helpers/app.ts b/integration/tests/helpers/app.ts
index 2d859c18..7922d4ab 100644
--- a/integration/tests/helpers/app.ts
+++ b/integration/tests/helpers/app.ts
@@ -169,6 +169,31 @@ export async function openFolder(page: Page, sel: FolderSelector): Promise
await folderRow(page, sel).first().click();
}
+/** Open the "New message" composer and wait for it to render. */
+export async function openComposer(page: Page): Promise {
+ await page.locator('[data-tour="compose-button"]').first().click();
+ const composer = page.locator('[data-testid="email-composer"]');
+ await composer.waitFor({ state: 'visible', timeout: 15000 });
+ return composer;
+}
+
+/**
+ * The sender addresses the composer's From control offers.
+ *
+ * With more than one identity the control is a and each choice is an
+ * ; with a single identity it collapses to a static that shows
+ * only that address. Returning the raw text of whichever is rendered lets a
+ * test assert on the *set of senders* without caring which shape it took.
+ */
+export async function composerFromOptions(page: Page): Promise {
+ const from = page.locator('[data-testid="composer-from"]').first();
+ await from.waitFor({ state: 'visible', timeout: 10000 });
+ if ((await from.locator('option').count()) > 0) {
+ return from.locator('option').allTextContents();
+ }
+ return [await from.innerText()];
+}
+
/** Locator for an email row by (exact) subject. */
export function emailItem(page: Page, subject: string): Locator {
return page.locator(`[data-testid="email-list-item"][data-subject="${subject}"]`);
diff --git a/integration/tests/helpers/config.ts b/integration/tests/helpers/config.ts
index cf87436e..b97998b4 100644
--- a/integration/tests/helpers/config.ts
+++ b/integration/tests/helpers/config.ts
@@ -43,3 +43,14 @@ export const ACCOUNTS = {
} as const;
export type AccountKey = keyof typeof ACCOUNTS;
+
+/**
+ * The shared *group* account provisioned by the bootstrap (a Stalwart Group
+ * principal, not a login). `carol` is made a member before her first login, so
+ * she sees the group's folders under "Shared" and can send as its address.
+ * Groups have no password of their own — access is via a member's session.
+ * (carol, rather than alice/bob, keeps the sync specs' accounts unshared.)
+ */
+export const GROUP = {
+ team: { user: 'team', email: `team@${DOMAIN}`, memberOf: 'carol' as AccountKey },
+} as const;
diff --git a/integration/tests/helpers/jmap.ts b/integration/tests/helpers/jmap.ts
index e7a1dbe8..372ef719 100644
--- a/integration/tests/helpers/jmap.ts
+++ b/integration/tests/helpers/jmap.ts
@@ -12,6 +12,8 @@ import { JMAP_URL } from './config';
const CORE = 'urn:ietf:params:jmap:core';
const MAIL = 'urn:ietf:params:jmap:mail';
+// Identity/* lives under the submission capability, not mail.
+const SUBMISSION = 'urn:ietf:params:jmap:submission';
interface JmapMailbox {
id: string;
@@ -28,6 +30,9 @@ export class JmapClient {
private authHeader: string;
private apiUrl: string;
accountId = '';
+ /** Every account visible in this user's session (own + shared/group),
+ * keyed by accountId -> account name (its email address). */
+ accounts: Record = {};
private constructor(private email: string, password: string) {
this.authHeader = 'Basic ' + Buffer.from(`${email}:${password}`).toString('base64');
@@ -46,14 +51,25 @@ export class JmapClient {
const primary = session.primaryAccounts?.[MAIL];
if (!primary) throw new Error(`No mail account for ${email} in JMAP session`);
c.accountId = primary;
+ c.accounts = Object.fromEntries(
+ Object.entries(session.accounts ?? {}).map(([id, a]) => [id, (a as { name: string }).name]),
+ );
return c;
}
+ /** Names (email addresses) of the shared/group accounts this user can access,
+ * i.e. everything in the session except the user's own primary account. */
+ sharedAccountNames(): string[] {
+ return Object.entries(this.accounts)
+ .filter(([id]) => id !== this.accountId)
+ .map(([, name]) => name);
+ }
+
async request(methodCalls: MethodCall[]): Promise {
const res = await fetch(this.apiUrl, {
method: 'POST',
headers: { Authorization: this.authHeader, 'Content-Type': 'application/json' },
- body: JSON.stringify({ using: [CORE, MAIL], methodCalls }),
+ body: JSON.stringify({ using: [CORE, MAIL, SUBMISSION], methodCalls }),
});
if (!res.ok) throw new Error(`JMAP request failed: ${res.status} ${await res.text()}`);
return res.json();
From 334fdbfb86443a75d1adc2abcc758a3960d2df9e Mon Sep 17 00:00:00 2001
From: honzup <5564623+honzup@users.noreply.github.com>
Date: Sat, 11 Jul 2026 11:06:14 +0200
Subject: [PATCH 21/22] feat: show unread count badge on favicon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Closes #560.
Composes the active inbox's unread count over the base favicon as an SVG
badge, served as a percent-encoded data: URL, so new mail is visible on a
tab that is not focused — including when the browser collapses tabs to
icon-only, where a title-based count disappears entirely.
The base icon is read from the rendered & { id: string }): Mailbox {
+ return {
+ name: patch.id,
+ sortOrder: 0,
+ totalEmails: 0,
+ unreadEmails: 0,
+ totalThreads: 0,
+ unreadThreads: 0,
+ isSubscribed: true,
+ myRights: {
+ mayReadItems: true,
+ mayAddItems: true,
+ mayRemoveItems: true,
+ maySetSeen: true,
+ maySetKeywords: true,
+ mayCreateChild: true,
+ mayRename: true,
+ mayDelete: true,
+ maySubmit: true,
+ },
+ ...patch,
+ } as Mailbox;
+}
+
+const initialMailboxes = useEmailStore.getState().mailboxes;
+
+beforeEach(() => {
+ useEmailStore.setState({ mailboxes: initialMailboxes });
+ useSettingsStore.setState({ faviconUnreadBadge: true });
+});
+
+afterEach(() => {
+ useEmailStore.setState({ mailboxes: initialMailboxes });
+ useSettingsStore.setState({ faviconUnreadBadge: true });
+ vi.clearAllMocks();
+});
+
+describe('FaviconBadge', () => {
+ it('badges the unread count of the primary inbox', () => {
+ useEmailStore.setState({
+ mailboxes: [mailbox({ id: 'inbox', role: 'inbox', unreadEmails: 7 })],
+ });
+
+ const { container } = render(
+ updateSetting('faviconUnreadBadge', checked)}
+ />
+
+
{(accounts.length > 1 || hasGroupInboxes) && !isSettingHidden('enableUnifiedMailbox') && (
({
+ renderBadgedFavicon: vi.fn((_source: string, count: number) =>
+ count > 0 ? `data:image/svg+xml,BADGED-${count}` : null,
+ ),
+}));
+
+const renderBadgedFaviconMock = vi.mocked(renderBadgedFavicon);
+
+const ORIGINAL_HREF = '/branding/Bulwark_Favicon.svg';
+
+/** The link the hook owns: the only one it may ever touch. */
+function badgeLink(): HTMLLinkElement | null {
+ return document.querySelector('link[data-favicon-badge]');
+}
+
+/** The base icon link the page (or React) rendered: must survive untouched. */
+function baseLinks(): HTMLLinkElement[] {
+ return Array.from(
+ document.querySelectorAll('link[rel~="icon"]:not([data-favicon-badge])'),
+ );
+}
+
+/** Every icon link in , in document order. The browser honours the last. */
+function iconLinks(): HTMLLinkElement[] {
+ return Array.from(document.head.querySelectorAll('link[rel~="icon"]'));
+}
+
+function lastIconLink(): HTMLLinkElement | null {
+ return iconLinks().at(-1) ?? null;
+}
+
+/**
+ * What Next/React does on a client-side navigation: it re-hoists its metadata
+ * icon link into , appending a *fresh* node after everything already
+ * there — including our badge link.
+ */
+function rehoistBaseIcon(href = ORIGINAL_HREF): HTMLLinkElement {
+ const link = document.createElement('link');
+ link.rel = 'icon';
+ link.href = href;
+ document.head.appendChild(link);
+ return link;
+}
+
+/** Drains microtasks (MutationObserver callbacks) and one macrotask. */
+async function settle(): Promise {
+ for (let i = 0; i < 20; i++) await Promise.resolve();
+ await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function svgResponse(body = '((resolve) => {
+ resolveFetch = resolve;
+ });
+ vi.stubGlobal(
+ 'fetch',
+ vi.fn(() => inFlight),
+ );
+
+ const { rerender } = renderHook(({ n }) => useFaviconBadge(n), {
+ initialProps: { n: 1 },
+ wrapper: StrictMode,
+ });
+
+ rerender({ n: 2 });
+ rerender({ n: 5 });
+ expect(fetch).toHaveBeenCalledTimes(1);
+
+ resolveFetch(svgResponse());
+ await waitFor(() => {
+ // The badge lands on the latest count, not the one in flight at fetch time.
+ expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-5');
+ });
+
+ rerender({ n: 6 });
+ await waitFor(() => {
+ expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-6');
+ });
+ expect(fetch).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not re-render the badge when the count is unchanged', async () => {
+ const { rerender } = renderHook(({ n }) => useFaviconBadge(n), {
+ initialProps: { n: 3 },
+ });
+ await waitFor(() => {
+ expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+ });
+
+ const settled = badgeLink();
+ renderBadgedFaviconMock.mockClear();
+ rerender({ n: 3 });
+
+ // The element identity alone is not evidence: `count` is the effect's only
+ // dependency, so React would skip the effect regardless. Assert the
+ // renderer was not invoked again — that is the behaviour under test.
+ expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+ expect(badgeLink()).toBe(settled);
+ });
+
+ describe('when the setting is off', () => {
+ it('adds no link and does not fetch, however high the count', async () => {
+ renderHook(() => useFaviconBadge(3, false));
+ await settle();
+
+ expect(fetch).not.toHaveBeenCalled();
+ expect(renderBadgedFaviconMock).not.toHaveBeenCalled();
+ expect(badgeLink()).toBeNull();
+ expect(baseLinks()).toHaveLength(1);
+ expect(baseLinks()[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+ });
+
+ it('clears a showing badge by inserting a fresh link carrying the base href', async () => {
+ // Same guarantee as the count-back-to-zero clear, and for the same reason:
+ // Firefox re-evaluates the favicon on an *insertion* and on nothing else.
+ // Turning the setting off by *removing* our link would leave the stale
+ // badge painted on the tab until a hard reload.
+ const { rerender } = renderHook(({ on }) => useFaviconBadge(3, on), {
+ initialProps: { on: true },
+ });
+ await waitFor(() => {
+ expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+ });
+ const badged = badgeLink()!;
+
+ rerender({ on: false });
+ await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+
+ const restored = badgeLink()!;
+ expect(restored).not.toBe(badged); // a NEW node: an insertion, not an href swap
+ expect(badged.isConnected).toBe(false);
+ expect(restored.getAttribute('type')).toBe('image/svg+xml');
+ expect(lastIconLink()).toBe(restored);
+
+ // And the base link the page rendered is still untouched.
+ const survivors = baseLinks();
+ expect(survivors).toHaveLength(1);
+ expect(survivors[0].getAttribute('href')).toBe(ORIGINAL_HREF);
+ });
+
+ it('re-badges with a fresh insertion when the setting is turned back on', async () => {
+ const { rerender } = renderHook(({ on }) => useFaviconBadge(3, on), {
+ initialProps: { on: true },
+ });
+ await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+ rerender({ on: false });
+ await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+ const cleared = badgeLink()!;
+
+ rerender({ on: true });
+ await waitFor(() => {
+ expect(badgeLink()!.getAttribute('href')).toBe('data:image/svg+xml,BADGED-3');
+ });
+ expect(badgeLink()).not.toBe(cleared);
+ expect(cleared.isConnected).toBe(false);
+ expect(lastIconLink()).toBe(badgeLink());
+ expect(fetch).toHaveBeenCalledTimes(1); // the base is still fetched only once
+ expect(baseLinks()).toHaveLength(1);
+ });
+
+ it('keeps its base-href link last when React re-hoists its icon', async () => {
+ const { rerender } = renderHook(({ on }) => useFaviconBadge(3, on), {
+ initialProps: { on: true },
+ });
+ await waitFor(() => expect(badgeLink()).not.toBeNull());
+
+ rerender({ on: false });
+ await waitFor(() => expect(badgeLink()!.getAttribute('href')).toBe(ORIGINAL_HREF));
+ const own = badgeLink()!;
+
+ rehoistBaseIcon();
+ await waitFor(() => expect(lastIconLink()).toBe(own));
+ expect(badgeLink()).toBe(own); // moved, not recreated
+ });
+ });
+
+ describe('when React re-hoists its icon link on a client-side navigation', () => {
+ it('moves its own link back to the end so the badge keeps winning', async () => {
+ // The field bug: Inbox badges the tab, a hop to /calendar makes React
+ // re-insert its metadata (OWN_SELECTOR);
+}
+
+/** True when ours is the last icon link in , i.e. the one the browser uses. */
+function isLastIconLink(link: HTMLLinkElement): boolean {
+ const icons = document.head.querySelectorAll(ICON_SELECTOR);
+ return icons[icons.length - 1] === link;
+}
+
+/**
+ * Appends a fresh icon link of ours, replacing any previous one of ours.
+ *
+ * Always a remove-then-append of a *new* node, never an href mutation: Firefox
+ * only re-evaluates the favicon when an icon link is inserted. It ignores an
+ * in-place href change, and — the count-back-to-zero bug — it equally ignores a
+ * removal, happily painting the last icon it was handed. So even *clearing* the
+ * badge is done by inserting: see `apply`, which re-inserts our link carrying
+ * the original base href rather than deleting it.
+ */
+function setOwnLink(href: string): void {
+ removeOwnLink();
+ const link = document.createElement('link');
+ link.rel = 'icon';
+ link.type = ICON_TYPE;
+ link.href = href;
+ link.setAttribute(MARKER, '');
+ document.head.appendChild(link);
+}
+
+/**
+ * Draws `count` as a badge on the browser-tab favicon, unless `enabled` is
+ * false (the `faviconUnreadBadge` setting).
+ *
+ * The base icon is read from the rendered (null);
+ const baseHref = useRef(null);
+ // The href our own link currently carries, and the hook's whole state machine:
+ // null -> nothing of ours is in (we have never badged)
+ // baseHref -> ours is in , showing the unbadged base icon
+ // a data: URL -> ours is in , showing the badge
+ const appliedHref = useRef(null);
+ const disabled = useRef(false);
+ const fetchStarted = useRef(false);
+ const unmounted = useRef(false);
+ const latestCount = useRef(effectiveCount);
+ latestCount.current = effectiveCount;
+
+ // Declared before the badge effect so that on a StrictMode remount it runs
+ // first and clears `unmounted` before the badge effect reads it.
+ useEffect(() => {
+ unmounted.current = false;
+ return () => {
+ unmounted.current = true;
+ // Restore the server-rendered favicon by removing our override. Nothing
+ // else in is ours to touch.
+ removeOwnLink();
+ appliedHref.current = null;
+ };
+ }, []);
+
+ // Reads the refs rather than a closure over `count`, so that the reply to an
+ // in-flight fetch — and the MutationObserver below, which outlives any single
+ // render — lands on the newest count, not the one that started it.
+ const apply = useCallback(() => {
+ if (unmounted.current || disabled.current) return;
+
+ const current = latestCount.current;
+ if (current <= 0) {
+ // Clearing the badge is an *insertion*, not a removal.
+ //
+ // The field bug: with 133 unread the tab showed "99+", the user read
+ // everything, the store went to 0 — and Firefox kept painting "99+" until
+ // a hard reload. Removing our link is not an insertion, and Firefox only
+ // re-evaluates the favicon on an insertion; a removal leaves it painting
+ // the last icon it was handed. So instead of deleting our link we replace
+ // it with a fresh one carrying the *original* base href: same pixels as
+ // the untouched base link below it, but handed to the browser as a new
+ // icon, which it does repaint.
+ //
+ // Never badged (`appliedHref` still null)? Then nothing of ours is in
+ // and nothing should be: a fully-read inbox adds no link at all.
+ const base = baseHref.current;
+ if (appliedHref.current === null || base === null) return;
+ if (appliedHref.current === base && ownLink()) return; // already showing the base: no thrash
+
+ setOwnLink(base);
+ appliedHref.current = base;
+ return;
+ }
+
+ const source = baseSource.current;
+ if (source === null) return; // still fetching; the fetch will call back
+
+ const next = renderBadgedFavicon(source, current);
+ if (!next) return;
+ if (next === appliedHref.current && ownLink()) return;
+
+ setOwnLink(next);
+ appliedHref.current = next;
+ }, []);
+
+ useEffect(() => {
+ if (disabled.current) return;
+
+ // Nothing to show and nothing applied: do not even fetch. A fully-read
+ // inbox — or the setting switched off before we ever badged — should cost
+ // no request.
+ if (effectiveCount <= 0 && baseSource.current === null && !fetchStarted.current) return;
+
+ // The base is fetched at most once, ever. Without this guard a StrictMode
+ // double-invoke issues two requests, and any count change while the fetch
+ // is in flight issues another.
+ if (baseSource.current !== null || fetchStarted.current) {
+ apply();
+ return;
+ }
+
+ // The one and only read of the base link. Its href is both what we fetch the
+ // source from and what we hand back to the browser when the badge clears.
+ const link = document.querySelector(BASE_SELECTOR);
+ const href = link?.getAttribute('href');
+ if (!href) {
+ disabled.current = true;
+ return;
+ }
+ baseHref.current = href;
+ fetchStarted.current = true;
+
+ void (async () => {
+ try {
+ const response = await fetch(href);
+ if (!response.ok) throw new Error(`favicon fetch failed: ${response.status}`);
+
+ const contentType = response.headers.get('content-type') ?? '';
+ if (!contentType.includes('image/svg+xml')) {
+ throw new Error(`favicon is not SVG: ${contentType || 'unknown'}`);
+ }
+
+ baseSource.current = await response.text();
+ apply();
+ } catch (error) {
+ disabled.current = true;
+ debug.log('[favicon-badge] disabled:', error);
+ }
+ })();
+ }, [effectiveCount, apply]);
+
+ // Keep ours the last icon link in .
+ //
+ // On a client-side navigation (Inbox -> Calendar) Next re-hoists the metadata
+ // the renderer appends, identified by its fill. */
+function band(svg: string): { x: number; y: number; w: number; h: number; rx: number } {
+ const match =
+ /]*\bx="(-?[\d.]+)"[^>]*\by="(-?[\d.]+)"[^>]*\bwidth="([\d.]+)"[^>]*\bheight="([\d.]+)"[^>]*\brx="([\d.]+)"[^>]*fill="#ffffff"/.exec(
+ svg,
+ );
+ expect(match).not.toBeNull();
+ const [, x, y, w, h, rx] = match!.map(Number);
+ return { x, y, w, h, rx };
+}
+
+function fontSize(svg: string): number {
+ return Number(/]*font-size="([\d.]+)"/.exec(svg)![1]);
+}
+
+function viewBoxOf(svg: string): { minX: number; minY: number; width: number; height: number } {
+ const [minX, minY, width, height] = /viewBox="([^"]+)"/
+ .exec(svg)![1]
+ .trim()
+ .split(/[\s,]+/)
+ .map(Number);
+ return { minX, minY, width, height };
+}
+
+describe('formatBadgeCount', () => {
+ it('returns an empty string for zero and below', () => {
+ expect(formatBadgeCount(0)).toBe('');
+ expect(formatBadgeCount(-3)).toBe('');
+ });
+
+ it('returns the count verbatim from 1 to 99', () => {
+ expect(formatBadgeCount(1)).toBe('1');
+ expect(formatBadgeCount(9)).toBe('9');
+ expect(formatBadgeCount(47)).toBe('47');
+ expect(formatBadgeCount(99)).toBe('99');
+ });
+
+ it('caps at 99+ above 99', () => {
+ // Gmail caps at 20; matching it was tried and reverted. A lower cap means a
+ // typical inbox needs three glyphs almost always, and three glyphs do not
+ // fit at the full font size — so "99+" rendered permanently smaller than a
+ // real two-digit count would have.
+ expect(formatBadgeCount(100)).toBe('99+');
+ expect(formatBadgeCount(133)).toBe('99+');
+ expect(formatBadgeCount(1000)).toBe('99+');
+ });
+
+ it('returns an empty string for non-finite input', () => {
+ expect(formatBadgeCount(Number.NaN)).toBe('');
+ expect(formatBadgeCount(Number.POSITIVE_INFINITY)).toBe('');
+ });
+});
+
+describe('renderBadgedFavicon', () => {
+ it('returns null when the count is zero', () => {
+ expect(renderBadgedFavicon(BASE_SVG, 0)).toBeNull();
+ });
+
+ it('returns null when the source is not SVG', () => {
+ expect(renderBadgedFavicon('this is not svg', 3)).toBeNull();
+ });
+
+ it('returns null when the root element is not ', () => {
+ expect(renderBadgedFavicon(' ', 3)).toBeNull();
+ });
+
+ it('returns null when the root has no viewBox', () => {
+ const noViewBox = `3<');
+ });
+
+ it('renders 99+ for large counts', () => {
+ const svg = decode(renderBadgedFavicon(BASE_SVG, 250)!);
+ expect(svg).toContain('>99+<');
+ });
+
+ it('preserves the base artwork and its clipPath id', () => {
+ const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+ expect(svg).toContain('id="_clip1"');
+ expect(svg).toContain('#123456');
+ });
+
+ it('overrides pt-unit width and height with unitless 16 and keeps the viewBox', () => {
+ const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+ expect(svg).toContain('width="16"');
+ expect(svg).toContain('height="16"');
+ expect(svg).toContain('viewBox="0 0 1000 1000"');
+ expect(svg).not.toContain('1000pt');
+ });
+
+ it('draws a white band with black digits, so the count stays legible over any base icon', () => {
+ const svg = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+ expect(svg).toMatch(/]*fill="#ffffff"/);
+ expect(svg).toMatch(/]*fill="#000000"/);
+ });
+
+ it('shrinks the font as the label grows so three glyphs still fit', () => {
+ const one = decode(renderBadgedFavicon(BASE_SVG, 3)!);
+ const three = decode(renderBadgedFavicon(BASE_SVG, 250)!);
+ expect(fontSize(three)).toBeLessThan(fontSize(one));
+ });
+
+ it('returns null rather than throwing when the source contains a lone surrogate', () => {
+ const bad = `abc\uD800def = {
+ '5': { x: 554, w: 446, font: 610 }, // textW = 1 * 0.6 * 610 = 366
+ '15': { x: 188, w: 812, font: 610 }, // textW = 2 * 0.6 * 610 = 732
+ '250': { x: 0, w: 1000, font: 920 / 1.8 }, // "99+": font = (1000 - 80) / (3 * 0.6)
+ };
+ for (const [count, want] of Object.entries(expected)) {
+ const svg = decode(renderBadgedFavicon(BASE_SVG, Number(count))!);
+ const { x, y, w, h, rx } = band(svg);
+ expect(x).toBeCloseTo(want.x, 5);
+ expect(w).toBeCloseTo(want.w, 5);
+ expect(fontSize(svg)).toBeCloseTo(want.font, 5);
+ expect(y).toBeCloseTo(375, 5);
+ expect(h).toBeCloseTo(625, 5);
+ expect(rx).toBeCloseTo(62.5, 5);
+ }
+ });
+
+ it('anchors the band to the right edge, including on a negative-origin viewBox', () => {
+ // Corner-anchored, not centred: the box grows leftwards from the bottom-right
+ // corner, so its right edge sits on minX + span whatever the label. Centring
+ // was rejected — at a single digit it lands under the middle of the mark.
+ const cases: [string, number, number][] = [
+ // [base svg, minX, span]
+ [BASE_SVG, 0, 1000],
+ [`]*font-weight="500"/);
+ expect(svg).toMatch(/]*style="[^"]*font-weight:\s*500/);
+ });
+
+ it('keeps the badge band entirely inside the viewBox for 1, 2, and 3-glyph labels', () => {
+ // The band is flush to the bottom and, at three glyphs, to the left and
+ // right edges too — but it must never overflow any of them.
+ for (const count of [7, 47, 250]) {
+ const svg = decode(renderBadgedFavicon(BASE_SVG, count)!);
+ const { x, y, w, h } = band(svg);
+ expect(x).toBeGreaterThanOrEqual(0);
+ expect(y).toBeGreaterThanOrEqual(0);
+ expect(x + w).toBeLessThanOrEqual(1000);
+ expect(y + h).toBeLessThanOrEqual(1000);
+ }
+ });
+
+ // A previous version of this test used /\bx="([\d.]+)"/, which cannot match a
+ // negative number: dropping `minX +` from the anchoring passed it. Anchor
+ // against a viewBox whose origin is negative, where the band's own x is
+ // legitimately negative, so the offset is genuinely pinned.
+ it('anchors the band to the viewBox origin, including a negative origin', () => {
+ const NEGATIVE_ORIGIN = `]*style="[^"]*fill:\s*#ffffff/);
+ expect(svg).toMatch(/]*style="[^"]*fill:\s*#000000/);
+ });
+
+ it('strips scripts, foreignObject and event handlers from the base SVG', () => {
+ // The base may be an admin-uploaded file, which upstream serves under a
+ // sandboxing CSP precisely because SVG can carry script. Re-emitting it as a
+ // same-origin data: URL would un-fence it, so sanitise before serialising.
+ const HOSTILE = `hi {
+ // A 100x20 wordmark: span = min(w, h) = 20 previously produced a ~2px-tall
+ // smudge on a 16px icon. Squaring the viewBox first sizes the badge against
+ // the rendered box instead.
+ const WORDMARK = ` with no xmlns parses fine
+ // but renders as nothing, so it would yield a non-null, blank data URL.
+ if (!root || root.localName !== 'svg' || root.namespaceURI !== SVG_NS) return null;
+
+ const viewBox = root.getAttribute('viewBox');
+ if (!viewBox) return null;
+
+ const [rawMinX, rawMinY, rawWidth, rawHeight] = viewBox.trim().split(/[\s,]+/).map(Number);
+ if (
+ ![rawMinX, rawMinY, rawWidth, rawHeight].every(Number.isFinite) ||
+ rawWidth <= 0 ||
+ rawHeight <= 0
+ ) {
+ return null;
+ }
+
+ sanitiseSvg(doc);
+
+ // The base declares "1000pt"; point units in a favicon are unreliable.
+ // Unitless 16 with the viewBox retained lets the browser rasterise cleanly
+ // at any size it asks for.
+ root.setAttribute('width', '16');
+ root.setAttribute('height', '16');
+
+ // Normalise the viewBox to a square, centred on the original, before doing
+ // any badge maths. Sizing the badge off min(width, height) double-penalised
+ // a non-square base: a 100x20 wordmark produced a ~2px-tall smudge on a
+ // 16px icon. Squaring first sizes the badge against the box the icon is
+ // actually painted into. It is a no-op for a square viewBox (Bulwark's own
+ // is 0 0 1000 1000). Caveat: a base that pairs a non-square viewBox with
+ // preserveAspectRatio="none" will now letterbox rather than stretch — an
+ // acceptable, arguably better, trade for a favicon, which is always square.
+ const side = Math.max(rawWidth, rawHeight);
+ const minX = rawMinX - (side - rawWidth) / 2;
+ const minY = rawMinY - (side - rawHeight) / 2;
+ root.setAttribute('viewBox', `${minX} ${minY} ${side} ${side}`);
+
+ const span = side;
+ const h = BAND_HEIGHT * span;
+ const fontMax = FONT_MAX * span;
+ const pad = PAD_FACTOR * span;
+
+ // The font first, budgeted against the FULL span: the largest size that
+ // would still leave the padding intact if the box ran edge to edge. That is
+ // the cap for one or two glyphs and a modest shrink for "99+".
+ const font = Math.min(fontMax, (span - 2 * pad) / (label.length * GLYPH_ADV));
+ // The box then hugs the label — never wider than the icon, anchored to the
+ // bottom-right corner. A three-glyph label, whose font was budgeted against
+ // the whole span, fills that span exactly; shorter labels get a narrower
+ // box, leaving the left of the base mark uncovered so the artwork stays
+ // recognisable. Gmail's own badge does the same: measured off its 16px
+ // favicon, a single digit sits hard right in a box about a third of the
+ // icon wide. Centring was tried and rejected — at one digit the box lands
+ // under the middle of the mark and bites a hole out of it.
+ const textW = label.length * GLYPH_ADV * font;
+ const w = Math.min(span, textW + 2 * pad);
+ const x = minX + span - w;
+ const y = minY + span - h;
+ const rx = CORNER_FACTOR * h;
+
+ const bandRect = doc.createElementNS(SVG_NS, 'rect');
+ bandRect.setAttribute('x', String(x));
+ bandRect.setAttribute('y', String(y));
+ bandRect.setAttribute('width', String(w));
+ bandRect.setAttribute('height', String(h));
+ bandRect.setAttribute('rx', String(rx));
+ bandRect.setAttribute('ry', String(rx));
+ // Presentation attributes lose to any CSS rule in the same document, and a
+ // branded base is free to carry `` — which
+ // would paint the badge red-on-red, the exact failure the white band exists
+ // to prevent. A style attribute outranks a stylesheet rule, so set both: the
+ // attribute as the guarantee, the presentation attribute as the fallback.
+ bandRect.setAttribute('fill', BADGE_FILL);
+ bandRect.setAttribute('style', `fill:${BADGE_FILL}`);
+
+ const text = doc.createElementNS(SVG_NS, 'text');
+ text.setAttribute('x', String(x + w / 2));
+ text.setAttribute('y', String(y + h / 2));
+ text.setAttribute('text-anchor', 'middle');
+ text.setAttribute('dominant-baseline', 'central');
+ text.setAttribute('font-family', BADGE_FONT);
+ // 500, not 700: at true 16px a bold count read visibly heavier than the
+ // equivalent badge in Gmail's tab, which is the thing users compare it to.
+ text.setAttribute('font-weight', '500');
+ text.setAttribute('font-size', String(font));
+ text.setAttribute('fill', BADGE_TEXT_FILL);
+ text.setAttribute(
+ 'style',
+ `fill:${BADGE_TEXT_FILL};font-family:${BADGE_FONT};font-weight:500;font-size:${font}px`,
+ );
+ text.textContent = label;
+
+ root.appendChild(bandRect);
+ root.appendChild(text);
+
+ const serialised = new XMLSerializer().serializeToString(doc);
+
+ // Percent-encoding rather than base64: btoa throws on any character outside
+ // Latin-1, which a branded SVG may well contain. encodeURIComponent itself
+ // throws on an unpaired surrogate, so this whole tail is guarded. It must be
+ // encodeURIComponent, not encodeURI: the latter leaves "#" bare, and a bare
+ // "#" in a colour truncates the data URL at the first fill.
+ return `data:image/svg+xml,${encodeURIComponent(serialised)}`;
+ } catch {
+ return null;
+ }
+}
diff --git a/locales/cs/common.json b/locales/cs/common.json
index 577cc390..ef6e7451 100644
--- a/locales/cs/common.json
+++ b/locales/cs/common.json
@@ -949,6 +949,10 @@
"label": "Zobrazit celkový počet zpráv",
"description": "Zobrazí celkový počet zpráv vedle složek a štítků spolu s počtem nepřečtených. Vypněte pro zobrazení pouze nepřečtených."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro rozhraní (experimentální)",
"description": "Rozložení pro pokročilé uživatele pouze pro stolní počítače s prohlížením zpráv na více kartách a pracovními postupy napříč účty. Standardní rozhraní zůstává nedotčeno; kdykoli se můžete vrátit.",
diff --git a/locales/da/common.json b/locales/da/common.json
index 334b635c..916a2f73 100644
--- a/locales/da/common.json
+++ b/locales/da/common.json
@@ -952,6 +952,10 @@
"label": "Vis samlet antal beskeder",
"description": "Viser det samlede antal beskeder ud for mapper og tags sammen med antallet af ulæste. Slå fra for kun at vise ulæste."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro-grænseflade (eksperimentel)",
"description": "Power user-layout kun til skrivebordet med beskedvisning på flere faner og arbejdsforløb på tværs af konti. Standardgrænsefladen påvirkes ikke; du kan skifte tilbage når som helst.",
diff --git a/locales/de/common.json b/locales/de/common.json
index 02b42581..fe8c93fa 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -949,6 +949,10 @@
"label": "Gesamtzahl der Nachrichten anzeigen",
"description": "Zeigt neben Ordnern und Tags die Gesamtzahl der Nachrichten zusätzlich zur Anzahl ungelesener Nachrichten an. Deaktivieren, um nur ungelesene Nachrichten anzuzeigen."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro-Oberfläche (experimentell)",
"description": "Desktop-Power-User-Layout mit Multi-Tab-Nachrichtenansicht und kontoübergreifenden Workflows. Die Standardoberfläche bleibt unverändert; Sie können jederzeit zurückwechseln.",
diff --git a/locales/en/common.json b/locales/en/common.json
index 7de12348..793fa699 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -952,6 +952,10 @@
"label": "Show Total Message Count",
"description": "Show the total message count next to folders and tags, alongside the unread count. Disable to show only unread counts."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro Interface (Experimental)",
"description": "Desktop-only power-user layout with multi-tab message browsing and cross-account workflows. The standard interface is unaffected; you can switch back at any time.",
diff --git a/locales/es/common.json b/locales/es/common.json
index 7110b9be..f9869b37 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -949,6 +949,10 @@
"label": "Mostrar el número total de mensajes",
"description": "Muestra el número total de mensajes junto a las carpetas y etiquetas, además del número de mensajes no leídos. Desactívalo para mostrar solo los no leídos."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Interfaz Pro (experimental)",
"description": "Diseño de escritorio para usuarios avanzados con exploración de mensajes en varias pestañas y flujos de trabajo entre cuentas. La interfaz estándar no se ve afectada; puedes volver en cualquier momento.",
diff --git a/locales/fa/common.json b/locales/fa/common.json
index cfd9e953..8e36a247 100644
--- a/locales/fa/common.json
+++ b/locales/fa/common.json
@@ -952,6 +952,10 @@
"label": "نمایش تعداد کل پیامها",
"description": "تعداد کل پیامها را در کنار پوشهها و برچسبها، همراه با تعداد خواندهنشدهها نمایش میدهد. برای نمایش فقط تعداد خواندهنشدهها غیرفعال کنید."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "رابط حرفهای (آزمایشی)",
"description": "چیدمان قدرت-کاربری فقط دسکتاپ",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 8d0c2ac7..6708307e 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -949,6 +949,10 @@
"label": "Afficher le nombre total de messages",
"description": "Affiche le nombre total de messages à côté des dossiers et des étiquettes, en plus du nombre de messages non lus. Désactivez pour n'afficher que les messages non lus."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Interface Pro (expérimental)",
"description": "Disposition pour utilisateurs avancés (bureau uniquement) avec navigation des messages multi-onglets et flux de travail multi-comptes. L'interface standard n'est pas affectée ; vous pouvez revenir à tout moment.",
diff --git a/locales/he/common.json b/locales/he/common.json
index bcbe1a4b..38690937 100644
--- a/locales/he/common.json
+++ b/locales/he/common.json
@@ -914,6 +914,10 @@
"label": "הצגת מספר ההודעות הכולל",
"description": "מציג את מספר ההודעות הכולל לצד תיקיות ותגיות, לצד מספר ההודעות שלא נקראו. כבו כדי להציג רק את מספר ההודעות שלא נקראו."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "ממשק Pro (ניסיוני)",
"description": "פריסה של משתמש כוח לשולחן עבודה בלבד עם גלישה מרובת-הודעות וזרימות עבודה חוצות-חשבונות. הממשק הסטנדרטי אינו מושפע; תוכל להחזור בכל עת.",
diff --git a/locales/hu/common.json b/locales/hu/common.json
index 24a18433..d64fa4c1 100644
--- a/locales/hu/common.json
+++ b/locales/hu/common.json
@@ -952,6 +952,10 @@
"label": "Összes üzenet számának megjelenítése",
"description": "Megjeleníti az üzenetek teljes számát a mappák és címkék mellett, az olvasatlanok számán túl. Kapcsolja ki, ha csak az olvasatlanok számát szeretné látni."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro felület (Kísérleti)",
"description": "Asztali számítógépes erőfelhasználói elrendezés több lapos üzenetböngészéssel és fiókok közötti munkafolyamatokkal. A szabványos felületet nem érinti; bármikor visszaválthatsz.",
diff --git a/locales/it/common.json b/locales/it/common.json
index 1721864c..e38cdc38 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -949,6 +949,10 @@
"label": "Mostra il numero totale di messaggi",
"description": "Mostra il numero totale di messaggi accanto a cartelle ed etichette, insieme al conteggio dei non letti. Disattiva per mostrare solo i non letti."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Interfaccia Pro (sperimentale)",
"description": "Layout per utenti esperti solo desktop con esplorazione messaggi a più schede e flussi tra account. L'interfaccia standard non è influenzata; puoi tornare indietro in qualsiasi momento.",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index d93f3b27..4d786e0a 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -949,6 +949,10 @@
"label": "メッセージの総数を表示",
"description": "フォルダーやタグの横に、未読数に加えてメッセージの総数を表示します。未読数のみを表示するには無効にします。"
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro インターフェイス（実験的）",
"description": "デスクトップ専用のパワーユーザー向けレイアウトで、マルチタブのメッセージ閲覧やアカウント横断のワークフローに対応します。標準インターフェイスには影響せず、いつでも元に戻せます。",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index 6a80e438..76a3c908 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -949,6 +949,10 @@
"label": "전체 메시지 수 표시",
"description": "읽지 않은 수와 함께 폴더 및 태그 옆에 전체 메시지 수를 표시합니다. 읽지 않은 수만 표시하려면 비활성화하세요."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro 인터페이스 (실험적)",
"description": "데스크톱 전용 파워 유저 레이아웃으로, 다중 탭 메시지 탐색과 계정 간 워크플로우를 지원합니다. 표준 인터페이스에는 영향이 없으며 언제든지 되돌릴 수 있습니다.",
diff --git a/locales/lv/common.json b/locales/lv/common.json
index f9fc75b7..08ef766b 100644
--- a/locales/lv/common.json
+++ b/locales/lv/common.json
@@ -949,6 +949,10 @@
"label": "Rādīt kopējo ziņojumu skaitu",
"description": "Rāda kopējo ziņojumu skaitu blakus mapēm un tagiem, kā arī nelasīto ziņojumu skaitu. Atspējojiet, lai rādītu tikai nelasītos."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro saskarne (eksperimentāla)",
"description": "Tikai darbvirsmas pieredzējušu lietotāju izkārtojums ar ziņojumu pārlūkošanu vairākās cilnēs un kontu pārvaldību. Standarta saskarne netiek ietekmēta; varat jebkurā brīdī pārslēgties atpakaļ.",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 52624f8b..ced27bcb 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -949,6 +949,10 @@
"label": "Totaal aantal berichten tonen",
"description": "Toont het totale aantal berichten naast mappen en labels, naast het aantal ongelezen berichten. Schakel uit om alleen ongelezen aantallen te tonen."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro-interface (experimenteel)",
"description": "Power user-indeling alleen voor desktop met meertabs berichtweergave en accountoverschrijdende workflows. De standaardinterface blijft onveranderd; u kunt op elk moment terugkeren.",
diff --git a/locales/pl/common.json b/locales/pl/common.json
index d365e95a..fad1317e 100644
--- a/locales/pl/common.json
+++ b/locales/pl/common.json
@@ -949,6 +949,10 @@
"label": "Pokaż łączną liczbę wiadomości",
"description": "Pokazuje łączną liczbę wiadomości obok folderów i etykiet, obok liczby nieprzeczytanych. Wyłącz, aby pokazywać tylko nieprzeczytane."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Interfejs Pro (eksperymentalny)",
"description": "Układ dla zaawansowanych użytkowników (tylko na komputerze) z przeglądaniem wiadomości w wielu kartach i obiegami pracy między kontami. Standardowy interfejs pozostaje nietknięty; możesz wrócić w dowolnej chwili.",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 62fd321c..6202f6eb 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -949,6 +949,10 @@
"label": "Mostrar contagem total de mensagens",
"description": "Mostra a contagem total de mensagens ao lado de pastas e etiquetas, além da contagem de não lidas. Desative para mostrar apenas as não lidas."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Interface Pro (experimental)",
"description": "Layout para utilizadores avançados apenas em desktop com navegação de mensagens em múltiplos separadores e fluxos entre contas. A interface padrão não é afetada; pode voltar a qualquer momento.",
diff --git a/locales/ro/common.json b/locales/ro/common.json
index a6eb79c6..a8e9b251 100644
--- a/locales/ro/common.json
+++ b/locales/ro/common.json
@@ -952,6 +952,10 @@
"label": "Afișează numărul total de mesaje",
"description": "Afișează numărul total de mesaje lângă foldere și etichete, pe lângă numărul celor necitite. Dezactivează pentru a afișa doar mesajele necitite."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Interfață Pro (experimentală)",
"description": "Aspect destinat utilizatorilor avansați, disponibil doar pe desktop, cu navigare prin mesaje în mai multe file și fluxuri de lucru între conturi. Interfața standard nu este afectată; puteți reveni la aceasta în orice moment.",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index a0962e5a..24de9a4f 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -949,6 +949,10 @@
"label": "Показывать общее количество сообщений",
"description": "Показывает общее количество сообщений рядом с папками и метками, наряду с количеством непрочитанных. Отключите, чтобы показывать только непрочитанные."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro-интерфейс (экспериментальный)",
"description": "Макет для опытных пользователей только для настольных устройств с просмотром сообщений в нескольких вкладках и работой между аккаунтами. Стандартный интерфейс не меняется; вы можете вернуться в любое время.",
diff --git a/locales/sk/common.json b/locales/sk/common.json
index a53aad49..1defe95e 100644
--- a/locales/sk/common.json
+++ b/locales/sk/common.json
@@ -952,6 +952,10 @@
"label": "Zobraziť celkový počet správ",
"description": "Zobraziť celkový počet správ vedľa priečinkov a štítkov spolu s počtom neprečítaných."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro rozhranie (experimentálne)",
"description": "Rozloženie pre pokročilých používateľov iba pre stolné počítače.",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index 0fc1ebba..3dcb2851 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -949,6 +949,10 @@
"label": "Toplam mesaj sayısını göster",
"description": "Klasörlerin ve etiketlerin yanında, okunmamış sayısının yanı sıra toplam mesaj sayısını gösterir. Yalnızca okunmamışları göstermek için devre dışı bırakın."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro Arayüz (Deneysel)",
"description": "Yalnızca masaüstü için güçlü kullanıcı düzeni: çoklu sekmede ileti gezme ve hesaplar arası iş akışları. Standart arayüz etkilenmez; istediğiniz zaman geri dönebilirsiniz.",
diff --git a/locales/uk/common.json b/locales/uk/common.json
index a916fb12..a5c69da6 100644
--- a/locales/uk/common.json
+++ b/locales/uk/common.json
@@ -949,6 +949,10 @@
"label": "Показувати загальну кількість повідомлень",
"description": "Показує загальну кількість повідомлень поруч із теками та мітками, разом із кількістю непрочитаних. Вимкніть, щоб показувати лише непрочитані."
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro-інтерфейс (експериментальний)",
"description": "Розкладка для досвідчених користувачів лише для настільного комп'ютера з переглядом повідомлень у кількох вкладках і робочими процесами між обліковими записами. Стандартний інтерфейс не змінюється; ви можете повернутися будь-коли.",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index 5e151add..38fc1ad1 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -949,6 +949,10 @@
"label": "显示邮件总数",
"description": "在文件夹和标签旁边显示邮件总数，以及未读数量。停用后仅显示未读数量。"
},
+ "favicon_unread_badge": {
+ "label": "Unread Count on Tab Icon",
+ "description": "Show the inbox unread count as a badge on the browser tab icon, so new mail is visible when the tab is not focused. Disable to keep the icon unbadged."
+ },
"pro_interface": {
"label": "Pro 界面（实验性）",
"description": "仅限桌面的高级用户布局，支持多标签消息浏览和跨账户工作流。标准界面不受影响，您可以随时切换回来。",
diff --git a/stores/__tests__/settings-store-favicon-badge.test.ts b/stores/__tests__/settings-store-favicon-badge.test.ts
new file mode 100644
index 00000000..7301ffe0
--- /dev/null
+++ b/stores/__tests__/settings-store-favicon-badge.test.ts
@@ -0,0 +1,22 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useSettingsStore } from '../settings-store';
+
+describe('settings-store favicon unread badge', () => {
+ beforeEach(() => {
+ useSettingsStore.getState().resetToDefaults();
+ });
+
+ it('defaults to on', () => {
+ expect(useSettingsStore.getState().faviconUnreadBadge).toBe(true);
+ });
+
+ it('includes the favicon unread badge in exported settings', () => {
+ useSettingsStore.getState().updateSetting('faviconUnreadBadge', false);
+
+ const exported = JSON.parse(useSettingsStore.getState().exportSettings()) as {
+ faviconUnreadBadge?: boolean;
+ };
+
+ expect(exported.faviconUnreadBadge).toBe(false);
+ });
+});
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index 21e68627..28e3cd8d 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -262,6 +262,7 @@ interface SettingsState {
senderFavicons: boolean;
showAvatarsInJunk: boolean; // Show profile images/favicons in the junk folder
+ faviconUnreadBadge: boolean; // Badge the browser-tab icon with the inbox unread count
// Sidebar
colorfulSidebarIcons: boolean; // Tint folder icons by role (inbox blue, junk red, etc.)
@@ -459,6 +460,7 @@ const DEFAULT_SETTINGS = {
senderFavicons: true,
showAvatarsInJunk: false,
+ faviconUnreadBadge: true,
// Sidebar
colorfulSidebarIcons: true,
@@ -639,6 +641,7 @@ export const useSettingsStore = create()(
enableCrossAllView: state.enableCrossAllView,
senderFavicons: state.senderFavicons,
showAvatarsInJunk: state.showAvatarsInJunk,
+ faviconUnreadBadge: state.faviconUnreadBadge,
colorfulSidebarIcons: state.colorfulSidebarIcons,
tintListRowsByTag: state.tintListRowsByTag,
showFolderTotalCount: state.showFolderTotalCount,
From 6f278845f3cd834f58a9087cdf25e9ce1f865439 Mon Sep 17 00:00:00 2001
From: dealerweb
Date: Fri, 10 Jul 2026 12:40:05 +0200
Subject: [PATCH 22/22] Feature: text color picker in the composer toolbar
The rich-text editor already registers the TextStyle and Color
extensions so that colored text pasted or quoted from incoming mail
survives editing - but there was no way to set a color yourself.
Adds a "Text color" toolbar button next to the strikethrough control,
wired to the already-loaded extensions: a 2x8 preset swatch grid plus a
"Remove color" entry, following the table button's dropdown pattern
(wrapper ref, outside-click close, same popover styling) and the table
size picker's swatch grid. The button's baseline icon renders in the
currently active color, so the selection is visible without any extra
indicator element.
No new dependencies and no locale changes; the toolbar titles in this
file are plain English throughout, and Clear Formatting already removes
colors via unsetAllMarks.
---
components/email/rich-text-editor.tsx | 65 +++++++++++++++++++++++++++
1 file changed, 65 insertions(+)
diff --git a/components/email/rich-text-editor.tsx b/components/email/rich-text-editor.tsx
index 28da13a6..f59704d4 100644
--- a/components/email/rich-text-editor.tsx
+++ b/components/email/rich-text-editor.tsx
@@ -41,6 +41,7 @@ import {
Heading1,
Heading2,
Table as TableIcon,
+ Baseline,
Trash2,
Rows3,
Columns3,
@@ -143,6 +144,14 @@ function ToolbarSeparator() {
const TABLE_PICKER_ROWS = 6;
const TABLE_PICKER_COLS = 8;
+// Preset text colours (2 x 8). Inline `style="color: …"` survives email
+// round-trips; the TextStyle/Color extensions are already registered to
+// preserve pasted colours - this palette just adds a UI to set them.
+const TEXT_COLORS = [
+ "#000000", "#5f6368", "#9aa0a6", "#c5221f", "#e8710a", "#f9ab00", "#188038", "#1967d2",
+ "#7627bb", "#c2185b", "#795548", "#fa5252", "#fd7e14", "#40c057", "#4dabf7", "#e64980",
+];
+
function TableSizePicker({ onPick }: { onPick: (rows: number, cols: number) => void }) {
const [hover, setHover] = useState<{ r: number; c: number } | null>(null);
return (
@@ -336,6 +345,19 @@ export function RichTextEditor({
const [tableMenuOpen, setTableMenuOpen] = useState(false);
const tableWrapperRef = useRef(null);
+ const [colorMenuOpen, setColorMenuOpen] = useState(false);
+ const colorWrapperRef = useRef(null);
+
+ useEffect(() => {
+ if (!colorMenuOpen) return;
+ const handler = (e: MouseEvent) => {
+ if (colorWrapperRef.current && !colorWrapperRef.current.contains(e.target as Node)) {
+ setColorMenuOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handler);
+ return () => document.removeEventListener("mousedown", handler);
+ }, [colorMenuOpen]);
useEffect(() => {
if (!tableMenuOpen) return;
@@ -386,6 +408,49 @@ export function RichTextEditor({
>
+
setColorMenuOpen((v) => !v)}
+ title="Text color"
+ >
+ {/* The icon itself previews the active colour - no layout shift. */}
+
+ {colorMenuOpen && (
+
+
+ {TEXT_COLORS.map((color) => (
+ {
+ editor.chain().focus().setColor(color).run();
+ setColorMenuOpen(false);
+ }}
+ className={cn(
+ "w-4 h-4 border border-border/60 rounded-[2px] transition-transform hover:scale-110",
+ editor.getAttributes("textStyle").color === color && "ring-1 ring-ring ring-offset-1"
+ )}
+ style={{ backgroundColor: color }}
+ />
+ ))}
+
+
+
{
+ editor.chain().focus().unsetColor().run();
+ setColorMenuOpen(false);
+ }}
+ >
+
+
+ )}
+
',
+ );
+ expect(clean).not.toContain('insecure.example.com');
+ expect(clean).toContain('https://cdn.example.com/l.png');
+ });
+
+ it('does not leak target into the stored or sent signature', () => {
+ // sanitizeSignatureHtml feeds both storage and the outgoing message body.
+ const stored = sanitizeSignatureHtml('');
+ expect(stored).toContain('href="https://example.com"');
+ expect(stored).not.toContain('target=');
+ });
+
+ it('handles empty input', () => {
+ expect(sanitizeSignatureHtmlForDisplay('')).toBe('');
+ expect(sanitizeSignatureHtmlForDisplay(' ')).toBe('');
+ });
+ });
+
describe('sanitizePlainTextRenderedHtml', () => {
// This branch renders into the main document, not the sandboxed iframe, so
// an anchor that loses target="_blank" navigates the whole app away.
diff --git a/lib/email-sanitization.ts b/lib/email-sanitization.ts
index fe1bbff7..69afdc3d 100644
--- a/lib/email-sanitization.ts
+++ b/lib/email-sanitization.ts
@@ -79,26 +79,61 @@ export const SIGNATURE_SANITIZE_CONFIG = {
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover'],
};
+/** Drop images whose src isn't https: or a base64 raster data: URI. */
+function restrictSignatureImages(node: Element): void {
+ if (node.tagName !== 'IMG') return;
+ const src = node.getAttribute('src');
+ if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
+ node.remove();
+ }
+}
+
/**
- * Sanitize HTML signature for storage and display.
+ * Sanitize an HTML signature for storage and for the outgoing message.
* img src is restricted to https: or base64-embedded raster data: URIs
* (png/jpeg/gif/webp). SVG is excluded because DOMPurify cannot inspect
* bytes inside a data: URI. Images with a disallowed src are removed
* entirely so they don't render as broken-image icons.
+ *
+ * Deliberately does NOT force target="_blank": what we store, and what the
+ * recipient receives, should stay as the user wrote it. Use
+ * `sanitizeSignatureHtmlForDisplay` for anything rendered in our own DOM.
* @param html - User-provided HTML signature
* @returns Sanitized signature (no scripts, no external resources)
*/
export function sanitizeSignatureHtml(html: string): string {
+ if (!html?.trim()) return '';
+ DOMPurify.addHook('afterSanitizeAttributes', restrictSignatureImages);
+ try {
+ return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
+ } finally {
+ DOMPurify.removeAllHooks();
+ }
+}
+
+const SIGNATURE_DISPLAY_CONFIG = {
+ ...SIGNATURE_SANITIZE_CONFIG,
+ ALLOWED_ATTR: [...SIGNATURE_SANITIZE_CONFIG.ALLOWED_ATTR, 'target', 'rel'],
+};
+
+/**
+ * Sanitize an HTML signature for rendering inside our own DOM — the identity
+ * form's live preview and the composer's signature block. Both inject into the
+ * main document rather than the sandboxed iframe used for message bodies, so a
+ * link without target="_blank" navigates the whole app away, taking any unsent
+ * draft or unsaved signature with it. Force every anchor to open a new tab.
+ */
+export function sanitizeSignatureHtmlForDisplay(html: string): string {
if (!html?.trim()) return '';
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
- if (node.tagName !== 'IMG') return;
- const src = node.getAttribute('src');
- if (!src || !/^(?:https:\/\/|data:image\/(?:png|jpe?g|gif|webp);base64,)/i.test(src)) {
- node.remove();
+ restrictSignatureImages(node);
+ if (node.tagName === 'A') {
+ node.setAttribute('target', '_blank');
+ node.setAttribute('rel', 'noopener noreferrer');
}
});
try {
- return DOMPurify.sanitize(html, SIGNATURE_SANITIZE_CONFIG);
+ return DOMPurify.sanitize(html, SIGNATURE_DISPLAY_CONFIG);
} finally {
DOMPurify.removeAllHooks();
}
From c1acf58c5fa1d221c56179dd46035a72e03a807f Mon Sep 17 00:00:00 2001
From: Stefan Hildebrandt <695494+hildebrandttk@users.noreply.github.com>
Date: Sat, 11 Jul 2026 18:04:05 +0200
Subject: [PATCH 03/22] test(compose): add findComposeIdentityId to
reply-identity mock
The recipient chip-drag and paste tests render