mime change
This commit is contained in:
parent
0ec9d5b522
commit
338f23104e
@ -1128,6 +1128,184 @@ export default function CourrierPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Add back the renderSidebarNav function
|
||||||
|
const renderSidebarNav = () => (
|
||||||
|
<nav className="p-3">
|
||||||
|
<ul className="space-y-0.5 px-2">
|
||||||
|
{sidebarItems.map((item) => (
|
||||||
|
<li key={item.view}>
|
||||||
|
<Button
|
||||||
|
variant={currentView === item.view ? 'secondary' : 'ghost'}
|
||||||
|
className={`w-full justify-start py-2 ${
|
||||||
|
currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentView(item.view);
|
||||||
|
setSelectedEmail(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between w-full">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<item.icon className="h-4 w-4 mr-2" />
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</div>
|
||||||
|
{item.view === 'INBOX' && unreadCount > 0 && (
|
||||||
|
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||||
|
{unreadCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add back the handleReply function
|
||||||
|
const handleReply = (type: 'reply' | 'reply-all' | 'forward') => {
|
||||||
|
if (!selectedEmail) return;
|
||||||
|
|
||||||
|
const getReplyTo = () => {
|
||||||
|
if (type === 'forward') return '';
|
||||||
|
return selectedEmail.from;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getReplyCc = () => {
|
||||||
|
if (type !== 'reply-all') return '';
|
||||||
|
return selectedEmail.cc || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getReplySubject = () => {
|
||||||
|
const subject = selectedEmail.subject || '';
|
||||||
|
if (type === 'forward') {
|
||||||
|
return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
|
||||||
|
}
|
||||||
|
return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get the formatted original email content
|
||||||
|
const originalContent = getReplyBody(selectedEmail, type);
|
||||||
|
|
||||||
|
// Create a clean structure with clear separation
|
||||||
|
const formattedContent = `
|
||||||
|
<div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
|
||||||
|
<div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
|
||||||
|
${originalContent}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Update the compose form
|
||||||
|
setComposeTo(getReplyTo());
|
||||||
|
setComposeCc(getReplyCc());
|
||||||
|
setComposeSubject(getReplySubject());
|
||||||
|
setComposeBody(formattedContent);
|
||||||
|
setComposeBcc('');
|
||||||
|
|
||||||
|
// Show the compose form and CC field for Reply All
|
||||||
|
setShowCompose(true);
|
||||||
|
setShowCc(type === 'reply-all');
|
||||||
|
setShowBcc(false);
|
||||||
|
setAttachments([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add back the toggleStarred function
|
||||||
|
const toggleStarred = async (emailId: number, e?: React.MouseEvent) => {
|
||||||
|
if (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
const email = emails.find(e => e.id === emailId);
|
||||||
|
if (!email) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/courrier/toggle-star', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ emailId, starred: !email.starred }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to toggle star');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update email in state
|
||||||
|
setEmails(emails.map(e =>
|
||||||
|
e.id === emailId ? { ...e, starred: !e.starred } : e
|
||||||
|
));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling star:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add back the handleSend function
|
||||||
|
const handleSend = async () => {
|
||||||
|
if (!composeTo) {
|
||||||
|
alert('Please specify at least one recipient');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/courrier/send', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
to: composeTo,
|
||||||
|
cc: composeCc,
|
||||||
|
bcc: composeBcc,
|
||||||
|
subject: composeSubject,
|
||||||
|
body: composeBody,
|
||||||
|
attachments: attachments,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
if (data.error === 'Attachment size limit exceeded') {
|
||||||
|
alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`);
|
||||||
|
} else {
|
||||||
|
alert(`Error sending email: ${data.error}`);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear compose form and close modal
|
||||||
|
setComposeTo('');
|
||||||
|
setComposeCc('');
|
||||||
|
setComposeBcc('');
|
||||||
|
setComposeSubject('');
|
||||||
|
setComposeBody('');
|
||||||
|
setAttachments([]);
|
||||||
|
setShowCompose(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending email:', error);
|
||||||
|
alert('Failed to send email. Please try again.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add back the renderDeleteConfirmDialog function
|
||||||
|
const renderDeleteConfirmDialog = () => (
|
||||||
|
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Delete Emails</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
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">
|
||||||
@ -1152,92 +1330,92 @@ export default function CourrierPage() {
|
|||||||
<main className="w-full h-screen bg-black">
|
<main className="w-full h-screen bg-black">
|
||||||
<div className="w-full h-full px-4 pt-12 pb-4">
|
<div className="w-full h-full px-4 pt-12 pb-4">
|
||||||
<div className="flex h-full bg-carnet-bg">
|
<div className="flex h-full bg-carnet-bg">
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
|
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
|
||||||
${mobileSidebarOpen ? '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 */}
|
{/* Courrier Title */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="p-3 border-b border-gray-100">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Mail className="h-6 w-6 text-gray-600" />
|
<Mail className="h-6 w-6 text-gray-600" />
|
||||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Compose button and refresh button */}
|
|
||||||
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
|
||||||
onClick={() => {
|
|
||||||
setShowCompose(true);
|
|
||||||
setComposeTo('');
|
|
||||||
setComposeCc('');
|
|
||||||
setComposeBcc('');
|
|
||||||
setComposeSubject('');
|
|
||||||
setComposeBody('');
|
|
||||||
setShowCc(false);
|
|
||||||
setShowBcc(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<PlusIcon className="h-3.5 w-3.5" />
|
|
||||||
<span>Compose</span>
|
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handleMailboxChange('INBOX')}
|
|
||||||
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<RefreshCw className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Accounts Section */}
|
{/* Compose button and refresh button */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||||||
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
onClick={() => {
|
||||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
setShowCompose(true);
|
||||||
>
|
setComposeTo('');
|
||||||
<span>Accounts</span>
|
setComposeCc('');
|
||||||
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
setComposeBcc('');
|
||||||
</Button>
|
setComposeSubject('');
|
||||||
|
setComposeBody('');
|
||||||
{accountsDropdownOpen && (
|
setShowCc(false);
|
||||||
<div className="space-y-1 pl-2">
|
setShowBcc(false);
|
||||||
{accounts.map(account => (
|
}}
|
||||||
<div key={account.id} className="relative group">
|
>
|
||||||
<Button
|
<div className="flex items-center gap-2">
|
||||||
variant="ghost"
|
<PlusIcon className="h-3.5 w-3.5" />
|
||||||
className="w-full justify-between px-2 py-1.5 text-sm group"
|
<span>Compose</span>
|
||||||
onClick={() => setSelectedAccount(account)}
|
|
||||||
>
|
|
||||||
<div className="flex flex-col items-start">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
|
||||||
<span className="font-medium">{account.name}</span>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => handleMailboxChange('INBOX')}
|
||||||
|
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation */}
|
{/* Accounts Section */}
|
||||||
{renderSidebarNav()}
|
<div className="p-3 border-b border-gray-100">
|
||||||
</div>
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
||||||
|
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||||
|
>
|
||||||
|
<span>Accounts</span>
|
||||||
|
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{accountsDropdownOpen && (
|
||||||
|
<div className="space-y-1 pl-2">
|
||||||
|
{accounts.map(account => (
|
||||||
|
<div key={account.id} className="relative group">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-between px-2 py-1.5 text-sm group"
|
||||||
|
onClick={() => setSelectedAccount(account)}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-start">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||||
|
<span className="font-medium">{account.name}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Main content area */}
|
{/* Navigation */}
|
||||||
<div className="flex-1 flex overflow-hidden">
|
{renderSidebarNav()}
|
||||||
{/* Email list panel */}
|
|
||||||
{renderEmailListWrapper()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Main content area */}
|
||||||
|
<div className="flex-1 flex overflow-hidden">
|
||||||
|
{/* Email list panel */}
|
||||||
|
{renderEmailListWrapper()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* Compose Email Modal */}
|
{/* Compose Email Modal */}
|
||||||
@ -1283,4 +1461,4 @@ export default function CourrierPage() {
|
|||||||
{renderDeleteConfirmDialog()}
|
{renderDeleteConfirmDialog()}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user