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

widget courrier refactor

Browse Source
This commit is contained in:
alma 2026-01-15 23:39:06 +01:00
parent 60eb2efb20
commit 28a2866e13
1 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/email.tsx
View File

@ -34,7 +34,7 @@ export function Email() {
const [refreshing, setRefreshing] = useState(false);
const [error, setError] = useState<string | null>(null);
const [mailUrl, setMailUrl] = useState<string | null>(null);
const [accounts, setAccounts] = useState<Array<{ id: string; email: string }>>([]);
const [accounts, setAccounts] = useState<Array<{ id: string; email: string; color?: string }>>([]);
const [unreadCount, setUnreadCount] = useState<number>(0);
const [accountErrors, setAccountErrors] = useState<Record<string, string>>({});
@ -59,7 +59,8 @@ export function Email() {
if (data.accounts) {
setAccounts(data.accounts.map((acc: any) => ({
id: acc.id || acc.email,
email: acc.email
email: acc.email,
color: acc.color || '#0082c9' // Default color if not set
})));
}
}
@ -128,7 +129,7 @@ export function Email() {
}))
// Sort emails by date (most recent first)
.sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime())
.slice(0, 5); // Only show the first 5 emails
.slice(0, 33); // Show up to 33 emails
setEmails(transformedEmails);
setMailUrl('/courrier');
@ -249,24 +250,31 @@ export function Email() {
<p className="text-gray-500">Aucun email</p>
</div>
) : (
<div className="space-y-3">
{emails.map((email) => (
<div key={email.id} className="flex items-start gap-3 py-1 border-b border-gray-100 last:border-0">
<div className="pt-1">
{email.read ?
<MailOpen className="h-4 w-4 text-gray-400" /> :
<Mail className="h-4 w-4 text-blue-500" />
}
</div>
<div className="flex-1 min-w-0">
<div className="flex justify-between">
<p className="font-medium truncate" style={{maxWidth: '180px'}}>{email.fromName || email.from.split('@')[0]}</p>
<p className="text-xs text-gray-500">{formatDate(email.date)}</p>
<div className="space-y-3 max-h-[500px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
{emails.map((email) => {
// Find the account color for this email
const account = accounts.find(acc => acc.id === (email as any).accountId);
const accountColor = account?.color || '#0082c9';
return (
<div key={email.id} className="flex items-start gap-3 py-1 border-b border-gray-100 last:border-0">
<div className="pt-1 flex-shrink-0">
<div
className="w-3 h-3 rounded-full"
style={{ backgroundColor: accountColor }}
title={account?.email || 'Unknown account'}
/>
</div>
<div className="flex-1 min-w-0">
<div className="flex justify-between">
<p className="font-medium truncate" style={{maxWidth: '180px'}}>{email.fromName || email.from.split('@')[0]}</p>
<p className="text-xs text-gray-500">{formatDate(email.date)}</p>
</div>
<p className="text-sm text-gray-700 truncate">{email.subject}</p>
</div>
<p className="text-sm text-gray-700 truncate">{email.subject}</p>
</div>
</div>
))}
);
})}
{mailUrl && (
<div className="pt-2">