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

Neah version mail design fix 5 bis b

Browse Source
This commit is contained in:
alma 2025-04-16 18:55:59 +02:00
parent 8d433c5f19
commit 0e62a92771
1 changed files with 80 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
app/mail/page.tsx
View File

@ -737,71 +737,90 @@ export default function MailPage() {
}
};
// Update the email list header
// Update the email list header with better aligned checkbox and bulk actions
const renderEmailListHeader = () => (
<div className="p-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-3">
<Checkbox
checked={emails.length > 0 && selectedEmails.length === emails.length}
onCheckedChange={toggleSelectAll}
className="mt-0.5"
/>
<div className="flex items-center h-[42px]"> {/* Match height with email list items */}
<Checkbox
checked={emails.length > 0 && selectedEmails.length === emails.length}
onCheckedChange={toggleSelectAll}
className="ml-1"
/>
</div>
<h2 className="text-xl font-semibold text-gray-900">
{currentView === 'INBOX' ? 'Inbox' :
currentView === 'starred' ? 'Starred' :
currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
</h2>
</div>
<div className="flex items-center gap-2">
{selectedEmails.length > 0 && (
<>
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
onClick={() => {
const someUnread = emails.some(email =>
selectedEmails.includes(email.id.toString()) && !email.read
);
handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
}}
>
<EyeOff className="h-4 w-4 mr-1" />
{emails.some(email => selectedEmails.includes(email.id.toString()) && !email.read)
? 'Mark as Read'
: 'Mark as Unread'
}
</Button>
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
onClick={() => handleBulkAction('archive')}
>
<Archive className="h-4 w-4 mr-1" />
Archive
</Button>
<Button
variant="ghost"
size="sm"
className="text-red-600 hover:text-red-700"
onClick={() => handleBulkAction('delete')}
>
<Trash2 className="h-4 w-4 mr-1" />
Delete
</Button>
</>
)}
<span className="text-sm text-gray-500 ml-2">
<span className="text-sm text-gray-500 ml-auto">
{emails.length} emails
</span>
</div>
{selectedEmails.length > 0 && (
<div className="flex items-center gap-2 px-1">
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
onClick={() => {
const someUnread = emails.some(email =>
selectedEmails.includes(email.id.toString()) && !email.read
);
handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
}}
>
<EyeOff className="h-4 w-4 mr-2" />
{emails.some(email => selectedEmails.includes(email.id.toString()) && !email.read)
? 'Mark as Read'
: 'Mark as Unread'
}
</Button>
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
onClick={() => handleBulkAction('archive')}
>
<Archive className="h-4 w-4 mr-2" />
Archive
</Button>
<Button
variant="ghost"
size="sm"
className="text-red-600 hover:text-red-700"
onClick={() => handleBulkAction('delete')}
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
</div>
)}
</div>
</div>
);
// Update the email list item checkbox
// Update sidebar items when available folders change
useEffect(() => {
if (availableFolders.length > 0) {
const newItems = [
...initialSidebarItems,
...availableFolders
.filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items
.map(folder => ({
view: folder as MailFolder,
label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(),
icon: getFolderIcon(folder),
folder: folder
}))
];
setSidebarItems(newItems);
}
}, [availableFolders]);
// Update the email list item to match header checkbox alignment
const renderEmailListItem = (email: Email) => (
<div
key={email.id}
@ -810,15 +829,17 @@ export default function MailPage() {
} ${!email.read ? 'bg-blue-50/20' : ''}`}
onClick={() => handleEmailSelect(email.id)}
>
<Checkbox
checked={selectedEmails.includes(email.id.toString())}
onCheckedChange={(checked) => {
const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
handleEmailCheckbox(e, email.id);
}}
onClick={(e) => e.stopPropagation()}
className="mt-1"
/>
<div className="flex items-center h-[42px]"> {/* Match height with header */}
<Checkbox
checked={selectedEmails.includes(email.id.toString())}
onCheckedChange={(checked) => {
const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
handleEmailCheckbox(e, email.id);
}}
onClick={(e) => e.stopPropagation()}
className="ml-1"
/>
</div>
<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">