Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 25x 13x 25x 13x 12x 10x | import type { Folder } from "../../api";
import { api } from "../../api";
import { useAsync } from "../../hooks";
import { formatRelative } from "./FormField";
export function SyncStatusPanel({ connectorId }: { connectorId: number }) {
const { data: folders, loading } = useAsync(
() => api.connectors.inbound.folders(connectorId),
[connectorId],
);
if (loading) {
return (
<div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-400">
Loading sync status...
</div>
);
}
return (
<div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-500 dark:text-gray-400">
<th className="pb-1 font-medium">Folder</th>
<th className="pb-1 font-medium text-right">Messages</th>
<th className="pb-1 font-medium text-right">Unread</th>
<th className="pb-1 font-medium text-right">Last Synced</th>
</tr>
</thead>
<tbody>
{(folders ?? []).map((f: Folder) => (
<tr
key={f.id}
className="text-gray-700 dark:text-gray-300 border-t border-gray-100 dark:border-gray-800"
>
<td className="py-1 truncate max-w-[180px]" title={f.path}>
{f.name}
</td>
<td className="py-1 text-right">{f.message_count}</td>
<td className="py-1 text-right">{f.unread_count}</td>
<td className="py-1 text-right text-gray-400">
{f.last_synced_at ? formatRelative(f.last_synced_at) : "Never"}
</td>
</tr>
))}
{(folders ?? []).length === 0 && (
<tr>
<td colSpan={4} className="py-2 text-center text-gray-400">
No folders synced yet
</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
|