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

Neah version mail design fix 6

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

83
app/mail/page.tsx
View File

@ -739,32 +739,32 @@ export default function MailPage() {
// 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 flex-col gap-2">
<div className="border-b border-gray-100">
{/* Main header row */}
<div className="flex items-center px-4 h-14">
<div className="flex items-center gap-3">
<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">
<Checkbox
checked={emails.length > 0 && selectedEmails.length === emails.length}
onCheckedChange={toggleSelectAll}
className="mt-0.5"
/>
<h2 className="text-base 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 ml-auto">
{emails.length} emails
</span>
</div>
<span className="text-sm text-gray-600 ml-3">
{emails.length} emails
</span>
{/* Bulk actions aligned to the right */}
{selectedEmails.length > 0 && (
<div className="flex items-center gap-2 px-1">
<div className="flex items-center gap-1 ml-auto">
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8"
onClick={() => {
const someUnread = emails.some(email =>
selectedEmails.includes(email.id.toString()) && !email.read
@ -772,29 +772,26 @@ export default function MailPage() {
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'
}
<EyeOff className="h-4 w-4" />
<span className="ml-2 text-sm">Mark as Read</span>
</Button>
<Button
variant="ghost"
size="sm"
className="text-gray-600 hover:text-gray-900"
className="text-gray-600 hover:text-gray-900 px-2 py-1 h-8"
onClick={() => handleBulkAction('archive')}
>
<Archive className="h-4 w-4 mr-2" />
Archive
<Archive className="h-4 w-4" />
<span className="ml-2 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 px-2 py-1 h-8"
onClick={() => handleBulkAction('delete')}
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
<Trash2 className="h-4 w-4" />
<span className="ml-2 text-sm">Delete</span>
</Button>
</div>
)}
@ -824,36 +821,28 @@ export default function MailPage() {
const renderEmailListItem = (email: Email) => (
<div
key={email.id}
className={`flex items-start gap-3 p-2 hover:bg-gray-50/80 cursor-pointer ${
className={`flex items-center gap-3 px-4 py-2 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 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>
<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-0.5"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2 mb-1">
<div className="flex items-center justify-between gap-2">
<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 : (
(() => {
// Check if email is in format "name <email>"
const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/);
if (fromMatch) {
// If we have both name and email, return just the name
return fromMatch[1].trim();
}
// If it's just an email address, return the full email
return email.from;
return fromMatch ? fromMatch[1].trim() : email.from;
})()
)}
</span>