courrier formatting

This commit is contained in:
alma 2025-04-30 15:49:14 +02:00
parent e02ee396dc
commit d1a8b3f350

View File

@ -125,32 +125,42 @@ export default function EmailListItem({
className={cn(
'flex items-center gap-3 px-4 py-2 hover:bg-gray-50/80 cursor-pointer',
isActive ? 'bg-blue-50/50' : '',
!email.read ? 'bg-blue-50/20' : ''
!email.flags?.seen ? 'bg-blue-50/20' : ''
)}
onClick={onSelect}
>
<Checkbox
checked={isSelected}
onClick={onToggleSelect}
className="mt-0.5"
/>
<div
className="flex-shrink-0 pr-2"
onClick={(e) => {
e.stopPropagation();
}}
>
<Checkbox
checked={isSelected}
onClick={(e) => {
e.stopPropagation();
onToggleSelect(e);
}}
className="mt-0.5"
/>
</div>
<div className="flex-1 min-w-0">
<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'}`}>
<span className={`text-sm truncate ${!email.flags?.seen ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
{getSenderName()}
</span>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<span className="text-xs text-gray-500 whitespace-nowrap">
{formatDate(email.date)}
{formatDate(email.date.toString())}
</span>
<button
className="h-6 w-6 text-gray-400 hover:text-yellow-400"
onClick={onToggleStarred}
>
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
<Star className={`h-4 w-4 ${email.flags?.flagged ? 'fill-yellow-400 text-yellow-400' : ''}`} />
</button>
</div>
</div>