feat: AreaDropdown separate from MapLayerControlPanel

components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

@@ -241,28 +241,55 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
   }, [GisStationsStaticDistrict]);
   //---------------------------
 
+  // Polyline (Kabelstrecken) abhängig von TALAS (system-1)
+  const onPolylineToggle = checked => {
+    if (editMode) return;
+
+    // Wenn Nutzer Kabelstrecken einschaltet, aber TALAS aktuell ausgeblendet ist,
+    // dann TALAS automatisch aktivieren (sofern erlaubt)
+    const talasKey = "system-1";
+    const talasVisible = !!mapLayersVisibility[talasKey];
+    if (checked && isTalasAllowed && !talasVisible) {
+      dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
+
+      // Persistiere Sichtbarkeit map/user-spezifisch
+      const mapId2 = localStorage.getItem("currentMapId");
+      const userId2 = localStorage.getItem("currentUserId");
+      const mapStorageKey =
+        mapId2 && userId2 ? `mapLayersVisibility_m${mapId2}_u${userId2}` : "mapLayersVisibility";
+      localStorage.setItem(
+        mapStorageKey,
+        JSON.stringify({ ...mapLayersVisibility, [talasKey]: true })
+      );
+
+      // Event feuern wie an anderer Stelle
+      setTimeout(() => {
+        const event = new Event("visibilityChanged");
+        window.dispatchEvent(event);
+      }, 0);
+    }
+
+    // Sichtbarkeit der Kabelstrecken setzen
+    handlePolylineCheckboxChange(checked);
+  };
+
   //---------------------------
   return (
     <div
       id="mainDataSheet"
-      className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg"
+      className="absolute top-16 right-3 w-1/6 min-w-[300px] max-w-[200px] z-10 bg-white p-2 rounded-lg shadow-lg"
     >
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between space-x-2">
-          <select
+          {/* 
+                  <select
             onChange={handleAreaChange}
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1 font-semibold"
             style={{ minWidth: "150px", maxWidth: "200px" }}
           >
             <option value="Station wählen">Station wählen</option>
-            {/*
-              ...new Map(
-                (GisStationsStaticDistrict.Points || [])
-                  .filter(p => !!p.Area_Name)
-                  .map(p => [p.Area_Name, p])
-              ).values(),
-            */}
+
             {[
               ...new Map(
                 (GisStationsStaticDistrict.Points || [])
@@ -275,6 +302,8 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
               </option>
             ))}
           </select>
+        */}
+
           {/*
           <div className="flex items-center space-x-2">
             <EditModeToggle />
@@ -312,7 +341,7 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
                     <input
                       type="checkbox"
                       checked={kabelstreckenVisible}
-                      onChange={e => handlePolylineCheckboxChange(e.target.checked)}
+                      onChange={e => onPolylineToggle(e.target.checked)}
                       id="polyline-checkbox"
                       disabled={!isTalasAllowed || editMode}
                     />