Updated logo API

app/Http/Controllers/Api/AirlineApiController.php

@@ -8,7 +8,7 @@ use App\Models\Airline;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Storage;
 
-class LogoController extends ApiController
+class AirlineApiController extends ApiController
 {
     const array CONDOR_LOGOS = ['BEACH', 'ISLAND', 'PASSION', 'SEA', 'SUNSHINE'];
 
@@ -47,4 +47,30 @@ class LogoController extends ApiController
         return $this->getAirlineLogo($airline);
     }
 
+    function parseAirlineData(Airline $airline){
+        $countryCode = $airline->country->code;
+
+        $result = $airline->toArray();
+        unset($result['id']);
+        unset($result['logo']);
+        unset($result['country_id']);
+        unset($result['country']);
+        $result['slug'] = $result['internal_name'];
+        unset($result['internal_name']);
+        $result['country_code'] = $countryCode;
+        return $result;
+    }
+
+    function getByCode(string $code){
+        $lookupColumn = strlen($code) === 3 ? 'ICAO_code' : 'IATA_code';
+        $airlines = Airline::where($lookupColumn, strtoupper($code))->get()->map(fn($airline) => $this->parseAirlineData($airline));
+        return response()->json($airlines);
+
+    }
+
+    function get(string $internalName){
+        $airline = Airline::where('internal_name', $internalName)->first();
+        return response()->json($this->parseAirlineData($airline));
+    }
+
 }

app/Http/Controllers/Api/UserApiController.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\ApiController;
+use App\Models\User;
+use App\Models\UserFlight;
+use Carbon\Carbon;
+use Illuminate\Http\JsonResponse;
+
+class UserApiController extends ApiController
+{
+    public function nextFlight(string $username): JsonResponse
+    {
+        $user = User::where('name', 'ilike', $username)->first();
+
+        if (!$user) {
+            return response()->json(['message' => 'User not found'], 404);
+        }
+
+        $flight = UserFlight::with(['departureAirport', 'arrivalAirport', 'airline', 'aircraft'])
+            ->where('user_id', $user->id)
+            ->where('departure_date', '>', now()->utc())
+            ->orderBy('departure_date', 'asc')
+            ->first();
+
+        if (!$flight) {
+            return response()->json(['message' => 'No upcoming flights found'], 404);
+        }
+
+        $departure = Carbon::parse($flight->departure_date)->setTimezone($flight->departureAirport->timezone);
+        $arrival = Carbon::parse($flight->arrival_date)->setTimezone($flight->arrivalAirport->timezone);
+
+        return response()->json([
+            'departureAirportCode'  => $flight->departureAirport->iata_code,
+            'departureCity'         => $flight->departureAirport->municipality,
+            'departureDateReadable' => $departure->format('F j'),
+            'departureTime'         => $departure->format('H:i'),
+            'arrivalAirportCode'    => $flight->arrivalAirport->iata_code,
+            'arrivalCity'           => $flight->arrivalAirport->municipality,
+            'arrivalDateReadable'   => $arrival->format('F j'),
+            'arrivalTime'           => $arrival->format('H:i'),
+            'flightNumber'          => $flight->flight_number,
+            'airlineName'           => $flight->airline->name,
+            'aircraftType'          => $flight->aircraft->manufacturer_code . ' ' . $flight->aircraft->model_full_name,
+            'logoUrl'               => $flight->airline?->logo_url ?? 'undefined',
+        ]);
+    }
+
+    public function flights(string $username): JsonResponse
+    {
+        $user = User::where('name', 'ilike', $username)->first();
+
+        if (!$user) {
+            return response()->json(['message' => 'User not found'], 404);
+        }
+
+        return response()->json($user->FlightController()->flights());
+    }
+}

app/Http/Controllers/Api/UserController.php

