courrier refactor rebuild preview

This commit is contained in:
alma 2025-04-27 00:24:24 +02:00
parent a2a088cf0f
commit 3c4151335b

View File

@ -6,9 +6,14 @@ 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 { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { AvatarImage } from '@/components/ui/avatar';
import { Card } from '@/components/ui/card';
import { formatDate } from '@/lib/date';
import { cn } from '@/lib/utils';
import { CalendarIcon, PaperclipIcon } from 'lucide-react';
import Link from 'next/link';
import { formatEmailContent } from '@/lib/email-formatter';
interface EmailAddress {
name: string;
@ -82,16 +87,13 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
};
// 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();
const getSenderInitials = (name: string) => {
return name
.split(" ")
.map((n) => n[0])
.join("")
.toUpperCase()
.slice(0, 2);
};
// Display loading state
@ -119,6 +121,9 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
// Format email content for display
const formattedContent = formatEmailContent(email.content, 'preview');
return (
<Card className="flex flex-col h-full overflow-hidden border-0 shadow-none">
{/* Email header */}
@ -128,7 +133,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
<div className="flex items-start gap-3 mb-4">
<Avatar className="h-10 w-10">
<AvatarFallback>{getSenderInitials(sender)}</AvatarFallback>
<AvatarFallback>{getSenderInitials(sender?.name || '')}</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
@ -201,9 +206,16 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
<div className="px-6 py-5">
{email.content ? (
<div
className="email-content-display prose prose-sm max-w-none"
className={cn(
"email-content-display prose prose-sm max-w-none",
!email.flags?.seen && "font-medium"
)}
style={{
overflowWrap: 'break-word',
wordBreak: 'break-word'
}}
dangerouslySetInnerHTML={{
__html: sanitizeHtml(email.content)
__html: formattedContent
}}
/>
) : (