top-down in spectator

webui/src/hooks/useHudMapSetting.js

@@ -1,28 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useSettingsNamespace } from '../settings/index.js';
 
 export function useHudMapSetting() {
-  const [enabled, setEnabled] = useState(() => {
-    if (typeof window === 'undefined') return false;
-    return window.localStorage.getItem('hudMapDesktop') === '1';
-  });
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    window.localStorage.setItem('hudMapDesktop', enabled ? '1' : '0');
-    const event = new CustomEvent('hudMapDesktopChanged', { detail: enabled });
-    window.dispatchEvent(event);
-  }, [enabled]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return undefined;
-    const handler = (event) => {
-      if (typeof event.detail === 'boolean') {
-        setEnabled(event.detail);
-      }
-    };
-    window.addEventListener('hudMapDesktopChanged', handler);
-    return () => window.removeEventListener('hudMapDesktopChanged', handler);
-  }, []);
-
+  const { value, save } = useSettingsNamespace('page', { hudMapDesktop: false });
+  const enabled = Boolean(value?.hudMapDesktop);
+  const setEnabled = (next) => {
+    save({ hudMapDesktop: Boolean(next) });
+  };
   return [enabled, setEnabled];
 }