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/ClientEditDialog.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { clientUpdateMutation } from "@/lib/queries";
 import type { Client, Group } from "@/lib/types";
 import InlineError from "@/lib/InlineError";
+import { buttonClass, primaryButtonClass, smallInputClass } from "@/ui/classes";
 
 interface Props {
 	client: Client;
@@ -10,8 +11,7 @@ interface Props {
 	onClose: () => void;
 }
 
-const inputClass =
-	"mt-1 w-full rounded border border-zinc-300 bg-white px-2 py-1.5 text-sm dark:border-zinc-700 dark:bg-zinc-900";
+const dialogInputClass = `mt-1 w-full ${smallInputClass}`;
 
 export default function ClientEditDialog({ client, groups, onClose }: Props) {
 	const queryClient = useQueryClient();
@@ -44,7 +44,7 @@ export default function ClientEditDialog({ client, groups, onClose }: Props) {
 							type="text"
 							value={name}
 							onChange={(event) => setName(event.target.value)}
-							className={inputClass}
+							className={dialogInputClass}
 							autoFocus
 						/>
 					</label>
@@ -53,7 +53,7 @@ export default function ClientEditDialog({ client, groups, onClose }: Props) {
 						<select
 							value={String(groupId)}
 							onChange={(event) => setGroupId(Number(event.target.value))}
-							className={inputClass}
+							className={dialogInputClass}
 						>
 							{groups.map((group) => (
 								<option key={group.id} value={String(group.id)}>
@@ -64,18 +64,10 @@ export default function ClientEditDialog({ client, groups, onClose }: Props) {
 					</label>
 					<InlineError error={mutation.error} />
 					<div className="flex justify-end gap-2">
-						<button
-							type="button"
-							onClick={onClose}
-							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"
-						>
+						<button type="button" onClick={onClose} className={buttonClass}>
 							Cancel
 						</button>
-						<button
-							type="submit"
-							disabled={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"
-						>
+						<button type="submit" disabled={mutation.isPending} className={primaryButtonClass}>
 							Save
 						</button>
 					</div>