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/clients/PrefixesEditor.tsx

@@ -4,14 +4,13 @@ import { clientPrefixesPutMutation } from "@/lib/queries";
 import type { ClientPrefix, Group } from "@/lib/types";
 import { firstProblem, initPrefixEditor, isDirty, prefixEditorReducer, toInputs } from "./prefixEditor";
 import InlineError from "@/lib/InlineError";
+import { buttonClass, focusRing, primaryButtonClass, smallInputClass } from "@/ui/classes";
 
 interface Props {
 	prefixes: ClientPrefix[];
 	groups: Group[];
 }
 
-const inputClass = "rounded border border-zinc-300 bg-white px-2 py-1.5 text-sm dark:border-zinc-700 dark:bg-zinc-900";
-
 export default function PrefixesEditor({ prefixes, groups }: Props) {
 	const queryClient = useQueryClient();
 	const mutation = useMutation(clientPrefixesPutMutation(queryClient));
@@ -50,7 +49,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 								onChange={(event) =>
 									dispatch({ type: "edit", index, patch: { prefix: event.target.value } })
 								}
-								className={`${inputClass} w-52`}
+								className={`${smallInputClass} w-52`}
 							/>
 							<select
 								aria-label={`Group for prefix ${index + 1}`}
@@ -58,7 +57,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 								onChange={(event) =>
 									dispatch({ type: "edit", index, patch: { group_id: Number(event.target.value) } })
 								}
-								className={inputClass}
+								className={smallInputClass}
 							>
 								{groups.map((group) => (
 									<option key={group.id} value={String(group.id)}>
@@ -75,12 +74,12 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 								onChange={(event) =>
 									dispatch({ type: "edit", index, patch: { priority: event.target.value } })
 								}
-								className={`${inputClass} w-20`}
+								className={`${smallInputClass} w-20`}
 							/>
 							<button
 								type="button"
 								onClick={() => dispatch({ type: "remove", index })}
-								className="rounded border border-zinc-300 px-2 py-1.5 text-sm text-red-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700 dark:text-red-400"
+								className={`rounded border border-zinc-300 px-2 py-1.5 text-sm text-red-700 ${focusRing} dark:border-zinc-700 dark:text-red-400`}
 							>
 								Remove
 							</button>
@@ -98,7 +97,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 				<button
 					type="button"
 					onClick={() => dispatch({ type: "add", groupId: defaultGroupId })}
-					className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
+					className={buttonClass}
 				>
 					Add prefix
 				</button>
@@ -106,7 +105,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 					type="button"
 					onClick={save}
 					disabled={!dirty || mutation.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}
 				>
 					Save prefixes
 				</button>
@@ -117,7 +116,7 @@ export default function PrefixesEditor({ prefixes, groups }: Props) {
 							setValidation(null);
 							dispatch({ type: "reset", prefixes });
 						}}
-						className="rounded border border-zinc-300 px-3 py-1.5 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
+						className={buttonClass}
 					>
 						Discard changes
 					</button>