dfgdfg
This commit is contained in:
parent
9743292775
commit
4eddad76a7
|
|
@ -61,8 +61,8 @@ export default function Emails() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 p-4">
|
<div className="min-h-screen bg-gray-50 p-6">
|
||||||
<nav className="w-full mb-6 bg-white p-3 rounded shadow-sm border border-gray-100">
|
<nav className="w-full mb-8 bg-white p-4 rounded shadow-sm border border-gray-100">
|
||||||
<ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
|
<ol className="flex flex-wrap space-x-2 text-sm text-gray-500">
|
||||||
<li><Link href="/" className="hover:text-blue-600">Home</Link></li>
|
<li><Link href="/" className="hover:text-blue-600">Home</Link></li>
|
||||||
<li className="mx-1">/</li>
|
<li className="mx-1">/</li>
|
||||||
|
|
@ -72,102 +72,88 @@ export default function Emails() {
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<h1 className="text-2xl font-bold mb-6 text-gray-800 break-all">
|
<h1 className="text-2xl font-bold mb-8 text-gray-800 break-all">
|
||||||
{mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
|
{mailbox} <span className="text-gray-400 font-normal text-lg">in {bucket}</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div className="w-full bg-white rounded shadow-sm border border-gray-200 overflow-hidden">
|
{/* Container mit Padding für den "Rahmen um die Tabelle" */}
|
||||||
<div className="overflow-x-auto">
|
<div className="w-full bg-white rounded shadow-sm border border-gray-200 p-2 overflow-hidden">
|
||||||
<table className="w-full text-left border-collapse">
|
|
||||||
<thead className="bg-gray-100 border-b border-gray-200">
|
{/* table-fixed: Zwingt die Tabelle, die definierten Breiten einzuhalten (kein Überlauf).
|
||||||
|
border-separate + border-spacing-x-2: Erzeugt die "Gaps" zwischen den Spalten.
|
||||||
|
*/}
|
||||||
|
<table className="w-full table-fixed border-separate border-spacing-x-2 border-spacing-y-1 text-left">
|
||||||
|
<thead className="text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
<tr>
|
||||||
|
{/* SUBJECT: Keine Breite definiert (w-auto) -> nimmt den RESTLICHEN Platz */}
|
||||||
|
<th className="pb-3 border-b border-gray-200">Subject</th>
|
||||||
|
|
||||||
|
{/* FESTE BREITEN für den Rest, damit sie nicht zerdrückt werden */}
|
||||||
|
<th className="pb-3 border-b border-gray-200 w-28">Date</th>
|
||||||
|
<th className="pb-3 border-b border-gray-200 w-[28rem]">Key</th> {/* Breit genug für lange Keys */}
|
||||||
|
<th className="pb-3 border-b border-gray-200 text-center w-12">Proc.</th>
|
||||||
|
<th className="pb-3 border-b border-gray-200 w-32">Proc. By</th>
|
||||||
|
<th className="pb-3 border-b border-gray-200 w-32">Queued</th>
|
||||||
|
<th className="pb-3 border-b border-gray-200 w-24">Status</th>
|
||||||
|
<th className="pb-3 border-b border-gray-200 text-right w-16">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="text-sm">
|
||||||
|
{emails.length === 0 ? (
|
||||||
<tr>
|
<tr>
|
||||||
{/* SUBJECT: Bekommt keine Breite, damit es den Rest nimmt */}
|
<td colSpan={8} className="py-8 text-center text-gray-500">No emails found</td>
|
||||||
<th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
|
||||||
Subject
|
|
||||||
</th>
|
|
||||||
|
|
||||||
{/* ALLE ANDEREN: w-px + whitespace-nowrap sorgt für "Fit to Content" */}
|
|
||||||
<th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Date
|
|
||||||
</th>
|
|
||||||
<th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Key
|
|
||||||
</th>
|
|
||||||
<th className="py-3 px-3 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Proc.
|
|
||||||
</th>
|
|
||||||
<th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Proc. By
|
|
||||||
</th>
|
|
||||||
<th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Queued
|
|
||||||
</th>
|
|
||||||
<th className="py-3 px-3 text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Status
|
|
||||||
</th>
|
|
||||||
<th className="py-3 px-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap w-px">
|
|
||||||
Action
|
|
||||||
</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
) : emails.map((e: Email) => (
|
||||||
<tbody className="divide-y divide-gray-100 text-sm">
|
<tr key={e.key} className="hover:bg-blue-50 transition-colors group">
|
||||||
{emails.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={8} className="px-4 py-8 text-center text-gray-500">No emails found</td>
|
|
||||||
</tr>
|
|
||||||
) : emails.map((e: Email) => (
|
|
||||||
<tr key={e.key} className="hover:bg-blue-50 transition-colors">
|
|
||||||
|
|
||||||
{/* TRICK FÜR SUBJECT:
|
{/* 1. Subject: truncate sorgt für "..." am Ende, da die Tabellenbreite fix ist */}
|
||||||
max-w-0 ist entscheidend! In einer Tabelle erlaubt es dem Browser,
|
<td className="py-2 text-gray-900 truncate" title={e.subject}>
|
||||||
die Breite trotzdem zu berechnen (Restplatz), aber "truncate" zu aktivieren,
|
<div className="truncate">{e.subject}</div>
|
||||||
wenn der Inhalt diesen Restplatz sprengt.
|
</td>
|
||||||
*/}
|
|
||||||
<td className="py-2 px-3 text-gray-900 w-full max-w-0 truncate" title={e.subject}>
|
|
||||||
{e.subject}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td className="py-2 px-3 whitespace-nowrap text-gray-500 text-xs">
|
<td className="py-2 text-gray-500 text-xs whitespace-nowrap">
|
||||||
{formatDate(e.date)}
|
{formatDate(e.date)}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{/* Key: Monospace, volle Breite durch whitespace-nowrap garantiert */}
|
{/* Key: Monospace für exakte Breite, text-xs damit er in die 28rem passt */}
|
||||||
<td className="py-2 px-3 whitespace-nowrap font-mono text-xs text-gray-600 select-all">
|
<td className="py-2 font-mono text-xs text-gray-600 select-all truncate" title={e.key}>
|
||||||
{e.key}
|
{e.key}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td className="py-2 px-3 whitespace-nowrap text-center">
|
<td className="py-2 text-center align-middle">
|
||||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${e.processed === 'true' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>
|
{/* Kleinerer Badge */}
|
||||||
{e.processed === 'true' ? 'Y' : 'N'}
|
<span className={`inline-block w-4 h-4 rounded-full ${e.processed === 'true' ? 'bg-green-400' : 'bg-gray-300'}`} title={e.processed === 'true' ? 'Processed' : 'Not processed'}></span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="py-2 text-gray-500 text-xs truncate" title={e.processedBy || ''}>
|
||||||
|
{e.processedBy ? e.processedBy.split('@')[0] : '-'}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="py-2 text-gray-500 text-xs truncate" title={e.queuedTo || ''}>
|
||||||
|
{e.queuedTo || '-'}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="py-2 whitespace-nowrap">
|
||||||
|
{e.status ? (
|
||||||
|
<span className={`text-xs font-medium ${
|
||||||
|
e.status === 'delivered' ? 'text-green-600' :
|
||||||
|
e.status === 'failed' ? 'text-red-600' :
|
||||||
|
'text-gray-500'
|
||||||
|
}`}>
|
||||||
|
{e.status}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
) : <span className="text-gray-300">-</span>}
|
||||||
|
</td>
|
||||||
|
|
||||||
<td className="py-2 px-3 whitespace-nowrap text-gray-500 text-xs">
|
<td className="py-2 text-right font-medium">
|
||||||
{e.processedBy ? e.processedBy.split('@')[0] : '-'}
|
<Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 underline decoration-blue-200 hover:decoration-blue-800">
|
||||||
</td>
|
View
|
||||||
|
</Link>
|
||||||
<td className="py-2 px-3 whitespace-nowrap text-gray-500 text-xs">
|
</td>
|
||||||
{e.queuedTo || '-'}
|
</tr>
|
||||||
</td>
|
))}
|
||||||
|
</tbody>
|
||||||
<td className="py-2 px-3 whitespace-nowrap">
|
</table>
|
||||||
{e.status ? (
|
|
||||||
<span className={`text-xs ${e.status === 'delivered' ? 'text-green-600' : e.status === 'failed' ? 'text-red-600' : 'text-gray-500'}`}>
|
|
||||||
{e.status}
|
|
||||||
</span>
|
|
||||||
) : '-'}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td className="py-2 px-3 whitespace-nowrap text-right font-medium">
|
|
||||||
<Link href={`/email?bucket=${bucket}&key=${e.key}&mailbox=${encodeURIComponent(mailbox || '')}`} className="text-blue-600 hover:text-blue-800 hover:underline">
|
|
||||||
View
|
|
||||||
</Link>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue