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/blocklists/BlocklistForm.tsx

@@ -1,9 +1,7 @@
 import { useState, type FormEvent } from "react";
 import InlineError from "@/lib/InlineError";
 import type { Blocklist, BlocklistInput } from "@/lib/types";
-
-const INPUT_CLASS =
-	"mt-1 w-full rounded border border-zinc-300 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700 dark:bg-zinc-900";
+import { buttonClass, focusRing, inputClass, primaryButtonClass } from "@/ui/classes";
 
 interface BlocklistFormProps {
 	initial?: Blocklist;
@@ -45,7 +43,7 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
 					required
 					value={url}
 					onChange={(event) => setUrl(event.target.value)}
-					className={INPUT_CLASS}
+					className={inputClass}
 				/>
 			</div>
 			<div>
@@ -58,27 +56,24 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
 					required
 					value={name}
 					onChange={(event) => setName(event.target.value)}
-					className={INPUT_CLASS}
+					className={inputClass}
 				/>
 			</div>
 			<label className="flex items-center gap-2 text-sm font-medium">
-				<input type="checkbox" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />
+				<input
+					type="checkbox"
+					checked={enabled}
+					onChange={(event) => setEnabled(event.target.checked)}
+					className={focusRing}
+				/>
 				Enabled
 			</label>
 			<div className="flex items-center gap-2">
-				<button
-					type="submit"
-					disabled={busy}
-					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"
-				>
+				<button type="submit" disabled={busy} className={primaryButtonClass}>
 					{initial === undefined ? "Add source" : "Save changes"}
 				</button>
 				{onCancel !== undefined && (
-					<button
-						type="button"
-						onClick={onCancel}
-						className="rounded border border-zinc-300 px-3 py-1.5 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
-					>
+					<button type="button" onClick={onCancel} className={`${buttonClass} font-medium`}>
 						Cancel
 					</button>
 				)}