milestone 18: collapse duplicated infrastructure into shared listener core, crud list helper, resource shells, transport race, name and line helpers, ui modules

2026-08-07 18:20:30 +02:00
parent c50c6d285a
commit 6f67940995
82 changed files with 3167 additions and 3114 deletions
@@ -13,9 +13,15 @@ import {
 import type { Blocklist, BlocklistInput, SourceStatus } from "@/lib/types";
 import BlocklistForm from "./BlocklistForm";
 import SourceStatusSection from "./SourceStatusSection";
-
-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";
+import {
+	dangerLinkButtonClass,
+	focusRing,
+	linkButtonClass,
+	primaryButtonClass,
+	tableWrapClass,
+	tdClass,
+	thClass,
+} from "@/ui/classes";

 export default function BlocklistsPage() {
 	const queryClient = useQueryClient();
@@ -66,7 +72,7 @@ export default function BlocklistsPage() {
 					type="button"
 					onClick={() => updateNow.mutate()}
 					disabled={updateNow.isPending}
-					className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+					className={primaryButtonClass}
 				>
 					{updateNow.isPending ? "Updating…" : "Update now"}
 				</button>
@@ -81,18 +87,18 @@ export default function BlocklistsPage() {
 			{blocklists.length === 0 ? (
 				<p className="mt-4 text-zinc-500">No blocklist sources yet. Add one below.</p>
 			) : (
-				<div className="mt-4 overflow-x-auto">
+				<div className={tableWrapClass}>
 					<table className="w-full min-w-max border-collapse text-sm">
 						<thead>
 							<tr>
-								<th className={TH_CLASS}>Name</th>
-								<th className={TH_CLASS}>URL</th>
-								<th className={TH_CLASS}>Enabled</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 updated</th>
-								<th className={TH_CLASS}>
+								<th className={thClass}>Name</th>
+								<th className={thClass}>URL</th>
+								<th className={thClass}>Enabled</th>
+								<th className={thClass}>Domains</th>
+								<th className={thClass}>Wildcards</th>
+								<th className={thClass}>Skipped regex</th>
+								<th className={thClass}>Last updated</th>
+								<th className={thClass}>
 									<span className="sr-only">Actions</span>
 								</th>
 							</tr>
@@ -100,7 +106,7 @@ export default function BlocklistsPage() {
 						<tbody>
 							{blocklists.map((b) => (
 								<tr key={b.id}>
-									<td className={TD_CLASS}>
+									<td className={tdClass}>
 										<span className="font-medium">{b.name}</span>
 										{b.is_suggested && (
 											<span className="ml-2 rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
@@ -108,32 +114,33 @@ export default function BlocklistsPage() {
 											</span>
 										)}
 									</td>
-									<td className={TD_CLASS}>
+									<td className={tdClass}>
 										<span className="block max-w-72 truncate" title={b.url}>
 											{b.url}
 										</span>
 									</td>
-									<td className={TD_CLASS}>
+									<td className={tdClass}>
 										<input
 											type="checkbox"
 											aria-label={`${b.name} enabled`}
 											checked={b.enabled}
 											disabled={toggle.isPending}
 											onChange={() => toggleEnabled(b)}
+											className={focusRing}
 										/>
 									</td>
-									<td className={`${TD_CLASS} tabular-nums`}>{b.domain_count}</td>
-									<td className={`${TD_CLASS} tabular-nums`}>{b.wildcard_count}</td>
-									<td className={`${TD_CLASS} tabular-nums`}>{b.skipped_regex_count}</td>
-									<td className={TD_CLASS}>
+									<td className={`${tdClass} tabular-nums`}>{b.domain_count}</td>
+									<td className={`${tdClass} tabular-nums`}>{b.wildcard_count}</td>
+									<td className={`${tdClass} tabular-nums`}>{b.skipped_regex_count}</td>
+									<td className={tdClass}>
 										{b.last_updated === null ? "never" : formatTime(b.last_updated)}
 									</td>
-									<td className={TD_CLASS}>
+									<td className={tdClass}>
 										<div className="flex gap-3">
 											<button
 												type="button"
 												onClick={() => setEditing(b)}
-												className="text-sm font-medium text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:text-blue-400"
+												className={linkButtonClass}
 											>
 												Edit
 											</button>
@@ -141,7 +148,7 @@ export default function BlocklistsPage() {
 												type="button"
 												onClick={() => deleteBlocklist(b)}
 												disabled={remove.isPending}
-												className="text-sm font-medium text-red-600 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:text-red-400"
+												className={dangerLinkButtonClass}
 											>
 												Delete
 											</button>