66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
"use client";
|
|
import type { MailEnvelope } from "@/app/[lang]/dashboard/mail/page";
|
|
|
|
function timeAgo(dateStr: string): string {
|
|
const now = new Date();
|
|
const d = new Date(dateStr);
|
|
const diff = now.getTime() - d.getTime();
|
|
const mins = Math.floor(diff / 60000);
|
|
if (mins < 1) return "şimdi";
|
|
if (mins < 60) return `${mins}dk`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}sa`;
|
|
const days = Math.floor(hrs / 24);
|
|
if (days < 7) return `${days}g`;
|
|
return d.toLocaleDateString("tr-TR", { day: "numeric", month: "short" });
|
|
}
|
|
|
|
function senderName(msg: MailEnvelope): string {
|
|
const f = msg.from[0];
|
|
return f?.name || f?.address || "Bilinmeyen";
|
|
}
|
|
|
|
export default function MessageList({ messages, loading, selectedUid, onSelect, onDelete }: {
|
|
messages: MailEnvelope[];
|
|
loading: boolean;
|
|
selectedUid: number | null;
|
|
onSelect: (uid: number) => void;
|
|
onDelete: (uid: number) => void;
|
|
}) {
|
|
if (loading) {
|
|
return <div className="empty-state" style={{ padding: 40 }}><span className="spinner" style={{ width: 20, height: 20 }} /></div>;
|
|
}
|
|
|
|
if (messages.length === 0) {
|
|
return (
|
|
<div className="empty-state" style={{ padding: 40 }}>
|
|
<div style={{ fontSize: 13, color: "var(--text-muted)" }}>Bu klasörde mail yok</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="message-list-inner">
|
|
{messages.map((m) => (
|
|
<div
|
|
key={m.uid}
|
|
className={`message-row ${selectedUid === m.uid ? "selected" : ""} ${!m.seen ? "unread" : ""}`}
|
|
onClick={() => onSelect(m.uid)}
|
|
>
|
|
<div className="message-avatar">
|
|
{senderName(m)[0]?.toUpperCase() ?? "?"}
|
|
</div>
|
|
<div className="message-content">
|
|
<div className="message-top">
|
|
<span className="message-sender">{senderName(m)}</span>
|
|
<span className="message-time">{timeAgo(m.date)}</span>
|
|
</div>
|
|
<div className="message-subject">{m.subject}</div>
|
|
</div>
|
|
{m.hasAttachments && <span className="message-attach" title="Ek var">📎</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|