This commit is contained in:
Lucas Gaitzsch
2026-05-20 19:56:28 +02:00
parent 1a3d359fee
commit 3dc1b4ceee
22 changed files with 177 additions and 125 deletions
+39 -23
View File
@@ -108,6 +108,7 @@ export default function Home() {
const [pendingMailtoAccountChoice, setPendingMailtoAccountChoice] = useState<ParsedMailto | null>(null);
const [isProtocolAccountSwitching, setIsProtocolAccountSwitching] = useState(false);
const markAsReadTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastUndoToastSubmissionRef = useRef<string | null>(null);
const { isAuthenticated, client, logout, checkAuth, switchAccount, activeAccountId, isLoading: authLoading, connectionLost, isRateLimited, rateLimitUntil } = useAuthStore();
const { identities } = useIdentityStore();
useIdentitySync();
@@ -1256,6 +1257,44 @@ export default function Home() {
if (isMobile) setActiveView('viewer');
};
useEffect(() => {
if (!pendingUndoSend || !client) return;
if (lastUndoToastSubmissionRef.current === pendingUndoSend.submissionId) return;
lastUndoToastSubmissionRef.current = pendingUndoSend.submissionId;
const pending = pendingUndoSend;
toast.info(t('email_viewer.undo_send_scheduled'), {
duration: 8000,
action: {
label: t('email_viewer.undo_send'),
onClick: () => {
void (async () => {
try {
const restored = await cancelUndoSend(client, pending);
if (restored && !pending.isSmime) {
await handleEditDraft(restored);
}
if (isScheduledView) await fetchScheduledEmails(client);
} catch (error) {
console.error('Failed to undo scheduled send:', error);
}
})();
},
},
});
const timer = setTimeout(() => {
const current = useEmailStore.getState().pendingUndoSend;
if (current?.submissionId === pending.submissionId) {
clearPendingUndoSend();
}
}, 8000);
return () => clearTimeout(timer);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cancelUndoSend, clearPendingUndoSend, client, fetchScheduledEmails, isScheduledView, pendingUndoSend?.submissionId, t]);
const handleReplyAll = async () => {
if (selectedEmail) {
const ok = await emailHooks.onBeforeReplyAll.intercept({
@@ -2608,11 +2647,6 @@ export default function Home() {
setShowComposer(true);
if (isMobile) setActiveView('viewer');
}}
onRescheduleScheduled={async (email, delayedUntil) => {
if (client && email.emailSubmissionId && email.scheduledIdentityId) {
await rescheduleScheduledEmail(client, email.emailSubmissionId, email.id, email.scheduledIdentityId, delayedUntil);
}
}}
onEmailSelect={handleEmailSelect}
onEmailDoubleClick={isEmbedded ? ((email) => {
useProTabStore.getState().openEmailTab({
@@ -2964,24 +2998,6 @@ export default function Home() {
)}
<ConfirmDialog {...confirmDialogProps} />
<PromptDialog {...promptDialogProps} />
{pendingUndoSend && (
<div className="fixed bottom-4 left-1/2 z-[70] flex -translate-x-1/2 items-center gap-3 rounded-lg border border-border bg-background px-4 py-3 shadow-lg">
<span className="text-sm text-foreground">{t('email_viewer.undo_send_scheduled')}</span>
<Button
size="sm"
variant="outline"
onClick={async () => {
if (!client) return;
const restored = await cancelUndoSend(client, pendingUndoSend);
if (restored && !pendingUndoSend.isSmime) {
await handleEditDraft(restored);
}
}}
>
{t('email_viewer.undo_send')}
</Button>
</div>
)}
<TotpReauthDialog />
</div>
</DragDropProvider>
+92 -28
View File
@@ -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, CalendarClock } 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";
@@ -160,6 +160,18 @@ 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,
@@ -373,6 +385,8 @@ export function EmailComposer({
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,
@@ -465,6 +479,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;
@@ -1550,8 +1581,10 @@ export function EmailComposer({
if (e.defaultPrevented) return;
const isPlainEscape = e.key === 'Escape' && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
const isSendShortcut = e.key === 'Enter' && e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
if (!isPlainEscape && !isSendShortcut) return;
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 ||
@@ -1577,6 +1610,12 @@ export function EmailComposer({
e.preventDefault();
handleSend();
return;
}
if (isScheduleShortcut) {
e.preventDefault();
if (!e.repeat && client?.hasDelayedSend()) openScheduleDialog();
}
};
@@ -2007,22 +2046,6 @@ export function EmailComposer({
>
<BookmarkPlus className="w-4 h-4" />
</Button>
{client?.hasDelayedSend() && (
<Button
variant="ghost"
size="icon"
onClick={() => {
setScheduleError('');
setScheduleValue('');
setShowScheduleDialog(true);
}}
title={t('schedule_send')}
className="h-9 w-9"
>
<CalendarClock className="w-4 h-4" />
</Button>
)}
{/* S/MIME toggles */}
{canSmimeSign && (
<>
@@ -2060,15 +2083,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>
{client?.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>
+8 -72
View File
@@ -3,8 +3,8 @@
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, CalendarClock, XCircle, Edit3 } from "lucide-react";
import { cn, formatDateTime } from "@/lib/utils";
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";
@@ -18,7 +18,6 @@ import { useTranslations } from "next-intl";
import { useVirtualizer } from "@tanstack/react-virtual";
import { SearchChips } from "@/components/search/search-chips";
import { isFilterEmpty, DEFAULT_SEARCH_FILTERS } from "@/lib/jmap/search-utils";
import { toast } from "@/stores/toast-store";
interface EmailListProps {
emails: Email[];
@@ -44,7 +43,6 @@ interface EmailListProps {
onLoadMoreScheduled?: () => void;
onCancelScheduled?: (email: Email) => void | Promise<void>;
onCancelScheduledForEdit?: (email: Email) => void | Promise<void>;
onRescheduleScheduled?: (email: Email, delayedUntil: string) => void | Promise<void>;
}
export function EmailList({
@@ -71,10 +69,8 @@ export function EmailList({
onLoadMoreScheduled,
onCancelScheduled,
onCancelScheduledForEdit,
onRescheduleScheduled,
}: EmailListProps) {
const t = useTranslations('email_list');
const tComposer = useTranslations('email_composer');
const { client } = useAuthStore();
const {
selectedEmailIds,
@@ -119,6 +115,7 @@ export function EmailList({
const density = useSettingsStore((state) => state.density);
const showPreview = useSettingsStore((state) => state.showPreview);
const mailLayout = useSettingsStore((state) => state.mailLayout);
const timeFormat = useSettingsStore((state) => state.timeFormat);
const isFocusedMailLayout = mailLayout === 'focus';
const estimateSize = useCallback(() => {
@@ -237,30 +234,6 @@ export function EmailList({
}
}, [client, hasMoreEmails, isLoadingMore, isLoading, isScheduledView, loadMoreEmails, onLoadMoreScheduled]);
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 handleToggleThreadExpansion = useCallback(async (threadId: string) => {
const isExpanded = expandedThreadIds.has(threadId);
@@ -316,11 +289,6 @@ export function EmailList({
return (
<div className={cn("flex flex-col min-h-0", className)}>
{/* Batch Actions Toolbar */}
{isScheduledView && emails.length > 0 && (
<div className="border-b border-border bg-muted/20 px-4 py-2 text-xs text-muted-foreground">
{t('scheduled_actions_hint')}
</div>
)}
<div
className={cn(
"transition-all duration-300 ease-in-out overflow-hidden",
@@ -497,7 +465,7 @@ export function EmailList({
onToggleExpand={() => handleToggleThreadExpansion(thread.threadId)}
onEmailSelect={(email) => onEmailSelect?.(email)}
onEmailDoubleClick={onEmailDoubleClick ? (email) => onEmailDoubleClick(email) : undefined}
onContextMenu={openContextMenu}
onContextMenu={isScheduledView ? undefined : openContextMenu}
onOpenConversation={onOpenConversation}
onToggleStar={onToggleStar ? (email) => onToggleStar(email) : undefined}
onMarkAsRead={onMarkAsRead ? (email, read) => onMarkAsRead(email, read) : undefined}
@@ -508,39 +476,10 @@ export function EmailList({
/>
{isScheduledView && thread.latestEmail.isScheduled && (
<div className="flex flex-wrap items-center gap-2 border-b border-border bg-muted/10 px-4 py-2 text-xs">
{thread.latestEmail.scheduledUndoStatus && thread.latestEmail.scheduledUndoStatus !== 'pending' && (
<span className="rounded-full bg-muted px-2 py-0.5 text-muted-foreground">
{thread.latestEmail.scheduledUndoStatus}
</span>
)}
<span className="flex items-center gap-1 text-muted-foreground">
<CalendarClock className="w-3.5 h-3.5" />
{new Date(thread.latestEmail.scheduledSendAt || '').toLocaleString()}
{thread.latestEmail.scheduledSendAt ? formatDateTime(thread.latestEmail.scheduledSendAt, timeFormat) : ''}
</span>
{thread.latestEmail.scheduledUndoStatus === 'pending' && (
<>
<Button variant="ghost" size="sm" className="h-7 px-2" onClick={() => onCancelScheduled?.(thread.latestEmail)}>
<XCircle className="w-3.5 h-3.5 mr-1" />
{t('cancel_scheduled_send')}
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 px-2"
onClick={() => {
const delayedUntil = promptForRescheduleDelayedUntil();
if (delayedUntil) onRescheduleScheduled?.(thread.latestEmail, delayedUntil);
}}
>
<CalendarClock className="w-3.5 h-3.5 mr-1" />
{t('reschedule_send')}
</Button>
<Button variant="ghost" size="sm" className="h-7 px-2" onClick={() => onCancelScheduledForEdit?.(thread.latestEmail)}>
<Edit3 className="w-3.5 h-3.5 mr-1" />
{thread.latestEmail.isSmimeScheduled ? t('cancel_and_compose_again') : t('cancel_and_edit')}
</Button>
</>
)}
</div>
)}
</div>
@@ -590,12 +529,9 @@ export function EmailList({
onMarkAsSpam={() => onMarkAsSpam?.(contextMenu.data!)}
onUndoSpam={() => onUndoSpam?.(contextMenu.data!)}
onEditDraft={() => onEditDraft?.(contextMenu.data!)}
onCancelScheduled={() => onCancelScheduled?.(contextMenu.data!)}
onCancelScheduledForEdit={() => onCancelScheduledForEdit?.(contextMenu.data!)}
onRescheduleScheduled={() => {
const delayedUntil = promptForRescheduleDelayedUntil();
if (delayedUntil) onRescheduleScheduled?.(contextMenu.data!, delayedUntil);
}}
onCancelScheduled={isScheduledView ? undefined : () => onCancelScheduled?.(contextMenu.data!)}
onCancelScheduledForEdit={isScheduledView ? undefined : () => onCancelScheduledForEdit?.(contextMenu.data!)}
onRescheduleScheduled={undefined}
onBatchMarkAsRead={(read) => client && batchMarkAsRead(client, read)}
onBatchDelete={() => client && batchDelete(client)}
onBatchArchive={async () => {
+2
View File
@@ -289,6 +289,8 @@ export const KEYBOARD_SHORTCUTS = {
{ key: "x", description: "shortcuts.threads.expand_collapse" },
],
composer: [
{ key: "Ctrl + Enter", description: "shortcuts.composer.send" },
{ key: "Ctrl + Shift + Enter", description: "shortcuts.composer.schedule_send" },
{ key: "t", description: "shortcuts.composer.template_picker" },
],
} as const;
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Rozbalit/sbalit vlákno"
},
"composer": {
"send": "Odeslat e-mail",
"schedule_send": "Naplánovat odeslání",
"template_picker": "Otevřít výběr šablon"
}
},
+3 -1
View File
@@ -1811,6 +1811,8 @@
"expand_collapse": "Udvid/skjul tråd"
},
"composer": {
"send": "Send e-mail",
"schedule_send": "Planlæg afsendelse",
"template_picker": "Åbn skabelonvælger"
}
},
@@ -2915,4 +2917,4 @@
"unified_mailbox": {
"search_unavailable": "Søgning er ikke tilgængelig i den samlede visning"
}
}
}
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Unterhaltung erweitern/einklappen"
},
"composer": {
"send": "E-Mail senden",
"schedule_send": "Senden planen",
"template_picker": "Vorlagenauswahl öffnen"
}
},
+2
View File
@@ -1858,6 +1858,8 @@
"expand_collapse": "Expand/collapse thread"
},
"composer": {
"send": "Send email",
"schedule_send": "Schedule send",
"template_picker": "Open template picker"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Expandir/contraer conversación"
},
"composer": {
"send": "Enviar correo",
"schedule_send": "Programar envío",
"template_picker": "Abrir selector de plantillas"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Développer/réduire la conversation"
},
"composer": {
"send": "Envoyer l'e-mail",
"schedule_send": "Planifier l'envoi",
"template_picker": "Ouvrir le sélecteur de modèles"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Espandi/comprimi conversazione"
},
"composer": {
"send": "Invia email",
"schedule_send": "Programma invio",
"template_picker": "Apri selettore modelli"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "スレッドの展開/折りたたみ"
},
"composer": {
"send": "メールを送信",
"schedule_send": "送信を予約",
"template_picker": "テンプレートピッカーを開く"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "대화 펼치기/접기"
},
"composer": {
"send": "이메일 보내기",
"schedule_send": "보내기 예약",
"template_picker": "템플릿 선택기 열기"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Izvērst/sairt sarunu"
},
"composer": {
"send": "Nosūtīt e-pastu",
"schedule_send": "Ieplānot nosūtīšanu",
"template_picker": "Atvērt veidņu izvēli"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Gesprek uitklappen/inklappen"
},
"composer": {
"send": "E-mail verzenden",
"schedule_send": "Verzenden plannen",
"template_picker": "Sjabloonkiezer openen"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Rozwiń/zwiń wątek"
},
"composer": {
"send": "Wyślij e-mail",
"schedule_send": "Zaplanuj wysyłkę",
"template_picker": "Otwórz wybór szablonu"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Expandir/recolher conversa"
},
"composer": {
"send": "Enviar e-mail",
"schedule_send": "Agendar envio",
"template_picker": "Abrir seletor de modelos"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Развернуть/свернуть цепочку"
},
"composer": {
"send": "Отправить письмо",
"schedule_send": "Запланировать отправку",
"template_picker": "Открыть выбор шаблонов"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "İleti dizisini genişlet/daralt"
},
"composer": {
"send": "E-posta gönder",
"schedule_send": "Göndermeyi planla",
"template_picker": "Şablon seçiciyi aç"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "Розгорнути/згорнути ланцюжок"
},
"composer": {
"send": "Надіслати лист",
"schedule_send": "Запланувати надсилання",
"template_picker": "Відкрити засіб вибору шаблону"
}
},
+2
View File
@@ -1854,6 +1854,8 @@
"expand_collapse": "展开/折叠会话"
},
"composer": {
"send": "发送邮件",
"schedule_send": "定时发送",
"template_picker": "打开模板选择器"
}
},
+1 -1
View File
@@ -2213,7 +2213,7 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
const result = await client.rescheduleEmailSubmission(submissionId, emailId, identityId, delayedUntil);
const pendingUndoSend = get().pendingUndoSend;
if (pendingUndoSend?.submissionId === submissionId) {
set({ pendingUndoSend: { ...pendingUndoSend, sendAt: result.sendAt || delayedUntil } });
set({ pendingUndoSend: { ...pendingUndoSend, submissionId: result.emailSubmissionId || submissionId, sendAt: result.sendAt || delayedUntil } });
}
return result;
} finally {