Feat: Scheduled send and send delay #322

* ADD DOC * Scheduld Send * add new shortcuts * fix * fix * fix bugs * rework * fix draft duplicating * fix err * some fixes * fixes from review * fixes from review * fixes from review * disable password managers for recipients * fix email store lazy load * add translations * fix styling * fixes --------- Co-authored-by: Linus Rath <139418639+rathlinus@users.noreply.github.com>
2026-05-28 18:46:49 +02:00
parent 82be047708
commit 31e96d6a46
36 changed files with 2835 additions and 360 deletions
@@ -5,7 +5,7 @@ import { useFocusTrap } from "@/hooks/use-focus-trap";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus, ShieldCheck, Lock } from "lucide-react";
+import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus, ShieldCheck, Lock, CalendarClock, ChevronDown } from "lucide-react";
 import { cn, formatFileSize, formatDateTime, generateUUID } from "@/lib/utils";
 import { debug } from "@/lib/debug";
 import { toast } from "@/stores/toast-store";
@@ -88,7 +88,9 @@ interface EmailComposerProps {
    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
    inReplyTo?: string[];
    references?: string[];
+    delayedUntil?: string;
  }) => void | Promise<void>;
+  onScheduledSendCreated?: () => void | Promise<void>;
  onClose?: () => void;
  onDiscardDraft?: (draftId: string) => void;
  onSaveState?: (data: ComposerDraftData) => void;
@@ -168,8 +170,21 @@ function buildEmbeddedSignatureHtml(
  return '';
 }

