documente/frontend/src/stores/settingsStore.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface SettingsState {
  // State
  theme: 'light' | 'dark' | 'system';
  defaultProvider: string;
  defaultModel: string;
  sidebarOpen: boolean;

  // Actions
  setTheme: (theme: 'light' | 'dark' | 'system') => void;
  setDefaultProvider: (provider: string) => void;
  setDefaultModel: (model: string) => void;
  toggleSidebar: () => void;
  setSidebarOpen: (open: boolean) => void;
}

export const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      theme: 'system',
      defaultProvider: 'openai',
      defaultModel: 'gpt-4o-mini',
      sidebarOpen: true,

      setTheme: (theme) => {
        set({ theme });
        // Apply theme to document
        const root = window.document.documentElement;
        root.classList.remove('light', 'dark');
        
        if (theme === 'system') {
          const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
          root.classList.add(systemTheme);
        } else {
          root.classList.add(theme);
        }
      },

      setDefaultProvider: (provider) => {
        set({ defaultProvider: provider });
      },

      setDefaultModel: (model) => {
        set({ defaultModel: model });
      },

      toggleSidebar: () => {
        set((state) => ({ sidebarOpen: !state.sidebarOpen }));
      },

      setSidebarOpen: (open) => {
        set({ sidebarOpen: open });
      },
    }),
    {
      name: 'settings-storage',
    }
  )
);