milestone 9: react spa admin ui, frontend ci and embedded dist

2026-08-02 13:04:09 +02:00
parent 5253c47303
commit 617cc966a2
82 changed files with 11833 additions and 17 deletions
@@ -0,0 +1,81 @@
+import { formatTime } from "@/lib/format";
+import type { SourceStatus } from "@/lib/types";
+
+const TH_CLASS = "border-b border-zinc-300 px-3 py-2 text-left font-medium dark:border-zinc-700";
+const TD_CLASS = "border-b border-zinc-200 px-3 py-2 dark:border-zinc-800";
+
+function formatAttempt(unixSeconds: number): string {
+	return unixSeconds === 0 ? "never" : formatTime(unixSeconds);
+}
+
+interface SourceStatusSectionProps {
+	sources: SourceStatus[] | undefined;
+	namesById: ReadonlyMap<number, string>;
+}
+
+export default function SourceStatusSection({ sources, namesById }: SourceStatusSectionProps) {
+	return (
+		<section className="mt-8">
+			<h2 className="text-lg font-medium">Source status</h2>
+			{sources === undefined ? (
+				<p className="mt-2 text-zinc-500">
+					No status snapshot yet — run “Update now” to fetch status for every enabled source.
+				</p>
+			) : sources.length === 0 ? (
+				<p className="mt-2 text-zinc-500">The last update ran against no enabled sources.</p>
+			) : (
+				<div className="mt-2 overflow-x-auto">
+					<table className="w-full min-w-max border-collapse text-sm">
+						<thead>
+							<tr>
+								<th className={TH_CLASS}>Source</th>
+								<th className={TH_CLASS}>State</th>
+								<th className={TH_CLASS}>Last attempt</th>
+								<th className={TH_CLASS}>Last success</th>
+								<th className={TH_CLASS}>Domains</th>
+								<th className={TH_CLASS}>Wildcards</th>
+								<th className={TH_CLASS}>Skipped regex</th>
+								<th className={TH_CLASS}>Last error</th>
+							</tr>
+						</thead>
+						<tbody>
+							{sources.map((source) => (
+								<tr key={source.id}>
+									<td className={TD_CLASS}>
+										<span className="font-medium">{namesById.get(source.id) ?? source.url}</span>
+										<span className="mt-0.5 block max-w-64 truncate text-xs text-zinc-500">
+											{source.url}
+										</span>
+									</td>
+									<td className={TD_CLASS}>
+										<span
+											className={
+												source.loaded
+													? "text-green-700 dark:text-green-400"
+													: "text-red-600 dark:text-red-400"
+											}
+										>
+											{source.state}
+										</span>
+									</td>
+									<td className={TD_CLASS}>{formatAttempt(source.last_attempt)}</td>
+									<td className={TD_CLASS}>{formatAttempt(source.last_success)}</td>
+									<td className={`${TD_CLASS} tabular-nums`}>{source.domains}</td>
+									<td className={`${TD_CLASS} tabular-nums`}>{source.wildcards}</td>
+									<td className={`${TD_CLASS} tabular-nums`}>{source.skipped_regex}</td>
+									<td className={TD_CLASS}>
+										{source.last_error === "" ? (
+											<span className="text-zinc-400">—</span>
+										) : (
+											<span className="text-red-600 dark:text-red-400">{source.last_error}</span>
+										)}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</section>
+	);
+}