mail page imap connection mime 5 bis rest 5

This commit is contained in:
alma 2025-04-15 22:53:42 +02:00
parent 8c42df9d6f
commit 22dc2a74d8

View File

@ -448,7 +448,7 @@ export default function MailPage() {
console.log('Processed email data:', emailData); // Debug processed data
// Ensure all dates are Date objects
const processedEmails = emailData.map(email => ({
const processedEmails = emailData.map((email: Email) => ({
...email,
date: email.date ? new Date(email.date) : new Date(),
read: email.read || false,
@ -629,6 +629,35 @@ export default function MailPage() {
}
};
// Handle reply
const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
const selectedEmailData = getSelectedEmail();
if (!selectedEmailData) return;
setComposeOpen(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);
setComposeRecipient(to);
setComposeContent(content);
};
if (loading) {
return (
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@ -996,6 +1025,98 @@ export default function MailPage() {
</div>
</div>
</div>
{/* Email preview panel */}
<div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
{selectedEmail ? (
<div className="p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => handleReply('reply')}
>
<Reply className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => handleReply('replyAll')}
>
<ReplyAll className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => handleReply('forward')}
>
<Forward className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={(e) => {
e.stopPropagation();
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={() => {
setDeleteType('email');
setItemToDelete(parseInt(selectedEmail.id));
setShowDeleteConfirm(true);
}}
>
<Trash2 className="h-5 w-5" />
</Button>
</div>
</div>
<div className="flex items-center gap-4 mb-6">
<Avatar className="h-10 w-10">
<AvatarFallback>
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
</AvatarFallback>
</Avatar>
<div>
<p className="font-medium text-gray-900">
{selectedEmail.fromName || selectedEmail.from}
</p>
<p className="text-sm text-gray-500">
to {selectedEmail.to}
</p>
</div>
<div className="ml-auto text-sm text-gray-500">
{formatDate(selectedEmail.date.toISOString())}
</div>
</div>
<div className="prose max-w-none">
{selectedEmail.body}
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center h-full">
<Mail className="h-12 w-12 text-gray-400 mb-4" />
<p className="text-gray-500">Select an email to view its contents</p>
</div>
)}
</div>
</div>
</div>
);