@@ -1,50 +0,0 @@
-<?php
-
-namespace App\Http\Controllers\Api;
-
-use App\Http\Controllers\ApiController;
-use App\Http\Controllers\Controller;
-use App\Models\User;
-use App\Models\UserFlight;
-use Carbon\Carbon;
-use DB;
-use Illuminate\Http\Request;
-
-class UserController extends ApiController
-{
-    function nextFlight(string $username): ?array
-    {
-        $user = User::where('name' ,'ilike', $username)->first();
-        if(!$user) return [
-            'message' => 'User not found',
-        ];
-
-        $flight = UserFlight::with(['departureAirport', 'arrivalAirport', 'airline', 'aircraft'])
-            ->where('user_id', $user->id)
-            ->where('departure_date', '>', now()->utc())
-            ->orderBy('departure_date', 'asc')
-            ->first();
-
-        $departure = Carbon::parse($flight->departure_date)->setTimezone($flight->departureAirport->timezone);
-        $arrival = Carbon::parse($flight->arrival_date)->setTimezone($flight->arrivalAirport->timezone);
-
-        return [
-            'departureAirportCode' => $flight->departureAirport->iata_code,
-            'departureCity'        => $flight->departureAirport->municipality,
-            'departureDateReadable' => $departure->format('F j'),
-            'departureTime'        => $departure->format('H:i'),
-            'arrivalAirportCode'   => $flight->arrivalAirport->iata_code,
-            'arrivalCity'          => $flight->arrivalAirport->municipality,
-            'arrivalDateReadable'  => $arrival->format('F j'),
-            'arrivalTime'          => $arrival->format('H:i'),
-            'flightNumber'         => $flight->flight_number,
-            'airlineName'          => $flight->airline->name,
-            'aircraftType'         => $flight->aircraft->manufacturer_code . ' ' . $flight->aircraft->model_full_name,
-            'logoUrl' => $flight->airline->logo_url,
-        ];
-    }
-
-    function flights(string $username){
-
-    }
-}

app/Http/Controllers/FlightController.php

@@ -2,12 +2,14 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Aircraft;
 use App\Models\Airline;
 use App\Models\Airport;
 use App\Models\CrewType;
 use App\Models\FlightClass;
 use App\Models\FlightReason;
 use App\Models\SeatType;
+use App\Models\UserAction;
 use App\Models\UserFlight;
 use Carbon\Carbon;
 use Illuminate\Http\Request;
@@ -72,6 +74,70 @@ class FlightController extends Controller
         ];
     }
 
+    private function recordChanges(UserFlight $flight): void
+    {
+        $dirty = $flight->getDirty();
+
+        if (empty($dirty)) {
+            return;
+        }
+
+        $actions = [];
+        foreach ($dirty as $field => $newValue) {
+            $original = $flight->getOriginal($field);
+            $actions[] = [
+                'user_id'        => $flight->user_id,
+                'user_flight_id' => $flight->id,
+                'message'        => $this->formatChange($field, $original, $newValue),
+                'created_at'     => now(),
+                'updated_at'     => now(),
+            ];
+        }
+
+        UserAction::insert($actions);
+    }
+
+    private array $labelCache = [];
+
+    private function resolveLabel(string $field, mixed $value): string
+    {
+        if (is_null($value)) {
+            return 'none';
+        }
+
+        $cacheKey = "{$field}:{$value}";
+
+        if (isset($this->labelCache[$cacheKey])) {
+            return $this->labelCache[$cacheKey];
+        }
+
+        $label = match($field) {
+
+            'airline_id'          => Airline::find($value)?->display_name ?? $value,
+            'departure_airport_id',
+            'arrival_airport_id'  => Airport::find($value)?->display_name ?? $value,
+            'aircraft_id'         => Aircraft::find($value)?->display_name_short ?? $value,
+            'seat_type_id'        => SeatType::find($value)?->name ?? $value,
+            'flight_class_id'     => FlightClass::find($value)?->name ?? $value,
+            'flight_reason_id'    => FlightReason::find($value)?->name ?? $value,
+            'crew_type_id'        => CrewType::find($value)?->name ?? $value,
+            'departure_date',
+            'arrival_date'        => Carbon::parse($value)->format('j F Y \a\t H:iA'),
+            default               => (string) $value,
+        };
+
+        return $this->labelCache[$cacheKey] = $label;
+    }
+
+    private function formatChange(string $field, mixed $from, mixed $to): string
+    {
+        $label = str($field)->replace('_id', '')->replace('_', ' ')->title();
+        $fromLabel = $this->resolveLabel($field, $from);
+        $toLabel   = $this->resolveLabel($field, $to);
+
+        return "{$label} changed from {$fromLabel} to {$toLabel}";
+    }
+
     private function flightPayload(array $validated): array
     {
         [$departureUtc, $arrivalUtc] = $this->convertedDates($validated);
@@ -111,7 +177,9 @@ class FlightController extends Controller
 
         $validated = $request->validate($this->rules());
 
-        $flight->update($this->flightPayload($validated));
+        $flight->fill($this->flightPayload($validated));
+        $this->recordChanges($flight);
+        $flight->save();
 
         return redirect()->route('profile.departure-board', [Auth::user()->name, $flight->id]);
     }
