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

Neah version mail design fix 7

Browse Source
This commit is contained in:
alma 2025-04-16 19:03:14 +02:00
parent ee22f64621
commit 2f8d83b5b7
1 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/mail/page.tsx
View File

@ -737,64 +737,65 @@ export default function MailPage() {
} }
}; };
// Update the email list header with better aligned checkbox and bulk actions // Update the email list header with inline bulk actions
const renderEmailListHeader = () => ( const renderEmailListHeader = () => (
<div className="border-b border-gray-100"> <div className="border-b border-gray-100">
{/* Main header row */}
<div className="flex items-center px-4 h-14"> <div className="flex items-center px-4 h-14">
{/* Left side with checkbox and title */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Checkbox <Checkbox
checked={emails.length > 0 && selectedEmails.length === emails.length} checked={emails.length > 0 && selectedEmails.length === emails.length}
onCheckedChange={toggleSelectAll} onCheckedChange={toggleSelectAll}
className="mt-0.5" className="mt-0.5"
/> />
<h2 className="text-base font-semibold text-gray-900"> <h2 className="text-base font-semibold text-gray-900">Inbox</h2>
{currentView === 'INBOX' ? 'Inbox' : <span className="text-sm text-gray-600">
currentView === 'starred' ? 'Starred' :
currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
</h2>
</div>
<span className="text-sm text-gray-600 ml-3">
{emails.length} emails {emails.length} emails
</span> </span>
</div>
{/* Bulk actions aligned to the right */} {/* Bulk actions right after the title */}
{selectedEmails.length > 0 && ( {selectedEmails.length > 0 ? (
<div className="flex items-center gap-1 ml-auto"> <div className="flex items-center gap-2 ml-6">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8" className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
onClick={() => { onClick={() => {
const someUnread = emails.some(email => // Check if all selected emails are read
selectedEmails.includes(email.id.toString()) && !email.read const allSelectedRead = selectedEmails.every(id =>
emails.find(email => email.id.toString() === id)?.read
); );
handleBulkAction(someUnread ? 'mark-read' : 'mark-unread'); handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
}} }}
> >
<EyeOff className="h-4 w-4" /> <EyeOff className="h-4 w-4" />
<span className="ml-2 text-sm">Mark as Read</span> <span className="ml-1.5 text-sm">
Mark as {selectedEmails.every(id =>
emails.find(email => email.id.toString() === id)?.read
) ? 'unread' : 'read'}
</span>
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8" className="text-gray-600 hover:text-gray-900 h-8 px-2 py-1"
onClick={() => handleBulkAction('archive')} onClick={() => handleBulkAction('archive')}
> >
<Archive className="h-4 w-4" /> <Archive className="h-4 w-4" />
<span className="ml-2 text-sm">Archive</span> <span className="ml-1.5 text-sm">Archive</span>
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-red-600 hover:text-red-700 px-2 py-1 h-8" className="text-red-600 hover:text-red-700 h-8 px-2 py-1"
onClick={() => handleBulkAction('delete')} onClick={() => handleBulkAction('delete')}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
<span className="ml-2 text-sm">Delete</span> <span className="ml-1.5 text-sm">Delete</span>
</Button> </Button>
</div> </div>
)} ) : null}
</div> </div>
</div> </div>
); );