mail page custum 9

app/mail/page.tsx

@@ -5,6 +5,17 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X } from 'lucide-react';
 
@@ -90,6 +101,11 @@ export default function MailPage() {
   const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
   const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
   const [showEmailActions, setShowEmailActions] = useState(false);
+  const [selectedEmails, setSelectedEmails] = useState<number[]>([]);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
+  const [itemToDelete, setItemToDelete] = useState<number | null>(null);
+  const [showBulkActions, setShowBulkActions] = useState(false);
 
   // Mock folders data
   const folders = [
@@ -152,13 +168,56 @@ export default function MailPage() {
     return account ? account.color : 'bg-gray-500';
   };
 
+  // Handle bulk selection
+  const toggleEmailSelection = (emailId: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSelectedEmails(prev => 
+      prev.includes(emailId) 
+        ? prev.filter(id => id !== emailId)
+        : [...prev, emailId]
+    );
+    setShowBulkActions(true);
+  };
+
+  // Handle select all
+  const toggleSelectAll = () => {
+    if (selectedEmails.length === filteredEmails.length) {
+      setSelectedEmails([]);
+      setShowBulkActions(false);
+    } else {
+      setSelectedEmails(filteredEmails.map(email => email.id));
+      setShowBulkActions(true);
+    }
+  };
+
+  // Handle bulk delete
+  const handleBulkDelete = () => {
+    setDeleteType('emails');
+    setShowDeleteConfirm(true);
+  };
+
+  // Handle delete confirmation
+  const handleDeleteConfirm = () => {
+    if (deleteType === 'email' && itemToDelete) {
+      setEmails(emails.filter(email => email.id !== itemToDelete));
+      setSelectedEmail(null);
+    } else if (deleteType === 'emails') {
+      setEmails(emails.filter(email => !selectedEmails.includes(email.id)));
+      setSelectedEmails([]);
+      setShowBulkActions(false);
+    } else if (deleteType === 'account' && itemToDelete) {
+      handleAccountAction(itemToDelete, 'delete');
+    }
+    setShowDeleteConfirm(false);
+  };
+
+  // Modified account action handler
   const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
     setShowAccountActions(null);
     if (action === 'delete') {
-      setAccounts(accounts.filter(acc => acc.id !== accountId));
+      setDeleteType('account');
-      if (selectedAccount === accountId) {
+      setItemToDelete(accountId);
-        setSelectedAccount(0);
+      setShowDeleteConfirm(true);
-      }
     }
     // Handle edit in a real application
   };
@@ -385,14 +444,51 @@ export default function MailPage() {
         {/* Email list */}
         <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
           <div className="p-4 border-b border-gray-100 flex justify-between items-center">
-            <h2 className="text-lg font-semibold text-gray-800 capitalize">
+            <div className="flex items-center gap-4">
-              {currentView === 'starred' ? 'Starred' : currentView}
+              {filteredEmails.length > 0 && (
-            </h2>
+                <Checkbox
+                  checked={selectedEmails.length === filteredEmails.length}
+                  onCheckedChange={toggleSelectAll}
+                />
+              )}
+              <h2 className="text-lg font-semibold text-gray-800 capitalize">
+                {currentView === 'starred' ? 'Starred' : currentView}
+              </h2>
+            </div>
             <div className="text-sm text-gray-500">
               {filteredEmails.length} emails
             </div>
           </div>
 
+          {/* Bulk Actions Bar */}
+          {showBulkActions && selectedEmails.length > 0 && (
+            <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"
+                  className="text-red-600 hover:text-red-700"
+                  onClick={handleBulkDelete}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Delete
+                </Button>
+              </div>
+            </div>
+          )}
+
           {filteredEmails.length > 0 ? (
             <ul>
               {filteredEmails.map(email => (
@@ -403,9 +499,15 @@ export default function MailPage() {
                 >
                   <div className="p-4">
                     <div className="flex justify-between items-start mb-1">
-                      <div className="flex items-center">
+                      <div className="flex items-center gap-3">
-                        <div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
+                        <Checkbox
-                        <span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
+                          checked={selectedEmails.includes(email.id)}
+                          onClick={(e) => toggleEmailSelection(email.id, e)}
+                        />
+                        <div className="flex items-center">
+                          <div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
+                          <span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
+                        </div>
                       </div>
                       <div className="text-xs text-gray-500">{formatDate(email.date)}</div>
                     </div>
@@ -619,6 +721,29 @@ export default function MailPage() {
           </Card>
         </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>
   );
 }