Updated logo API

resources/js/Components/FlightsGoneBy/AirlineLogo.vue

@@ -5,12 +5,14 @@ import {usePage} from "@inertiajs/vue3";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 
+const page = usePage<SharedProps>().props;
+
 const props = defineProps<{
     airline: Airline | null;
     size?: number | string;
 }>();
 
-const logoUrl = computed(() => `url('${props.airline?.logo_url}')`);
+const logoUrl = computed(() => `url('${props.airline?.logo_url ?? page.logo_api_url+'/airline/undefined/logo/tail'}')`);
 const logoStyle = computed(() => ({
     width: size.value,
     height: size.value,

resources/js/Components/FlightsGoneBy/CrewTooltip.vue

@@ -10,9 +10,9 @@ defineProps<{
 <template>
     <GlassTooltip>
         <template #activator="{ props: tooltipProps }">
-            <div v-bind="tooltipProps" style="cursor:pointer">
+            <span v-bind="tooltipProps" style="cursor:pointer; display:inline-flex">
                 <slot />
-            </div>
+            </span>
         </template>
 
         <div class="tooltip-rows">

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -18,6 +18,10 @@ const props = defineProps<{
     flightId?: number | null
 }>()
 
+function editRoute(id: number) {
+    return route('flights.edit', { flight: id })
+}
+
 const ITEMS_PER_PAGE = 25
 
 const headers = [
@@ -70,6 +74,7 @@ const isSorting = computed(() => sortBy.value.length > 0)
 
 const upcomingFlights = computed(() =>
     props.flightStats.upcomingFlights.value
+        .sort((a, b) => new Date(a.departure_date).getTime() -  new Date(b.departure_date).getTime())
 )
 
 const departedFlights = computed(() =>
@@ -259,7 +264,7 @@ watch(
                                     <v-list-item
                                         prepend-icon="mdi-pencil-outline"
                                         title="Edit"
-                                        :href="route('flights.edit', { flight: (item as Flight).id })"
+                                        :href="editRoute((item as Flight).id)"
                                     />
                                 </v-list>
                             </v-menu>
@@ -499,6 +504,7 @@ watch(
 .class-cell {
     display: flex;
     align-items: center;
+    vertical-align: middle;
     gap: 0.5rem;
 }
 

resources/js/Components/FlightsGoneBy/FlightStatsBar.vue

@@ -282,4 +282,28 @@ const upcomingDurationDisplay = computed(() => {
     text-transform: uppercase;
     align-self: center;
 }
+
+@media (max-width: 1024px) {
+    .stats-bar {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .stat {
+        padding: 14px 16px;
+    }
+}
+
+@media (max-width: 640px) {
+    .stats-bar {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .stat {
+        padding: 12px 14px;
+    }
+
+    .stat-num {
+        font-size: 22px;
+    }
+}
 </style>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -1,24 +1,68 @@
 <script setup lang="ts">
-import { Link } from "@inertiajs/vue3";
+import { Link, useForm } from "@inertiajs/vue3";
 import { usePage } from '@inertiajs/vue3'
 import type { SharedProps } from '@/Types/types'
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const props = usePage<SharedProps>().props
 const menuOpen = ref(false)
+const dropdownOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+
+const logoutForm = useForm({})
+const logout = () => logoutForm.post(route('logout'))
+
+const handleClickOutside = (e: MouseEvent) => {
+    if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
+        dropdownOpen.value = false
+    }
+}
+
+onMounted(() => document.addEventListener('click', handleClickOutside))
+onUnmounted(() => document.removeEventListener('click', handleClickOutside))
 </script>
 
 <template>
     <header class="glass">
         <Link href="/" class="brand">FlightsGoneBy</Link>
 
+        <!-- Notification icon (always visible) -->
+        <button v-if="props.auth.user" class="notif-btn" aria-label="Notifications">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+            </svg>
+            <span class="notif-dot" />
+        </button>
+
         <!-- Desktop nav -->
         <nav class="nav-desktop">
             <template v-if="!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>
-            <span v-else class="nav-link nav-link--greeting"><Link :href="route('dashboard')">Welcome, {{ props.auth.user.name }}</Link></span>
+            <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="/feed" class="nav-link">Feed</Link>
+
+                <!-- User dropdown -->
+                <div class="dropdown" ref="dropdownRef">
+                    <button class="nav-link dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
+                        {{ 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"/>
+                        </svg>
+                    </button>
+                    <div v-if="dropdownOpen" class="dropdown-menu">
+                        <Link :href="route('import.fr24')" class="dropdown-item">Import from FR24</Link>
+                        <div class="dropdown-divider" />
+                        <button class="dropdown-item dropdown-item--danger" @click="logout">Log Out</button>
+                    </div>
+                </div>
+            </template>
         </nav>
 
         <!-- Hamburger (mobile only) -->
@@ -33,7 +77,15 @@ const menuOpen = ref(false)
                     <Link :href="route('login')" class="nav-link">Log In</Link>
                     <Link :href="route('register')" class="nav-link nav-link--highlight">Register</Link>
                 </template>
-                <span v-else class="nav-link nav-link--greeting"><Link :href="route('dashboard')">Welcome, {{ props.auth.user.name }}</Link></span>
+                <template v-else>
+                    <span class="nav-greeting">Welcome, {{ props.auth.user.name }}</span>
+                    <Link :href="route('flights.add')" class="nav-link">Add Flight</Link>
+                    <Link :href="route('profile.view', { username: props.auth.user.name })" class="nav-link">Profile</Link>
+                    <Link href="/feed" class="nav-link nav-link--highlight">Feed</Link>
+                    <Link :href="route('import.fr24')" class="nav-link">Import from FR24</Link>
+                    <div class="dropdown-divider" />
+                    <button class="nav-link nav-link--danger" @click="logout">Log Out</button>
+                </template>
             </nav>
         </Transition>
     </header>
@@ -48,6 +100,7 @@ header {
     padding: 0 1.25rem;
     position: relative;
     z-index: 10;
+    gap: 0.5rem;
 }
 
 .brand {
@@ -59,10 +112,51 @@ header {
     text-decoration: none;
 }
 
+.nav-greeting {
+    font-size: 0.85rem;
+    font-weight: 500;
+    opacity: 0.6;
+    padding: 0.3em 0.25rem;
+    color: var(--text);
+}
+
+/* Notification button */
+.notif-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text);
+    border-radius: 4px;
+    transition: color 0.15s ease, background 0.15s ease;
+}
+
+.notif-btn:hover {
+    color: var(--accent);
+    background: rgba(56, 189, 248, 0.07);
+}
+
+.notif-dot {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 7px;
+    height: 7px;
+    background: var(--accent);
+    border-radius: 50%;
+    border: 1.5px solid var(--bg);
+}
+
 /* Shared nav link base */
 .nav-link {
     display: inline-flex;
     align-items: center;
+    gap: 0.3em;
     padding: 0.3em 0.75em;
     font-size: 0.875rem;
     font-weight: 500;
@@ -70,6 +164,9 @@ header {
     text-decoration: none;
     color: var(--text);
     border-radius: 4px;
+    border: none;
+    background: none;
+    cursor: pointer;
     transition: color 0.15s ease, background 0.15s ease;
 }
 
@@ -82,7 +179,6 @@ header {
     background: rgba(56, 189, 248, 0.07);
 }
 
-/* Highlighted CTA-style link */
 .nav-link--highlight {
     border: 1px solid rgba(56, 189, 248, 0.35);
     color: var(--accent);
@@ -96,10 +192,75 @@ header {
     background: rgba(56, 189, 248, 0.12);
 }
 
-.nav-link--greeting {
-    opacity: 0.7;
-    font-size: 0.85rem;
-    cursor: default;
+.nav-link--danger {
+    width: 100%;
+    color: #f87171;
+}
+
+.nav-link--danger:hover {
+    color: #f87171;
+    background: rgba(248, 113, 113, 0.08);
+}
+
+/* Dropdown */
+.dropdown {
+    position: relative;
+}
+
+.dropdown-trigger {
+    font-family: inherit;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: calc(100% + 0.4rem);
+    right: 0;
+    min-width: 180px;
+    background: var(--bg);
+    border: 1px solid rgba(56, 189, 248, 0.12);
+    border-radius: 6px;
+    padding: 0.35rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+}
+
+.dropdown-item {
+    display: block;
+    width: 100%;
+    padding: 0.4em 0.75em;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.03em;
+    text-decoration: none;
+    color: var(--text);
+    border-radius: 4px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    transition: color 0.15s ease, background 0.15s ease;
+}
+
+.dropdown-item:hover {
+    color: var(--accent);
+    background: rgba(56, 189, 248, 0.07);
+}
+
+.dropdown-item--danger {
+    color: #f87171;
+}
+
+.dropdown-item--danger:hover {
+    color: #f87171;
+    background: rgba(248, 113, 113, 0.08);
+}
+
+.dropdown-divider {
+    height: 1px;
+    background: rgba(56, 189, 248, 0.1);
+    margin: 0.25rem 0;
 }
 
 /* Desktop nav */

resources/js/Components/FlightsGoneBy/ProfileHeader.vue

@@ -1,28 +1,74 @@
 <script setup lang="ts">
-import {Flight, User} from "@/Types/types";
+import { usePage } from "@inertiajs/vue3";
+import { computed, ref } from "vue";
+import type { Flight, User, SharedProps } from "@/Types/types";
 
-defineProps<{
+const props = defineProps<{
     user: User
     flights: Flight[]
+    isFollowing?: boolean
 }>()
 
+const auth = usePage<SharedProps>().props.auth
+const isOwnProfile = computed(() => auth.user?.id == props.user.id)
+const isLoggedIn = computed(() => !!auth.user)
+
+const following = ref(props.isFollowing ?? false)
+const processing = ref(false)
+const snackbar = ref(false)
+const snackbarMessage = ref('')
+
+const follow = async () => {
+    processing.value = true
+    const response = await fetch(route('profile.follow', { user: props.user.name }), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '',
+        },
+    })
+    const data = await response.json()
+    following.value = data.following
+    snackbarMessage.value = data.following ? `You are now following ${props.user.name}` : `You unfollowed ${props.user.name}`
+    snackbar.value = true
+    processing.value = false
+}
 </script>
 
 <template>
     <div class="board-header">
-        <div class="board-title-group">
-            <span class="board-eyebrow">FLIGHT HISTORY</span>
-            <h1 class="board-title">{{ user.name }}</h1>
+        <div class="board-left">
+            <div class="board-title-group">
+                <span class="board-eyebrow">FLIGHT HISTORY</span>
+                <div class="board-title-row">
+                    <h1 class="board-title">{{ user.name }}</h1>
+                    <button
+                        v-if="isLoggedIn && !isOwnProfile"
+                        class="follow-btn"
+                        :disabled="processing"
+                        @click="follow"
+                    >
+                        {{ following ? 'Following' : '+ Follow' }}
+                    </button>
+                </div>
+            </div>
         </div>
+
         <div class="board-count">
             <span class="count-number">{{ flights.length }}</span>
             <span class="count-label">FLIGHTS</span>
         </div>
     </div>
+
+    <v-snackbar v-model="snackbar" :timeout="5000" color="#ffc107" location="bottom center">
+        {{ snackbarMessage }}
+        <template #actions>
+            <v-btn variant="text" @click="snackbar = false">Close</v-btn>
+        </template>
+    </v-snackbar>
 </template>
 
 <style scoped>
-/* ── Header ── */
 .board-header {
     display: flex;
     align-items: flex-end;
@@ -32,6 +78,11 @@ defineProps<{
     padding-bottom: 1.25rem;
 }
 
+.board-left {
+    display: flex;
+    flex-direction: column;
+}
+
 .board-eyebrow {
     display: block;
     font-family: 'Share Tech Mono', monospace;
@@ -41,6 +92,12 @@ defineProps<{
     margin-bottom: 0.25rem;
 }
 
+.board-title-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
 .board-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.2rem;
@@ -51,6 +108,30 @@ defineProps<{
     margin: 0;
 }
 
+.follow-btn {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0.12em;
+    color: #ffc107;
+    background: none;
+    border: 1px solid rgba(255, 193, 7, 0.35);
+    border-radius: 4px;
+    padding: 0.3em 0.85em;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    white-space: nowrap;
+    align-self: center;
+}
+
+.follow-btn:hover:not(:disabled) {
+    background: rgba(255, 193, 7, 0.1);
+}
+
+.follow-btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
 .board-count {
     text-align: right;
     line-height: 1;

resources/js/Components/FlightsGoneBy/ProfileLayout.vue

@@ -5,12 +5,13 @@ import ProfileHeader from "@/Components/FlightsGoneBy/ProfileHeader.vue";
 defineProps<{
     user: User
     flights: Flight[]
+    isFollowing: boolean
 }>()
 </script>
 
 <template>
     <div class="board-wrapper">
-        <ProfileHeader :user="user" :flights="flights" />
+        <ProfileHeader :is-following="isFollowing" :user="user" :flights="flights" />
         <slot />
     </div>
 </template>
@@ -22,4 +23,10 @@ defineProps<{
     font-family: 'Barlow', sans-serif;
     width: 100%;
 }
+
+@media (max-width: 1200px) {
+    .board-wrapper {
+        padding: 1em 0.25em;
+    }
+}
 </style>