mail page ui correction maj
This commit is contained in:
parent
2bc53f2db4
commit
b4c386f30d
@ -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 => {
|
||||
if (prev.includes(emailId)) {
|
||||
return prev.filter(id => id !== emailId);
|
||||
const email = emails.find(e => e.id === emailId);
|
||||
if (email) {
|
||||
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 toggleSelectAll = () => {
|
||||
if (selectedEmails.length === filteredEmails.length) {
|
||||
setSelectedEmails([]);
|
||||
} else {
|
||||
setSelectedEmails(filteredEmails.map(email => email.id));
|
||||
const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
|
||||
const selectedEmailData = selectedEmail;
|
||||
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;
|
||||
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
|
||||
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
const newName = prompt('Enter new account name:', account.name);
|
||||
if (newName) handleEditAccount(account.id, newName);
|
||||
setShowSettings(false);
|
||||
}}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={() => handleAccountAction(account.id, 'edit')}
|
||||
>
|
||||
<Edit className="h-4 w-4 inline-block mr-2" />
|
||||
Modify Account
|
||||
</button>
|
||||
<button
|
||||
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setShowSettings(false);
|
||||
}}
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit account
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
|
||||
onClick={() => handleAccountAction(account.id, 'delete')}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 inline-block mr-2" />
|
||||
Remove Account
|
||||
</button>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Remove account
|
||||
</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 */}
|
||||
<div className="overflow-y-auto flex-1">
|
||||
<nav className="p-3">
|
||||
{/* Navigation items */}
|
||||
<ul className="space-y-0.5 px-2">
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
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" />
|
||||
{sidebarOpen && <span>Inbox</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
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" />
|
||||
{sidebarOpen && <span>Starred</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
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" />
|
||||
{sidebarOpen && <span>Sent</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
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" />
|
||||
{sidebarOpen && <span>Trash</span>}
|
||||
</Button>
|
||||
</li>
|
||||
|
||||
{/* 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>
|
||||
{/* Navigation */}
|
||||
<nav className="p-3">
|
||||
<ul className="space-y-0.5 px-2">
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
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>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
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>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
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>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
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>
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</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 && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedEmails.length === filteredEmails.length}
|
||||
onChange={toggleSelectAll}
|
||||
className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
|
||||
{emails.length > 0 && (
|
||||
<Checkbox
|
||||
checked={selectedEmails.length === emails.length}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
/>
|
||||
)}
|
||||
<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">
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<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>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<div className="text-red-500 mb-4">Error loading emails</div>
|
||||
<button
|
||||
onClick={() => loadEmails()}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
) : emails.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<div className="text-gray-500 mb-4">No emails found</div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-gray-200">
|
||||
{filteredEmails.map((email) => (
|
||||
<li
|
||||
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' : ''}`}
|
||||
onClick={() => handleEmailSelect(email.id)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<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>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-gray-100">
|
||||
{emails.map((email) => (
|
||||
<li
|
||||
key={email.id}
|
||||
className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
|
||||
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
||||
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||||
onClick={() => handleEmailSelect(email.id)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedEmails([...selectedEmails, email.id]);
|
||||
} else {
|
||||
setSelectedEmails(selectedEmails.filter(id => id !== email.id));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
|
||||
{email.fromName || email.from}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 truncate">{email.subject}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
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) => {
|
||||
e.stopPropagation();
|
||||
toggleStarred(selectedEmail.id, e);
|
||||
}}
|
||||
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
||||
>
|
||||
{selectedEmail.starred ? (
|
||||
<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" />
|
||||
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user