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

web/src/shell/AppShell.tsx

@@ -6,6 +6,7 @@ import InlineError from "@/lib/InlineError";
 import { versionQuery } from "@/lib/queries";
 import PauseWidget from "../features/pause/PauseWidget";
 import RestartBanner from "../features/settings/RestartBanner";
+import { buttonClass, focusRing } from "@/ui/classes";
 
 const NAV_ITEMS = [
 	{ to: "/", label: "Dashboard" },
@@ -38,7 +39,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 							className:
 								"text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-100",
 						}}
-						className="block rounded px-3 py-1.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+						className={`block rounded px-3 py-1.5 ${focusRing}`}
 					>
 						{item.label}
 					</Link>
@@ -73,7 +74,7 @@ function LogoutButton() {
 						(logoutError: unknown) => setError(logoutError),
 					);
 				}}
-				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}
 			>
 				Log out
 			</button>
@@ -97,7 +98,7 @@ export default function AppShell() {
 				<header className="flex items-center gap-3 border-b border-zinc-200 px-4 py-2 dark:border-zinc-800">
 					<button
 						type="button"
-						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 md:hidden dark:border-zinc-700"
+						className={`${buttonClass} md:hidden`}
 						aria-expanded={drawerOpen}
 						aria-controls="mobile-nav"
 						onClick={() => setDrawerOpen((open) => !open)}