sencho/frontend/src/hooks/use-top-nav-mode.ts

import { useCallback, useEffect, useState } from 'react';
import { SENCHO_SETTINGS_CHANGED } from '@/lib/events';

export const TOP_NAV_MODE_KEY = 'sencho.appearance.topNavMode';

export type TopNavMode = 'classic' | 'smart' | 'compact';

const VALID: ReadonlySet<string> = new Set(['classic', 'smart', 'compact']);

/** Missing or invalid storage resolves to Smart (recommended default). */
export function parseTopNavMode(raw: string | null): TopNavMode {
  if (raw && VALID.has(raw)) return raw as TopNavMode;
  return 'smart';
}

function readStored(): TopNavMode {
  if (typeof window === 'undefined') return 'smart';
  try {
    return parseTopNavMode(window.localStorage.getItem(TOP_NAV_MODE_KEY));
  } catch {
    return 'smart';
  }
}

export function useTopNavMode(): [TopNavMode, (next: TopNavMode) => void] {
  const [mode, setModeState] = useState<TopNavMode>(readStored);

  useEffect(() => {
    function onSettingsChanged() {
      setModeState(readStored());
    }
    window.addEventListener(SENCHO_SETTINGS_CHANGED, onSettingsChanged);
    return () => window.removeEventListener(SENCHO_SETTINGS_CHANGED, onSettingsChanged);
  }, []);

  useEffect(() => {
    function onStorage(event: StorageEvent) {
      if (event.key !== TOP_NAV_MODE_KEY) return;
      setModeState(parseTopNavMode(event.newValue));
    }
    window.addEventListener('storage', onStorage);
    return () => window.removeEventListener('storage', onStorage);
  }, []);

  const setMode = useCallback((next: TopNavMode) => {
    try {
      window.localStorage.setItem(TOP_NAV_MODE_KEY, next);
    } catch {
      // ignore; localStorage may be unavailable
    }
    setModeState(next);
    window.dispatchEvent(new CustomEvent(SENCHO_SETTINGS_CHANGED));
  }, []);

  return [mode, setMode];
}