Updated Map View

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -13,7 +13,7 @@
             <p>No flight data available</p>
         </div>
         <div v-if="showLegend" class="map-legend" :class="{ 'map-legend--open': legendOpen }">
-            <button class="map-legend__toggle" @click="legendOpen = !legendOpen">
+            <button class="map-legend__toggle" @click="toggleLegend">
                 <span class="mdi mdi-format-list-bulleted" />
                 <span class="map-legend__toggle-label">Legend</span>
                 <span class="mdi" :class="legendOpen ? 'mdi-chevron-down' : 'mdi-chevron-up'" />
@@ -40,12 +40,11 @@
 import { defineComponent, ref, onMounted, onBeforeUnmount, watch, nextTick, PropType } from 'vue'
 import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
-import { usePage } from '@inertiajs/vue3'
 import { Flight, Airport, SharedProps } from '@/Types/types'
 import PlaneLoader from '@/Components/FlightsGoneBy/PlaneLoader.vue'
 import type { Feature, FeatureCollection, LineString, Point } from 'geojson'
-
-// ── Types ─────────────────────────────────────────────────────────────────────
+import {useUpdateSetting} from "@/Composables/useUpdateSetting";
+import {usePage} from "@inertiajs/vue3";
 
 
 type LngLat = [number, number]
@@ -256,6 +255,9 @@ export default defineComponent({
     setup(props) {
         const mapContainer = ref<HTMLDivElement | null>(null)
         const mapReady     = ref(false)
+        const { updateSetting } = useUpdateSetting()
+        const page = usePage<SharedProps>().props
+
 
         let map:        maplibregl.Map    | null = null
         let popup:      maplibregl.Popup  | null = null
@@ -267,7 +269,12 @@ export default defineComponent({
 
         let selectedAirportId: number | null = null
 
-        const legendOpen = ref(true)
+        const legendOpen = ref(page.auth?.user?.resolved_settings?.show_map_legend ?? true)
+
+        function toggleLegend() {
+            legendOpen.value = !legendOpen.value
+            updateSetting('show_map_legend', legendOpen.value).catch(() => {})
+        }
 
         const isGlobe = ref(false)
 
@@ -735,7 +742,7 @@ export default defineComponent({
             if (map) { map.remove(); map = null }
         })
 
-        return { mapContainer, mapReady, exportMapBasic, legendOpen, legendItems, isGlobe, toggleProjection }
+        return { mapContainer, mapReady, exportMapBasic, legendOpen, legendItems, isGlobe, toggleProjection, toggleLegend }
     },
 })