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/settings/RestartBanner.tsx

@@ -1,4 +1,5 @@
 import { dismissRestartBanner, useRestartBanner } from "./restartBanner";
+import { focusRing } from "@/ui/classes";
 
 export default function RestartBanner() {
 	const raised = useRestartBanner();
@@ -12,7 +13,7 @@ export default function RestartBanner() {
 			<button
 				type="button"
 				onClick={dismissRestartBanner}
-				className="rounded border border-amber-400 px-2 py-1 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-amber-700"
+				className={`rounded border border-amber-400 px-2 py-1 text-xs ${focusRing} dark:border-amber-700`}
 			>
 				Dismiss
 			</button>

web/src/features/settings/SettingsPage.tsx

@@ -5,6 +5,7 @@ import { settingsPutMutation, settingsQuery } from "@/lib/queries";
 import { buildSettingsPatch } from "@/lib/settingsDiff";
 import type { Settings, SettingsPatch } from "@/lib/types";
 import { raiseRestartBanner } from "./restartBanner";
+import { focusRing } from "@/ui/classes";
 
 /** True when the patch touches anything besides the write-only `web.password` (ruling 11). */
 export function patchRequiresRestart(patch: SettingsPatch): boolean {
@@ -120,8 +121,7 @@ const SECTIONS: readonly SectionDef[] = [
 ];
 
 const LABEL_CLASS = "text-sm text-zinc-700 dark:text-zinc-300";
-const INPUT_CLASS =
-	"rounded border border-zinc-300 bg-white px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700 dark:bg-zinc-900";
+const fieldInputClass = `rounded border border-zinc-300 bg-white px-2 py-1 text-sm ${focusRing} dark:border-zinc-700 dark:bg-zinc-900`;
 
 function FieldRow({
 	section,
@@ -143,7 +143,7 @@ function FieldRow({
 					type="checkbox"
 					checked={value as boolean}
 					onChange={(e) => onChange(e.target.checked)}
-					className="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+					className={focusRing}
 				/>
 				<label htmlFor={id} className={LABEL_CLASS}>
 					{def.key}
@@ -161,7 +161,7 @@ function FieldRow({
 					id={id}
 					value={value as string}
 					onChange={(e) => onChange(e.target.value)}
-					className={INPUT_CLASS}
+					className={fieldInputClass}
 				>
 					{def.kind.map((option) => (
 						<option key={option} value={option}>
@@ -184,7 +184,7 @@ function FieldRow({
 					type="number"
 					value={Number.isNaN(numeric) ? "" : numeric}
 					onChange={(e) => onChange(e.target.valueAsNumber)}
-					className={INPUT_CLASS}
+					className={fieldInputClass}
 				/>
 			</div>
 		);
@@ -199,7 +199,7 @@ function FieldRow({
 				type="text"
 				value={value as string}
 				onChange={(e) => onChange(e.target.value)}
-				className={INPUT_CLASS}
+				className={fieldInputClass}
 			/>
 		</div>
 	);
@@ -280,7 +280,7 @@ export default function SettingsPage() {
 												autoComplete="new-password"
 												value={password}
 												onChange={(e) => setPassword(e.target.value)}
-												className={INPUT_CLASS}
+												className={fieldInputClass}
 											/>
 										</div>
 										<div className="flex flex-col gap-1">
@@ -293,7 +293,7 @@ export default function SettingsPage() {
 												autoComplete="new-password"
 												value={confirm}
 												onChange={(e) => setConfirm(e.target.value)}
-												className={INPUT_CLASS}
+												className={fieldInputClass}
 											/>
 										</div>
 										{password !== "" && (
@@ -316,7 +316,7 @@ export default function SettingsPage() {
 						<button
 							type="submit"
 							disabled={saveDisabled}
-							className="rounded bg-blue-600 px-4 py-1.5 text-sm font-medium text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:bg-zinc-300 disabled:text-zinc-500 dark:disabled:bg-zinc-800"
+							className={`rounded bg-blue-600 px-4 py-1.5 text-sm font-medium text-white ${focusRing} disabled:bg-zinc-300 disabled:text-zinc-500 dark:disabled:bg-zinc-800`}
 						>
 							{mutation.isPending ? "Saving…" : "Save"}
 						</button>