mail page ui correction maj

app/mail/page.tsx

@@ -537,52 +537,73 @@ export default function MailPage() {
     return account ? account.color : 'bg-gray-500';
   };
 
-  // Update email click handler to work without mark-read endpoint
+  // Add email action handlers
   const handleEmailSelect = (emailId: string) => {
-    setSelectedEmails(prev => {
+    const email = emails.find(e => e.id === emailId);
-      if (prev.includes(emailId)) {
+    if (email) {
-        return prev.filter(id => id !== emailId);
+      setSelectedEmail(email);
+      // Mark as read if not already
+      if (!email.read) {
+        const updatedEmails = emails.map(e => 
+          e.id === emailId ? { ...e, read: true } : e
+        );
+        setEmails(updatedEmails);
       }
-      return [...prev, emailId];
+    }
-    });
   };
 
-  // Toggle starred status
   const toggleStarred = async (emailId: string, e: React.MouseEvent) => {
     e.stopPropagation();
     
-    // Toggle star in IMAP
     try {
       await fetch('/api/mail/toggle-star', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ emailId })
       });
+      
+      const updatedEmails = emails.map(email => 
+        email.id === emailId ? { ...email, starred: !email.starred } : email
+      );
+      setEmails(updatedEmails);
     } catch (error) {
       console.error('Error toggling star:', error);
     }
-
-    const updatedEmails = emails.map(email => 
-      email.id === emailId ? { ...email, starred: !email.starred } : email
-    );
-    setEmails(updatedEmails);
   };
 
