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/pause/PauseWidget.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { pauseMutation, pauseQuery } from "@/lib/queries";
 import InlineError from "@/lib/InlineError";
+import { buttonClass, insetFocusRing } from "@/ui/classes";
 
 const DURATIONS = [
 	{ label: "60 seconds", seconds: 60 },
@@ -34,8 +35,7 @@ function useNowSeconds(active: boolean): number {
 	return now;
 }
 
-const BUTTON_CLASS =
-	"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 disabled:text-zinc-400 dark:border-zinc-700 dark:disabled:text-zinc-600";
+const triggerButtonClass = `${buttonClass} disabled:text-zinc-400 dark:disabled:text-zinc-600`;
 
 export default function PauseWidget() {
 	const queryClient = useQueryClient();
@@ -52,7 +52,7 @@ export default function PauseWidget() {
 
 	if (data === undefined) {
 		return (
-			<button type="button" disabled className={BUTTON_CLASS}>
+			<button type="button" disabled className={triggerButtonClass}>
 				Pause
 			</button>
 		);
@@ -69,7 +69,7 @@ export default function PauseWidget() {
 						type="button"
 						onClick={() => mutation.mutate({ paused: false })}
 						disabled={mutation.isPending}
-						className={BUTTON_CLASS}
+						className={triggerButtonClass}
 					>
 						Resume
 					</button>
@@ -92,7 +92,7 @@ export default function PauseWidget() {
 				aria-controls="pause-menu"
 				onClick={() => setMenuOpen((open) => !open)}
 				disabled={mutation.isPending}
-				className={BUTTON_CLASS}
+				className={triggerButtonClass}
 			>
 				Pause
 			</button>
@@ -111,7 +111,7 @@ export default function PauseWidget() {
 									seconds === null ? { paused: true } : { paused: true, duration_seconds: seconds },
 								);
 							}}
-							className="px-3 py-1.5 text-left text-sm hover:bg-zinc-100 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 dark:hover:bg-zinc-800"
+							className={`px-3 py-1.5 text-left text-sm hover:bg-zinc-100 ${insetFocusRing} dark:hover:bg-zinc-800`}
 						>
 							{label}
 						</button>