mail page imap connection mime 5

This commit is contained in:
alma 2025-04-15 22:36:08 +02:00
parent 641d7ddb8a
commit cd04669609

View File

@ -451,19 +451,20 @@ export default function MailPage() {
// Filter emails based on current view // Filter emails based on current view
const filteredEmails = emails.filter(email => { const filteredEmails = emails.filter(email => {
if (selectedAccount !== 'all' && email.accountId !== selectedAccount) { if (selectedAccount === 0) return true;
return false; return email.accountId === selectedAccount.toString();
} }).filter(email => {
switch (currentView) { switch (currentView) {
case 'starred': case "inbox":
return email.category === "inbox";
case "starred":
return email.starred; return email.starred;
case 'sent': case "sent":
return email.category === 'sent'; return email.category === "sent";
case 'trash': case "trash":
return email.category === 'trash'; return email.category === "trash";
default: default:
return email.category === 'inbox'; return true;
} }
}); });
@ -546,9 +547,9 @@ export default function MailPage() {
await fetch('/api/mail/delete', { await fetch('/api/mail/delete', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ emailIds: [itemToDelete] }) body: JSON.stringify({ emailIds: [itemToDelete.toString()] })
}); });
setEmails(emails.filter(email => email.id !== itemToDelete)); setEmails(emails.filter(email => email.id !== itemToDelete.toString()));
setSelectedEmail(null); setSelectedEmail(null);
} else if (deleteType === 'emails') { } else if (deleteType === 'emails') {
await fetch('/api/mail/delete', { await fetch('/api/mail/delete', {
@ -568,7 +569,7 @@ export default function MailPage() {
// Get selected email // Get selected email
const getSelectedEmail = () => { const getSelectedEmail = () => {
return emails.find(email => email.id === selectedEmail); return emails.find(email => email.id === selectedEmail?.id);
}; };
// Add account management functions // Add account management functions
@ -679,6 +680,19 @@ export default function MailPage() {
setSelectedEmails([]); setSelectedEmails([]);
}; };
// Update the email selection handlers to use string types
const handleEmailSelection = (emailId: string) => {
setSelectedEmail(emails.find(e => e.id === emailId) || null);
};
const handleBulkSelection = (emailId: string) => {
if (selectedEmails.includes(emailId)) {
setSelectedEmails(selectedEmails.filter(id => id !== emailId));
} else {
setSelectedEmails([...selectedEmails, emailId]);
}
};
if (loading) { if (loading) {
return ( return (
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12"> <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@ -995,46 +1009,48 @@ export default function MailPage() {
{filteredEmails.map((email) => ( {filteredEmails.map((email) => (
<li <li
key={email.id} key={email.id}
className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${ className={`flex items-center p-4 hover:bg-gray-50 transition-colors duration-150 cursor-pointer ${
selectedEmail?.id === email.id ? 'bg-blue-50' : '' selectedEmail?.id === email.id ? 'bg-blue-50' : ''
}`} } ${!email.read ? 'bg-blue-50/20' : ''}`}
onClick={() => handleEmailSelect(email)} onClick={() => handleEmailSelect(email)}
> >
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between space-x-4">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4 flex-1">
<input <input
type="checkbox" type="checkbox"
checked={selectedEmails.includes(email.id)} checked={selectedEmails.includes(email.id)}
onChange={(e) => handleEmailCheckbox(e, email.id)} onChange={(e) => handleEmailCheckbox(e, email.id)}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="h-4 w-4 text-blue-600" className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
/> />
<div className="min-w-0"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium text-gray-900 truncate"> <p className={`text-sm truncate ${!email.read ? 'font-semibold' : 'font-medium'} text-gray-900`}>
{email.fromName || email.from} {email.fromName || email.from}
</p> </p>
<p className="text-sm text-gray-500 truncate">{email.subject}</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.toISOString())}
</span>
</div>
</div> </div>
</div> </div>
<div className="flex items-center space-x-2"> <button
<span className="text-sm text-gray-500"> onClick={(e) => {
{formatDate(email.date.toISOString())} e.stopPropagation();
</span> toggleStarred(email.id, e);
<button }}
onClick={(e) => { className="text-gray-400 hover:text-yellow-400 transition-colors duration-150 p-1 hover:bg-gray-100 rounded-full"
e.stopPropagation(); >
toggleStarred(email.id, e); {email.starred ? (
}} <Star className="h-5 w-5 text-yellow-400" />
className="text-gray-400 hover:text-yellow-400" ) : (
> <Star className="h-5 w-5" />
{email.starred ? ( )}
<Star className="h-5 w-5 text-yellow-400" /> </button>
) : (
<Star className="h-5 w-5" />
)}
</button>
</div>
</div> </div>
</div> </div>
</li> </li>