alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier preview

Browse Source
This commit is contained in:
alma 2025-04-30 23:01:36 +02:00
parent 5adf1a9a62
commit 81a107147c
1 changed files with 79 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
components/email/EmailDetailView.tsx
View File

@ -89,7 +89,7 @@ export default function EmailDetailView({
};
return (
<>
<div className="flex flex-col h-full overflow-hidden">
{/* Email actions header */}
<div className="flex-none px-4 py-3 border-b border-gray-100">
<div className="flex items-center gap-4">
@ -147,57 +147,87 @@ export default function EmailDetailView({
</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>
{(email.from?.[0]?.name || '').charAt(0) || (email.from?.[0]?.address || '').charAt(0) || '?'}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="font-medium text-gray-900">
{email.from?.[0]?.name || ''} <span className="text-gray-500">&lt;{email.from?.[0]?.address || ''}&gt;</span>
</p>
<p className="text-sm text-gray-500">
to {email.to?.[0]?.address || ''}
</p>
{email.cc && email.cc.length > 0 && (
<p className="text-sm text-gray-500">
cc {email.cc.map(c => c.address).join(', ')}
{/* Scrollable content area - enhanced for better scrolling */}
<ScrollArea className="flex-1 overflow-auto">
<div className="p-6">
{/* Email header info */}
<div className="flex items-center gap-4 mb-6">
<Avatar className="h-10 w-10">
<AvatarFallback>
{(email.from?.[0]?.name || '').charAt(0) || (email.from?.[0]?.address || '').charAt(0) || '?'}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="font-medium text-gray-900">
{email.from?.[0]?.name || ''} <span className="text-gray-500">&lt;{email.from?.[0]?.address || ''}&gt;</span>
</p>
)}
</div>
<div className="text-sm text-gray-500 whitespace-nowrap">
{formatDate(email.date)}
</div>
</div>
{/* Email content */}
<div className="prose prose-sm max-w-none">
{renderEmailContent()}
</div>
{/* Attachments (if any) */}
{email.hasAttachments && email.attachments && email.attachments.length > 0 && (
<div className="mt-6 border-t border-gray-100 pt-4">
<h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{email.attachments.map((attachment, idx) => (
<div
key={idx}
className="flex items-center gap-2 p-2 border border-gray-200 rounded-md"
>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-700 truncate">{attachment.filename}</p>
<p className="text-xs text-gray-500">{(attachment.size / 1024).toFixed(1)} KB</p>
</div>
</div>
))}
<p className="text-sm text-gray-500">
to {email.to?.[0]?.address || ''}
</p>
{email.cc && email.cc.length > 0 && (
<p className="text-sm text-gray-500">
cc {email.cc.map(c => c.address).join(', ')}
</p>
)}
</div>
<div className="text-sm text-gray-500 whitespace-nowrap">
{formatDate(email.date)}
</div>
</div>
)}
{/* Email content with improved scrolling */}
<div className="prose prose-sm max-w-none email-content-wrapper">
{renderEmailContent()}
</div>
{/* Attachments (if any) */}
{email.hasAttachments && email.attachments && email.attachments.length > 0 && (
<div className="mt-6 border-t border-gray-100 pt-4">
<h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{email.attachments.map((attachment, idx) => (
<div
key={idx}
className="flex items-center gap-2 p-2 border border-gray-200 rounded-md"
>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-700 truncate">{attachment.filename}</p>
<p className="text-xs text-gray-500">{(attachment.size / 1024).toFixed(1)} KB</p>
</div>
</div>
))}
</div>
</div>
)}
</div>
</ScrollArea>
</>
{/* Add CSS for better email content display */}
<style jsx global>{`
.email-content-wrapper {
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
.email-content-wrapper img {
max-width: 100%;
height: auto;
}
.email-content-wrapper table {
max-width: 100%;
overflow-x: auto;
display: block;
}
@media (max-width: 640px) {
.email-content-wrapper {
font-size: 14px;
}
}
`}</style>
</div>
);
}