Neah version mail design fix 9
This commit is contained in:
parent
7ae7841fa9
commit
b91c218c48
@ -737,7 +737,55 @@ export default function MailPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Update the email list header to include search and adjust spacing
|
||||
// Add filtered emails based on search query
|
||||
const filteredEmails = useMemo(() => {
|
||||
if (!searchQuery) return emails;
|
||||
|
||||
const query = searchQuery.toLowerCase();
|
||||
return emails.filter(email =>
|
||||
email.subject.toLowerCase().includes(query) ||
|
||||
email.from.toLowerCase().includes(query) ||
|
||||
email.to.toLowerCase().includes(query) ||
|
||||
email.body.toLowerCase().includes(query)
|
||||
);
|
||||
}, [emails, searchQuery]);
|
||||
|
||||
// Update the email list to use filtered emails
|
||||
const renderEmailList = () => (
|
||||
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
||||
{renderEmailListHeader()}
|
||||
{renderBulkActionsToolbar()}
|
||||
|
||||
<div
|
||||
className="flex-1 overflow-y-auto"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : filteredEmails.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64">
|
||||
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
||||
<p className="text-gray-500 text-sm">
|
||||
{searchQuery ? 'No emails match your search' : 'No emails in this folder'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredEmails.map((email) => renderEmailListItem(email))}
|
||||
{isLoadingMore && (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Update the email count in the header to show filtered count
|
||||
const renderEmailListHeader = () => (
|
||||
<div className="border-b border-gray-100">
|
||||
<div className="px-4 py-2">
|
||||
@ -755,13 +803,13 @@ export default function MailPage() {
|
||||
<div className="flex items-center px-4 h-14">
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
checked={emails.length > 0 && selectedEmails.length === emails.length}
|
||||
checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
className="mt-0.5"
|
||||
/>
|
||||
<h2 className="text-base font-semibold text-gray-900">Inbox</h2>
|
||||
<span className="text-sm text-gray-600 ml-4">
|
||||
{emails.length} emails
|
||||
{searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -822,32 +870,146 @@ export default function MailPage() {
|
||||
};
|
||||
|
||||
// Update the email list to include the toolbar right after the header
|
||||
const renderEmailList = () => (
|
||||
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
||||
{renderEmailListHeader()}
|
||||
{renderBulkActionsToolbar()}
|
||||
|
||||
<div
|
||||
className="flex-1 overflow-y-auto"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : emails.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64">
|
||||
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
||||
<p className="text-gray-500 text-sm">No emails in this folder</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{emails.map((email) => renderEmailListItem(email))}
|
||||
{isLoadingMore && (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user