feat: enhance mobile responsiveness across calendar and contact components

- Added `isMobile` prop to `CalendarWeekView`, `EventDetailPopover`, `ContactDetail`, `ContactGroupDetail`, and `EmailComposer` components for improved mobile layout.
- Adjusted layout and styles in `CalendarWeekView` to display a 3-day view on mobile.
- Updated `EventDetailPopover` to adapt its size and layout for mobile devices.
- Modified `ContactDetail` and `ContactGroupDetail` to adjust padding and font sizes based on mobile view.
- Enhanced `EmailComposer` with mobile-friendly header and field layouts, including auto-saving draft functionality.
- Added confirmation dialog for unsaved changes when closing the email composer.
- Updated localization files to include new strings for draft management.

app/[locale]/calendar/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo, type TouchEvent as ReactTouchEvent } from "react";
 import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
+import { Plus } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addWeeks, subWeeks, addDays, subDays,
@@ -14,6 +15,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { toast } from "@/stores/toast-store";
 import { useIsMobile } from "@/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
 import { CalendarToolbar } from "@/components/calendar/calendar-toolbar";
 import { CalendarMonthView } from "@/components/calendar/calendar-month-view";
 import { CalendarWeekView } from "@/components/calendar/calendar-week-view";
@@ -68,6 +70,9 @@ export default function CalendarPage() {
   const [detailAnchorRect, setDetailAnchorRect] = useState<DOMRect | null>(null);
   const hasFetched = useRef(false);
 
+  // Swipe navigation ref (handlers defined after navigatePrev/navigateNext)
+  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
+
   useEffect(() => {
     if (!isAuthenticated) {
       router.push("/login");
@@ -155,10 +160,35 @@ export default function CalendarPage() {
     setMiniMonth(new Date());
   }, [setSelectedDate]);
 
+  // Swipe navigation handlers for mobile
+  const handleTouchStart = useCallback((e: ReactTouchEvent) => {
+    const touch = e.touches[0];
+    touchStartRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+  }, []);
+
+  const handleTouchEnd = useCallback((e: ReactTouchEvent) => {
+    if (!touchStartRef.current || !isMobile) return;
+    const touch = e.changedTouches[0];
+    const dx = touch.clientX - touchStartRef.current.x;
+    const dy = touch.clientY - touchStartRef.current.y;
+    const elapsed = Date.now() - touchStartRef.current.time;
+    touchStartRef.current = null;
+
+    // Only trigger swipe if horizontal movement is dominant and fast enough
+    if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5 && elapsed < 400) {
+      if (dx > 0) navigatePrev();
+      else navigateNext();
+    }
+  }, [isMobile, navigatePrev, navigateNext]);
+
   const handleSelectDate = useCallback((date: Date) => {
     setSelectedDate(date);
     setMiniMonth(date);
-  }, [setSelectedDate]);
+    // On mobile month view, tapping a date switches to day view
+    if (isMobile && viewMode === "month") {
+      setViewMode("day");
+    }
+  }, [setSelectedDate, isMobile, viewMode, setViewMode]);
 
   const handleMiniMonthChange = useCallback((date: Date) => {
     setMiniMonth(date);
@@ -549,6 +579,7 @@ export default function CalendarPage() {
               onSelectDate={handleSelectDate}
               onSelectEvent={handleSelectEvent}
               firstDayOfWeek={firstDayOfWeek}
+              isMobile={isMobile}
             />
           );
         case "week":
@@ -562,6 +593,7 @@ export default function CalendarPage() {
               onCreateAtTime={openCreateModal}
               firstDayOfWeek={firstDayOfWeek}
               timeFormat={timeFormat}
+              isMobile={isMobile}
             />
           );
         case "day":
@@ -573,6 +605,7 @@ export default function CalendarPage() {
               onSelectEvent={handleSelectEvent}
               onCreateAtTime={openCreateModal}
               timeFormat={timeFormat}
+              isMobile={isMobile}
             />
           );
         case "agenda":
@@ -620,9 +653,16 @@ export default function CalendarPage() {
           onCreateEvent={() => openCreateModal()}
           onImport={() => setShowImportModal(true)}
           isMobile={isMobile}
+          calendars={calendars}
+          selectedCalendarIds={selectedCalendarIds}
+          onToggleVisibility={toggleCalendarVisibility}
         />
 
-        <div className="flex flex-1 overflow-hidden">
+        <div
+          className="flex flex-1 overflow-hidden relative"
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+        >
           {!isMobile && (
             <div className="w-60 border-r border-border p-3 overflow-y-auto flex-shrink-0">
               <MiniCalendar
@@ -642,6 +682,17 @@ export default function CalendarPage() {
           )}
 
           {renderView()}
+
+          {/* Floating Create Event Button (mobile) */}
+          {isMobile && (
+            <Button
+              onClick={() => openCreateModal()}
+              className="absolute bottom-4 right-4 z-40 h-14 w-14 rounded-full shadow-lg"
+              aria-label={t("events.create")}
+            >
+              <Plus className="h-6 w-6" />
+            </Button>
+          )}
         </div>
 
         {/* Mobile Bottom Navigation */}
@@ -663,6 +714,7 @@ export default function CalendarPage() {
           onRsvp={handleRsvpFromDetail}
           currentUserEmails={currentUserEmails}
           timeFormat={timeFormat}
+          isMobile={isMobile}
         />
       )}
 

app/[locale]/contacts/page.tsx

@@ -336,6 +336,7 @@ export default function ContactsPage() {
             onEdit={handleEditGroup}
             onDelete={handleDeleteGroup}
             onRemoveMember={handleRemoveGroupMember}
+            isMobile={isMobile}
             onSelectMember={(id) => {
               setSelectedContact(id);
               setActiveTab("all");
@@ -422,11 +423,20 @@ export default function ContactsPage() {
             contact={selectedContact}
             onEdit={handleEdit}
             onDelete={handleDelete}
+            isMobile={isMobile}
           />
         );
     }
   };
 
+  const showListPanel = !isMobile || view === "list";
+  const showRightPanel = !isMobile || view !== "list";
+
+  const mobileBackToList = () => {
+    setView("list");
+    clearSelection();
+  };
+
   return (
     <div className="flex h-screen bg-background">
       {!isMobile && (
@@ -437,112 +447,134 @@ export default function ContactsPage() {
 
       <div className="flex flex-col flex-1 min-w-0">
         <div className="flex flex-1 min-h-0">
-          <div className="w-80 border-r border-border flex flex-col flex-shrink-0">
-        <div className="p-4 border-b border-border">
-          <div className="flex items-center justify-between">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => router.push("/")}
-              className="justify-start"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              {t("back_to_mail")}
-            </Button>
-            <div className="flex gap-1">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => setView("import")}
-                title={t("import.title")}
-              >
-                <Upload className="w-4 h-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => {
-                  if (contacts.length > 0) {
-                    exportContacts(contacts.filter(c => c.kind !== "group"));
-                    toast.success(t("export.success", { count: contacts.filter(c => c.kind !== "group").length }));
-                  }
-                }}
-                title={t("export.title")}
-              >
-                <Download className="w-4 h-4" />
-              </Button>
+          {showListPanel && (
+            <div className={cn(
+              "border-r border-border flex flex-col flex-shrink-0",
+              isMobile ? "w-full" : "w-80"
+            )}>
+              <div className={cn("p-4 border-b border-border", isMobile && "px-3 py-3")}>
+                <div className="flex items-center justify-between">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => router.push("/")}
+                    className="justify-start"
+                  >
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    {t("back_to_mail")}
+                  </Button>
+                  <div className="flex gap-1">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={() => setView("import")}
+                      title={t("import.title")}
+                    >
+                      <Upload className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={() => {
+                        if (contacts.length > 0) {
+                          exportContacts(contacts.filter(c => c.kind !== "group"));
+                          toast.success(t("export.success", { count: contacts.filter(c => c.kind !== "group").length }));
+                        }
+                      }}
+                      title={t("export.title")}
+                    >
+                      <Download className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex border-b border-border">
+                <button
+                  onClick={() => setActiveTab("all")}
+                  className={cn(
+                    "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors touch-manipulation",
+                    activeTab === "all"
+                      ? "border-b-2 border-primary text-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  <BookUser className="w-4 h-4" />
+                  {t("tabs.all")}
+                </button>
+                <button
+                  onClick={() => setActiveTab("groups")}
+                  className={cn(
+                    "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors touch-manipulation",
+                    activeTab === "groups"
+                      ? "border-b-2 border-primary text-primary"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  <Users className="w-4 h-4" />
+                  {t("tabs.groups")}
+                  {groups.length > 0 && (
+                    <span className="text-xs px-1.5 py-0.5 rounded-full bg-muted">
+                      {groups.length}
+                    </span>
+                  )}
+                </button>
+              </div>
+
+              {activeTab === "all" ? (
+                <ContactList
+                  contacts={contacts}
+                  selectedContactId={selectedContactId}
+                  searchQuery={searchQuery}
+                  onSearchChange={setSearchQuery}
+                  onSelectContact={handleSelectContact}
+                  onCreateNew={handleCreateNew}
+                  onImport={() => setView("import")}
+                  supportsSync={supportsSync}
+                  className="flex-1"
+                  selectedContactIds={selectedContactIds}
+                  onToggleSelection={toggleContactSelection}
+                  onSelectAll={selectAllContacts}
+                  onClearSelection={clearSelection}
+                  onBulkDelete={handleBulkDelete}
+                  onBulkAddToGroup={handleBulkAddToGroup}
+                  onBulkExport={handleBulkExport}
+                />
+              ) : (
+                <ContactGroupList
+                  groups={groups}
+                  selectedGroupId={selectedGroupId}
+                  onSelectGroup={handleSelectGroup}
+                  onCreateGroup={handleCreateGroup}
+                  searchQuery={searchQuery}
+                  className="flex-1"
+                />
+              )}
             </div>
-          </div>
-        </div>
+          )}
 
-        <div className="flex border-b border-border">
-          <button
-            onClick={() => setActiveTab("all")}
-            className={cn(
-              "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors",
-              activeTab === "all"
-                ? "border-b-2 border-primary text-primary"
-                : "text-muted-foreground hover:text-foreground"
-            )}
-          >
-            <BookUser className="w-4 h-4" />
-            {t("tabs.all")}
-          </button>
-          <button
-            onClick={() => setActiveTab("groups")}
-            className={cn(
-              "flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors",
-              activeTab === "groups"
-                ? "border-b-2 border-primary text-primary"
-                : "text-muted-foreground hover:text-foreground"
-            )}
-          >
-            <Users className="w-4 h-4" />
-            {t("tabs.groups")}
-            {groups.length > 0 && (
-              <span className="text-xs px-1.5 py-0.5 rounded-full bg-muted">
-                {groups.length}
-              </span>
-            )}
-          </button>
-        </div>
-
-        {activeTab === "all" ? (
-          <ContactList
-            contacts={contacts}
-            selectedContactId={selectedContactId}
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            onSelectContact={handleSelectContact}
-            onCreateNew={handleCreateNew}
-            onImport={() => setView("import")}
-            supportsSync={supportsSync}
-            className="flex-1"
-            selectedContactIds={selectedContactIds}
-            onToggleSelection={toggleContactSelection}
-            onSelectAll={selectAllContacts}
-            onClearSelection={clearSelection}
-            onBulkDelete={handleBulkDelete}
-            onBulkAddToGroup={handleBulkAddToGroup}
-            onBulkExport={handleBulkExport}
-          />
-        ) : (
-          <ContactGroupList
-            groups={groups}
-            selectedGroupId={selectedGroupId}
-            onSelectGroup={handleSelectGroup}
-            onCreateGroup={handleCreateGroup}
-            searchQuery={searchQuery}
-            className="flex-1"
-          />
-        )}
-      </div>
-
-          <div className="flex-1 min-w-0">
-            {renderRightPanel()}
-          </div>
+          {showRightPanel && (
+            <div className="flex-1 min-w-0 flex flex-col">
+              {isMobile && (
+                <div className="px-3 py-2 border-b border-border">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={mobileBackToList}
+                    className="touch-manipulation"
+                  >
+                    <ArrowLeft className="w-4 h-4 mr-2" />
+                    {t("back_to_mail")}
+                  </Button>
+                </div>
+              )}
+              <div className="flex-1 min-h-0">
+                {renderRightPanel()}
+              </div>
+            </div>
+          )}
         </div>
 
         {isMobile && (

app/[locale]/page.tsx

@@ -7,6 +7,7 @@ import { Sidebar } from "@/components/layout/sidebar";
 import { EmailList } from "@/components/email/email-list";
 import { EmailViewer } from "@/components/email/email-viewer";
 import { EmailComposer } from "@/components/email/email-composer";
+import type { ComposerDraftData } from "@/components/email/email-composer";
 import { ThreadConversationView } from "@/components/email/thread-conversation-view";
 import { MobileHeader, MobileViewerHeader } from "@/components/layout/mobile-header";
 import { ThreadGroup, Email } from "@/lib/jmap/types";
@@ -18,6 +19,7 @@ import { useIdentityStore } from "@/stores/identity-store";
 import { useUIStore } from "@/stores/ui-store";
 import { useDeviceDetection } from "@/hooks/use-media-query";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+import { useConfirmDialog } from "@/hooks/use-confirm-dialog";
 import { debug } from "@/lib/debug";
 import { playNotificationSound } from "@/lib/notification-sound";
 import { cn } from "@/lib/utils";
@@ -28,12 +30,13 @@ import {
   EmailViewerErrorFallback,
   ComposerErrorFallback,
 } from "@/components/error";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { DragDropProvider } from "@/contexts/drag-drop-context";
 import { isFilterEmpty, activeFilterCount } from "@/lib/jmap/search-utils";
 import { WelcomeBanner } from "@/components/ui/welcome-banner";
 import { NavigationRail } from "@/components/layout/navigation-rail";
 import { Input } from "@/components/ui/input";
-import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw } from "lucide-react";
+import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine } from "lucide-react";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Button } from "@/components/ui/button";
 
@@ -44,6 +47,8 @@ export default function Home() {
   const [showComposer, setShowComposer] = useState(false);
   const [composerMode, setComposerMode] = useState<'compose' | 'reply' | 'replyAll' | 'forward'>('compose');
   const [composerDraftText, setComposerDraftText] = useState("");
+  const [pendingDraft, setPendingDraft] = useState<ComposerDraftData | null>(null);
+  const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
   const [initialCheckDone, setInitialCheckDone] = useState(false);
   const [showShortcutsModal, setShowShortcutsModal] = useState(false);
   const [showAdvancedFields, setShowAdvancedFields] = useState(false);
@@ -170,6 +175,7 @@ export default function Home() {
     onCompose: () => {
       setComposerMode('compose');
       setShowComposer(true);
+      if (isMobile) setActiveView('viewer');
     },
     onFocusSearch: () => {
       const searchInput = document.querySelector('[data-search-input]') as HTMLInputElement;
@@ -422,16 +428,19 @@ export default function Home() {
     setComposerDraftText(draftText || "");
     setComposerMode('reply');
     setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
   };
 
   const handleReplyAll = () => {
     setComposerMode('replyAll');
     setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
   };
 
   const handleForward = () => {
     setComposerMode('forward');
     setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
   };
 
   const handleDelete = async () => {
@@ -682,6 +691,11 @@ export default function Home() {
   const handleEmailSelect = async (email: { id: string }) => {
     if (!client || !email) return;
 
+    // If composing, suspend the composer (unmount will trigger onSaveState)
+    if (showComposer) {
+      setShowComposer(false);
+    }
+
     // Set loading state immediately (keep current email visible)
     setLoadingEmail(true);
 
@@ -751,18 +765,21 @@ export default function Home() {
     selectEmail(email);
     setComposerMode('reply');
     setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
   };
 
   const handleConversationReplyAll = (email: Email) => {
     selectEmail(email);
     setComposerMode('replyAll');
     setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
   };
 
   const handleConversationForward = (email: Email) => {
     selectEmail(email);
     setComposerMode('forward');
     setShowComposer(true);
+    if (isMobile) setActiveView('viewer');
   };
 
   const ToggleChip = ({ icon, label, value, onClick }: { icon: React.ReactNode; label: string; value: boolean | null; onClick: () => void }) => (
@@ -825,7 +842,10 @@ export default function Home() {
               onCompose={() => {
                 setComposerMode('compose');
                 setShowComposer(true);
-                if (isMobile) setSidebarOpen(false);
+                if (isMobile) {
+                  setSidebarOpen(false);
+                  setActiveView('viewer');
+                }
               }}
               onSidebarClose={() => setSidebarOpen(false)}
             />
@@ -847,7 +867,7 @@ export default function Home() {
           {/* Email List - full width on mobile, fixed width on tablet/desktop */}
           <div
             className={cn(
-              "flex flex-col h-full bg-background border-r border-border",
+              "relative flex flex-col h-full bg-background border-r border-border",
               // Mobile: full width, hidden when viewing email
               "max-md:flex-1 max-md:border-r-0",
               isMobile && activeView !== "list" && "max-md:hidden",
@@ -862,10 +882,6 @@ export default function Home() {
             {/* Mobile Header for List View */}
             <MobileHeader
               title={currentMailboxName}
-              onCompose={() => {
-                setComposerMode('compose');
-                setShowComposer(true);
-              }}
             />
 
             {/* Search Bar + Inline Advanced Filters */}
@@ -1105,6 +1121,21 @@ export default function Home() {
               />
             </ErrorBoundary>
             </div>
+
+            {/* Floating Compose Button (mobile) */}
+            {isMobile && (
+              <Button
+                onClick={() => {
+                  setComposerMode('compose');
+                  setShowComposer(true);
+                  setActiveView('viewer');
+                }}
+                className="absolute bottom-4 right-4 z-40 h-14 w-14 rounded-full shadow-lg"
+                aria-label={t('sidebar.compose')}
+              >
+                <PenSquare className="h-6 w-6" />
+              </Button>
+            )}
           </div>
 
           {/* Email list resize handle (desktop only) */}
@@ -1116,7 +1147,7 @@ export default function Home() {
             />
           )}
 
-          {/* Email Viewer - full screen on mobile, flex on tablet/desktop */}
+          {/* Email Viewer / Composer - full screen on mobile, flex on tablet/desktop */}
           <div
             className={cn(
               "flex flex-col h-full bg-background",
@@ -1127,6 +1158,82 @@ export default function Home() {
               "md:flex-1 md:min-w-0 md:relative"
             )}
           >
+            {/* Inline Composer - shown in viewer pane */}
+            {showComposer ? (
+              <ErrorBoundary
+                fallback={ComposerErrorFallback}
+                onReset={() => {
+                  setShowComposer(false);
+                  setComposerMode('compose');
+                }}
+              >
+                <EmailComposer
+                  mode={pendingDraft?.mode ?? composerMode}
+                  replyTo={pendingDraft?.replyTo ?? (selectedEmail ? {
+                    from: selectedEmail.from,
+                    to: selectedEmail.to,
+                    cc: selectedEmail.cc,
+                    subject: selectedEmail.subject,
+                    body: selectedEmail.bodyValues?.[selectedEmail.textBody?.[0]?.partId || '']?.value || selectedEmail.preview || '',
+                    receivedAt: selectedEmail.receivedAt
+                  } : undefined)}
+                  initialDraftText={composerDraftText}
+                  initialData={pendingDraft}
+                  onSaveState={(data) => setPendingDraft(data)}
+                  onSend={async (data) => {
+                    await handleEmailSend(data);
+                    setPendingDraft(null);
+                  }}
+                  onClose={() => {
+                    setShowComposer(false);
+                    setComposerMode('compose');
+                    setComposerDraftText("");
+                    setPendingDraft(null);
+                    if (isMobile) {
+                      setActiveView('list');
+                    }
+                  }}
+                  onDiscardDraft={(draftId) => {
+                    handleDiscardDraft(draftId);
+                    setPendingDraft(null);
+                  }}
+                />
+              </ErrorBoundary>
+            ) : (
+            <>
+            {/* Pending draft banner */}
+            {pendingDraft && (
+              <button
+                onClick={() => {
+                  setShowComposer(true);
+                  if (isMobile) setActiveView('viewer');
+                }}
+                className="flex items-center gap-3 px-4 py-2.5 bg-primary/10 border-b border-primary/20 hover:bg-primary/15 transition-colors cursor-pointer w-full text-left"
+              >
+                <PenLine className="w-4 h-4 text-primary shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium text-primary">{t('email_composer.continue_draft')}</span>
+                  {pendingDraft.subject && (
+                    <span className="text-xs text-muted-foreground ml-2 truncate">{pendingDraft.subject}</span>
+                  )}
+                </div>
+                <X
+                  className="w-4 h-4 text-muted-foreground hover:text-foreground shrink-0"
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    const confirmed = await confirmDialog({
+                      title: t('email_composer.discard_draft_title'),
+                      message: t('email_composer.discard_draft_confirm'),
+                      confirmText: t('email_composer.discard'),
+                      variant: "destructive",
+                    });
+                    if (confirmed) {
+                      setPendingDraft(null);
+                    }
+                  }}
+                />
+              </button>
+            )}
             {/* Mobile Conversation View - shown when thread is selected on mobile */}
             {isMobile && conversationThread ? (
               <ThreadConversationView
@@ -1187,6 +1294,8 @@ export default function Home() {
                 </ErrorBoundary>
               </>
             )}
+            </>
+            )}
           </div>
           </div>
 
@@ -1196,44 +1305,6 @@ export default function Home() {
           )}
         </div>
 
-        {/* Email Composer Modal */}
-        {showComposer && (
-          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 lg:p-0">
-            <div className={cn(
-              "w-full h-full lg:h-[600px] lg:max-w-3xl",
-              "max-lg:flex max-lg:flex-col"
-            )}>
-              <ErrorBoundary
-                fallback={ComposerErrorFallback}
-                onReset={() => {
-                  setShowComposer(false);
-                  setComposerMode('compose');
-                }}
-              >
-                <EmailComposer
-                  mode={composerMode}
-                  replyTo={selectedEmail ? {
-                    from: selectedEmail.from,
-                    to: selectedEmail.to,
-                    cc: selectedEmail.cc,
-                    subject: selectedEmail.subject,
-                    body: selectedEmail.bodyValues?.[selectedEmail.textBody?.[0]?.partId || '']?.value || selectedEmail.preview || '',
-                    receivedAt: selectedEmail.receivedAt
-                  } : undefined}
-                  initialDraftText={composerDraftText}
-                  onSend={handleEmailSend}
-                  onClose={() => {
-                    setShowComposer(false);
-                    setComposerMode('compose');
-                    setComposerDraftText("");
-                  }}
-                  onDiscardDraft={handleDiscardDraft}
-                />
-              </ErrorBoundary>
-            </div>
-          </div>
-        )}
-
         {/* Keyboard Shortcuts Modal */}
         <KeyboardShortcutsModal
           isOpen={showShortcutsModal}
@@ -1242,6 +1313,8 @@ export default function Home() {
 
         {/* Screen reader live region for dynamic status announcements */}
         <div className="sr-only" aria-live="polite" aria-atomic="true" id="sr-status" />
+
+        <ConfirmDialog {...confirmDialogProps} />
       </div>
     </DragDropProvider>
   );