Function App

App.tsx:20–359

()

const SETTINGS_STORAGE_KEY = 'blairpng_settings_v1';

const App = () => {
  // settings
  const [settings, setSettings] = useState<OptimizerConfiguration>(() => {
    try {
      const saved = localStorage.getItem(SETTINGS_STORAGE_KEY);
      return saved
        ? {...DEFAULT_SETTINGS, ...JSON.parse(saved)}
        : DEFAULT_SETTINGS;
    } catch {
      return DEFAULT_SETTINGS;
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
    } catch (err) {
      console.error('Failed to save settings', err);
    }
  }, [settings]);

  // theme ui
  useEffect(() => {
    const root = window.document.documentElement;
    const applyTheme = (t: 'light' | 'dark') => {
      if (t === 'dark') root.classList.add('dark');
      else root.classList.remove('dark');
    };

    if (settings.theme === 'system') {
      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
        .matches
        ? 'dark'
        : 'light';
      applyTheme(systemTheme);
      const media = window.matchMedia('(prefers-color-scheme: dark)');
      const listener = (e: MediaQueryListEvent) =>
        applyTheme(e.matches ? 'dark' : 'light');
      media.addEventListener('change', listener);
      return () => media.removeEventListener('change', listener);
    } else {
      applyTheme(settings.theme);
    }
  }, [settings.theme]);

  // --- 3. STATE & HOOKS ---
  const [inspectedJob, setInspectedJob] = useState<ImageJob | null>(null);
  const [toast, setToast] = useState<{
    message: string;
    isVisible: boolean;
    type: 'success' | 'error';
  }>({message: '', isVisible: false, type: 'success'});

  const {jobs, addFiles, removeJob, clearCompleted, clearAll, isProcessing} =
    useOptimizer(settings);
  const {isZipping, handleDownloadZip, handleDownloadIndividual} =
    useDownloader();