milestone 18: collapse duplicated infrastructure into shared listener core, crud list helper, resource shells, transport race, name and line helpers, ui modules

2026-08-07 18:20:30 +02:00
parent c50c6d285a
commit 6f67940995
82 changed files with 3167 additions and 3114 deletions
@@ -6,10 +6,9 @@ import type { Client } from "@/lib/types";
 import ClientEditDialog from "./ClientEditDialog";
 import PrefixesEditor from "./PrefixesEditor";
 import InlineError from "@/lib/InlineError";
+import { smallButtonClass, tableWrapClass } from "@/ui/classes";

 const cellClass = "px-3 py-2";
-const buttonClass =
-	"rounded border border-zinc-300 px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700";

 export default function ClientsPage() {
 	const { data: clients } = useSuspenseQuery(clientsQuery());
@@ -29,7 +28,7 @@ export default function ClientsPage() {
 					nothing to create by hand.
 				</p>
 			) : (
-				<div className="mt-4 overflow-x-auto">
+				<div className={tableWrapClass}>
 					<table className="w-full min-w-[48rem] text-left text-sm">
 						<thead>
 							<tr className="border-b border-zinc-200 text-zinc-500 dark:border-zinc-700">
@@ -70,14 +69,14 @@ export default function ClientsPage() {
 														setConfirmingId(null);
 														deleteMutation.mutate(client.id);
 													}}
-													className={`${buttonClass} text-red-700 dark:text-red-400`}
+													className={`${smallButtonClass} text-red-700 dark:text-red-400`}
 												>
 													Confirm delete
 												</button>
 												<button
 													type="button"
 													onClick={() => setConfirmingId(null)}
-													className={buttonClass}
+													className={smallButtonClass}
 												>
 													Cancel
 												</button>
@@ -87,14 +86,14 @@ export default function ClientsPage() {
 												<button
 													type="button"
 													onClick={() => setEditing(client)}
-													className={buttonClass}
+													className={smallButtonClass}
 												>
 													Edit
 												</button>
 												<button
 													type="button"
 													onClick={() => setConfirmingId(client.id)}
-													className={`${buttonClass} text-red-700 dark:text-red-400`}
+													className={`${smallButtonClass} text-red-700 dark:text-red-400`}
 												>
 													Delete
 												</button>