@mytec: iteration1 implemented

frontend/src/store/coverage.ts

@@ -18,7 +18,7 @@ export const useCoverageStore = create<CoverageState>((set) => ({
   result: null,
   isCalculating: false,
   settings: {
-    radius: 5,
+    radius: 10,
     resolution: 200,
     rsrpThreshold: -120,
   },

frontend/src/store/settings.ts

@@ -0,0 +1,59 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface SettingsState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+function applyTheme(theme: Theme) {
+  const root = window.document.documentElement;
+
+  if (theme === 'system') {
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    root.classList.toggle('dark', systemDark);
+  } else {
+    root.classList.toggle('dark', theme === 'dark');
+  }
+}
+
+export const useSettingsStore = create<SettingsState>()(
+  persist(
+    (set) => ({
+      theme: 'system' as Theme,
+      setTheme: (theme: Theme) => {
+        set({ theme });
+        applyTheme(theme);
+      },
+    }),
+    {
+      name: 'rfcp-settings',
+    }
+  )
+);
+
+// Apply theme on initial page load
+if (typeof window !== 'undefined') {
+  try {
+    const raw = localStorage.getItem('rfcp-settings');
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      const theme = parsed?.state?.theme ?? 'system';
+      applyTheme(theme);
+    } else {
+      applyTheme('system');
+    }
+  } catch {
+    applyTheme('system');
+  }
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const current = useSettingsStore.getState().theme;
+    if (current === 'system') {
+      applyTheme('system');
+    }
+  });
+}