-  // Handle bulk selection
+  const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
-  const toggleSelectAll = () => {
+    const selectedEmailData = selectedEmail;
-    if (selectedEmails.length === filteredEmails.length) {
+    if (!selectedEmailData) return;
-      setSelectedEmails([]);
+
-    } else {
+    setShowCompose(true);
-      setSelectedEmails(filteredEmails.map(email => email.id));
+    const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
+    let to = '';
+    let content = '';
+
+    switch (type) {
+      case 'reply':
+        to = selectedEmailData.from;
+        content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
+        break;
+      case 'replyAll':
+        to = selectedEmailData.from;
+        content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
+        break;
+      case 'forward':
+        content = `\n\n---------- Forwarded message ----------\nFrom: ${selectedEmailData.fromName} <${selectedEmailData.from}>\nDate: ${new Date(selectedEmailData.date).toLocaleString()}\nSubject: ${selectedEmailData.subject}\n\n${selectedEmailData.body}`;
+        break;
     }
+
+    setComposeSubject(subject);
+    setComposeTo(to);
+    setComposeBody(content);
   };
 
-  // Handle bulk delete
   const handleBulkDelete = () => {
+    setDeleteType('emails');
     setShowDeleteConfirm(true);
   };
 
-  // Handle delete confirmation
   const handleDeleteConfirm = async () => {
     try {
       if (selectedEmails.length > 0) {
@@ -601,60 +622,6 @@ export default function MailPage() {
     setShowDeleteConfirm(false);
   };
 
-  // Get selected email
-  const getSelectedEmail = () => {
-    return emails.find(email => email.id === selectedEmail?.id);
-  };
-
-  // Add account management functions
-  const handleAddAccount = () => {
-    // Implementation for adding a new account
-  };
-
-  const handleEditAccount = (accountId: number, newName: string) => {
-    setAccounts(accounts.map(acc => 
-      acc.id === accountId ? { ...acc, name: newName } : acc
-    ));
-  };
-
-  const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: string) => {
-    e.stopPropagation();
-    if (e.target.checked) {
-      setSelectedEmails([...selectedEmails, emailId]);
-    } else {
-      setSelectedEmails(selectedEmails.filter(id => id !== emailId));
-    }
-  };
-
-  // Handle reply
-  const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
-    const selectedEmailData = getSelectedEmail();
-    if (!selectedEmailData) return;
-
-    setShowCompose(true);
-    const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
-    let to = '';
-    let content = '';
-
-    switch (type) {
-      case 'reply':
-        to = selectedEmailData.from;
-        content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
-        break;
-      case 'replyAll':
-        to = selectedEmailData.from; // You would also need to add CC recipients here
-        content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
-        break;
-      case 'forward':
-        content = `\n\n---------- Forwarded message ----------\nFrom: ${selectedEmailData.fromName} <${selectedEmailData.from}>\nDate: ${new Date(selectedEmailData.date).toLocaleString()}\nSubject: ${selectedEmailData.subject}\n\n${selectedEmailData.body}`;
-        break;
-    }
-
-    setComposeSubject(subject);
-    setComposeTo(to);
-    setComposeBody(content);
-  };
-
   const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
     setShowAccountActions(null);
     if (action === 'delete') {
@@ -686,7 +653,7 @@ export default function MailPage() {
     <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
       {/* Sidebar */}
       <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
-                    ${foldersOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
+                    ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
         {/* Courrier Title */}
         <div className="p-3 border-b border-gray-100">
           <div className="flex items-center gap-2">
@@ -699,7 +666,7 @@ export default function MailPage() {
         <div className="p-3 border-b border-gray-100">
           <Button 
             className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
-            onClick={() => setShowCompose(true)}
+            onClick={() => setComposeOpen(true)}
           >
             <div className="flex items-center">
               <PlusIcon className="h-4 w-4" />
@@ -708,33 +675,20 @@ export default function MailPage() {
           </Button>
         </div>
 
-        {/* Accounts Section with Scrollable Content */}
+        {/* Accounts Section */}
         <div className="flex flex-col min-h-0 flex-1">
           <div className="p-3 border-b border-gray-100">
             <Button 
               variant="ghost"
               className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
-              onClick={() => setFoldersOpen(!foldersOpen)}
+              onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
             >
               <span>Accounts</span>
-              {foldersOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
             </Button>
             
-            {foldersOpen && (
+            {foldersDropdownOpen && (
               <div className="space-y-1 pl-2">
-                {/* All Accounts Option */}
-                <Button
-                  variant="ghost"
-                  className="w-full justify-start px-2 py-1.5 text-sm"
-                  onClick={() => setSelectedAccount(null)}
-                >
-                  <div className="flex items-center gap-2 w-full">
-                    <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
-                    <span className="font-medium">All</span>
-                  </div>
-                </Button>
-
-                {/* Mail Accounts List */}
                 {accounts.map(account => (
                   <div key={account.id} className="relative group">
                     <Button
@@ -755,7 +709,7 @@ export default function MailPage() {
                         className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
                         onClick={(e) => {
                           e.stopPropagation();
-                          setShowSettings(true);
+                          setShowAccountActions(account.id);
                         }}
                       >
                         <MoreVertical className="h-4 w-4" />
@@ -763,28 +717,24 @@ export default function MailPage() {
                     </Button>
 
                     {/* Account Actions Dropdown */}
-                    {showSettings && (
+                    {showAccountActions === account.id && (
                       <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
-                        <button
+                        <Button
-                          className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                          variant="ghost"
-                          onClick={() => {
+                          className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
-                            const newName = prompt('Enter new account name:', account.name);
+                          onClick={() => handleAccountAction(account.id, 'edit')}
-                            if (newName) handleEditAccount(account.id, newName);
-                            setShowSettings(false);
-                          }}
                         >
-                          <Edit className="h-4 w-4 inline-block mr-2" />
+                          <Edit className="h-4 w-4 mr-2" />
-                          Modify Account
+                          Edit account
-                        </button>
+                        </Button>
-                        <button
+                        <Button
-                          className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
+                          variant="ghost"
-                          onClick={() => {
+                          className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
-                            setShowSettings(false);
+                          onClick={() => handleAccountAction(account.id, 'delete')}
-                          }}
                         >
-                          <Trash2 className="h-4 w-4 inline-block mr-2" />
+                          <Trash2 className="h-4 w-4 mr-2" />
-                          Remove Account
+                          Remove account
-                        </button>
+                        </Button>
                       </div>
                     )}
                   </div>
@@ -794,7 +744,7 @@ export default function MailPage() {
                 <Button
                   variant="ghost"
                   className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
-                  onClick={handleAddAccount}
+                  onClick={() => {/* Handle add account */}}
                 >
                   <Plus className="h-4 w-4 mr-2" />
                   Add Account
@@ -803,104 +753,65 @@ export default function MailPage() {
             )}
           </div>
 
-          {/* Scrollable Navigation */}
+          {/* Navigation */}
-          <div className="overflow-y-auto flex-1">
+          <nav className="p-3">
-            <nav className="p-3">
+            <ul className="space-y-0.5 px-2">
-              {/* Navigation items */}
+              <li>
-              <ul className="space-y-0.5 px-2">
+                <Button 
-                <li>
+                  variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                  <Button 
+                  className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                    variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
+                  onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
-                    className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                >
-                    onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
+                  <Inbox className="h-4 w-4 mr-2" />
-                  >
+                  <span>Inbox</span>
-                    <Inbox className="h-4 w-4 mr-2" />
+                </Button>
-                    {sidebarOpen && <span>Inbox</span>}
+              </li>
-                  </Button>
+              <li>
-                </li>
+                <Button 
-                <li>
+                  variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                  <Button 
+                  className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                    variant={currentView === 'starred' ? 'secondary' : 'ghost'}
+                  onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
-                    className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                >
-                    onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
+                  <Star className="h-4 w-4 mr-2" />
-                  >
+                  <span>Starred</span>
-                    <Star className="h-4 w-4 mr-2" />
+                </Button>
-                    {sidebarOpen && <span>Starred</span>}
+              </li>
-                  </Button>
+              <li>
-                </li>
+                <Button 
-                <li>
+                  variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-                  <Button 
+                  className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                    variant={currentView === 'sent' ? 'secondary' : 'ghost'}
+                  onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
-                    className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                >
-                    onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
+                  <Send className="h-4 w-4 mr-2" />
-                  >
+                  <span>Sent</span>
-                    <Send className="h-4 w-4 mr-2" />
+                </Button>
-                    {sidebarOpen && <span>Sent</span>}
+              </li>
-                  </Button>
+              <li>
-                </li>
+                <Button 
-                <li>
+                  variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-                  <Button 
+                  className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                    variant={currentView === 'trash' ? 'secondary' : 'ghost'}
+                  onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
-                    className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                >
-                    onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
+                  <Trash className="h-4 w-4 mr-2" />
-                  >
+                  <span>Trash</span>
-                    <Trash className="h-4 w-4 mr-2" />
+                </Button>
-                    {sidebarOpen && <span>Trash</span>}
+              </li>
-                  </Button>
+            </ul>
-                </li>
+          </nav>
-
-                {/* Folders Section */}
-                <li className="mt-4">
-                  <Button 
-                    variant="ghost"
-                    className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
-                    onClick={() => setFoldersOpen(!foldersOpen)}
-                  >
-                    <div className="flex items-center">
-                      <Folder className="h-4 w-4 mr-2" />
-                      {sidebarOpen && <span>Folders</span>}
-                    </div>
-                    {foldersOpen && (foldersOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
-                  </Button>
-
-                  {/* Folders Dropdown */}
-                  {foldersOpen && sidebarOpen && (
-                    <ul className="mt-1 space-y-1">
-                      {folders.map(folder => (
-                        <li key={folder.id}>
-                          <Button
-                            variant="ghost"
-                            className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
-                            onClick={() => {
-                              setCurrentView(folder.name.toLowerCase());
-                              setSelectedEmail(null);
-                            }}
-                          >
-                            {folder.name}
-                          </Button>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              </ul>
-            </nav>
-          </div>
         </div>
       </div>
 
-      {/* Main content */}
+      {/* Main content area */}
       <div className="flex-1 flex overflow-hidden">
         {/* Email list */}
         <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
+          {/* Email list header */}
           <div className="p-4 border-b border-gray-100 flex justify-between items-center">
             <div className="flex items-center gap-4">
-              {filteredEmails.length > 0 && (
+              {emails.length > 0 && (
-                <input
+                <Checkbox
-                  type="checkbox"
+                  checked={selectedEmails.length === emails.length}
-                  checked={selectedEmails.length === filteredEmails.length}
+                  onCheckedChange={toggleSelectAll}
-                  onChange={toggleSelectAll}
-                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                 />
               )}
               <h2 className="text-lg font-semibold text-gray-800 capitalize">
@@ -908,7 +819,7 @@ export default function MailPage() {
               </h2>
             </div>
             <div className="text-sm text-gray-500">
-              {filteredEmails.length} emails
+              {emails.length} emails
             </div>
           </div>
 
@@ -917,17 +828,6 @@ export default function MailPage() {
             <div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
               <span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
               <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="text-gray-600 hover:text-gray-900"
-                  onClick={() => {
-                    // Handle move to folder
-                  }}
-                >
-                  <FolderOpen className="h-4 w-4 mr-2" />
-                  Move to
-                </Button>
                 <Button
                   variant="ghost"
                   size="sm"
@@ -942,82 +842,58 @@ export default function MailPage() {
           )}
 
           {/* Email List */}
-          <div className="flex flex-col flex-1 overflow-hidden">
+          {loading ? (
-            <div className="flex-1 overflow-auto">
+            <div className="flex items-center justify-center h-64">
-              {loading ? (
+              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
-                <div className="flex items-center justify-center h-full">
+            </div>
-                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+          ) : (
-                  <span className="ml-3 text-gray-600">Loading emails...</span>
+            <ul className="divide-y divide-gray-100">
-                </div>
+              {emails.map((email) => (
-              ) : error ? (
+                <li
-                <div className="flex flex-col items-center justify-center h-full">
+                  key={email.id}
-                  <div className="text-red-500 mb-4">Error loading emails</div>
+                  className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
-                  <button
+                    selectedEmail?.id === email.id ? 'bg-blue-50' : ''
-                    onClick={() => loadEmails()}
+                  } ${!email.read ? 'bg-blue-50/20' : ''}`}
-                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+                  onClick={() => handleEmailSelect(email.id)}
-                  >
+                >
-                    Try Again
+                  <div className="flex-1 min-w-0">
-                  </button>
+                    <div className="flex items-center justify-between">
-                </div>
+                      <div className="flex items-center space-x-3">
-              ) : emails.length === 0 ? (
+                        <Checkbox
-                <div className="flex flex-col items-center justify-center h-full">
+                          checked={selectedEmails.includes(email.id)}
-                  <div className="text-gray-500 mb-4">No emails found</div>
+                          onClick={(e) => e.stopPropagation()}
-                </div>
+                          onCheckedChange={(checked) => {
-              ) : (
+                            if (checked) {
-                <ul className="divide-y divide-gray-200">
+                              setSelectedEmails([...selectedEmails, email.id]);
-                  {filteredEmails.map((email) => (
+                            } else {
-                    <li
+                              setSelectedEmails(selectedEmails.filter(id => id !== email.id));
-                      key={email.id}
+                            }
-                      className={`flex items-center p-4 hover:bg-gray-50 transition-colors duration-150 cursor-pointer ${
+                          }}
-                        selectedEmail?.id === email.id ? 'bg-blue-50' : ''
+                        />
-                      } ${!email.read ? 'bg-blue-50/20' : ''}`}
+                        <div>
-                      onClick={() => handleEmailSelect(email.id)}
+                          <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
-                    >
+                            {email.fromName || email.from}
-                      <div className="flex-1 min-w-0">
+                          </p>
-                        <div className="flex items-center justify-between space-x-4">
+                          <p className="text-sm text-gray-600 truncate">{email.subject}</p>
-                          <div className="flex items-center space-x-4 flex-1">
-                            <input
-                              type="checkbox"
-                              checked={selectedEmails.includes(email.id)}
-                              onChange={(e) => handleEmailCheckbox(e, email.id)}
-                              onClick={(e) => e.stopPropagation()}
-                              className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
-                            />
-                            <div className="min-w-0 flex-1">
-                              <p className={`text-sm truncate ${!email.read ? 'font-semibold' : 'font-medium'} text-gray-900`}>
-                                {email.fromName || email.from}
-                              </p>
-                              <div className="flex items-center space-x-2">
-                                <p className={`text-sm truncate ${!email.read ? 'font-medium' : ''} text-gray-600 flex-1`}>
-                                  {email.subject}
-                                </p>
-                                <span className="text-xs text-gray-500 whitespace-nowrap">
-                                  {formatDate(email.date)}
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              toggleStarred(email.id, e);
-                            }}
-                            className="text-gray-400 hover:text-yellow-400 transition-colors duration-150 p-1 hover:bg-gray-100 rounded-full"
-                          >
-                            {email.starred ? (
-                              <Star className="h-5 w-5 text-yellow-400" />
-                            ) : (
-                              <Star className="h-5 w-5" />
-                            )}
-                          </button>
                         </div>
                       </div>
-                    </li>
+                      <div className="flex items-center space-x-2">
-                  ))}
+                        <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
-                </ul>
+                        <Button
-              )}
+                          variant="ghost"
-            </div>
+                          size="sm"
-          </div>
+                          className="text-gray-400 hover:text-yellow-400"
+                          onClick={(e) => toggleStarred(email.id, e)}
+                        >
+                          <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
 
         {/* Email preview panel */}
@@ -1055,26 +931,9 @@ export default function MailPage() {
                     variant="ghost"
                     size="icon"
                     className="text-gray-400 hover:text-gray-900"
-                    onClick={(e) => {
+                    onClick={(e) => toggleStarred(selectedEmail.id, e)}
-                      e.stopPropagation();
-                      toggleStarred(selectedEmail.id, e);
-                    }}
                   >
-                    {selectedEmail.starred ? (
+                    <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
-                      <Star className="h-5 w-5 text-yellow-400" />
-                    ) : (
-                      <Star className="h-5 w-5" />
-                    )}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                    onClick={() => {
-                      setShowDeleteConfirm(true);
-                    }}
-                  >
-                    <Trash2 className="h-5 w-5" />
                   </Button>
                 </div>
               </div>
@@ -1110,6 +969,29 @@ export default function MailPage() {
           )}
         </div>
       </div>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {deleteType === 'email' && "This email will be moved to trash."}
+              {deleteType === 'emails' && `${selectedEmails.length} emails will be moved to trash.`}
+              {deleteType === 'account' && "This account will be permanently removed. This action cannot be undone."}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setShowDeleteConfirm(false)}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className={deleteType === 'account' ? 'bg-red-600 hover:bg-red-700' : ''}
+              onClick={handleDeleteConfirm}
+            >
+              {deleteType === 'account' ? 'Delete Account' : 'Move to Trash'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }