Neah version mail design fix 9 ?
This commit is contained in:
parent
b91c218c48
commit
eefd745d62
@ -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 = () => (
|
const renderEmailListWrapper = () => (
|
||||||
<div className="flex-1 flex overflow-hidden">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{/* Email list panel */}
|
{/* Email list panel */}
|
||||||
@ -1141,153 +1141,6 @@ export default function MailPage() {
|
|||||||
</div>
|
</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
|
// Render the sidebar navigation
|
||||||
const renderSidebarNav = () => (
|
const renderSidebarNav = () => (
|
||||||
<nav className="p-3">
|
<nav className="p-3">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user