Updated Map View

resources/js/Components/FlightsGoneBy/FlightMap.vue

@@ -2,9 +2,12 @@
     <div class="flight-map-wrapper">
         <PlaneLoader v-if="!mapReady" class="map-loader" />
         <div ref="mapContainer" class="map-container" :class="{ 'map-hidden': !mapReady }" />
-        <button @click="exportMapBasic()" class="export-btn">
+        <button @click="exportMapBasic()" class="export-btn" title="Download as Image">
             <span class="mdi mdi-download" />
         </button>
+        <button class="projection-btn" @click="toggleProjection" :title="isGlobe ? 'Switch to flat map' : 'Switch to globe'">
+            <span class="mdi" :class="isGlobe ? 'mdi-map' : 'mdi-earth'"/>
+        </button>
         <div v-if="!flights.length" class="empty-state">
             <span class="mdi mdi-earth-off" />
             <p>No flight data available</p>
@@ -266,6 +269,15 @@ export default defineComponent({
 
         const legendOpen = ref(true)
 
+        const isGlobe = ref(false)
+
+        const toggleProjection = (): void => {
+            if (!map?.isStyleLoaded()) return
+            isGlobe.value = !isGlobe.value
+            map.setProjection({ type: isGlobe.value ? 'globe' : 'mercator' })
+        }
+
+
         const legendItems = [
             { color: '#f97316', label: '5+ flights' },
             { color: '#eab308', label: '3–4 flights' },
@@ -670,6 +682,11 @@ export default defineComponent({
 
                 map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right')
                 map.addControl(new maplibregl.FullscreenControl(), 'top-right')
+
+                map.on('style.load', () => {
+                    map?.setProjection({ type: 'mercator' })
+                })
+
                 map.on('load', () => {
                     addLayers()
                     fitBounds()
@@ -718,7 +735,7 @@ export default defineComponent({
             if (map) { map.remove(); map = null }
         })
 
-        return { mapContainer, mapReady, exportMapBasic, legendOpen, legendItems }
+        return { mapContainer, mapReady, exportMapBasic, legendOpen, legendItems, isGlobe, toggleProjection }
     },
 })
 
@@ -901,4 +918,25 @@ export default defineComponent({
     letter-spacing: 0.06em;
     color:       #c8cdd8;
 }
+
+.projection-btn {
+    position:         absolute;
+    bottom:           48px;
+    right:            12px;
+    z-index:          10;
+    background:       rgba(10,14,22,0.85);
+    border:           1px solid rgba(255,255,255,0.08);
+    color:            #a0b4c8;
+    width:            30px;
+    height:           30px;
+    border-radius:    4px;
+    cursor:           pointer;
+    display:          flex;
+    align-items:      center;
+    justify-content:  center;
+    font-size:        16px;
+    transition:       color 0.15s, background 0.15s;
+}
+.projection-btn:hover        { background: rgba(77,166,255,0.15); color: #4da6ff; }
+.projection-btn.globe-active { color: #4da6ff; border-color: rgba(77,166,255,0.35); }
 </style>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -5,7 +5,7 @@ import type { SharedProps } from '@/Types/types'
 import { ref, onMounted, onUnmounted } from 'vue'
 import NotificationMenu from "@/Components/FlightsGoneBy/NotificationMenu.vue";
 
-const props = usePage<SharedProps>().props
+const page = usePage<SharedProps>()
 const menuOpen = ref(false)
 const dropdownOpen = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
@@ -27,23 +27,23 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
     <header class="glass">
         <Link href="/" class="brand">FlightsGoneBy</Link>
 
-        <NotificationMenu v-if="props.auth.user" :unread-count="props.unread_notification_count" />
+        <NotificationMenu v-if="page.props.auth?.user" :unread-count="page.props.unread_notification_count" />
 
         <!-- Desktop nav -->
         <nav class="nav-desktop">
-            <template v-if="!props.auth.user">
+            <template v-if="!page.props.auth?.user">
                 <Link :href="route('login')" class="nav-link">Log In</Link>
                 <Link :href="route('register')" class="nav-link nav-link--highlight">Register</Link>
             </template>
             <template v-else>
                 <Link :href="route('flights.add')" class="nav-link">Add Flight</Link>
-                <Link :href="route('profile.view', { user: props.auth.user.name })" class="nav-link">Profile</Link>
+                <Link :href="route('profile.view', { user: page.props.auth?.user.name })" class="nav-link">Profile</Link>
                 <Link :href="route('feed')" class="nav-link">Feed</Link>
-                <Link v-if="props.auth.roles.includes('admin')" :href="route('admin.dashboard')" class="nav-link">Admin</Link>
+                <Link v-if="page.props.auth.roles.includes('admin')" :href="route('admin.dashboard')" class="nav-link">Admin</Link>
 
                 <div class="dropdown" ref="dropdownRef">
                     <button class="nav-link dropdown-trigger" @click.stop="dropdownOpen = !dropdownOpen">
-                        {{ props.auth.user.name }}
+                        {{ page.props.auth.user.name }}
                         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <path d="m6 9 6 6 6-6"/>
@@ -67,14 +67,14 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
         <!-- Mobile drawer -->
         <Transition name="slide">
             <nav v-if="menuOpen" class="nav-mobile" @click.stop>
-                <template v-if="!props.auth.user">
+                <template v-if="!page.props.auth?.user">
                     <Link :href="route('login')" class="nav-link" @click="menuOpen = false">Log In</Link>
                     <Link :href="route('register')" class="nav-link nav-link--highlight" @click="menuOpen = false">Register</Link>
                 </template>
                 <template v-else>
-                    <span class="nav-greeting">Welcome, {{ props.auth.user.name }}</span>
+                    <span class="nav-greeting">Welcome, {{ page.props.auth.user.name }}</span>
                     <Link :href="route('flights.add')" class="nav-link" @click="menuOpen = false">Add Flight</Link>
-                    <Link :href="route('profile.view', { user: props.auth.user.name })" class="nav-link" @click="menuOpen = false">Profile</Link>
+                    <Link :href="route('profile.view', { user: page.props.auth.user.name })" class="nav-link" @click="menuOpen = false">Profile</Link>
                     <Link :href="route('feed')" class="nav-link nav-link" @click="menuOpen = false">Feed</Link>
                     <Link :href="route('import.fr24')" class="nav-link" @click="menuOpen = false">Import from FR24</Link>
                     <Link :href="route('profile.settings')" class="nav-link" @click="menuOpen = false">Settings</Link>

resources/js/Pages/Error.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import MainLayout from "@/Layouts/MainLayout.vue";
+import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
+import {usePage} from "@inertiajs/vue3";
+import {SharedProps} from "@/Types/types";
+const page = usePage<SharedProps>()
+defineOptions({ layout: MainLayout })
+defineProps<{
+    statusCode : number
+    statusTitle : string
+    statusMessage : string
+}>()
+</script>
+
+<template>
+    <GlassBox :title="statusTitle" :blurb="statusMessage">
+
+    </GlassBox>
+</template>
+
+<style scoped>
+
+</style>