From cfbb1625e7873264e2ef435cc76fec2b59cf58d8 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 24 Dec 2025 19:33:49 +0100
Subject: Refactor map components and improve modal functionality

---
 src/frontend/app/contexts/MapContext.tsx      | 41 +++++++--------------
 src/frontend/app/contexts/SettingsContext.tsx | 52 +++++++++++++++------------
 2 files changed, 42 insertions(+), 51 deletions(-)

(limited to 'src/frontend/app/contexts')

diff --git a/src/frontend/app/contexts/MapContext.tsx b/src/frontend/app/contexts/MapContext.tsx
index db1392c..5fdf676 100644
--- a/src/frontend/app/contexts/MapContext.tsx
+++ b/src/frontend/app/contexts/MapContext.tsx
@@ -9,19 +9,16 @@ import {
 import { APP_CONSTANTS } from "~/config/constants";
 
 interface MapState {
-  center: LngLatLike;
-  zoom: number;
+  paths: Record<string, { center: LngLatLike; zoom: number }>;
   userLocation: LngLatLike | null;
   hasLocationPermission: boolean;
 }
 
 interface MapContextProps {
   mapState: MapState;
-  setMapCenter: (center: LngLatLike) => void;
-  setMapZoom: (zoom: number) => void;
   setUserLocation: (location: LngLatLike | null) => void;
   setLocationPermission: (hasPermission: boolean) => void;
-  updateMapState: (center: LngLatLike, zoom: number) => void;
+  updateMapState: (center: LngLatLike, zoom: number, path: string) => void;
 }
 
 const MapContext = createContext<MapContextProps | undefined>(undefined);
@@ -36,8 +33,7 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
         // We might want to ensure we have a fallback if the region changed while the app was closed?
         // But for now, let's stick to the existing logic.
         return {
-          center: parsed.center || APP_CONSTANTS.defaultCenter,
-          zoom: parsed.zoom || APP_CONSTANTS.defaultZoom,
+          paths: parsed.paths || {},
           userLocation: parsed.userLocation || null,
           hasLocationPermission: parsed.hasLocationPermission || false,
         };
@@ -46,29 +42,12 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
       }
     }
     return {
-      center: APP_CONSTANTS.defaultCenter,
-      zoom: APP_CONSTANTS.defaultZoom,
+      paths: {},
       userLocation: null,
       hasLocationPermission: false,
     };
   });
 
-  const setMapCenter = (center: LngLatLike) => {
-    setMapState((prev) => {
-      const newState = { ...prev, center };
-      localStorage.setItem("mapState", JSON.stringify(newState));
-      return newState;
-    });
-  };
-
-  const setMapZoom = (zoom: number) => {
-    setMapState((prev) => {
-      const newState = { ...prev, zoom };
-      localStorage.setItem("mapState", JSON.stringify(newState));
-      return newState;
-    });
-  };
-
   const setUserLocation = (userLocation: LngLatLike | null) => {
     setMapState((prev) => {
       const newState = { ...prev, userLocation };
@@ -85,9 +64,15 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
     });
   };
 
-  const updateMapState = (center: LngLatLike, zoom: number) => {
+  const updateMapState = (center: LngLatLike, zoom: number, path: string) => {
     setMapState((prev) => {
-      const newState = { ...prev, center, zoom };
+      const newState = {
+        ...prev,
+        paths: {
+          ...prev.paths,
+          [path]: { center, zoom },
+        },
+      };
       localStorage.setItem("mapState", JSON.stringify(newState));
       return newState;
     });
@@ -115,8 +100,6 @@ export const MapProvider = ({ children }: { children: ReactNode }) => {
     <MapContext.Provider
       value={{
         mapState,
-        setMapCenter,
-        setMapZoom,
         setUserLocation,
         setLocationPermission,
         updateMapState,
diff --git a/src/frontend/app/contexts/SettingsContext.tsx b/src/frontend/app/contexts/SettingsContext.tsx
index d66ee52..6a64b67 100644
--- a/src/frontend/app/contexts/SettingsContext.tsx
+++ b/src/frontend/app/contexts/SettingsContext.tsx
@@ -5,10 +5,9 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { APP_CONFIG } from "~/config/AppConfig";
+import { APP_CONFIG } from "../config/appConfig";
 
 export type Theme = "light" | "dark" | "system";
-export type TableStyle = "regular" | "grouped" | "experimental_consolidated";
 export type MapPositionMode = "gps" | "last";
 
 interface SettingsContextProps {
@@ -19,6 +18,11 @@ interface SettingsContextProps {
   mapPositionMode: MapPositionMode;
   setMapPositionMode: (mode: MapPositionMode) => void;
   resolvedTheme: "light" | "dark";
+
+  showTraffic: boolean;
+  setShowTraffic: (show: boolean) => void;
+  showCameras: boolean;
+  setShowCameras: (show: boolean) => void;
 }
 
 const SettingsContext = createContext<SettingsContextProps | undefined>(
@@ -104,26 +108,6 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
   }, [theme]);
   //#endregion
 
-  //#region Table Style
-  const [tableStyle, setTableStyle] = useState<TableStyle>(() => {
-    const savedTableStyle = localStorage.getItem("tableStyle");
-    if (savedTableStyle) {
-      return savedTableStyle as TableStyle;
-    }
-    return APP_CONFIG.defaultTableStyle;
-  });
-
-  const toggleTableStyle = () => {
-    setTableStyle((prevTableStyle) =>
-      prevTableStyle === "regular" ? "grouped" : "regular"
-    );
-  };
-
-  useEffect(() => {
-    localStorage.setItem("tableStyle", tableStyle);
-  }, [tableStyle]);
-  //#endregion
-
   //#region Map Position Mode
   const [mapPositionMode, setMapPositionMode] = useState<MapPositionMode>(
     () => {
@@ -139,6 +123,26 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
   }, [mapPositionMode]);
   //#endregion
 
+  //#region Map Layers
+  const [showTraffic, setShowTraffic] = useState<boolean>(() => {
+    const saved = localStorage.getItem("showTraffic");
+    return saved !== null ? saved === "true" : true;
+  });
+
+  const [showCameras, setShowCameras] = useState<boolean>(() => {
+    const saved = localStorage.getItem("showCameras");
+    return saved !== null ? saved === "true" : false;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("showTraffic", showTraffic.toString());
+  }, [showTraffic]);
+
+  useEffect(() => {
+    localStorage.setItem("showCameras", showCameras.toString());
+  }, [showCameras]);
+  //#endregion
+
   return (
     <SettingsContext.Provider
       value={{
@@ -148,6 +152,10 @@ export const SettingsProvider = ({ children }: { children: ReactNode }) => {
         mapPositionMode,
         setMapPositionMode,
         resolvedTheme,
+        showTraffic,
+        setShowTraffic,
+        showCameras,
+        setShowCameras,
       }}
     >
       {children}
-- 
cgit v1.3