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/dashboard/DashboardPage.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { ApiError } from "@/lib/api";
 import { healthQuery, statsQuery, timeseriesQuery, upstreamHealthQuery } from "@/lib/queries";
 import type { Period } from "@/lib/types";
+import InlineError from "@/lib/InlineError";
+import { focusRing } from "@/ui/classes";
 import DiskCard from "./DiskCard";
 import HealthBanners from "./HealthBanners";
 import StatCards from "./StatCards";
@@ -20,7 +21,7 @@ function PeriodPicker({ period, onChange }: { period: Period; onChange: (period:
 					type="button"
 					aria-pressed={option === period}
 					onClick={() => onChange(option)}
-					className={`rounded px-2.5 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 ${
+					className={`rounded px-2.5 py-1 text-sm ${focusRing} ${
 						option === period
 							? "bg-zinc-200 font-medium text-zinc-900 dark:bg-zinc-700 dark:text-zinc-50"
 							: "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
@@ -33,18 +34,6 @@ function PeriodPicker({ period, onChange }: { period: Period; onChange: (period:
 	);
 }
 
-function InlineError({ error, onRetry }: { error: unknown; onRetry: () => void }) {
-	const message = error instanceof ApiError ? error.message : "request failed";
-	return (
-		<div className="rounded border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
-			Failed to load: {message}{" "}
-			<button type="button" onClick={onRetry} className="font-medium underline">
-				Retry
-			</button>
-		</div>
-	);
-}
-
 function Skeleton({ height }: { height: number }) {
 	return <div aria-hidden="true" className="animate-pulse rounded bg-zinc-200 dark:bg-zinc-800" style={{ height }} />;
 }