Files
silo-server/web/src/hooks/useOverlayPrefs.ts
T

59 lines
1.7 KiB
TypeScript

import { useMemo, useCallback } from "react";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/api/client";
import { useSetting, useSetSetting } from "@/hooks/queries/settings";
import { settingsKeys } from "@/hooks/queries/keys";
import {
parseOverlayPrefs,
serializeOverlayPrefs,
type CardOverlayPrefs,
} from "@/lib/overlays";
const SETTING_KEY = "card_overlays";
interface OverlayConfig {
enabled: boolean;
defaults?: string;
}
function useOverlayConfig() {
return useQuery({
queryKey: [...settingsKeys.all, "overlay-config"] as const,
queryFn: () => api<OverlayConfig>("/settings/overlay-config"),
staleTime: 60_000,
});
}
export function useOverlayPrefs() {
const { data: raw, isLoading: userLoading } = useSetting(SETTING_KEY);
const { data: config, isLoading: configLoading } = useOverlayConfig();
const setSetting = useSetSetting();
const prefs = useMemo(() => {
// User setting takes priority; fall back to admin defaults
const source = raw ?? config?.defaults ?? null;
return parseOverlayPrefs(source);
}, [raw, config?.defaults]);
// Admin kill switch: if disabled server-wide, return null prefs
const enabled = config?.enabled !== false;
const setPrefs = useCallback(
(next: CardOverlayPrefs) => {
const serialized = serializeOverlayPrefs(next);
// Avoid a network round-trip and downstream re-render cascade when
// the user toggles a control to its current value.
if (raw === serialized) return;
setSetting.mutate({ key: SETTING_KEY, value: serialized });
},
[raw, setSetting],
);
return {
prefs: enabled ? prefs : null,
setPrefs,
isLoading: userLoading || configLoading,
enabled,
};
}