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:24:24 +02:00
parent a2a088cf0f
commit 3c4151335b
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/email/EmailPreview.tsx
View File

@ -6,9 +6,14 @@ 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 { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { AvatarImage } from '@/components/ui/avatar';
import { Card } from '@/components/ui/card'; 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 { interface EmailAddress {
name: string; name: string;
@ -82,16 +87,13 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
}; };
// Get sender initials for avatar // Get sender initials for avatar
const getSenderInitials = (sender: EmailAddress | undefined) => { const getSenderInitials = (name: string) => {
if (!sender) return 'U'; return name
if (sender.name) { .split(" ")
const parts = sender.name.split(' '); .map((n) => n[0])
if (parts.length > 1) { .join("")
return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase(); .toUpperCase()
} .slice(0, 2);
return sender.name[0].toUpperCase();
}
return sender.address[0].toUpperCase();
}; };
// Display loading state // 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; const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
// Format email content for display
const formattedContent = formatEmailContent(email.content, 'preview');
return ( return (
<Card className="flex flex-col h-full overflow-hidden border-0 shadow-none"> <Card className="flex flex-col h-full overflow-hidden border-0 shadow-none">
{/* Email header */} {/* Email header */}
@ -128,7 +133,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
<div className="flex items-start gap-3 mb-4"> <div className="flex items-start gap-3 mb-4">
<Avatar className="h-10 w-10"> <Avatar className="h-10 w-10">
<AvatarFallback>{getSenderInitials(sender)}</AvatarFallback> <AvatarFallback>{getSenderInitials(sender?.name || '')}</AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1 min-w-0"> <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"> <div className="px-6 py-5">
{email.content ? ( {email.content ? (
<div <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={{ dangerouslySetInnerHTML={{
__html: sanitizeHtml(email.content) __html: formattedContent
}} }}
/> />
) : ( ) : (