feat: Add persistent localStorage for Kabelstrecken (polylines) visibility

- Add kabelstreckenVisible state with localStorage persistence
- Implement dual localStorage variables (kabelstreckenVisible + polylineVisible) for compatibility
- Add event system for cross-component polyline visibility updates
- Update MapComponent to listen for polylineVisibilityChanged events
- Ensure polylines display correctly on browser reload
- Migrate from Redux-only state to localStorage-first approach
- Add comprehensive debug logging for troubleshooting

Fixes issue where Kabelstrecken checkbox state was lost on page reload
and polylines were not displayed until manual toggle.

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -15,6 +15,8 @@ import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
 
 function MapLayersControlPanel() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
+  const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
+  const [kabelstreckenVisible, setKabelstreckenVisible] = useState(false); // Lokaler State für Kabelstrecken
   const poiVisible = useSelector(state => state.poiLayerVisible.visible);
   const setPoiVisible = value => dispatch(setVisible(value));
   const dispatch = useDispatch();
@@ -24,7 +26,10 @@ function MapLayersControlPanel() {
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
   const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
 
-  const polylineVisible = useSelector(selectPolylineVisible);
+  // Debug: Kabelstrecken state verfolgen
+  useEffect(() => {
+    console.log("🎯 kabelstreckenVisible state changed to:", kabelstreckenVisible);
+  }, [kabelstreckenVisible]);
 
   // Prüfen, ob TALAS (IdSystem 1) erlaubt ist
   const isTalasAllowed = Array.isArray(GisSystemStatic)
@@ -33,8 +38,24 @@ function MapLayersControlPanel() {
 
   const handlePolylineCheckboxChange = event => {
     const checked = event.target.checked;
+    console.log("🖱️ Kabelstrecken checkbox clicked, new value:", checked);
+
+    // Beide localStorage-Variablen setzen für Kompatibilität
+    setKabelstreckenVisible(checked);
+    localStorage.setItem("kabelstreckenVisible", checked.toString());
+    localStorage.setItem("polylineVisible", checked.toString()); // Auch die alte Variable setzen
+    console.log("💾 Saved to localStorage as kabelstreckenVisible:", checked);
+    console.log("💾 Saved to localStorage as polylineVisible:", checked);
+
+    // Redux für andere Teile der App aktualisieren
     dispatch(setPolylineVisible(checked));
-    localStorage.setItem("polylineVisible", checked);
+
+    // Event auslösen, damit andere Komponenten über die Änderung informiert werden
+    setTimeout(() => {
+      const event = new Event("polylineVisibilityChanged");
+      window.dispatchEvent(event);
+      console.log("📢 Event 'polylineVisibilityChanged' dispatched");
+    }, 100);
 
     if (checked) {
       dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
@@ -46,18 +67,49 @@ function MapLayersControlPanel() {
   };
 
   useEffect(() => {
-    // LocalStorage Werte laden
+    // LocalStorage Werte beim ersten Laden der Komponente wiederherstellen
+    console.log("🔄 Loading localStorage values...");
+
     const storedPoiVisible = localStorage.getItem("poiVisible");
+    console.log("📦 POI localStorage value:", storedPoiVisible);
     if (storedPoiVisible !== null) {
       setPoiVisible(storedPoiVisible === "true");
     }
+
+    // Neue Variable für Kabelstrecken mit Fallback auf die alte Variable
+    let storedKabelstreckenVisible = localStorage.getItem("kabelstreckenVisible");
     const storedPolylineVisible = localStorage.getItem("polylineVisible");
-    if (storedPolylineVisible !== null) {
-      dispatch(setPolylineVisible(storedPolylineVisible === "true"));
+
+    // Falls kabelstreckenVisible nicht existiert, aber polylineVisible schon, übernehmen wir den Wert
+    if (storedKabelstreckenVisible === null && storedPolylineVisible !== null) {
+      storedKabelstreckenVisible = storedPolylineVisible;
+      localStorage.setItem("kabelstreckenVisible", storedPolylineVisible);
+      console.log("<22> Migrated polylineVisible to kabelstreckenVisible:", storedPolylineVisible);
+    }
+
+    console.log("<22>📦 Kabelstrecken localStorage value:", storedKabelstreckenVisible);
+    console.log("📦 Polyline localStorage value:", storedPolylineVisible);
+
+    if (storedKabelstreckenVisible !== null) {
+      const shouldBeVisible = storedKabelstreckenVisible === "true";
+      console.log("🎯 Setting kabelstreckenVisible to:", shouldBeVisible);
+      setKabelstreckenVisible(shouldBeVisible);
+
+      // Beide localStorage-Variablen synchronisieren
+      localStorage.setItem("polylineVisible", shouldBeVisible.toString());
+      // Redux für Konsistenz setzen
+      dispatch(setPolylineVisible(shouldBeVisible));
+
+      // Event auslösen nach dem Laden
+      setTimeout(() => {
+        const event = new Event("polylineVisibilityChanged");
+        window.dispatchEvent(event);
+        console.log("📢 Event 'polylineVisibilityChanged' dispatched on load");
+      }, 200);
     }
 
-    // Layer-Sichtbarkeiten aus localStorage laden
     const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
+    console.log("📦 MapLayers localStorage value:", storedMapLayersVisibility);
     if (storedMapLayersVisibility) {
       const parsedVisibility = JSON.parse(storedMapLayersVisibility);
       Object.keys(parsedVisibility).forEach(key => {
@@ -65,10 +117,15 @@ function MapLayersControlPanel() {
       });
     }
 
-    // EditMode lesen
     const storedEditMode = localStorage.getItem("editMode");
+    console.log("📦 EditMode localStorage value:", storedEditMode);
     setEditMode(storedEditMode === "true");
-  }, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
+
+    setLocalStorageLoaded(true);
+  }, []); // Läuft nur beim Mount
+
+  // Entferne den komplexen Konsistenz-Check useEffect - nicht mehr nötig
+  // da wir direkt mit localStorage arbeiten
 
   const handleAreaChange = event => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -138,7 +195,7 @@ function MapLayersControlPanel() {
   const handlePoiCheckboxChange = event => {
     const { checked } = event.target;
     setPoiVisible(checked);
-    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
+    localStorage.setItem("poiVisible", checked.toString()); // Store POI visibility in localStorage
   };
 
   const handleIconClick = () => {
@@ -260,7 +317,7 @@ function MapLayersControlPanel() {
                   <div className="flex items-center">
                     <input
                       type="checkbox"
-                      checked={polylineVisible} // Zustand für Kabelstrecken
+                      checked={kabelstreckenVisible} // Lokaler State statt Redux
                       onChange={handlePolylineCheckboxChange}
                       id="polyline-checkbox"
                       disabled={!isTalasAllowed || editMode}