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

web/src/features/upstreams/UpstreamsPage.tsx

@@ -5,9 +5,7 @@ import { upstreamCreateMutation, upstreamDeleteMutation, upstreamUpdateMutation,
 import type { Upstream, UpstreamInput } from "@/lib/types";
 import { raiseRestartBanner } from "../settings/restartBanner";
 import UpstreamForm from "./UpstreamForm";
-
-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, tableWrapClass, tdClass, thClass } from "@/ui/classes";
 
 export default function UpstreamsPage() {
 	const queryClient = useQueryClient();
@@ -59,15 +57,15 @@ export default function UpstreamsPage() {
 			{upstreams.length === 0 ? (
 				<p className="mt-4 text-zinc-500">No upstreams 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}>URL</th>
-								<th className={TH_CLASS}>Priority</th>
-								<th className={TH_CLASS}>Enabled</th>
-								<th className={TH_CLASS}>TLS name</th>
-								<th className={TH_CLASS}>
+								<th className={thClass}>URL</th>
+								<th className={thClass}>Priority</th>
+								<th className={thClass}>Enabled</th>
+								<th className={thClass}>TLS name</th>
+								<th className={thClass}>
 									<span className="sr-only">Actions</span>
 								</th>
 							</tr>
@@ -75,28 +73,29 @@ export default function UpstreamsPage() {
 						<tbody>
 							{upstreams.map((u) => (
 								<tr key={u.id}>
-									<td className={TD_CLASS}>
+									<td className={tdClass}>
 										<span className="block max-w-72 truncate font-medium" title={u.url}>
 											{u.url}
 										</span>
 									</td>
-									<td className={`${TD_CLASS} tabular-nums`}>{u.priority}</td>
-									<td className={TD_CLASS}>
+									<td className={`${tdClass} tabular-nums`}>{u.priority}</td>
+									<td className={tdClass}>
 										<input
 											type="checkbox"
 											aria-label={`${u.url} enabled`}
 											checked={u.enabled}
 											disabled={toggle.isPending}
 											onChange={() => toggleEnabled(u)}
+											className={focusRing}
 										/>
 									</td>
-									<td className={TD_CLASS}>{u.tls_name === "" ? "—" : u.tls_name}</td>
-									<td className={TD_CLASS}>
+									<td className={tdClass}>{u.tls_name === "" ? "—" : u.tls_name}</td>
+									<td className={tdClass}>
 										<div className="flex gap-3">
 											<button
 												type="button"
 												onClick={() => setEditing(u)}
-												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>
@@ -104,7 +103,7 @@ export default function UpstreamsPage() {
 												type="button"
 												onClick={() => deleteUpstream(u)}
 												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>