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

courrier refactor rebuild preview

Browse Source
This commit is contained in:
alma 2025-04-27 00:20:02 +02:00
parent c7f5e31b23
commit a2a088cf0f
1 changed files with 87 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/email/EmailPreview.tsx
View File

@ -1,11 +1,14 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { Loader2, Paperclip } from 'lucide-react'; import { Loader2, Paperclip, User } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area'; import { ScrollArea } from '@/components/ui/scroll-area';
import { sanitizeHtml } from '@/lib/utils/email-formatter'; import { sanitizeHtml } from '@/lib/utils/email-formatter';
import { Avatar } from '@/components/ui/avatar';
import { AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card } from '@/components/ui/card';
interface EmailAddress { interface EmailAddress {
name: string; name: string;
@ -78,6 +81,19 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
).join(', '); ).join(', ');
}; };
// Get sender initials for avatar
const getSenderInitials = (sender: EmailAddress | undefined) => {
if (!sender) return 'U';
if (sender.name) {
const parts = sender.name.split(' ');
if (parts.length > 1) {
return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
}
return sender.name[0].toUpperCase();
}
return sender.address[0].toUpperCase();
};
// Display loading state // Display loading state
if (loading) { if (loading) {
return ( return (
@ -101,34 +117,37 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
); );
} }
const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
return ( return (
<div className="flex flex-col h-full overflow-hidden"> <Card className="flex flex-col h-full overflow-hidden border-0 shadow-none">
{/* Email header */} {/* Email header */}
<div className="p-4 border-b"> <div className="p-6 border-b">
<div className="mb-3"> <div className="mb-4">
<h2 className="text-xl font-semibold mb-2">{email.subject}</h2> <h2 className="text-xl font-semibold mb-4">{email.subject}</h2>
<div className="flex items-center justify-between text-sm">
<div className="flex items-center"> <div className="flex items-start gap-3 mb-4">
<span className="font-medium mr-1">From:</span> <Avatar className="h-10 w-10">
<span>{formatEmailAddresses(email.from)}</span> <AvatarFallback>{getSenderInitials(sender)}</AvatarFallback>
</div> </Avatar>
<span className="text-muted-foreground">{formatDate(email.date)}</span>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="font-medium">{sender?.name || sender?.address}</div>
<span className="text-sm text-muted-foreground">{formatDate(email.date)}</span>
</div> </div>
{email.to && email.to.length > 0 && ( <div className="text-sm text-muted-foreground truncate mt-1">
<div className="text-sm mt-1"> To: {formatEmailAddresses(email.to)}
<span className="font-medium mr-1">To:</span>
<span>{formatEmailAddresses(email.to)}</span>
</div> </div>
)}
{email.cc && email.cc.length > 0 && ( {email.cc && email.cc.length > 0 && (
<div className="text-sm mt-1"> <div className="text-sm text-muted-foreground truncate mt-1">
<span className="font-medium mr-1">Cc:</span> Cc: {formatEmailAddresses(email.cc)}
<span>{formatEmailAddresses(email.cc)}</span>
</div> </div>
)} )}
</div> </div>
</div>
{/* Action buttons */} {/* Action buttons */}
{onReply && ( {onReply && (
@ -156,15 +175,16 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
</Button> </Button>
</div> </div>
)} )}
</div>
{/* Attachments */} {/* Attachments */}
{email.attachments && email.attachments.length > 0 && ( {email.attachments && email.attachments.length > 0 && (
<div className="mt-4 border-t pt-2"> <div className="px-6 py-3 border-b bg-muted/30">
<div className="text-sm font-medium mb-2">Attachments:</div> <div className="text-sm font-medium mb-2">Attachments</div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{email.attachments.map((attachment, index) => ( {email.attachments.map((attachment, index) => (
<Badge key={index} variant="outline" className="flex items-center gap-1"> <Badge key={index} variant="outline" className="flex items-center gap-1 px-2 py-1">
<Paperclip className="h-3 w-3" /> <Paperclip className="h-3.5 w-3.5" />
<span>{attachment.filename}</span> <span>{attachment.filename}</span>
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1">
({Math.round(attachment.size / 1024)}KB) ({Math.round(attachment.size / 1024)}KB)
@ -177,10 +197,11 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
</div> </div>
{/* Email content */} {/* Email content */}
<ScrollArea className="flex-1 px-4 py-3"> <ScrollArea className="flex-1">
<div className="px-6 py-5">
{email.content ? ( {email.content ? (
<div <div
className="email-content-display" className="email-content-display prose prose-sm max-w-none"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: sanitizeHtml(email.content) __html: sanitizeHtml(email.content)
}} }}
@ -188,7 +209,8 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
) : ( ) : (
<p className="text-muted-foreground">No content available</p> <p className="text-muted-foreground">No content available</p>
)} )}
</ScrollArea>
</div> </div>
</ScrollArea>
</Card>
); );
} }