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/queries/QueryLogPage.tsx

@@ -5,11 +5,10 @@ import { formatMicros, formatTime } from "@/lib/format";
 import { queriesInfiniteQuery } from "@/lib/queries";
 import type { QueriesFilter, QueryRow } from "@/lib/types";
 import { qtypeName } from "./qtype";
+import { buttonClass, smallInputClass, tableWrapClass } from "@/ui/classes";
 
-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 buttonClass =
-	"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";
+const filterInputClass = `mt-1 w-full ${smallInputClass}`;
+const toolbarButtonClass = `${buttonClass} font-medium`;
 
 function errorMessage(error: unknown): string {
 	return error instanceof Error ? error.message : String(error);
@@ -134,7 +133,7 @@ export default function QueryLogPage() {
 						type="text"
 						value={domain}
 						onChange={(event) => setDomain(event.target.value)}
-						className={inputClass}
+						className={filterInputClass}
 					/>
 				</label>
 				<label className="block text-sm">
@@ -143,12 +142,16 @@ export default function QueryLogPage() {
 						type="text"
 						value={client}
 						onChange={(event) => setClient(event.target.value)}
-						className={inputClass}
+						className={filterInputClass}
 					/>
 				</label>
 				<label className="block text-sm">
 					Status
-					<select value={blocked} onChange={(event) => setBlocked(event.target.value)} className={inputClass}>
+					<select
+						value={blocked}
+						onChange={(event) => setBlocked(event.target.value)}
+						className={filterInputClass}
+					>
 						<option value="any">All</option>
 						<option value="blocked">Blocked only</option>
 						<option value="allowed">Allowed only</option>
@@ -160,7 +163,7 @@ export default function QueryLogPage() {
 						type="datetime-local"
 						value={since}
 						onChange={(event) => setSince(event.target.value)}
-						className={inputClass}
+						className={filterInputClass}
 					/>
 				</label>
 				<label className="block text-sm">
@@ -169,14 +172,14 @@ export default function QueryLogPage() {
 						type="datetime-local"
 						value={until}
 						onChange={(event) => setUntil(event.target.value)}
-						className={inputClass}
+						className={filterInputClass}
 					/>
 				</label>
 				<div className="flex items-end gap-2 sm:col-span-2 lg:col-span-5">
-					<button type="submit" className={buttonClass}>
+					<button type="submit" className={toolbarButtonClass}>
 						Apply filters
 					</button>
-					<button type="button" onClick={clearFilters} className={buttonClass}>
+					<button type="button" onClick={clearFilters} className={toolbarButtonClass}>
 						Clear
 					</button>
 					{base.isFetching && (
@@ -197,7 +200,7 @@ export default function QueryLogPage() {
 				</p>
 			) : (
 				<>
-					<div className="mt-4 overflow-x-auto rounded border border-zinc-200 dark:border-zinc-800">
+					<div className={`${tableWrapClass} rounded border border-zinc-200 dark:border-zinc-800`}>
 						<table className="w-full text-sm">
 							<QueryTableHead />
 							<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
@@ -219,7 +222,7 @@ export default function QueryLogPage() {
 								type="button"
 								onClick={loadMore}
 								disabled={base.isFetchingNextPage || base.isPlaceholderData}
-								className={buttonClass}
+								className={toolbarButtonClass}
 							>
 								{base.isFetchingNextPage ? "Loading…" : "Load more"}
 							</button>