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

152
components/email/EmailPreview.tsx
View File

@ -1,11 +1,14 @@
'use client';
import { useState } from 'react';
import { Loader2, Paperclip } from 'lucide-react';
import { Loader2, Paperclip, User } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
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 {
name: string;
@ -78,6 +81,19 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
).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
if (loading) {
return (
@ -101,70 +117,74 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
);
}
const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
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 */}
<div className="p-4 border-b">
<div className="mb-3">
<h2 className="text-xl font-semibold mb-2">{email.subject}</h2>
<div className="flex items-center justify-between text-sm">
<div className="flex items-center">
<span className="font-medium mr-1">From:</span>
<span>{formatEmailAddresses(email.from)}</span>
<div className="p-6 border-b">
<div className="mb-4">
<h2 className="text-xl font-semibold mb-4">{email.subject}</h2>
<div className="flex items-start gap-3 mb-4">
<Avatar className="h-10 w-10">
<AvatarFallback>{getSenderInitials(sender)}</AvatarFallback>
</Avatar>
<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 className="text-sm text-muted-foreground truncate mt-1">
To: {formatEmailAddresses(email.to)}
</div>
{email.cc && email.cc.length > 0 && (
<div className="text-sm text-muted-foreground truncate mt-1">
Cc: {formatEmailAddresses(email.cc)}
</div>
)}
</div>
<span className="text-muted-foreground">{formatDate(email.date)}</span>
</div>
{email.to && email.to.length > 0 && (
<div className="text-sm mt-1">
<span className="font-medium mr-1">To:</span>
<span>{formatEmailAddresses(email.to)}</span>
</div>
)}
{email.cc && email.cc.length > 0 && (
<div className="text-sm mt-1">
<span className="font-medium mr-1">Cc:</span>
<span>{formatEmailAddresses(email.cc)}</span>
{/* Action buttons */}
{onReply && (
<div className="flex gap-2 mt-4">
<Button
size="sm"
variant="outline"
onClick={() => onReply('reply')}
>
Reply
</Button>
<Button
size="sm"
variant="outline"
onClick={() => onReply('reply-all')}
>
Reply All
</Button>
<Button
size="sm"
variant="outline"
onClick={() => onReply('forward')}
>
Forward
</Button>
</div>
)}
</div>
{/* Action buttons */}
{onReply && (
<div className="flex gap-2 mt-4">
<Button
size="sm"
variant="outline"
onClick={() => onReply('reply')}
>
Reply
</Button>
<Button
size="sm"
variant="outline"
onClick={() => onReply('reply-all')}
>
Reply All
</Button>
<Button
size="sm"
variant="outline"
onClick={() => onReply('forward')}
>
Forward
</Button>
</div>
)}
{/* Attachments */}
{email.attachments && email.attachments.length > 0 && (
<div className="mt-4 border-t pt-2">
<div className="text-sm font-medium mb-2">Attachments:</div>
<div className="px-6 py-3 border-b bg-muted/30">
<div className="text-sm font-medium mb-2">Attachments</div>
<div className="flex flex-wrap gap-2">
{email.attachments.map((attachment, index) => (
<Badge key={index} variant="outline" className="flex items-center gap-1">
<Paperclip className="h-3 w-3" />
<Badge key={index} variant="outline" className="flex items-center gap-1 px-2 py-1">
<Paperclip className="h-3.5 w-3.5" />
<span>{attachment.filename}</span>
<span className="text-xs text-muted-foreground ml-1">
({Math.round(attachment.size / 1024)}KB)
@ -177,18 +197,20 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
</div>
{/* Email content */}
<ScrollArea className="flex-1 px-4 py-3">
{email.content ? (
<div
className="email-content-display"
dangerouslySetInnerHTML={{
__html: sanitizeHtml(email.content)
}}
/>
) : (
<p className="text-muted-foreground">No content available</p>
)}
<ScrollArea className="flex-1">
<div className="px-6 py-5">
{email.content ? (
<div
className="email-content-display prose prose-sm max-w-none"
dangerouslySetInnerHTML={{
__html: sanitizeHtml(email.content)
}}
/>
) : (
<p className="text-muted-foreground">No content available</p>
)}
</div>
</ScrollArea>
</div>
</Card>
);
}