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
const filteredEmails = emails.filter(email => {
if (selectedAccount !== 'all' && email.accountId !== selectedAccount) {
return false;
}
if (selectedAccount === 0) return true;
return email.accountId === selectedAccount.toString();
}).filter(email => {
switch (currentView) {
case 'starred':
case "inbox":
return email.category === "inbox";
case "starred":
return email.starred;
case 'sent':
return email.category === 'sent';
case 'trash':
return email.category === 'trash';
case "sent":
return email.category === "sent";
case "trash":
return email.category === "trash";
default:
return email.category === 'inbox';
return true;
}
});
@ -546,9 +547,9 @@ export default function MailPage() {
await fetch('/api/mail/delete', {
method: 'POST',
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);
} else if (deleteType === 'emails') {
await fetch('/api/mail/delete', {
@ -568,7 +569,7 @@ export default function MailPage() {
// Get selected email
const getSelectedEmail = () => {
return emails.find(email => email.id === selectedEmail);
return emails.find(email => email.id === selectedEmail?.id);
};
// Add account management functions
@ -679,6 +680,19 @@ export default function MailPage() {
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) {
return (
<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) => (
<li
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' : ''
}`}
} ${!email.read ? 'bg-blue-50/20' : ''}`}
onClick={() => handleEmailSelect(email)}
>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<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"
className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
/>
<div className="min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
<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>
<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 className="flex items-center space-x-2">
<span className="text-sm text-gray-500">
{formatDate(email.date.toISOString())}
</span>
<button
onClick={(e) => {
e.stopPropagation();
toggleStarred(email.id, e);
}}
className="text-gray-400 hover:text-yellow-400"
>
{email.starred ? (
<Star className="h-5 w-5 text-yellow-400" />
) : (
<Star className="h-5 w-5" />
)}
</button>
</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>