e42968ba78
Phase 1 of #2126. Six hooks move out of `clients/web/src/App.tsx`, taking its component body from 4,891 to 4,267 lines with no behavior change: - useThemeToggle — the light/dark toggle - useTabUiState — the nine per-screen `ui` objects, the active tab, the pinned-Protocol ids, and the session reset - useInspectorStores — the twelve state managers as one create/destroy lifecycle, their `core/react` hooks, and the pagination-mode selection - useExportActions — the eleven Clear / Export / Replay handlers - useProgressToasts — `notifications/progress` toasts - useTaskToasts — task-status toasts, the cancel confirmation, the taskId -> progress map, and the in-flight tool-call taskId ref Holding the stores in one slot collapses `setupClientForServer`'s and `onConfirmRemove`'s dependency arrays from twelve entries to two stable callbacks; `destroyStores` reads the live set through a ref mirror rather than the state it also writes. All six hooks are at 100% on all four coverage dimensions, no `v8 ignore` needed. Also refreshes the now-stale "~4.5k-line" description of App.tsx in AGENTS.md and the coverage `include` comment. Signed-off-by: cliffhall <cliff@futurescale.com>
19 lines
787 B
TypeScript
19 lines
787 B
TypeScript
import { useCallback } from "react";
|
|
import { useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
|
|
|
|
/**
|
|
* Light/dark toggle for the view header.
|
|
*
|
|
* Reads `useComputedColorScheme` rather than the stored preference, so "auto"
|
|
* resolves to the scheme the user is actually looking at — which is what makes
|
|
* a single toggle button flip the right way under the system default.
|
|
*/
|
|
export function useThemeToggle(): { onToggleTheme: () => void } {
|
|
const { setColorScheme } = useMantineColorScheme();
|
|
const computedColorScheme = useComputedColorScheme("light");
|
|
const isDark = computedColorScheme === "dark";
|
|
const onToggleTheme = useCallback(() => {
|
|
setColorScheme(isDark ? "light" : "dark");
|
|
}, [isDark, setColorScheme]);
|
|
return { onToggleTheme };
|
|
}
|