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

Neah version mail design fix 9 ?

Browse Source
This commit is contained in:
alma 2025-04-16 19:26:40 +02:00
parent b91c218c48
commit eefd745d62
1 changed files with 1 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
app/mail/page.tsx
View File

@ -869,7 +869,7 @@ export default function MailPage() {
);
};
// Update the email list to include the toolbar right after the header
// Keep only one renderEmailListWrapper function that includes both panels
const renderEmailListWrapper = () => (
<div className="flex-1 flex overflow-hidden">
{/* Email list panel */}
@ -1141,153 +1141,6 @@ export default function MailPage() {
</div>
);
// Render the email list using sorted emails
const renderEmailListWrapper = () => (
<div className="flex-1 flex overflow-hidden">
{/* Email list panel */}
{renderEmailList()}
{/* Preview panel - will automatically take remaining space */}
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
{selectedEmail ? (
<>
{/* Email actions header */}
<div className="flex-none p-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
onClick={() => setSelectedEmail(null)}
className="md:hidden"
>
<ChevronLeft className="h-5 w-5" />
</Button>
<h2 className="text-xl font-semibold text-gray-900 truncate">
{selectedEmail.subject}
</h2>
</div>
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => handleReply('reply')}
>
<Reply className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => handleReply('replyAll')}
>
<ReplyAll className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => handleReply('forward')}
>
<Forward className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={(e) => toggleStarred(selectedEmail.id, e)}
>
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => {/* Add to folder logic */}}
>
<FolderOpen className="h-5 w-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => {/* Mark as spam logic */}}
>
<MessageSquare className="h-5 w-5" />
</Button>
</div>
</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>
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
</AvatarFallback>
</Avatar>
<div>
<p className="font-medium text-gray-900">
{selectedEmail.fromName || selectedEmail.from}
</p>
<p className="text-sm text-gray-500">
to {selectedEmail.to}
</p>
</div>
<div className="ml-auto text-sm text-gray-500">
{formatDate(selectedEmail.date)}
</div>
</div>
<div className="prose max-w-none">
{(() => {
try {
const parsed = parseFullEmail(selectedEmail.body);
return (
<div>
{/* Display HTML content if available, otherwise fallback to text */}
<div dangerouslySetInnerHTML={{
__html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body)
}} />
{/* Display attachments if present */}
{parsed.attachments && parsed.attachments.length > 0 && (
<div className="mt-6 border-t border-gray-200 pt-6">
<h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
<div className="grid grid-cols-2 gap-4">
{parsed.attachments.map((attachment, index) => (
<div key={index} className="flex items-center space-x-2 p-2 border rounded">
<Paperclip className="h-4 w-4 text-gray-400" />
<span className="text-sm text-gray-600 truncate">
{attachment.filename}
</span>
</div>
))}
</div>
</div>
)}
</div>
);
} catch (e) {
console.error('Error parsing email:', e);
return selectedEmail.body;
}
})()}
</div>
</ScrollArea>
</>
) : (
<div className="flex flex-col items-center justify-center h-full">
<Mail className="h-12 w-12 text-gray-400 mb-4" />
<p className="text-gray-500">Select an email to view its contents</p>
</div>
)}
</div>
</div>
);
// Render the sidebar navigation
const renderSidebarNav = () => (
<nav className="p-3">