Neah version mail design fix 7 bis ???

This commit is contained in:
alma 2025-04-16 19:18:03 +02:00
parent d35d89ea9d
commit 820d444180

View File

@ -756,20 +756,22 @@ export default function MailPage() {
</div>
);
// Add a fixed bottom toolbar for bulk actions
// Update the bulk actions toolbar to fit within email list panel
const renderBulkActionsToolbar = () => {
if (selectedEmails.length === 0) return null;
return (
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 flex items-center justify-between shadow-lg">
<div className="flex items-center gap-1">
<span className="text-sm text-gray-600 mr-4">
<div className="bg-white border-b border-gray-100 px-4 py-2">
<div className="flex items-center gap-2 mb-2">
<span className="text-sm text-gray-600">
{selectedEmails.length} selected
</span>
</div>
<div className="flex flex-wrap gap-2">
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
className="text-gray-600 hover:text-gray-900 h-8"
onClick={() => {
const allSelectedRead = selectedEmails.every(id =>
emails.find(email => email.id.toString() === id)?.read
@ -777,38 +779,41 @@ export default function MailPage() {
handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
}}
>
<EyeOff className="h-4 w-4 mr-2" />
Mark as {selectedEmails.every(id =>
emails.find(email => email.id.toString() === id)?.read
) ? 'unread' : 'read'}
<EyeOff className="h-4 w-4 mr-1.5" />
<span className="text-sm">
Mark {selectedEmails.every(id =>
emails.find(email => email.id.toString() === id)?.read
) ? 'unread' : 'read'}
</span>
</Button>
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
className="text-gray-600 hover:text-gray-900 h-8"
onClick={() => handleBulkAction('archive')}
>
<Archive className="h-4 w-4 mr-2" />
Archive
<Archive className="h-4 w-4 mr-1.5" />
<span className="text-sm">Archive</span>
</Button>
<Button
variant="ghost"
size="sm"
className="text-red-600 hover:text-red-700"
className="text-red-600 hover:text-red-700 h-8"
onClick={() => handleBulkAction('delete')}
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
<Trash2 className="h-4 w-4 mr-1.5" />
<span className="text-sm">Delete</span>
</Button>
</div>
</div>
);
};
// Update the email list wrapper to include the bulk actions toolbar
// 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 relative">
<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"
@ -834,8 +839,6 @@ export default function MailPage() {
</div>
)}
</div>
{renderBulkActionsToolbar()}
</div>
);