Neah version mail design fix 7 bis ??
This commit is contained in:
parent
6ad6c87033
commit
d35d89ea9d
@ -737,11 +737,10 @@ export default function MailPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Update the email list header with inline bulk actions
|
// Update the email list header to be cleaner
|
||||||
const renderEmailListHeader = () => (
|
const renderEmailListHeader = () => (
|
||||||
<div className="border-b border-gray-100">
|
<div className="border-b border-gray-100">
|
||||||
<div className="flex items-center px-4 h-14">
|
<div className="flex items-center px-4 h-14">
|
||||||
{/* Left side with checkbox and title */}
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={emails.length > 0 && selectedEmails.length === emails.length}
|
checked={emails.length > 0 && selectedEmails.length === emails.length}
|
||||||
@ -753,53 +752,93 @@ export default function MailPage() {
|
|||||||
{emails.length} emails
|
{emails.length} emails
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bulk actions right after the title */}
|
|
||||||
{selectedEmails.length > 0 ? (
|
|
||||||
<div className="flex items-center gap-2 ml-6">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
|
|
||||||
onClick={() => {
|
|
||||||
// Check if all selected emails are read
|
|
||||||
const allSelectedRead = selectedEmails.every(id =>
|
|
||||||
emails.find(email => email.id.toString() === id)?.read
|
|
||||||
);
|
|
||||||
handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<EyeOff className="h-4 w-4" />
|
|
||||||
<span className="ml-1.5 text-sm">
|
|
||||||
Mark as {selectedEmails.every(id =>
|
|
||||||
emails.find(email => email.id.toString() === id)?.read
|
|
||||||
) ? 'unread' : 'read'}
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
|
|
||||||
onClick={() => handleBulkAction('archive')}
|
|
||||||
>
|
|
||||||
<Archive className="h-4 w-4" />
|
|
||||||
<span className="ml-1.5 text-sm">Archive</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="text-red-600 hover:text-red-700 h-8 px-2 py-1"
|
|
||||||
onClick={() => handleBulkAction('delete')}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
<span className="ml-1.5 text-sm">Delete</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Add a fixed bottom toolbar for bulk actions
|
||||||
|
const renderBulkActionsToolbar = () => {
|
||||||
|
if (selectedEmails.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 flex items-center justify-between shadow-lg">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className="text-sm text-gray-600 mr-4">
|
||||||
|
{selectedEmails.length} selected
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => {
|
||||||
|
const allSelectedRead = selectedEmails.every(id =>
|
||||||
|
emails.find(email => email.id.toString() === id)?.read
|
||||||
|
);
|
||||||
|
handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EyeOff className="h-4 w-4 mr-2" />
|
||||||
|
Mark as {selectedEmails.every(id =>
|
||||||
|
emails.find(email => email.id.toString() === id)?.read
|
||||||
|
) ? 'unread' : 'read'}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => handleBulkAction('archive')}
|
||||||
|
>
|
||||||
|
<Archive className="h-4 w-4 mr-2" />
|
||||||
|
Archive
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-red-600 hover:text-red-700"
|
||||||
|
onClick={() => handleBulkAction('delete')}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 mr-2" />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update the email list wrapper to include the bulk actions toolbar
|
||||||
|
const renderEmailList = () => (
|
||||||
|
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col relative">
|
||||||
|
{renderEmailListHeader()}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex-1 overflow-y-auto"
|
||||||
|
onScroll={handleScroll}
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
) : emails.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-64">
|
||||||
|
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
||||||
|
<p className="text-gray-500 text-sm">No emails in this folder</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
|
{emails.map((email) => renderEmailListItem(email))}
|
||||||
|
{isLoadingMore && (
|
||||||
|
<div className="flex items-center justify-center p-4">
|
||||||
|
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{renderBulkActionsToolbar()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
// Update sidebar items when available folders change
|
// Update sidebar items when available folders change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (availableFolders.length > 0) {
|
if (availableFolders.length > 0) {
|
||||||
@ -926,33 +965,146 @@ export default function MailPage() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// Render the email list using sorted emails
|
// Render the email list using sorted emails
|
||||||
const renderEmailList = () => (
|
const renderEmailListWrapper = () => (
|
||||||
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{/* Email list header */}
|
{/* Email list panel */}
|
||||||
{renderEmailListHeader()}
|
{renderEmailList()}
|
||||||
|
|
||||||
{/* Email list with scroll handler */}
|
{/* Preview panel - will automatically take remaining space */}
|
||||||
<div
|
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
||||||
className="flex-1 overflow-y-auto"
|
{selectedEmail ? (
|
||||||
onScroll={handleScroll}
|
<>
|
||||||
>
|
{/* Email actions header */}
|
||||||
{loading ? (
|
<div className="flex-none p-4 border-b border-gray-100">
|
||||||
<div className="flex items-center justify-center h-64">
|
<div className="flex items-center justify-between">
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
<div className="flex items-center gap-2">
|
||||||
</div>
|
<Button
|
||||||
) : emails.length === 0 ? (
|
variant="ghost"
|
||||||
<div className="flex flex-col items-center justify-center h-64">
|
size="icon"
|
||||||
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
onClick={() => setSelectedEmail(null)}
|
||||||
<p className="text-gray-500 text-sm">No emails in this folder</p>
|
className="md:hidden"
|
||||||
</div>
|
>
|
||||||
) : (
|
<ChevronLeft className="h-5 w-5" />
|
||||||
<div className="divide-y divide-gray-100">
|
</Button>
|
||||||
{emails.map((email) => renderEmailListItem(email))}
|
<h2 className="text-xl font-semibold text-gray-900 truncate">
|
||||||
{isLoadingMore && (
|
{selectedEmail.subject}
|
||||||
<div className="flex items-center justify-center p-4">
|
</h2>
|
||||||
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
|
</div>
|
||||||
|
<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) => toggleStarred(selectedEmail.id, e)}
|
||||||
|
>
|
||||||
|
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => {/* Add to folder logic */}}
|
||||||
|
>
|
||||||
|
<FolderOpen className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => {/* Mark as spam logic */}}
|
||||||
|
>
|
||||||
|
<MessageSquare className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
|
{/* Scrollable content area */}
|
||||||
|
<ScrollArea className="flex-1 p-6">
|
||||||
|
<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)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="prose max-w-none">
|
||||||
|
{(() => {
|
||||||
|
try {
|
||||||
|
const parsed = parseFullEmail(selectedEmail.body);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Display HTML content if available, otherwise fallback to text */}
|
||||||
|
<div dangerouslySetInnerHTML={{
|
||||||
|
__html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body)
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Display attachments if present */}
|
||||||
|
{parsed.attachments && parsed.attachments.length > 0 && (
|
||||||
|
<div className="mt-6 border-t border-gray-200 pt-6">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{parsed.attachments.map((attachment, index) => (
|
||||||
|
<div key={index} className="flex items-center space-x-2 p-2 border rounded">
|
||||||
|
<Paperclip className="h-4 w-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600 truncate">
|
||||||
|
{attachment.filename}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error parsing email:', e);
|
||||||
|
return selectedEmail.body;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
@ -1220,47 +1372,47 @@ export default function MailPage() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Main layout */}
|
{/* Main layout */}
|
||||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||||
{/* 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">
|
|
||||||
<Mail className="h-6 w-6 text-gray-600" />
|
|
||||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
|
||||||
</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">
|
<div className="flex items-center gap-2">
|
||||||
<PlusIcon className="h-3.5 w-3.5" />
|
<Mail className="h-6 w-6 text-gray-600" />
|
||||||
<span>Compose</span>
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</div>
|
||||||
<Button
|
|
||||||
variant="ghost"
|
{/* Compose button and refresh button */}
|
||||||
size="icon"
|
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
||||||
onClick={() => loadEmails()}
|
<Button
|
||||||
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
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={() => {
|
||||||
<RefreshCw className="h-4 w-4" />
|
setShowCompose(true);
|
||||||
</Button>
|
setComposeTo('');
|
||||||
</div>
|
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>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => loadEmails()}
|
||||||
|
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Accounts Section */}
|
{/* Accounts Section */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="p-3 border-b border-gray-100">
|
||||||
@ -1289,7 +1441,7 @@ export default function MailPage() {
|
|||||||
</div>
|
</div>
|
||||||
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -1298,153 +1450,14 @@ export default function MailPage() {
|
|||||||
|
|
||||||
{/* Navigation */}
|
{/* Navigation */}
|
||||||
{renderSidebarNav()}
|
{renderSidebarNav()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<div className="flex-1 flex overflow-hidden">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{/* Email list panel */}
|
{/* Email list panel */}
|
||||||
{renderEmailList()}
|
{renderEmailListWrapper()}
|
||||||
|
|
||||||
{/* Preview panel - will automatically take remaining space */}
|
|
||||||
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
|
||||||
{selectedEmail ? (
|
|
||||||
<>
|
|
||||||
{/* Email actions header */}
|
|
||||||
<div className="flex-none p-4 border-b border-gray-100">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setSelectedEmail(null)}
|
|
||||||
className="md:hidden"
|
|
||||||
>
|
|
||||||
<ChevronLeft className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 truncate">
|
|
||||||
{selectedEmail.subject}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<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) => toggleStarred(selectedEmail.id, e)}
|
|
||||||
>
|
|
||||||
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="text-gray-400 hover:text-gray-900"
|
|
||||||
onClick={() => {/* Add to folder logic */}}
|
|
||||||
>
|
|
||||||
<FolderOpen className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="text-gray-400 hover:text-gray-900"
|
|
||||||
onClick={() => {/* Mark as spam logic */}}
|
|
||||||
>
|
|
||||||
<MessageSquare className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Scrollable content area */}
|
|
||||||
<ScrollArea className="flex-1 p-6">
|
|
||||||
<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)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="prose max-w-none">
|
|
||||||
{(() => {
|
|
||||||
try {
|
|
||||||
const parsed = parseFullEmail(selectedEmail.body);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{/* Display HTML content if available, otherwise fallback to text */}
|
|
||||||
<div dangerouslySetInnerHTML={{
|
|
||||||
__html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body)
|
|
||||||
}} />
|
|
||||||
|
|
||||||
{/* Display attachments if present */}
|
|
||||||
{parsed.attachments && parsed.attachments.length > 0 && (
|
|
||||||
<div className="mt-6 border-t border-gray-200 pt-6">
|
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
{parsed.attachments.map((attachment, index) => (
|
|
||||||
<div key={index} className="flex items-center space-x-2 p-2 border rounded">
|
|
||||||
<Paperclip className="h-4 w-4 text-gray-400" />
|
|
||||||
<span className="text-sm text-gray-600 truncate">
|
|
||||||
{attachment.filename}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Error parsing email:', e);
|
|
||||||
return selectedEmail.body;
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Compose Email Modal */}
|
{/* Compose Email Modal */}
|
||||||
{showCompose && (
|
{showCompose && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user