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,89 @@
+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";
+
+interface BlocklistFormProps {
+	initial?: Blocklist;
+	busy: boolean;
+	error: Error | null;
+	onSubmit: (input: BlocklistInput) => Promise<void>;
+	onCancel?: () => void;
+}
+
+export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel }: BlocklistFormProps) {
+	const [url, setUrl] = useState(initial?.url ?? "");
+	const [name, setName] = useState(initial?.name ?? "");
+	const [enabled, setEnabled] = useState(initial?.enabled ?? true);
+
+	async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		try {
+			await onSubmit({ url: url.trim(), name: name.trim(), enabled });
+			if (initial === undefined) {
+				setUrl("");
+				setName("");
+				setEnabled(true);
+			}
+		} catch {
+			// The page renders the mutation error inline below the form.
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className="mt-4 max-w-xl space-y-3">
+			<h2 className="text-lg font-medium">{initial === undefined ? "Add source" : `Edit ${initial.name}`}</h2>
+			<div>
+				<label htmlFor="blocklist-url" className="block text-sm font-medium">
+					URL
+				</label>
+				<input
+					id="blocklist-url"
+					type="url"
+					required
+					value={url}
+					onChange={(event) => setUrl(event.target.value)}
+					className={INPUT_CLASS}
+				/>
+			</div>
+			<div>
+				<label htmlFor="blocklist-name" className="block text-sm font-medium">
+					Name
+				</label>
+				<input
+					id="blocklist-name"
+					type="text"
+					required
+					value={name}
+					onChange={(event) => setName(event.target.value)}
+					className={INPUT_CLASS}
+				/>
+			</div>
+			<label className="flex items-center gap-2 text-sm font-medium">
+				<input type="checkbox" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />
+				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"
+				>
+					{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"
+					>
+						Cancel
+					</button>
+				)}
+			</div>
+			<InlineError error={error} />
+		</form>
+	);
+}