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

55
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 // Update the email list header with better aligned checkbox and bulk actions
const renderEmailListHeader = () => ( const renderEmailListHeader = () => (
<div className="p-4 border-b border-gray-100"> <div className="border-b border-gray-100">
<div className="flex flex-col gap-2"> {/* Main header row */}
<div className="flex items-center px-4 h-14">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex items-center h-[42px]"> {/* Match height with email list items */}
<Checkbox <Checkbox
checked={emails.length > 0 && selectedEmails.length === emails.length} checked={emails.length > 0 && selectedEmails.length === emails.length}
onCheckedChange={toggleSelectAll} onCheckedChange={toggleSelectAll}
className="ml-1" className="mt-0.5"
/> />
</div> <h2 className="text-base font-semibold text-gray-900">
<h2 className="text-xl font-semibold text-gray-900">
{currentView === 'INBOX' ? 'Inbox' : {currentView === 'INBOX' ? 'Inbox' :
currentView === 'starred' ? 'Starred' : currentView === 'starred' ? 'Starred' :
currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()} currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
</h2> </h2>
<span className="text-sm text-gray-500 ml-auto"> </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 */}
{selectedEmails.length > 0 && ( {selectedEmails.length > 0 && (
<div className="flex items-center gap-2 px-1"> <div className="flex items-center gap-1 ml-auto">
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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={() => { onClick={() => {
const someUnread = emails.some(email => const someUnread = emails.some(email =>
selectedEmails.includes(email.id.toString()) && !email.read selectedEmails.includes(email.id.toString()) && !email.read
@ -772,29 +772,26 @@ export default function MailPage() {
handleBulkAction(someUnread ? 'mark-read' : 'mark-unread'); handleBulkAction(someUnread ? 'mark-read' : 'mark-unread');
}} }}
> >
<EyeOff className="h-4 w-4 mr-2" /> <EyeOff className="h-4 w-4" />
{emails.some(email => selectedEmails.includes(email.id.toString()) && !email.read) <span className="ml-2 text-sm">Mark as Read</span>
? 'Mark as Read'
: 'Mark as Unread'
}
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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')} onClick={() => handleBulkAction('archive')}
> >
<Archive className="h-4 w-4 mr-2" /> <Archive className="h-4 w-4" />
Archive <span className="ml-2 text-sm">Archive</span>
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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')} onClick={() => handleBulkAction('delete')}
> >
<Trash2 className="h-4 w-4 mr-2" /> <Trash2 className="h-4 w-4" />
Delete <span className="ml-2 text-sm">Delete</span>
</Button> </Button>
</div> </div>
)} )}
@ -824,12 +821,11 @@ export default function MailPage() {
const renderEmailListItem = (email: Email) => ( const renderEmailListItem = (email: Email) => (
<div <div
key={email.id} 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' : '' selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
} ${!email.read ? 'bg-blue-50/20' : ''}`} } ${!email.read ? 'bg-blue-50/20' : ''}`}
onClick={() => handleEmailSelect(email.id)} onClick={() => handleEmailSelect(email.id)}
> >
<div className="flex items-center h-[42px]"> {/* Match height with header */}
<Checkbox <Checkbox
checked={selectedEmails.includes(email.id.toString())} checked={selectedEmails.includes(email.id.toString())}
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
@ -837,23 +833,16 @@ export default function MailPage() {
handleEmailCheckbox(e, email.id); handleEmailCheckbox(e, email.id);
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
className="ml-1" className="mt-0.5"
/> />
</div>
<div className="flex-1 min-w-0"> <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"> <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'}`}> <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
{currentView === 'Sent' ? email.to : ( {currentView === 'Sent' ? email.to : (
(() => { (() => {
// Check if email is in format "name <email>"
const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/); const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/);
if (fromMatch) { return fromMatch ? fromMatch[1].trim() : email.from;
// 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;
})() })()
)} )}
</span> </span>