+function formatLocalDateTimeInput(date: Date): string {
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function getDefaultScheduleValue(): string {
+  const tomorrowAtEight = new Date();
+  tomorrowAtEight.setDate(tomorrowAtEight.getDate() + 1);
+  tomorrowAtEight.setHours(8, 0, 0, 0);
+  return formatLocalDateTimeInput(tomorrowAtEight);
+}
+
 export function EmailComposer({
  onSend,
+  onScheduledSendCreated,
  onClose,
  onDiscardDraft,
  onSaveState,
@@ -187,6 +202,7 @@ export function EmailComposer({
  const autoSelectReplyIdentity = useSettingsStore((state) => state.autoSelectReplyIdentity);
  const attachmentReminderEnabled = useSettingsStore((state) => state.attachmentReminderEnabled);
  const attachmentReminderKeywords = useSettingsStore((state) => state.attachmentReminderKeywords);
+  const sendDelaySeconds = useSettingsStore((state) => state.sendDelaySeconds);
  const signaturePosition = useSettingsStore((state) => state.signaturePosition);
  const signatureSeparatorEnabled = useSettingsStore((state) => state.signatureSeparatorEnabled);
  const activeIdentities = useIdentityStore((s) => s.identities);
@@ -390,6 +406,12 @@ export function EmailComposer({
  const [smimePassphraseError, setSmimePassphraseError] = useState('');
  const [showAttachmentWarning, setShowAttachmentWarning] = useState(false);
  const [attachmentWarningKeyword, setAttachmentWarningKeyword] = useState('');
+  const [attachmentWarningDelayedUntil, setAttachmentWarningDelayedUntil] = useState<string | undefined>();
+  const [showScheduleDialog, setShowScheduleDialog] = useState(false);
+  const [scheduleValue, setScheduleValue] = useState('');
+  const [scheduleError, setScheduleError] = useState('');
+  const [showSendMenu, setShowSendMenu] = useState(false);
+  const sendMenuRef = useRef<HTMLDivElement>(null);

  const saveTemplateModalRef = useFocusTrap({
    isActive: showSaveAsTemplate,
@@ -495,6 +517,23 @@ export function EmailComposer({
    }
  }, [signatureIdentity?.id, signatureIdentity?.htmlSignature, signatureIdentity?.textSignature, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode]);

+  useEffect(() => {
+    const handleClickOutsideSendMenu = (event: MouseEvent) => {
+      if (!sendMenuRef.current?.contains(event.target as Node)) {
+        setShowSendMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutsideSendMenu);
+    return () => document.removeEventListener('mousedown', handleClickOutsideSendMenu);
+  }, []);
+
+  const openScheduleDialog = useCallback(() => {
+    setScheduleError('');
+    setScheduleValue(getDefaultScheduleValue());
+    setShowScheduleDialog(true);
+    setShowSendMenu(false);
+  }, []);
+
  useEffect(() => {
    if (!autoSelectReplyIdentity) return;
    if (selectedIdentityId || initialData?.selectedIdentityId) return;
@@ -1184,6 +1223,33 @@ export function EmailComposer({
    return undefined;
  };

+  const validateScheduleValue = (value: string): string | null => {
+    if (!value) return t('schedule_send_required');
+    const time = new Date(value).getTime();
+    if (!Number.isFinite(time)) return t('schedule_send_invalid');
+    if (time <= Date.now()) return t('schedule_send_future');
+    if (composerClient) {
+      const maxDelayedSend = composerClient.getMaxDelayedSend();
+      if (maxDelayedSend > 0 && time > Date.now() + maxDelayedSend * 1000) {
+        return t('schedule_send_too_late');
+      }
+    }
+    return null;
+  };
+
+  const resolveDelayedUntil = async (requestedDelayedUntil?: string): Promise<string | undefined> => {
+    if (requestedDelayedUntil) return requestedDelayedUntil;
+    if (sendDelaySeconds === 0) return undefined;
+    if (composerClient?.hasDelayedSend()) {
+      return new Date(Date.now() + sendDelaySeconds * 1000).toISOString();
+    }
+    const confirmed = window.confirm(t('send_delay_unsupported_confirm'));
+    if (!confirmed) {
+      throw new Error(t('send_delay_unsupported'));
+    }
+    return undefined;
+  };
+
  // Rewrite data: URLs of dropped images (tagged with data-cid) into cid:
  // references so recipient clients that strip data URIs can still render them.
  const rewriteInlineImages = (html: string): {
@@ -1227,7 +1293,7 @@ export function EmailComposer({
    };
  };

-  const handleSend = async (skipAttachmentCheck = false) => {
+  const handleSend = async (skipAttachmentCheck = false, delayedUntil?: string) => {
    const ccAddresses = cc.split(",").map(e => e.trim()).filter(Boolean);
    const bccAddresses = bcc.split(",").map(e => e.trim()).filter(Boolean);

@@ -1255,6 +1321,7 @@ export function EmailComposer({
        const matched = attachmentReminderKeywords.find(kw => searchText.includes(kw.toLowerCase()));
        if (matched) {
          setAttachmentWarningKeyword(matched);
+          setAttachmentWarningDelayedUntil(delayedUntil);
          setShowAttachmentWarning(true);
          return;
        }
@@ -1343,6 +1410,7 @@ export function EmailComposer({
    const inlineAttachments = rewritten?.attachments ?? [];

    try {
+      const effectiveDelayedUntil = await resolveDelayedUntil(delayedUntil);
      // Let plugins veto the send (external-mail warning, mistyped-domain
      // guards, etc.). Returning false from any handler aborts before either
      // the S/MIME or standard JMAP path runs.
@@ -1492,7 +1560,16 @@ export function EmailComposer({
        }

        // 7. Send via raw email path
-        await sendRawEmail(client, payload, currentIdentity.id);
+        const result = await sendRawEmail(client, payload, currentIdentity.id, effectiveDelayedUntil, [...toAddresses, ...ccAddresses, ...bccAddresses]);
+        if (effectiveDelayedUntil && finalDraftId) {
+          client.deleteEmail(finalDraftId).catch(err => {
+            debug.warn('email', 'Scheduled S/MIME send created, but plaintext draft cleanup failed:', err);
+            toast.warning(t('schedule_send_cleanup_warning'));
+          });
+        }
+        if (result.scheduled) {
+          await onScheduledSendCreated?.();
+        }
      } else {
        // Standard JMAP send path
        // Collect uploaded attachment blobIds for the send request
@@ -1542,6 +1619,7 @@ export function EmailComposer({
          attachments: uploadedAttachments.length > 0 ? uploadedAttachments : undefined,
          inReplyTo: threadingHeaders?.inReplyTo,
          references: threadingHeaders?.references,
+          delayedUntil: effectiveDelayedUntil,
        });

        if (mode === 'reply' || mode === 'replyAll') {
@@ -1566,14 +1644,30 @@ export function EmailComposer({
      setDraftId(null);
      setSubAddressTag("");
      setValidationErrors({});
+      setShowScheduleDialog(false);
+      setScheduleValue('');
+      setScheduleError('');
      // Clear ref so unmount effect doesn't re-save
      stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    } catch (err) {
      debug.error('Failed to send email:', err);
-      toast.error(t('send_failed'));
+      toast.error(err instanceof Error ? err.message : t('send_failed'));
    }
  };

+  const handleScheduleSend = () => {
+    if (!composerClient?.hasDelayedSend()) {
+      setScheduleError(t('schedule_send_unsupported'));
+      return;
+    }
+    const error = validateScheduleValue(scheduleValue);
+    if (error) {
+      setScheduleError(error);
+      return;
+    }
+    handleSend(false, new Date(scheduleValue).toISOString());
+  };
+
  // Ctrl+Enter (Win/Linux) / Cmd+Enter (macOS) sends the open compose
  // draft. Scoped to events whose target lives inside this composer's
  // DOM tree — in Pro mode multiple composer tabs can be mounted at
@@ -1636,6 +1730,48 @@ export function EmailComposer({
    }
  };

+  const handleComposerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.defaultPrevented) return;
+
+    const isPlainEscape = e.key === 'Escape' && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
+    const hasPrimaryModifier = e.ctrlKey || e.metaKey;
+    const isSendShortcut = e.key === 'Enter' && hasPrimaryModifier && !e.altKey && !e.shiftKey;
+    const isScheduleShortcut = e.key === 'Enter' && hasPrimaryModifier && !e.altKey && e.shiftKey;
+    if (!isPlainEscape && !isSendShortcut && !isScheduleShortcut) return;
+
+    if (
+      showTemplatePicker ||
+      showSaveAsTemplate ||
+      showScheduleDialog ||
+      smimePassphrasePrompt ||
+      showAttachmentWarning ||
+      showCloseDialog
+    ) return;
+
+    if (isPlainEscape) {
+      if (activeAutoField) return;
+      e.preventDefault();
+      handleClose();
+      return;
+    }
+
+    if (isSendShortcut) {
+      if (e.repeat) {
+        e.preventDefault();
+        return;
+      }
+
+      e.preventDefault();
+      handleSend();
+      return;
+    }
+
+    if (isScheduleShortcut) {
+      e.preventDefault();
+      if (!e.repeat && composerClient?.hasDelayedSend()) openScheduleDialog();
+    }
+  };
+
  return (
    <div ref={composerRootRef} className={cn("flex h-full bg-background", className)}>
      <PluginSlot
@@ -1650,6 +1786,7 @@ export function EmailComposer({
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
+      onKeyDown={handleComposerKeyDown}
    >
      {/* Drag overlay */}
      {isDraggingOver && (
@@ -2077,7 +2214,6 @@ export function EmailComposer({
            >
              <BookmarkPlus className="w-4 h-4" />
            </Button>
-
            {/* S/MIME toggles */}
            {canSmimeSign && (
              <>
@@ -2115,15 +2251,56 @@ export function EmailComposer({
            >
              {t('discard')}
            </button>
-            <Button
-              onClick={() => handleSend()}
-              disabled={!canSend}
-              title={getSendTooltip()}
-              className="hidden md:inline-flex"
-            >
-              <Send className="w-4 h-4 mr-2" />
-              {t('send')}
-            </Button>
+            {composerClient?.hasDelayedSend() ? (
+              <div ref={sendMenuRef} className="relative hidden md:inline-flex">
+                <Button
+                  onClick={() => handleSend()}
+                  disabled={!canSend}
+                  title={getSendTooltip()}
+                  className="rounded-r-none border-r border-primary-foreground/20"
+                >
+                  <Send className="w-4 h-4 mr-2" />
+                  {t('send')}
+                </Button>
+                <Button
+                  type="button"
+                  onClick={() => setShowSendMenu((open) => !open)}
+                  disabled={!canSend}
+                  title={t('schedule_send')}
+                  className="rounded-l-none px-2"
+                  aria-haspopup="menu"
+                  aria-expanded={showSendMenu}
+                >
+                  <ChevronDown className="w-4 h-4" />
+                </Button>
+                {showSendMenu && (
+                  <div
+                    role="menu"
+                    className="absolute right-0 bottom-full z-50 mb-2 min-w-44 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
+                  >
+                    <button
+                      type="button"
+                      role="menuitem"
+                      onClick={openScheduleDialog}
+                      className="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <CalendarClock className="w-4 h-4" />
+                      {t('schedule_send')}
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <Button
+                onClick={() => handleSend()}
+                disabled={!canSend}
+                title={getSendTooltip()}
+                className="hidden md:inline-flex"
+              >
+                <Send className="w-4 h-4 mr-2" />
+                {t('send')}
+              </Button>
+            )}
          </div>
        </div>

@@ -2162,6 +2339,29 @@ export function EmailComposer({
        </div>
      )}

+      {showScheduleDialog && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
+          <div className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md p-6 animate-in zoom-in-95 duration-200">
+            <h3 className="text-lg font-semibold text-foreground mb-2">{t('schedule_send')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">{t('schedule_send_description')}</p>
+            <Input
+              type="datetime-local"
+              value={scheduleValue}
+              onChange={(e) => {
+                setScheduleValue(e.target.value);
+                setScheduleError('');
+              }}
+              className={cn(scheduleError && "border-destructive focus-visible:ring-destructive")}
+            />
+            {scheduleError && <p className="mt-2 text-sm text-destructive">{scheduleError}</p>}
+            <div className="mt-5 flex justify-end gap-2">
+              <Button variant="ghost" onClick={() => setShowScheduleDialog(false)}>{tCommon('cancel')}</Button>
+              <Button onClick={handleScheduleSend} disabled={!canSend}>{t('schedule_send')}</Button>
+            </div>
+          </div>
+        </div>
+      )}
+
      {/* S/MIME passphrase prompt */}
      {smimePassphrasePrompt && (
        <div
@@ -2238,7 +2438,7 @@ export function EmailComposer({
              <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
                {t('forgot_attachment.back')}
              </Button>
-              <Button onClick={() => { setShowAttachmentWarning(false); handleSend(true); }}>
+              <Button onClick={() => { setShowAttachmentWarning(false); handleSend(true, attachmentWarningDelayedUntil); setAttachmentWarningDelayedUntil(undefined); }}>
                {t('forgot_attachment.send_anyway')}
              </Button>
            </div>
@@ -2485,6 +2685,11 @@ function RecipientChipInput({
          aria-controls={activeAutoField === field ? `autocomplete-${field}` : undefined}
          aria-activedescendant={activeAutoField === field && autoSelectedIndex >= 0 ? `autocomplete-option-${autoSelectedIndex}` : undefined}
          aria-invalid={validationError || undefined}
+          data-bwignore="true"
+          data-1p-ignore
+          data-op-ignore
+          data-lpignore="true"
+          data-form-type="other"
        />
      </div>
      {validationError && validationMessage && (
@@ -2501,4 +2706,4 @@ function RecipientChipInput({
      )}
    </div>
  );
-}
+}
@@ -30,6 +30,8 @@ import {
  ShieldAlert,
  ShieldCheck,
  EditIcon,
+  CalendarClock,
+  XCircle,
 } from "lucide-react";
 import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
@@ -63,6 +65,9 @@ interface EmailContextMenuProps {
  onMarkAsSpam?: () => void;
  onUndoSpam?: () => void;
  onEditDraft?: () => void;
+  onCancelScheduled?: () => void;
+  onCancelScheduledForEdit?: () => void;
+  onRescheduleScheduled?: () => void;
  // Batch actions
  onBatchMarkAsRead?: (read: boolean) => void;
  onBatchDelete?: () => void;
@@ -133,6 +138,9 @@ export function EmailContextMenu({
  onBatchMarkAsSpam,
  onBatchUndoSpam,
  onEditDraft,
+  onCancelScheduled,
+  onCancelScheduledForEdit,
+  onRescheduleScheduled,
 }: EmailContextMenuProps) {
  const t = useTranslations("context_menu");
  const _tColor = useTranslations("email_viewer.color_tag");
@@ -143,6 +151,8 @@ export function EmailContextMenu({
  const currentColors = getCurrentColors(email.keywords);
  const showBatchActions = isMultiSelect && selectedCount > 1;
  const isInJunkFolder = currentMailboxRole === 'junk';
+  const isScheduled = email.isScheduled === true;
+  const canCancelScheduled = isScheduled && email.scheduledUndoStatus === 'pending';

  // Build color options from keyword definitions in settings
  const colorOptions = emailKeywords.map((kw) => ({
@@ -196,8 +206,36 @@ export function EmailContextMenu({
        </ContextMenuHeader>
      )}

+      {isScheduled && !showBatchActions && canCancelScheduled && (
+        <>
+          <ContextMenuItem
+            icon={CalendarClock}
+            label={t("reschedule_send")}
+            onClick={() => handleAction(onRescheduleScheduled!)}
+            disabled={!onRescheduleScheduled}
+          />
+          <ContextMenuItem
+            icon={XCircle}
+            label={t("cancel_scheduled_send")}
+            onClick={() => handleAction(onCancelScheduled!)}
+            disabled={!onCancelScheduled}
+          />
+          <ContextMenuItem
+            icon={EditIcon}
+            label={email.isSmimeScheduled ? t("cancel_and_compose_again") : t("cancel_and_edit")}
+            onClick={() => handleAction(onCancelScheduledForEdit!)}
+            disabled={!onCancelScheduledForEdit}
+          />
+        </>
+      )}
+
+      {canCancelScheduled && <ContextMenuSeparator />}
+
+      {!isScheduled && (
+        <>
+
      {/* Edit Draft - only for single draft emails */}
-      {!showBatchActions && isDraft && onEditDraft && (
+      {!isScheduled && !showBatchActions && isDraft && onEditDraft && (
        <>
          <ContextMenuItem
            icon={EditIcon}
@@ -209,7 +247,7 @@ export function EmailContextMenu({
      )}

      {/* Single email actions - Reply, Reply All, Forward */}
-      {!showBatchActions && (
+      {!isScheduled && !showBatchActions && (
        <>
          <ContextMenuItem
            icon={Reply}
@@ -375,6 +413,8 @@ export function EmailContextMenu({
          )
        }
      />
+        </>
+      )}

      <PluginSlot name="context-menu-email" />
    </ContextMenu>
@@ -4,7 +4,7 @@ import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { ThreadListItem } from "./thread-list-item";
 import { EmailContextMenu } from "./email-context-menu";
 import { cn } from "@/lib/utils";
-import { Trash2, Mail, MailX, MailOpen, Loader2, SearchX, AlertTriangle } from "lucide-react";
+import { Trash2, Mail, MailX, MailOpen, Loader2, SearchX, AlertTriangle, CalendarClock } from "lucide-react";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
@@ -27,6 +27,8 @@ interface EmailListProps {
  onEmailDoubleClick?: (email: Email) => void;
  className?: string;
  isLoading?: boolean;
+  hasMore?: boolean;
+  isLoadingMoreItems?: boolean;
  onOpenConversation?: (thread: ThreadGroup) => void;
  onReply?: (email: Email) => void;
  onReplyAll?: (email: Email) => void;
@@ -40,6 +42,11 @@ interface EmailListProps {
  onMarkAsSpam?: (email: Email) => void;
  onUndoSpam?: (email: Email) => void;
  onEditDraft?: (email: Email) => void;
+  isScheduledView?: boolean;
+  onLoadMoreScheduled?: () => void;
+  onCancelScheduled?: (email: Email) => void | Promise<void>;
+  onCancelScheduledForEdit?: (email: Email) => void | Promise<void>;
+  onRescheduleScheduled?: (email: Email) => void | Promise<void>;
 }

 export function EmailList({
@@ -49,6 +56,8 @@ export function EmailList({
  onEmailDoubleClick,
  className,
  isLoading = false,
+  hasMore,
+  isLoadingMoreItems,
  onOpenConversation,
  onReply,
  onReplyAll,
@@ -62,6 +71,11 @@ export function EmailList({
  onUndoSpam,
  onMoveToMailbox,
  onEditDraft,
+  isScheduledView = false,
+  onLoadMoreScheduled,
+  onCancelScheduled,
+  onCancelScheduledForEdit,
+  onRescheduleScheduled,
 }: EmailListProps) {
  const t = useTranslations('email_list');
  const { client } = useAuthStore();
@@ -96,9 +110,9 @@ export function EmailList({
  const disableThreading = useSettingsStore((state) => state.disableThreading);

  const threadGroups = useMemo(() => {
-    const groups = groupEmailsByThread(emails, disableThreading);
+    const groups = groupEmailsByThread(emails, disableThreading || isScheduledView);
    return sortThreadGroups(groups);
-  }, [emails, disableThreading]);
+  }, [emails, disableThreading, isScheduledView]);

  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Email>();
  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
@@ -108,6 +122,8 @@ export function EmailList({
  const density = useSettingsStore((state) => state.density);
  const showPreview = useSettingsStore((state) => state.showPreview);
  const mailLayout = useSettingsStore((state) => state.mailLayout);
+  const footerHasMore = hasMore ?? hasMoreEmails;
+  const footerIsLoadingMore = isLoadingMoreItems ?? isLoadingMore;
  const isMobile = useUIStore((state) => state.isMobile);
  // Match the list items: focus layout collapses to multi-line on mobile, so virtualizer estimates must match.
  const isFocusedMailLayout = mailLayout === 'focus' && !isMobile;
@@ -219,10 +235,14 @@ export function EmailList({
  };

  const handleLoadMore = useCallback(() => {
+    if (isScheduledView) {
+      onLoadMoreScheduled?.();
+      return;
+    }
    if (client && hasMoreEmails && !isLoadingMore && !isLoading) {
      loadMoreEmails(client);
    }
-  }, [client, hasMoreEmails, isLoadingMore, isLoading, loadMoreEmails]);
+  }, [client, hasMoreEmails, isLoadingMore, isLoading, isScheduledView, loadMoreEmails, onLoadMoreScheduled]);

  const handleToggleThreadExpansion = useCallback(async (threadId: string) => {
    const isExpanded = expandedThreadIds.has(threadId);
@@ -282,7 +302,7 @@ export function EmailList({
      <div
        className={cn(
          "transition-all duration-300 ease-in-out overflow-hidden",
-          hasSelection ? "max-h-16 opacity-100" : "max-h-0 opacity-0"
+          hasSelection && !isScheduledView ? "max-h-16 opacity-100" : "max-h-0 opacity-0"
        )}
      >
        <div className="px-4 py-2 border-b bg-accent/30 border-border flex items-center justify-between">
@@ -406,17 +426,19 @@ export function EmailList({
        ) : emails.length === 0 && !isLoading ? (
          <div className="flex flex-col items-center justify-center h-full py-12">
            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-muted shadow-lg flex items-center justify-center">
-              {searchQuery || !isFilterEmpty(searchFilters) ? (
+              {isScheduledView ? (
+                <CalendarClock className="w-10 h-10 text-muted-foreground" />
+              ) : searchQuery || !isFilterEmpty(searchFilters) ? (
                <SearchX className="w-10 h-10 text-muted-foreground" />
              ) : (
                <MailX className="w-10 h-10 text-muted-foreground" />
              )}
            </div>
            <p className="text-base font-medium text-foreground">
-              {searchQuery || !isFilterEmpty(searchFilters) ? t('no_search_results') : t('no_emails')}
+              {isScheduledView ? t('no_scheduled_emails') : searchQuery || !isFilterEmpty(searchFilters) ? t('no_search_results') : t('no_emails')}
            </p>
            <p className="text-sm mt-1 text-muted-foreground">
-              {searchQuery || !isFilterEmpty(searchFilters) ? t('no_search_results_description') : t('no_emails_description')}
+              {isScheduledView ? t('no_scheduled_emails_description') : searchQuery || !isFilterEmpty(searchFilters) ? t('no_search_results_description') : t('no_emails_description')}
            </p>
          </div>
        ) : (
@@ -468,13 +490,13 @@ export function EmailList({
            </div>

            <div className="py-4 flex justify-center">
-              {isLoadingMore && hasMoreEmails && (
+              {footerIsLoadingMore && footerHasMore && (
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Loader2 className="w-4 h-4 animate-spin" />
                  <span>{t('loading_more')}</span>
                </div>
              )}
-              {!hasMoreEmails && emails.length > 0 && (
+              {!footerHasMore && emails.length > 0 && (
                <div className="text-sm text-muted-foreground border-t border-border pt-6">
                  {t('no_more_emails')}
                </div>
@@ -509,6 +531,9 @@ export function EmailList({
          onMarkAsSpam={() => onMarkAsSpam?.(contextMenu.data!)}
          onUndoSpam={() => onUndoSpam?.(contextMenu.data!)}
          onEditDraft={() => onEditDraft?.(contextMenu.data!)}
+          onCancelScheduled={onCancelScheduled ? () => onCancelScheduled(contextMenu.data!) : undefined}
+          onCancelScheduledForEdit={onCancelScheduledForEdit ? () => onCancelScheduledForEdit(contextMenu.data!) : undefined}
+          onRescheduleScheduled={onRescheduleScheduled ? () => onRescheduleScheduled(contextMenu.data!) : undefined}
          onBatchMarkAsRead={(read) => client && batchMarkAsRead(client, read)}
          onBatchDelete={() => client && batchDelete(client)}
          onBatchArchive={async () => {
@@ -66,6 +66,7 @@ import {
  EditIcon,
  PlayCircle,
  PenSquare,
+  CalendarClock,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "@/i18n/navigation";
@@ -126,6 +127,9 @@ interface EmailViewerProps {
  onNavigatePrev?: () => void;
  onShowShortcuts?: () => void;
  onEditDraft?: () => void;
+  onCancelScheduled?: () => void;
+  onCancelScheduledForEdit?: () => void;
+  onRescheduleScheduled?: (delayedUntil: string) => void;
  onCompose?: () => void;
  currentUserEmail?: string;
  currentUserName?: string;
@@ -875,6 +879,9 @@ export function EmailViewer({
  onNavigatePrev,
  onShowShortcuts,
  onEditDraft,
+  onCancelScheduled,
+  onCancelScheduledForEdit,
+  onRescheduleScheduled,
  onCompose,
  currentUserEmail,
  currentUserName,
@@ -884,6 +891,7 @@ export function EmailViewer({
  className,
 }: EmailViewerProps) {
  const t = useTranslations('email_viewer');
+  const tComposer = useTranslations('email_composer');
  const tNotifications = useTranslations('notifications');
  const tCommon = useTranslations('common');
  const tSmime = useTranslations('smime');
@@ -934,6 +942,8 @@ export function EmailViewer({

  // Detect if the email is a draft
  const isDraft = email?.keywords?.['$draft'] === true;
+  const isScheduled = email?.isScheduled === true;
+  const canCancelScheduled = isScheduled && email?.scheduledUndoStatus === 'pending';

  // Color options for email tags (from user-defined keyword settings)
  const colorOptions = emailKeywords.map((kw) => ({
@@ -947,6 +957,29 @@ export function EmailViewer({
  const { tabletListVisible } = useUIStore();
  const { identities, client, isDemoMode, activeAccountId } = useAuthStore();
  const activeAccount = useAccountStore((s) => s.accounts.find((a) => a.id === activeAccountId));
+  const promptForRescheduleDelayedUntil = useCallback((): string | null => {
+    const value = window.prompt(t('reschedule_prompt'));
+    if (!value) return null;
+    const time = new Date(value).getTime();
+    if (!Number.isFinite(time)) {
+      toast.error(tComposer('schedule_send_invalid'));
+      return null;
+    }
+    if (time <= Date.now()) {
+      toast.error(tComposer('schedule_send_future'));
+      return null;
+    }
+    if (!client?.hasDelayedSend()) {
+      toast.error(tComposer('schedule_send_unsupported'));
+      return null;
+    }
+    const maxDelayedSend = client.getMaxDelayedSend();
+    if (maxDelayedSend > 0 && time > Date.now() + maxDelayedSend * 1000) {
+      toast.error(tComposer('schedule_send_too_late'));
+      return null;
+    }
+    return new Date(time).toISOString();
+  }, [client, t, tComposer]);
  const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
  const { startTour } = useTour();
  const isEmbedded = useIsEmbedded();
@@ -3358,7 +3391,32 @@ export function EmailViewer({
            <ChevronLeft className="w-5 h-5" />
          </Button>
        )}
-        {isDraft && onEditDraft && (
+        {isScheduled && canCancelScheduled && (
+          <>
+            <Button variant="default" size="sm" onClick={onCancelScheduled} className="sm:flex sm:h-8" title={t('cancel_scheduled_send')}>
+              <X className="w-4 h-4" />
+              <span className="hidden sm:inline text-sm">{t('cancel_scheduled_send')}</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                const delayedUntil = promptForRescheduleDelayedUntil();
+                if (delayedUntil) onRescheduleScheduled?.(delayedUntil);
+              }}
+              className="hidden sm:flex sm:h-8"
+              title={t('reschedule_send')}
+            >
+              <CalendarClock className="w-4 h-4" />
+              {showToolbarLabels && <span className="hidden sm:inline text-sm">{t('reschedule_send')}</span>}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onCancelScheduledForEdit} className="hidden sm:flex sm:h-8" title={email.isSmimeScheduled ? t('cancel_and_compose_again') : t('cancel_and_edit')}>
+              <EditIcon className="w-4 h-4" />
+              {showToolbarLabels && <span className="hidden sm:inline text-sm">{email.isSmimeScheduled ? t('cancel_and_compose_again') : t('cancel_and_edit')}</span>}
+            </Button>
+          </>
+        )}
+        {!isScheduled && isDraft && onEditDraft && (
          <Button
            variant="default"
            size="sm"
@@ -3370,7 +3428,7 @@ export function EmailViewer({
            <span className="text-sm">{t('edit_draft')}</span>
          </Button>
        )}
-        {!isDraft && (<>
+        {!isScheduled && !isDraft && (<>
        <Button
          variant="ghost"
          size="sm"
@@ -3412,6 +3470,7 @@ export function EmailViewer({
      </div>

      {/* Right: Organize actions - order: archive, delete, move, tag, spam, read state, print, view source */}
+      {!isScheduled && (
      <div className="flex items-center gap-0 sm:gap-0.5">
        {/* Archive */}
        <Button
@@ -3869,6 +3928,7 @@ export function EmailViewer({
          )}
        </div>
      </div>
+      )}
    </>
  );

@@ -3879,13 +3939,13 @@ export function EmailViewer({
      className={cn("flex-1 flex flex-row h-full bg-background overflow-hidden animate-in fade-in duration-300 relative", className)}
    >
    {/* Mobile More menu sidebar overlay */}
-    {isMobile && moreMenuOpen && (
+    {!isScheduled && isMobile && moreMenuOpen && (
      <div
        className="fixed inset-0 bg-black/50 z-[60] sm:hidden"
        onClick={() => setMoreMenuOpen(false)}
      />
    )}
-    {isMobile && (
+    {!isScheduled && isMobile && (
      <div className={cn(
        "fixed inset-y-0 right-0 w-72 bg-background border-l border-border z-[70] sm:hidden",
        "transform transition-transform duration-300 ease-in-out",
@@ -4817,10 +4877,44 @@ export function EmailViewer({
          </div>
        )}

+        {/* Scheduled Banner */}
+        {isScheduled && (
+          <div className="border-b border-border bg-primary/10">
+            <div className="max-w-4xl mx-auto px-6 py-2.5 flex flex-wrap items-center justify-between gap-2">
+              <div className="flex items-center gap-2 text-primary">
+                <CalendarClock className="w-4 h-4" />
+                <span className="text-sm font-medium">
+                  {t('scheduled_banner', { date: email.scheduledSendAt ? formatDateTime(email.scheduledSendAt, timeFormat) : '' })}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                {canCancelScheduled && (
+                  <>
+                    <Button size="sm" variant="outline" onClick={onCancelScheduled}>{t('cancel_scheduled_send')}</Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        const delayedUntil = promptForRescheduleDelayedUntil();
+                        if (delayedUntil) onRescheduleScheduled?.(delayedUntil);
+                      }}
+                    >
+                      {t('reschedule_send')}
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={onCancelScheduledForEdit}>
+                      {email.isSmimeScheduled ? t('cancel_and_compose_again') : t('cancel_and_edit')}
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
        {/* Draft Banner */}
        {isDraft && (
          <div className="border-b border-border bg-warning/10">
-            <div className="max-w-4xl mx-auto px-6 py-2.5 flex items-center justify-between">
+            <div className="px-6 py-2.5 flex items-center justify-between">
              <div className="flex items-center gap-2 text-warning">
                <File className="w-4 h-4" />
                <span className="text-sm font-medium">{t('draft_banner')}</span>
@@ -5289,7 +5383,7 @@ export function EmailViewer({
          <PluginSlot name="email-footer" />

          {/* Quick Reply Section - hidden for drafts and while loading a new email */}
-          {!isDraft && !isBodyLoading && (effectiveEmailContent.isHtml ? iframeReady : true) && (<div className="bg-background border-t border-border px-6 mt-auto" style={{ paddingBlock: 'var(--density-header-py)' }}>
+          {!isDraft && !isScheduled && !isBodyLoading && (effectiveEmailContent.isHtml ? iframeReady : true) && (<div className="bg-background border-t border-border px-6 mt-auto" style={{ paddingBlock: 'var(--density-header-py)' }}>
            <div className="flex items-start" style={{ gap: 'var(--density-item-gap)' }}>
              <div className="flex-shrink-0">
                <Avatar
@@ -1,11 +1,11 @@
 "use client";

 import React, { useCallback } from "react";
-import { formatDate, stripInvisibleLeading } from "@/lib/utils";
+import { formatDate, formatDateTime, stripInvisibleLeading } from "@/lib/utils";
 import { Email, ThreadGroup } from "@/lib/jmap/types";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/ui/avatar";
-import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward } from "lucide-react";
+import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward, CalendarClock } from "lucide-react";
 import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useEmailStore } from "@/stores/email-store";
@@ -67,6 +67,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
    const emailKeywords = useSettingsStore((state) => state.emailKeywords);
    const density = useSettingsStore((state) => state.density);
    const mailLayout = useSettingsStore((state) => state.mailLayout);
+    const timeFormat = useSettingsStore((state) => state.timeFormat);
    const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
    const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;
    const isUnifiedView = useEmailStore((state) => state.isUnifiedView);
@@ -78,6 +79,9 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
    const isFocusedMailLayout = mailLayout === 'focus' && !isMobile;
    const trimmedPreview = stripInvisibleLeading(email.preview ?? '');
    const inlinePreview = showPreview && trimmedPreview ? ` ${trimmedPreview}` : '';
+    const scheduledSendLabel = email.isScheduled && email.scheduledSendAt
+      ? formatDateTime(email.scheduledSendAt, timeFormat)
+      : null;

    // Resolve color tags using keyword definitions; unknown tags fall back to gray
    const tagIds = getEmailColorTags(email.keywords);
@@ -241,12 +245,22 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                  {resolvedKeywordDefs.map((kd) => (
                    <span key={kd.id} className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[kd.color]?.dot || 'bg-gray-400')} />
                  ))}
-                  <span className={cn(
-                    'text-xs tabular-nums',
-                    isUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
-                  )}>
-                    {formatDate(email.receivedAt)}
-                  </span>
+                  {scheduledSendLabel ? (
+                    <span
+                      className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-xs font-medium tabular-nums text-sky-700 dark:text-sky-300"
+                      title={scheduledSendLabel}
+                    >
+                      <CalendarClock className="h-3 w-3 shrink-0" />
+                      <span className="truncate">{scheduledSendLabel}</span>
+                    </span>
+                  ) : (
+                    <span className={cn(
+                      'text-xs tabular-nums',
+                      isUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
+                    )}>
+                      {formatDate(email.receivedAt)}
+                    </span>
+                  )}
                </div>
              </div>
            ) : (
@@ -299,14 +313,24 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
                        {kd.label}
                      </span>
                    ))}
-                    <span className={cn(
-                      "text-xs tabular-nums",
-                      isUnread
-                        ? "text-foreground font-semibold"
-                        : "text-muted-foreground"
-                    )}>
-                      {formatDate(email.receivedAt)}
-                    </span>
+                    {scheduledSendLabel ? (
+                      <span
+                        className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium tabular-nums text-sky-700 dark:text-sky-300"
+                        title={scheduledSendLabel}
+                      >
+                        <CalendarClock className="h-3 w-3 shrink-0" />
+                        <span className="truncate">{scheduledSendLabel}</span>
+                      </span>
+                    ) : (
+                      <span className={cn(
+                        "text-xs tabular-nums",
+                        isUnread
+                          ? "text-foreground font-semibold"
+                          : "text-muted-foreground"
+                      )}>
+                        {formatDate(email.receivedAt)}
+                      </span>
+                    )}
                  </div>
                </div>

@@ -335,16 +359,18 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
        </div>

        {/* Hover Quick Actions */}
-        <EmailHoverActions
-          email={email}
-          backgroundClassName={resolvedColorTag ? resolvedColorTag : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
-          onToggleStar={onToggleStar}
-          onMarkAsRead={onMarkAsRead}
-          onDelete={onDelete}
-          onArchive={onArchive}
-          onSetColorTag={onSetColorTag}
-          onMarkAsSpam={onMarkAsSpam}
-        />
+        {!email.isScheduled && (
+          <EmailHoverActions
+            email={email}
+            backgroundClassName={resolvedColorTag ? resolvedColorTag : ((selected || isChecked) ? "bg-accent" : "bg-muted")}
+            onToggleStar={onToggleStar}
+            onMarkAsRead={onMarkAsRead}
+            onDelete={onDelete}
+            onArchive={onArchive}
+            onSetColorTag={onSetColorTag}
+            onMarkAsSpam={onMarkAsSpam}
+          />
+        )}
      </div>
    );
  }
@@ -374,6 +400,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
    const showPreview = useSettingsStore((state) => state.showPreview);
    const density = useSettingsStore((state) => state.density);
    const mailLayout = useSettingsStore((state) => state.mailLayout);
+    const timeFormat = useSettingsStore((state) => state.timeFormat);
    const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
    const isMobile = useUIStore((state) => state.isMobile);
    const { latestEmail, participantNames, hasUnread, hasStarred, hasAttachment, hasAnswered, hasForwarded, emailCount } = thread;
@@ -381,6 +408,9 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
    const isFocusedMailLayout = mailLayout === 'focus' && !isMobile;
    const trimmedPreview = stripInvisibleLeading(latestEmail.preview ?? '');
    const inlinePreview = showPreview && trimmedPreview ? ` ${trimmedPreview}` : '';
+    const scheduledSendLabel = latestEmail.isScheduled && latestEmail.scheduledSendAt
+      ? formatDateTime(latestEmail.scheduledSendAt, timeFormat)
+      : null;

    const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView } = useEmailStore();
    const getAccountById = useAccountStore((state) => state.getAccountById);
@@ -646,12 +676,22 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                    {keywordDef && (
                      <span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')} />
                    )}
-                    <span className={cn(
-                      'text-xs tabular-nums',
-                      hasUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
-                    )}>
-                      {formatDate(latestEmail.receivedAt)}
-                    </span>
+                    {scheduledSendLabel ? (
+                      <span
+                        className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-xs font-medium tabular-nums text-sky-700 dark:text-sky-300"
+                        title={scheduledSendLabel}
+                      >
+                        <CalendarClock className="h-3 w-3 shrink-0" />
+                        <span className="truncate">{scheduledSendLabel}</span>
+                      </span>
+                    ) : (
+                      <span className={cn(
+                        'text-xs tabular-nums',
+                        hasUnread ? 'text-foreground font-semibold' : 'text-muted-foreground'
+                      )}>
+                        {formatDate(latestEmail.receivedAt)}
+                      </span>
+                    )}
                  </div>
                </div>
              ) : (
@@ -716,14 +756,24 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
                          {keywordDef.label}
                        </span>
                      )}
-                      <span className={cn(
-                        "text-xs tabular-nums",
-                        hasUnread
-                          ? "text-foreground font-semibold"
-                          : "text-muted-foreground"
-                      )}>
-                        {formatDate(latestEmail.receivedAt)}
-                      </span>
+                      {scheduledSendLabel ? (
+                        <span
+                          className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium tabular-nums text-sky-700 dark:text-sky-300"
+                          title={scheduledSendLabel}
+                        >
+                          <CalendarClock className="h-3 w-3 shrink-0" />
+                          <span className="truncate">{scheduledSendLabel}</span>
+                        </span>
+                      ) : (
+                        <span className={cn(
+                          "text-xs tabular-nums",
+                          hasUnread
+                            ? "text-foreground font-semibold"
+                            : "text-muted-foreground"
+                        )}>
+                          {formatDate(latestEmail.receivedAt)}
+                        </span>
+                      )}
                    </div>
                  </div>

@@ -752,16 +802,18 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
          </div>

          {/* Hover Quick Actions for thread header */}
-          <EmailHoverActions
-            email={latestEmail}
-            backgroundClassName={colorTag ? colorTag : ((isSelected || isChecked) ? "bg-accent" : "bg-muted")}
-            onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
-            onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
-            onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
-            onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
-            onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
-            onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
-          />
+          {!latestEmail.isScheduled && (
+            <EmailHoverActions
+              email={latestEmail}
+              backgroundClassName={colorTag ? colorTag : ((isSelected || isChecked) ? "bg-accent" : "bg-muted")}
+              onToggleStar={onToggleStar ? () => onToggleStar(latestEmail) : undefined}
+              onMarkAsRead={onMarkAsRead ? (read) => onMarkAsRead(latestEmail, read) : undefined}
+              onDelete={onDelete ? () => onDelete(latestEmail) : undefined}
+              onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
+              onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
+              onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
+            />
+          )}
        </div>

        {isExpanded && !isMobile && !isFocusedMailLayout && (