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

Neah version mail design fix 1

Browse Source
This commit is contained in:
alma 2025-04-16 18:12:21 +02:00
parent 4c4e3949cc
commit a700adf8bf
1 changed files with 47 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/mail/page.tsx
View File

@ -1055,16 +1055,14 @@ export default function MailPage() {
{/* Email list header */} {/* Email list header */}
<div className="p-4 border-b border-gray-100"> <div className="p-4 border-b border-gray-100">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-4"> <h2 className="text-xl font-semibold text-gray-900">
<h2 className="text-lg font-semibold text-gray-800"> {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)} </h2>
</h2> <span className="text-sm text-gray-500">
</div>
<div className="text-sm text-gray-500">
{emails.length} emails {emails.length} emails
</div> </span>
</div> </div>
</div> </div>
@ -1080,77 +1078,60 @@ export default function MailPage() {
) : emails.length === 0 ? ( ) : emails.length === 0 ? (
<div className="flex flex-col items-center justify-center h-64"> <div className="flex flex-col items-center justify-center h-64">
<Mail className="h-8 w-8 text-gray-400 mb-2" /> <Mail className="h-8 w-8 text-gray-400 mb-2" />
<p className="text-gray-500 text-sm"> <p className="text-gray-500 text-sm">No emails in this folder</p>
{currentView === 'INBOX' && 'No emails in inbox'}
{currentView === 'starred' && 'No starred emails'}
{currentView === 'Sent' && 'No sent emails'}
{currentView === 'Trash' && 'No emails in trash'}
{currentView === 'Drafts' && 'No drafts'}
{currentView === 'Spam' && 'No spam emails'}
{(currentView === 'Archives' || currentView === 'Archive') && 'No archived emails'}
</p>
</div> </div>
) : ( ) : (
<div className="divide-y divide-gray-100"> <div className="divide-y divide-gray-100">
{sortedEmails.map((email) => ( {sortedEmails.map((email) => (
<div <div
key={email.id} key={email.id}
className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${ className={`flex items-start gap-3 p-3 hover:bg-gray-50/80 cursor-pointer ${
selectedEmail?.id === email.id ? 'bg-blue-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 justify-between mb-1"> <Checkbox
<div className="flex items-center gap-3"> checked={selectedEmails.includes(email.id.toString())}
<Checkbox onClick={(e) => e.stopPropagation()}
checked={selectedEmails.includes(email.id.toString())} onCheckedChange={(checked) => {
onClick={(e) => e.stopPropagation()} if (checked) {
onCheckedChange={(checked) => { setSelectedEmails([...selectedEmails, email.id.toString()]);
if (checked) { } else {
setSelectedEmails([...selectedEmails, email.id.toString()]); setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
} else { }
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString())); }}
} className="mt-1"
}} />
/> <div className="flex-1 min-w-0">
<span className="text-sm font-medium text-gray-900"> <div className="flex items-center justify-between gap-2 mb-1">
{currentView === 'Sent' ? email.to : (email.fromName || email.from)} <div className="flex items-center gap-2 min-w-0">
</span> <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
</div> {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
<div className="flex items-center gap-2">
<span className="text-xs text-gray-500">
{formatDate(email.date)}
</span>
{/* Show folder badge if it doesn't match current view */}
{email.folder !== currentView && currentView === 'starred' && (
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
{email.folder}
</span> </span>
)} </div>
<Button <div className="flex items-center gap-2 flex-shrink-0">
variant="ghost" <span className="text-xs text-gray-500 whitespace-nowrap">
size="sm" {formatDate(email.date)}
className="text-gray-400 hover:text-yellow-400" </span>
onClick={(e) => toggleStarred(email.id, e)} <Button
> variant="ghost"
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} /> size="icon"
</Button> className="h-6 w-6 text-gray-400 hover:text-yellow-400"
onClick={(e) => toggleStarred(email.id, e)}
>
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</Button>
</div>
</div> </div>
</div> <h3 className={`text-sm mb-0.5 truncate ${!email.read ? 'font-medium text-gray-900' : 'text-gray-700'}`}>
<div className="ml-8">
<h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
{email.subject || '(No subject)'} {email.subject || '(No subject)'}
</h3> </h3>
<p className="text-xs text-gray-500 line-clamp-1"> <div className="flex items-center gap-2 text-xs text-gray-500">
{email.body.replace(/<[^>]*>/g, '').substring(0, 100)}... <span className="truncate">
</p> {email.folder === 'INBOX' && 'Folder: INBOX'}
</div> </span>
{/* Debug info - only in development */}
{process.env.NODE_ENV === 'development' && (
<div className="ml-8 mt-1 text-xs text-gray-400">
Folder: {email.folder}
</div> </div>
)} </div>
</div> </div>
))} ))}
{isLoadingMore && ( {isLoadingMore && (