@@ -147,7 +215,7 @@ class FlightController extends Controller
             'crew_type'           =>     $flight->crewType?->toArray() ?? [],
             'flight_reason'         => $flight->flightReason->toArray(),
             'airline_options'       => $flight->airline
-                ? [['value' => $flight->airline->id, 'title' => $flight->airline->display_name]]
+                ? [['value' => $flight->airline->id, 'title' => $flight->airline->display_name, 'logo_url' => $flight->airline->logo_url]]
                 : [],
             'from_options'          => [['value' => $flight->departureAirport->id, 'title' => $flight->departureAirport->display_name, 'country_code' => strtolower($flight->departureAirport->region->country->code)]],
             'to_options'            => [['value' => $flight->arrivalAirport->id,   'title' => $flight->arrivalAirport->display_name,   'country_code' => strtolower($flight->arrivalAirport->region->country->code)]],

app/Http/Controllers/FlightProfileController.php

@@ -10,51 +10,35 @@ use Inertia\Inertia;
 
 class FlightProfileController extends Controller
 {
-    public function profileData(string $username, string $view, ?int $selectedFlightId = null) : array {
+    public function profileData(User $user, string $view, ?int $selectedFlightId = null) : array {
-        $user = User::whereRaw(DB::raw('LOWER(name) = ?'), [strtolower($username)])->firstOrFail();
+        $flights = $user->FlightController()->flights();
-
-        $flights = UserFlight::where('user_id', $user->id)
-            ->with([
-                'departureAirport.region.country',
-                'departureAirport.region.continent',
-                'arrivalAirport.region.country',
-                'arrivalAirport.region.continent',
-                'airline.country',
-                'aircraft',
-                'seatType',
-                'flightReason',
-                'flightClass',
-                'crewType'
-            ])
-            ->orderBy('departure_date', 'desc')
-            ->get();
-
         return [
             'user' => $user,
             'canEdit' => auth()->check() && auth()->id() === $user->id,
             'flights' => UserFlightResource::collection($flights)->resolve(),
             'initialView' => $view,
             'selectedFlightId' => $selectedFlightId,
+            'isFollowing' => auth()->check() && auth()->user()->isFollowing($user),
         ];
     }
 
-    public function departureBoard(string $username, ?UserFlight $flight = null){
+    public function departureBoard(User $user, ?UserFlight $flight = null){
-        $profileData = $this->profileData($username, 'board', $flight?->id);
+        $profileData = $this->profileData($user, 'board', $flight?->id);
         return Inertia::render('UserProfile', $profileData);
     }
 
-    public function map(string $username){
+    public function map(User $user){
-        $profileData = $this->profileData($username, 'map');
+        $profileData = $this->profileData($user, 'map');
         return Inertia::render('UserProfile', $profileData);
     }
 
-    public function boardingPasses(string $username){
+    public function boardingPasses(User $user){
-        $profileData = $this->profileData($username, 'passes');
+        $profileData = $this->profileData($user, 'passes');
         return Inertia::render('UserProfile', $profileData);
     }
 
-    public function view(string $username)
+    public function view(User $user)
     {
-        return $this->departureBoard($username);
+        return $this->departureBoard($user);
     }
 }

app/Http/Controllers/UserController.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Followee;
+use App\Models\User;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+
+class UserController extends Controller
+{
+    public function follow(User $user): JsonResponse
+    {
+        $existing = Followee::where('user_id', auth()->id())
+            ->where('followee_id', $user->id)
+            ->first();
+
+        if ($existing) {
+            $existing->delete();
+            return response()->json(['following' => false]);
+        }
+
+        Followee::create([
+            'user_id'     => auth()->id(),
+            'followee_id' => $user->id,
+        ]);
+
+        return response()->json(['following' => true]);
+    }
+}

app/Http/Controllers/UserFlightController.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\User;
+use App\Models\UserFlight;
+use Illuminate\Http\Request;
+
+class UserFlightController extends Controller
+{
+
+    protected User $user;
+
+    function __construct(User $user){
+        $this->user = $user;
+    }
+
+    public function flights(){
+        return UserFlight::where('user_id', $this->user->id)
+            ->with([
+                'departureAirport.region.country',
+                'departureAirport.region.continent',
+                'arrivalAirport.region.country',
+                'arrivalAirport.region.continent',
+                'airline.country',
+                'aircraft',
+                'seatType',
+                'flightReason',
+                'flightClass',
+                'crewType'
+            ])
+            ->orderBy('departure_date', 'desc')
+            ->get();
+    }
+}

app/Models/Airline.php

@@ -45,7 +45,7 @@ class Airline extends Model
     protected function logoUrl() : Attribute{
         return Attribute::make(
             get: function () {
-                return config('app.logo_api_url') . "/airline/$this->internal_name/logo/tail/";
+                return config('app.logo_api_url') . "/airline/$this->internal_name/logo/tail";
             }
         );
     }

app/Models/Followee.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class Followee extends Model
+{
+    protected $fillable = [
+        'user_id',
+        'followee_id',
+    ];
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'user_id');
+    }
+
+    public function followee(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'followee_id');
+    }
+}

app/Models/User.php

@@ -3,6 +3,7 @@
 namespace App\Models;
 
 // use Illuminate\Contracts\Auth\MustVerifyEmail;
+use App\Http\Controllers\UserFlightController;
 use Database\Factories\UserFactory;
 use Illuminate\Database\Eloquent\Attributes\Fillable;
 use Illuminate\Database\Eloquent\Attributes\Hidden;
@@ -32,6 +33,16 @@ class User extends Authenticatable
         ];
     }
 
