Merge branch 'main' into feature/scheduled-send

# Conflicts: # app/(main)/[locale]/page.tsx # components/layout/sidebar.tsx # stores/email-store.ts # stores/settings-store.ts
2026-05-22 12:31:06 +02:00
parent 5928c6f73e 4269d0589c
commit 159706a683
155 changed files with 4702 additions and 869 deletions
@@ -389,7 +389,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
    setActionError(null);
    try {
      // JMAP strips parameters from Content-Type (RFC 8621), so method=REQUEST
-      // is lost. Fetch raw ICS to extract METHOD as a reliable fallback — in
+      // is lost. Fetch raw ICS to extract METHOD as a reliable fallback - in
      // parallel with parsing to save a roundtrip.
      const [events, rawText] = await Promise.all([
        client.parseCalendarEvents(client.getCalendarsAccountId(), attachment.blobId),
@@ -420,7 +420,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp

      setState('parsed');

-      // Hydrate the calendar store with the matching event in the background —
+      // Hydrate the calendar store with the matching event in the background -
      // only needed for the "already in calendar" pill, must not block the banner.
      // Filter by UID server-side; the previous unfiltered query fetched up to
      // 1000 events plus multiple /get batches just to find one match.
@@ -14,6 +14,7 @@ import { emailHooks, contactHooks } from "@/lib/plugin-hooks";
 import type { OutgoingEmail, RecipientSuggestion } from "@/lib/plugin-types";
 import { useAuthStore } from "@/stores/auth-store";
 import { useIdentityStore } from "@/stores/identity-store";
+import { useProMultiAccountIdentities, stripCrossAccountIdentityPrefix } from "@/hooks/use-pro-multi-account-identities";
 import { useAccountStore } from "@/stores/account-store";
 import { useSmimeStore } from "@/stores/smime-store";
 import { useEmailStore } from "@/stores/email-store";
@@ -34,6 +35,10 @@ import type { EmailTemplate } from "@/lib/template-types";
 import { appendPlainTextSignature, getPlainTextSignature } from "@/lib/signature-utils";
 import { resolveReplyFrom } from "@/lib/reply-identity";
 import { computeReplyThreadingHeaders } from "@/lib/email-threading";
+import {
+  rewriteCidImagesForEditor,
+  replaceInlineImagePlaceholders,
+} from "@/lib/email-composer-utils";
 import { RichTextEditor } from "@/components/email/rich-text-editor";
 import type { Editor } from "@tiptap/react";

@@ -75,6 +80,11 @@ interface EmailComposerProps {
    fromName?: string;
    identityId?: string;
    envelopeMailFrom?: string;
+    /** Local account ID owning the selected identity. Set when the user
+     *  picked an identity from a non-active account in the Pro multi-
+     *  account dropdown; parents should send through that account's
+     *  client instead of the currently-active one. */
+    localAccountId?: string;
    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
    inReplyTo?: string[];
    references?: string[];
@@ -195,8 +205,18 @@ export function EmailComposer({
  const sendDelaySeconds = useSettingsStore((state) => state.sendDelaySeconds);
  const signaturePosition = useSettingsStore((state) => state.signaturePosition);
  const signatureSeparatorEnabled = useSettingsStore((state) => state.signatureSeparatorEnabled);
-  const identities = useIdentityStore((s) => s.identities);
-  const primaryIdentity = identities[0] ?? null;
+  const activeIdentities = useIdentityStore((s) => s.identities);
+  // Pro shell: surface identities from every connected account, grouped
+  // for the From dropdown's <optgroup>s. Outside Pro this collapses to
+  // the active account's identities only.
+  const multiAccountIdentities = useProMultiAccountIdentities();
+  const identities = multiAccountIdentities.enabled
+    ? multiAccountIdentities.allIdentities
+    : activeIdentities;
+  const identityGroups = multiAccountIdentities.enabled
+    ? multiAccountIdentities.groups
+    : [];
+  const primaryIdentity = activeIdentities[0] ?? null;

  // The signature identity used when embedding the signature into the initial
  // body for "above quote" mode. Mirrors the signatureIdentity derivation
@@ -300,7 +320,8 @@ export function EmailComposer({
    if (replyTo.quoteHeaderHtml !== undefined && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
      const wrap = replyTo.quoteWrapInBlockquote !== false;
      const originalHtml = replyTo.htmlBody
-        ?? (replyTo.body
+        ? rewriteCidImagesForEditor(replyTo.htmlBody)
+        : (replyTo.body
          ? replyTo.body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')
          : '');
      const bodyHtml = wrap
@@ -314,7 +335,10 @@ export function EmailComposer({
      const quoteHeader = mode === 'forward'
        ? `---------- Forwarded message ----------<br>From: ${fromStr}<br>Date: ${date}<br>Subject: ${replyTo.subject || ''}<br><br>`
        : `On ${date}, ${fromStr} wrote:<br>`;
-      return `${prefix}${signatureBlock}<br><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${replyTo.htmlBody}</blockquote>`;
+      // cid: image refs are rewritten so they render in the editor (browsers
+      // can't fetch cid: URLs); see useEffect below for the data-URL backfill.
+      const quotedHtml = rewriteCidImagesForEditor(replyTo.htmlBody);
+      return `${prefix}${signatureBlock}<br><div>${quoteHeader}</div><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${quotedHtml}</blockquote>`;
    }

    if (replyTo.body) {
@@ -410,6 +434,19 @@ export function EmailComposer({
  const currentIdentity = selectedIdentityId
    ? identities.find((identity) => identity.id === selectedIdentityId) || primaryIdentity
    : primaryIdentity;
+
+  // When the selected identity belongs to a non-active account (Pro
+  // multi-account dropdown), `currentIdentity.id` carries a "<localId>::"
+  // namespace and JMAP calls must be routed through that account's
+  // client with the un-prefixed id. `composerClient` and
+  // `currentIdentityRawId` are what save/send code should use.
+  const currentIdentityParts = currentIdentity?.id
+    ? stripCrossAccountIdentityPrefix(currentIdentity.id)
+    : { localAccountId: null, rawId: undefined };
+  const composerClient = currentIdentityParts.localAccountId
+    ? (useAuthStore.getState().getClientForAccount(currentIdentityParts.localAccountId) ?? client)
+    : client;
+  const currentIdentityRawId = currentIdentityParts.rawId ?? currentIdentity?.id;
  // Alias identities often lack a configured signature - fall back to the primary
  // identity's signature so replies (which auto-select a matching alias) still
  // populate the user's signature.
@@ -543,6 +580,76 @@ export function EmailComposer({
    selectedIdentityId,
  ]);

+  // Hydrate inline images referenced by the quoted body (issue #163).
+  // `getInitialBody` rewrites `<img src="cid:xxx">` to placeholder src +
+  // data-cid; here we (1) register each inline attachment in inlineImagesRef
+  // so the send path re-attaches the blob with the right cid, and (2) fetch
+  // each blob as a data URL and swap it into the body so the editor actually
+  // shows the image instead of a blank placeholder.
+  useEffect(() => {
+    if (plainTextMode) return;
+    if (mode !== 'reply' && mode !== 'replyAll' && mode !== 'forward') return;
+    if (!composerClient || !replyTo?.attachments?.length) return;
+
+    const inlineAtts = replyTo.attachments.filter((att) =>
+      att.cid && att.disposition === 'inline' && (att.type || '').startsWith('image/')
+    );
+    if (inlineAtts.length === 0) return;
+
+    // Seed the ref synchronously so a fast Send still attaches the right blobs
+    // even if the FileReader work below hasn't resolved yet.
+    for (const att of inlineAtts) {
+      if (!att.cid) continue;
+      if (inlineImagesRef.current.some((e) => e.cid === att.cid)) continue;
+      inlineImagesRef.current.push({
+        cid: att.cid,
+        blobId: att.blobId,
+        type: att.type,
+        name: att.name || 'inline',
+        size: att.size,
+        dataUrl: '',
+      });
+    }
+
+    let cancelled = false;
+    (async () => {
+      const updates = new Map<string, string>();
+      for (const att of inlineAtts) {
+        if (!att.cid) continue;
+        try {
+          const buffer = await composerClient.fetchBlobArrayBuffer(
+            att.blobId,
+            att.name || 'inline',
+            att.type,
+          );
+          if (cancelled) return;
+          const blob = new Blob([buffer], { type: att.type });
+          const dataUrl = await new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result as string);
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(blob);
+          });
+          if (cancelled) return;
+          const entry = inlineImagesRef.current.find((e) => e.cid === att.cid);
+          if (entry) entry.dataUrl = dataUrl;
+          updates.set(att.cid, dataUrl);
+        } catch (err) {
+          debug.error('Failed to load inline image for compose', err);
+        }
+      }
+      if (cancelled || updates.size === 0) return;
+      setBody((prev) => replaceInlineImagePlaceholders(prev, updates));
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // We deliberately hydrate once per composer open - subsequent replyTo
+    // object identity churn from parent renders shouldn't refetch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [composerClient, plainTextMode, mode]);
+
  const composerSignatureHtml = signatureIdentity?.htmlSignature
    ? `<div>${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}</div>`
    : signatureIdentity?.textSignature
@@ -944,7 +1051,7 @@ export function EmailComposer({

  // Auto-save draft functionality
  const saveDraftOnce = async (): Promise<string | null> => {
-    if (!client) return null;
+    if (!client || !composerClient) return null;

    const toAddresses = to.split(",").map(e => e.trim()).filter(Boolean);
    const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
@@ -990,13 +1097,16 @@ export function EmailComposer({

    try {
      const previousDraftId = draftIdRef.current;
-      const savedDraftId = await client.createDraft(
+      // Use the JMAP client and raw identity id for the *owning* account
+      // - falls back to active client for single-account / same-account
+      // identities. See `composerClient` derivation above.
+      const savedDraftId = await composerClient.createDraft(
        toAddresses,
        subject || t('no_subject'),
        plainTextMode ? body : htmlToPlainText(body),
        ccAddresses,
        bccAddresses,
-        currentIdentity?.id,
+        currentIdentityRawId,
        fromEmail,
        previousDraftId || undefined,
        uploadedAttachments,
@@ -1321,6 +1431,13 @@ export function EmailComposer({

      // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
      if ((smimeSign_ || smimeEncrypt_) && client && currentIdentity?.id) {
+        // S/MIME keys are scoped to one JMAP account's identity - sending
+        // from a cross-account identity via S/MIME would mix accounts'
+        // certs/clients. Refuse upfront and tell the user to switch.
+        const crossAccount = stripCrossAccountIdentityPrefix(currentIdentity.id);
+        if (crossAccount.localAccountId) {
+          throw new Error('S/MIME sending from another account’s identity is not supported. Switch to that account first.');
+        }
        // 1. Resolve S/MIME key
        if (smimeSign_ && !smimeKeyRecord) {
          throw new Error('No S/MIME key bound to this identity');
@@ -1475,6 +1592,15 @@ export function EmailComposer({
        };
        const outgoing = await emailHooks.onTransformOutgoingEmail.transform(transformInput);

+        // Strip the cross-account namespace from the identity id before
+        // handing it to the parent - the JMAP server only knows the raw
+        // id. The owning local account travels alongside so the parent
+        // can route the send through the right client.
+        const rawIdentityId = outgoing.identityId || currentIdentity?.id;
+        const { localAccountId: identityLocalAccountId, rawId } = rawIdentityId
+          ? stripCrossAccountIdentityPrefix(rawIdentityId)
+          : { localAccountId: null, rawId: undefined };
+
        await onSend?.({
          to: outgoing.to,
          cc: outgoing.cc,
@@ -1485,8 +1611,9 @@ export function EmailComposer({
          draftId: finalDraftId || undefined,
          fromEmail,
          fromName,
-          identityId: outgoing.identityId || currentIdentity?.id,
+          identityId: rawId,
          envelopeMailFrom,
+          localAccountId: identityLocalAccountId ?? undefined,
          attachments: uploadedAttachments.length > 0 ? uploadedAttachments : undefined,
          inReplyTo: threadingHeaders?.inReplyTo,
          references: threadingHeaders?.references,
@@ -1716,16 +1843,31 @@ export function EmailComposer({
                  onChange={(e) => 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"
                >
-                  {identities.map((identity) => {
-                    const displayEmail = subAddressTag
-                      ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter)
-                      : identity.email;
-                    return (
-                      <option key={identity.id} value={identity.id}>
-                        {identity.name ? `${identity.name} <${displayEmail}>` : displayEmail}
-                      </option>
-                    );
-                  })}
+                  {identityGroups.length > 0
+                    ? identityGroups.map((group) => (
+                        <optgroup key={group.localAccountId} label={group.accountLabel}>
+                          {group.identities.map((identity) => {
+                            const displayEmail = subAddressTag
+                              ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter)
+                              : identity.email;
+                            return (
+                              <option key={identity.id} value={identity.id}>
+                                {identity.name ? `${identity.name} <${displayEmail}>` : displayEmail}
+                              </option>
+                            );
+                          })}
+                        </optgroup>
+                      ))
+                    : identities.map((identity) => {
+                        const displayEmail = subAddressTag
+                          ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter)
+                          : identity.email;
+                        return (
+                          <option key={identity.id} value={identity.id}>
+                            {identity.name ? `${identity.name} <${displayEmail}>` : displayEmail}
+                          </option>
+                        );
+                      })}
                </select>
              ) : (
                <span className="text-sm text-foreground flex-1 truncate">
@@ -66,6 +66,7 @@ import {
  CalendarClock,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useRouter } from "@/i18n/navigation";
 import type { Attachment as PostalMimeAttachment } from 'postal-mime';
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
@@ -79,6 +80,7 @@ import { EmailIdentityBadge } from "./email-identity-badge";
 import { UnsubscribeBanner } from "./unsubscribe-banner";
 import { CalendarInvitationBanner } from "./calendar-invitation-banner";
 import { useTour } from "@/components/tour/tour-provider";
+import { useIsEmbedded } from "@/hooks/use-is-embedded";
 import { SmimePassphraseDialog } from "@/components/settings/smime-passphrase-dialog";
 import { findCalendarAttachment, isCalendarMimeType } from "@/lib/calendar-invitation";
 import { RecipientPopover } from "./recipient-popover";
@@ -954,6 +956,7 @@ export function EmailViewer({
  }, [client, t, tComposer]);
  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
  const { startTour } = useTour();
+  const isEmbedded = useIsEmbedded();
  const [showFullHeaders, setShowFullHeaders] = useState(false);
  const [showAllBesideAttachments, setShowAllBesideAttachments] = useState(false);
  const [showAllMobileAttachments, setShowAllMobileAttachments] = useState(false);
@@ -1170,9 +1173,34 @@ export function EmailViewer({
  const [contactSidebarEmail, setContactSidebarEmail] = useState<string | null>(null);
  const contacts = useContactStore((s) => s.contacts);
  const { isMobile: isMobileDevice } = useDeviceDetection();
+  const router = useRouter();

  const handleViewContactSidebar = (contact: ContactCard | null, recipientEmail: string) => {
-    if (isMobileDevice) return; // no sidebar on mobile
+    if (isMobileDevice) {
+      // No room for a sidebar on mobile - send the user to the contacts page
+      // with params describing what to show. The `from=email` flag turns the
+      // page's mobile back button into a router.back() that returns here.
+      const allRecipients = [
+        ...(email?.from || []),
+        ...(email?.to || []),
+        ...(email?.cc || []),
+        ...(email?.bcc || []),
+        ...(email?.replyTo || []),
+      ];
+      const recipientName = allRecipients.find(
+        (r) => r.email.toLowerCase() === recipientEmail.toLowerCase()
+      )?.name;
+      const params = new URLSearchParams();
+      if (contact) {
+        params.set('contactId', contact.id);
+      } else {
+        params.set('addEmail', recipientEmail);
+        if (recipientName) params.set('addName', recipientName);
+      }
+      params.set('from', 'email');
+      router.push(`/contacts?${params.toString()}`);
+      return;
+    }
    setContactSidebarEmail(recipientEmail);
  };

@@ -2903,7 +2931,7 @@ export function EmailViewer({
  // window between selectedEmail changing and isLoading flipping true, so the
  // quick reply / body don't flicker through a partial render.
  // An empty bodyValues with no referenced parts means the email has no body
-  // (e.g. calendar-only invites) — not "still loading".
+  // (e.g. calendar-only invites) - not "still loading".
  const hasBodyParts = (email?.textBody?.length ?? 0) > 0 || (email?.htmlBody?.length ?? 0) > 0;
  const isBodyLoading = isLoading || (hasBodyParts && (!email?.bodyValues || Object.keys(email.bodyValues).length === 0));

@@ -3260,19 +3288,21 @@ export function EmailViewer({
    }
    return (
      <div className={cn("flex-1 flex flex-col items-center justify-center bg-gradient-to-br from-muted/30 to-muted/50", className)}>
-        <div className="text-center p-8">
-          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-background shadow-lg flex items-center justify-center">
-            <Mail className="w-10 h-10 text-muted-foreground" />
+        {!isEmbedded && (
+          <div className="text-center p-8">
+            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-background shadow-lg flex items-center justify-center">
+              <Mail className="w-10 h-10 text-muted-foreground" />
+            </div>
+            <h3 className="text-xl font-semibold text-foreground mb-2">{t('no_conversation_selected')}</h3>
+            <p className="text-muted-foreground">{t('no_conversation_description')}</p>
+            {onCompose && (
+              <Button onClick={onCompose} className="mt-6" title={t('compose_hint')}>
+                <PenSquare className="w-4 h-4 mr-2" />
+                {t('compose')}
+              </Button>
+            )}
          </div>
-          <h3 className="text-xl font-semibold text-foreground mb-2">{t('no_conversation_selected')}</h3>
-          <p className="text-muted-foreground">{t('no_conversation_description')}</p>
-          {onCompose && (
-            <Button onClick={onCompose} className="mt-6" title={t('compose_hint')}>
-              <PenSquare className="w-4 h-4 mr-2" />
-              {t('compose')}
-            </Button>
-          )}
-        </div>
+        )}
      </div>
    );
  }
@@ -115,7 +115,17 @@ export const ResizableImage = Node.create({
      width: { default: null },
      cid: {
        default: null,
-        parseHTML: (el) => el.getAttribute("data-cid"),
+        parseHTML: (el) => {
+          const dataCid = el.getAttribute("data-cid");
+          if (dataCid) return dataCid;
+          // Fall back to deriving the cid from `src="cid:xxx"` so inline
+          // image refs survive editor round-trips even when data-cid was
+          // never set (defensive — the composer normally pre-rewrites
+          // quoted-body cid: refs into data-cid).
+          const src = el.getAttribute("src") || "";
+          if (/^cid:/i.test(src)) return src.slice(4) || null;
+          return null;
+        },
        renderHTML: (attrs) => (attrs.cid ? { "data-cid": attrs.cid } : {}),
      },
    };