Neah version mail design fix 1
This commit is contained in:
parent
4c4e3949cc
commit
a700adf8bf
@ -1055,16 +1055,14 @@ export default function MailPage() {
|
||||
{/* Email list header */}
|
||||
<div className="p-4 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800">
|
||||
{currentView === 'INBOX' ? 'Inbox' :
|
||||
currentView === 'starred' ? 'Starred' :
|
||||
currentView.charAt(0).toUpperCase() + currentView.slice(1)}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
{currentView === 'INBOX' ? 'Inbox' :
|
||||
currentView === 'starred' ? 'Starred' :
|
||||
currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
|
||||
</h2>
|
||||
<span className="text-sm text-gray-500">
|
||||
{emails.length} emails
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1080,77 +1078,60 @@ export default function MailPage() {
|
||||
) : 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">
|
||||
{currentView === 'INBOX' && 'No emails in inbox'}
|
||||
{currentView === 'starred' && 'No starred emails'}
|
||||
{currentView === 'Sent' && 'No sent emails'}
|
||||
{currentView === 'Trash' && 'No emails in trash'}
|
||||
{currentView === 'Drafts' && 'No drafts'}
|
||||
{currentView === 'Spam' && 'No spam emails'}
|
||||
{(currentView === 'Archives' || currentView === 'Archive') && 'No archived emails'}
|
||||
</p>
|
||||
<p className="text-gray-500 text-sm">No emails in this folder</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{sortedEmails.map((email) => (
|
||||
<div
|
||||
key={email.id}
|
||||
className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
|
||||
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
||||
className={`flex items-start gap-3 p-3 hover:bg-gray-50/80 cursor-pointer ${
|
||||
selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
|
||||
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||||
onClick={() => handleEmailSelect(email.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id.toString())}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||
} else {
|
||||
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{currentView === 'Sent' ? email.to : (email.fromName || email.from)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatDate(email.date)}
|
||||
</span>
|
||||
{/* Show folder badge if it doesn't match current view */}
|
||||
{email.folder !== currentView && currentView === 'starred' && (
|
||||
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
|
||||
{email.folder}
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id.toString())}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||
} else {
|
||||
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
||||
}
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
|
||||
{currentView === 'Sent' ? email.to : (email.fromName || email.from)}
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className="text-xs text-gray-500 whitespace-nowrap">
|
||||
{formatDate(email.date)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-8">
|
||||
<h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
|
||||
<h3 className={`text-sm mb-0.5 truncate ${!email.read ? 'font-medium text-gray-900' : 'text-gray-700'}`}>
|
||||
{email.subject || '(No subject)'}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 line-clamp-1">
|
||||
{email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
|
||||
</p>
|
||||
</div>
|
||||
{/* Debug info - only in development */}
|
||||
{process.env.NODE_ENV === 'development' && (
|
||||
<div className="ml-8 mt-1 text-xs text-gray-400">
|
||||
Folder: {email.folder}
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="truncate">
|
||||
{email.folder === 'INBOX' && 'Folder: INBOX'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{isLoadingMore && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user