+    public function resolveRouteBinding($value, $field = null): ?User
+    {
+        return $this->where('name', 'ilike', $value)->firstOrFail();
+    }
+
+    public function FlightController(): UserFlightController
+    {
+        return new UserFlightController($this);
+    }
+
     public function flights(): HasMany {
         return $this->hasMany(UserFlight::class);
     }
@@ -40,4 +51,19 @@ class User extends Authenticatable
     {
         return $this->hasMany(ImportedFlight::class);
     }
+
+    public function following(): HasMany
+    {
+        return $this->hasMany(Followee::class, 'user_id');
+    }
+
+    public function followers(): HasMany
+    {
+        return $this->hasMany(Followee::class, 'followee_id');
+    }
+
+    public function isFollowing(User $user): bool
+    {
+        return $this->following()->where('followee_id', $user->id)->exists();
+    }
 }

app/Models/UserAction.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class UserAction extends Model
+{
+    protected $fillable = [
+        'user_id',
+        'user_flight_id',
+        'message',
+    ];
+
+    protected $casts = [
+        'user_flight_id' => 'integer',
+        'user_id' => 'integer',
+        'message' => 'string',
+    ];
+}

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 {
+.nav-link--danger {
-    opacity: 0.7;
+    width: 100%;
-    font-size: 0.85rem;
+    color: #f87171;
-    cursor: default;
+}
+
+.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-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>

resources/js/Pages/AddFlight.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
         flight_class: FlightClass | null
         flight_reason: FlightReason | null
         crew_type: CrewType | null
-        airline_options: { value: number; title: string }[]
+        airline_options: { value: number; title: string; logo_url: string}[]
         from_options: { value: number; title: string; country_code: string }[]
         to_options: { value: number; title: string; country_code: string }[]
         aircraft_options: { value: number; title: string }[]
@@ -106,7 +106,7 @@ const form = useForm({
     arrival_date:          props.flight?.arrival_date          ?? '',
     from:                  props.flight?.from_options[0]       ?? null as { value: number; title: string; country_code: string } | null,
     to:                    props.flight?.to_options[0]         ?? null as { value: number; title: string; country_code: string } | null,
-    airline:               props.flight?.airline_options[0]    ?? null as { value: number; title: string } | null,
+    airline:               props.flight?.airline_options[0]    ?? null as { value: number; title: string; logo_url: string } | null,
     aircraft:              props.flight?.aircraft_options[0]   ?? null as { value: number; title: string } | null,
     aircraft_registration: props.flight?.aircraft_registration ?? '',
     seat_number:           props.flight?.seat_number           ?? '',
@@ -170,7 +170,7 @@ function submit() {
 
 // ── Prefilled options ─────────────────────────────────────────────────────────
 
-const airlineOptionsData  = ref<{ value: number; title: string }[]>(props.flight?.airline_options ?? [])
+const airlineOptionsData  = ref<{ value: number; title: string; logo_url: string}[]>(props.flight?.airline_options ?? [])
 const fromOptionsData     = ref<{ value: number; title: string; country_code: string }[]>(props.flight?.from_options ?? [])
 const toOptionsData       = ref<{ value: number; title: string; country_code: string }[]>(props.flight?.to_options ?? [])
 const aircraftOptionsData = ref<{ value: number; title: string }[]>(props.flight?.aircraft_options ?? [])

resources/js/Pages/ProfileMap.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import MainLayout from "@/Layouts/MainLayout.vue";
-import { Head } from '@inertiajs/vue3';
-import {Flight, User} from "@/Types/types";
-import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue";
-import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
-import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue";
-
-defineOptions({
-    layout: MainLayout
-})
-
-defineProps<{
-    user: User
-    flights: Flight[]
-    canEdit: boolean
-}>()
-</script>
-
-<template>
-    <Head :title="`${user.name}'s Flights`" />
-    <ProfileLayout :flights="flights" :user="user">
-        <ProfileViewSwitcher active-view="map" :user="user" />
-        <FlightMapAndCharts :flights="flights" :canEdit="canEdit" />
-    </ProfileLayout>
-</template>
-
-<style scoped>
-
-</style>

resources/js/Pages/UserProfile.vue

@@ -17,11 +17,12 @@ const props = defineProps<{
     user: User
     flights: Flight[]
     canEdit: boolean
-    selectedFlightId: number | null
+    selectedFlightId?: number | null
     initialView?: ProfileView
+    isFollowing: boolean
 }>()
 
-const localSelectedFlightId = ref(props.selectedFlightId)
+const localSelectedFlightId = ref(props.selectedFlightId ?? null)
 
 // ── Filter state ──────────────────────────────────────────────────────────────
 const selectedYears         = ref<number[]>([])
@@ -69,9 +70,7 @@ function matchesFilters(f: Flight): boolean {
 }
 
 const filteredFlights = computed(() => {
-    console.time('filteredFlights')
     const result = props.flights.filter(matchesFilters)
-    console.timeEnd('filteredFlights')
     return result
 })
 
@@ -100,19 +99,23 @@ const routeNames = {
 } as const
 
 function switchView(view: ProfileView) {
+    const flightId = view === 'board' ? localSelectedFlightId.value : null
     localSelectedFlightId.value = null
     activeView.value = view
     window.history.replaceState(
         window.history.state,
         '',
-        route(routeNames[view], { username: props.user.name })
+        route(routeNames[view], {
+            user: props.user.name,
+            ...(flightId ? { flight: flightId } : {})
+        })
     )
 }
 </script>
 
 <template>
     <Head :title="`${user.name}'s Flights`" />
-    <ProfileLayout :flights="flights" :user="user">
+    <ProfileLayout :is-following="isFollowing" :flights="flights" :user="user">
         <ProfileViewSwitcher :active-view="activeView" @update:active-view="switchView" />
         <DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId"  :flight-stats="stats" :canEdit="canEdit" />
         <BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" />

routes/web.php

@@ -1,11 +1,14 @@
 <?php
 
+use App\Http\Controllers\Api\AirlineApiController;
+use App\Http\Controllers\Api\UserApiController;
 use App\Http\Controllers\FlightController;
 use App\Http\Controllers\FlightImportController;
 use App\Http\Controllers\FlightProfileController;
 use App\Http\Controllers\LogoController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\SearchController;
+use App\Http\Controllers\UserController;
 use App\Models\Airline;
 use App\Models\FlightClass;
 use App\Models\FlightReason;
@@ -58,6 +61,8 @@ Route::domain(config('app.domain'))->group(
             Route::get('/flights/lookup', [FlightController::class, 'lookup'])->name('flights.lookup');
             Route::post('/flights/import', [FlightImportController::class, 'store'])->name('flights.import.store');
 
+            Route::post('/u/{user}/follow', [UserController::class, 'follow'])->name('profile.follow');
+
             Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
             Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
             Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
@@ -71,11 +76,11 @@ Route::domain(config('app.domain'))->group(
         Route::get('/search/airports', [SearchController::class, 'airports'])->name('search.airports');
 
 
-        Route::get('/u/{username}', [FlightProfileController::class, 'view'])->name('profile.view');
+        Route::get('/u/{user}', [FlightProfileController::class, 'view'])->name('profile.view');
-        Route::get('/u/{username}/map', [FlightProfileController::class, 'map'])->name('profile.map');
+        Route::get('/u/{user}/map', [FlightProfileController::class, 'map'])->name('profile.map');
-        Route::get('/u/{username}/departure-board/{flight?}', [FlightProfileController::class, 'departureBoard'])
+        Route::get('/u/{user}/departure-board/{flight?}', [FlightProfileController::class, 'departureBoard'])
             ->name('profile.departure-board');
-        Route::get('/u/{username}/boarding-passes', [FlightProfileController::class, 'boardingPasses'])->name('profile.boarding-passes');
+        Route::get('/u/{user}/boarding-passes', [FlightProfileController::class, 'boardingPasses'])->name('profile.boarding-passes');
 
         require __DIR__.'/auth.php';
 
@@ -91,7 +96,16 @@ Route::domain(config('app.api_domain'))->group(function () {
         return response()->json(['message' => 'Welcome to the FlightsGoneBy API']);
     });
 
-    Route::get('airline/{internalName}/logo/tail', [App\Http\Controllers\Api\LogoController::class, 'getLogoByInternalName']);
+    Route::prefix('airline')->controller(AirlineApiController::class)->group(function () {
-    Route::get('user/{username}/next-flight', [App\Http\Controllers\Api\UserController::class, 'nextFlight']);
+        Route::get('{internalName}', 'get')->name('airline.show');
+        Route::get('code/{code}', 'getByCode')->name('airline.code.index');
+        Route::get('{internalName}/logo/tail', 'getLogoByInternalName')->name('airline.logo.tail');
+    });
+
+
+    Route::prefix('user')->controller(UserApiController::class)->group(function () {
+        Route::get('{username}/next-flight', 'nextFlight');
+        Route::get('{username}/flights', 'flights');
+    });
 
 });