diff --git a/app/mail/page.tsx b/app/mail/page.tsx index b0830ea..54adf6a 100644 --- a/app/mail/page.tsx +++ b/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(null); const [showEmailActions, setShowEmailActions] = useState(false); + const [selectedEmails, setSelectedEmails] = useState([]); + const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); + const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email'); + const [itemToDelete, setItemToDelete] = useState(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)); - if (selectedAccount === accountId) { - setSelectedAccount(0); - } + setDeleteType('account'); + setItemToDelete(accountId); + setShowDeleteConfirm(true); } // Handle edit in a real application }; @@ -385,14 +444,51 @@ export default function MailPage() { {/* Email list */}
-

- {currentView === 'starred' ? 'Starred' : currentView} -

+
+ {filteredEmails.length > 0 && ( + + )} +

+ {currentView === 'starred' ? 'Starred' : currentView} +

+
{filteredEmails.length} emails
+ {/* Bulk Actions Bar */} + {showBulkActions && selectedEmails.length > 0 && ( +
+ {selectedEmails.length} selected +
+ + +
+
+ )} + {filteredEmails.length > 0 ? (
    {filteredEmails.map(email => ( @@ -403,9 +499,15 @@ export default function MailPage() { >
    -
    -
    - {email.fromName} +
    + toggleEmailSelection(email.id, e)} + /> +
    +
    + {email.fromName} +
    {formatDate(email.date)}
    @@ -619,6 +721,29 @@ export default function MailPage() {
    )} + + {/* Delete Confirmation Dialog */} + + + + Are you sure? + + {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."} + + + + setShowDeleteConfirm(false)}>Cancel + + {deleteType === 'account' ? 'Delete Account' : 'Move to Trash'} + + + +
    ); } \ No newline at end of file