Merge pull request 'Add London Airport and Million Mile Challenges' (#10) from add-london-airport-challenge into main

Reviewed-on: #10

app/Http/Controllers/UserProfileController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 
 use App\Models\Achievement;
 use App\Models\Aircraft;
+use App\Models\Airport;
 use App\Models\Alliance;
 use App\Models\Continent;
 use App\Models\Country;
@@ -199,6 +200,11 @@ class UserProfileController extends Controller
             default => [],
         };
 
+        $londonAirports = match($achievement->internal_name){
+            'fun_challenges.all_london_airports' => Airport::LONDON_AIRPORTS,
+            default => [],
+        };
+
         $canView = Gate::allows('viewProfileData', $user);
 
         return Inertia::render('Profile/UserAchievement', [
@@ -212,6 +218,7 @@ class UserProfileController extends Controller
             'airlines'        => $airlines,
             'continents'      => $continents,
             'aircraft_families' => $aircraftFamilies,
+            'london_airports' => $londonAirports,
             'achievementCount' => $user->unlockedAchievements()->count(),
             'majorAlliances' => Alliance::whereIn('internal_name', $majorAlliances)->get(),
             'canView' => $canView,

app/Models/Airport.php

@@ -33,6 +33,10 @@ class Airport extends Model
         'display_name',
     ];
 
+    const array LONDON_AIRPORTS = [
+        'LHR', 'LGW', 'STN', 'LTN', 'LCY', 'SEN',
+    ];
+
     protected function displayName() : Attribute{
         return Attribute::make(
             get: function () {

app/Services/Achievements/AchievementService.php

@@ -12,6 +12,7 @@ use App\Services\Achievements\Checkers\AchievementCheckerInterface;
 use App\Services\Achievements\Checkers\AircraftChecker;
 use App\Services\Achievements\Checkers\CountriesAndContinentsChecker;
 use App\Services\Achievements\Checkers\AirlinesAndAlliancesChecker;
+use App\Services\Achievements\Checkers\DistanceChecker;
 use App\Services\Achievements\Checkers\FunChallengesChecker;
 use App\Services\Achievements\Checkers\GeneralFlyingChecker;
 use Illuminate\Support\Collection;
@@ -30,6 +31,7 @@ class AchievementService
         AircraftChecker::class,
         AirlinesAndAlliancesChecker::class,
         FunChallengesChecker::class,
+        DistanceChecker::class,
     ];
 
     public function __construct()

app/Services/Achievements/Checkers/DistanceChecker.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Services\Achievements\Checkers;
+
+use App\Models\User;
+use App\Models\UserFlight;
+use Illuminate\Database\Eloquent\Collection;
+
+class DistanceChecker extends BaseChecker
+{
+    public function check(): void
+    {
+        /**
+         * @var $flights Collection<int, UserFlight>
+         */
+        $flights = $this->flights();
+
+        $totalDistance = $flights->sum('distance');
+
+        $this->awardProgress((int) $totalDistance, 'distance.circumference_of_the_earth');
+        $this->awardProgress((int) $totalDistance, 'distance.to_the_moon');
+        $this->awardProgress((int) $totalDistance, 'distance.gigametre');
+        $this->awardProgress((int) $totalDistance, 'distance.million_miles');
+
+    }
+}

app/Services/Achievements/Checkers/FunChallengesChecker.php

@@ -2,6 +2,7 @@
 
 namespace App\Services\Achievements\Checkers;
 
+use App\Models\Airport;
 use App\Models\User;
 use App\Models\UserFlight;
 
@@ -131,5 +132,19 @@ class FunChallengesChecker extends BaseChecker
             ->count();
 
         $this->awardProgress($visitedCanadianProvinces, 'fun_challenges.canadian_provinces');
+
+        // --- London Airports ---
+        $visitedLondonAirports = $flights
+            ->flatMap(fn(UserFlight $f) => [
+                $f->departureAirport?->iata_code,
+                $f->arrivalAirport?->iata_code,
+            ])
+            ->filter()
+            ->map(fn($code) => strtoupper($code))
+            ->filter(fn($code) => in_array($code, Airport::LONDON_AIRPORTS))
+            ->unique()
+            ->count();
+
+        $this->awardProgress($visitedLondonAirports, 'fun_challenges.all_london_airports');
     }
 }

app/Services/Achievements/Checkers/GeneralFlyingChecker.php

@@ -68,14 +68,6 @@ class GeneralFlyingChecker extends BaseChecker
             'general_flying.domestic_two_countries'
         );
 
-        // --- Progressive achievements ---
-
-        $totalDistance = $flights->sum('distance');
-
-        $this->awardProgress((int) $totalDistance, 'general_flying.circumference_of_the_earth');
-        $this->awardProgress((int) $totalDistance, 'general_flying.to_the_moon');
-        $this->awardProgress((int) $totalDistance, 'general_flying.gigametre');
-
         $this->awardProgress($count,'general_flying.10_flights');
         $this->awardProgress($count,'general_flying.50_flights');
         $this->awardProgress($count,'general_flying.100_flights');

database/migrations/2026_08_11_100455_add_london_achievement.php

@@ -0,0 +1,87 @@
+<?php
+
+use App\Models\Achievement;
+use App\Models\AchievementCategory;
+use App\Models\AchievementDifficulty;
+use App\Models\User;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        $hard = AchievementDifficulty::where('internal_name', 'hard')->first();
+        $near_impossible = AchievementDifficulty::where('internal_name', 'near_impossible')->first();
+        $fun_challenges = AchievementCategory::where('internal_name', 'fun_challenges')->first();
+
+        Achievement::create([
+            'name' => 'London Calling',
+            'internal_name' => 'fun_challenges.all_london_airports',
+            'short_description' => 'Fly to all official London airports',
+            'progressive' => true,
+            'difficulty_description' => 'Much more achievable if you live in London!',
+            'threshold' => 6,
+            'achievement_category_id' => $fun_challenges->id,
+            'achievement_difficulty_id' => $hard->id,
+            'has_page' => true,
+            'sort_order' => 10,
+            'icon' => 'standard_achievement.png',
+            'long_description' => '',
+        ]);
+
+        $distance = AchievementCategory::create([
+            'name' => 'Distance',
+            'internal_name' => 'distance',
+            'description' => 'Achievements that are based on distance'
+        ]);
+
+        Achievement::create([
+            'name' => 'Million Miler',
+            'internal_name' => 'distance.million_miles',
+            'short_description' => 'Fly one million miles',
+            'progressive' => true,
+            'threshold' => 1609344,
+            'achievement_category_id' => $distance->id,
+            'achievement_difficulty_id' => $near_impossible->id,
+            'has_page' => false,
+            'sort_order' => 4,
+            'icon' => 'standard_achievement.png',
+            'long_description' => '',
+        ]);
+
+        Achievement::whereInternalName('general_flying.gigametre')->update([
+            'internal_name' => 'distance.gigametre',
+            'achievement_category_id' => $distance->id,
+            'sort_order' => 3
+        ]);
+
+        Achievement::whereInternalName('general_flying.circumference_of_the_earth')->update([
+            'internal_name' => 'distance.circumference_of_the_earth',
+            'achievement_category_id' => $distance->id,
+            'sort_order' => 1
+        ]);
+
+        Achievement::whereInternalName('general_flying.to_the_moon')->update([
+            'internal_name' => 'distance.to_the_moon',
+            'achievement_category_id' => $distance->id,
+            'sort_order' => 2
+        ]);
+
+        foreach(User::all() as $user){
+            $user->calculateAchievements();
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        //
+    }
+};

resources/js/Components/FlightsGoneBy/FlightFilter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Airline, Alliance, Flight, RegionRange, FlightRange, FlightScope } from '@/Types/types'
-import { ref, watch } from 'vue'
+import { reactive, ref, watch, onMounted, nextTick } from 'vue'
 import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue"
 
 const props = defineProps<{
@@ -30,6 +30,56 @@ const emit = defineEmits<{
     }]
 }>()
 
+// ── Filter registry ──────────────────────────────────────────────────────────
+//
+// This is the single source of truth for every filter's identity. To add a
+// new filter:
+//   1. Add one entry here (name = the key used in `filters` + the URL param,
+//      emitKey = the key expected by the `change` event, kind = how to parse
+//      values coming back out of the URL).
+//   2. Add a <v-select> in the template with :name="'yourName'" and
+//      v-model="filters.yourName" (initialise it in `filters` below, or just
+//      let step 1 do it for you since `filters` is derived from this list).
+//
+// Nothing else needs to know about the new filter — URL loading, URL syncing,
+// and the emitted payload are all generic over this list.
+
+type FilterKind = 'number' | 'string'
+
+interface FilterDef {
+    name: string       // key in `filters`, and the URL query param name
+    emitKey: string     // key in the payload sent via the `change` event
+    kind: FilterKind    // how to coerce values parsed back out of the URL
+}
+
+const FILTER_DEFS: FilterDef[] = [
+    { name: 'year',          emitKey: 'years',          kind: 'number' },
+    { name: 'airline',       emitKey: 'airlines',       kind: 'number' },
+    { name: 'alliance',      emitKey: 'alliances',      kind: 'number' },
+    { name: 'country',       emitKey: 'countries',      kind: 'string' },
+    { name: 'continent',     emitKey: 'continents',     kind: 'string' },
+    { name: 'flightClass',   emitKey: 'flightClasses',  kind: 'number' },
+    { name: 'crewType',      emitKey: 'crewTypes',      kind: 'number' },
+    { name: 'flightScope',   emitKey: 'flightScopes',   kind: 'string' },
+    { name: 'flightRange',   emitKey: 'flightRanges',   kind: 'string' },
+    { name: 'regionRange',   emitKey: 'regionRanges',   kind: 'string' },
+    { name: 'flightReason',  emitKey: 'flightReasons',  kind: 'number' },
+    { name: 'seatType',      emitKey: 'seatTypes',      kind: 'number' },
+    { name: 'manufacturer',  emitKey: 'manufacturers',  kind: 'string' },
+    { name: 'aircraftModel', emitKey: 'aircraftModels', kind: 'number' },
+    { name: 'engineType',    emitKey: 'engineTypes',    kind: 'string' },
+    { name: 'engineCount',   emitKey: 'engineCounts',   kind: 'number' },
+    { name: 'airportRegion', emitKey: 'airportRegions', kind: 'number' },
+    { name: 'otherUsers',    emitKey: 'otherUsers',     kind: 'string' },
+]
+
+// Single reactive bag of filter state, one array per FILTER_DEFS entry.
+// `filters.year`, `filters.airline`, etc. This is what every v-select
+// v-models against.
+const filters = reactive<Record<string, any[]>>(
+    Object.fromEntries(FILTER_DEFS.map(d => [d.name, []])),
+)
+
 // ── Available options ─────────────────────────────────────────────────────────
 
 type AirlineData = { id: number; name: string; airline: Airline }
@@ -163,59 +213,76 @@ function buildOptions(flights: Flight[]) {
 
 const availableOptions = buildOptions(props.flights)
 
-// ── Filter state ──────────────────────────────────────────────────────────────
+// ── URL query sync ──────────────────────────────────────────────────────────
 
-const selectedYears          = ref<number[]>([])
-const selectedAirlines       = ref<number[]>([])
-const selectedAlliances      = ref<number[]>([])
-const selectedCountries      = ref<string[]>([])
-const selectedContinents     = ref<string[]>([])
-const selectedFlightClasses  = ref<number[]>([])
-const selectedCrewTypes      = ref<number[]>([])
-const selectedFlightScopes   = ref<FlightScope[]>([])
-const selectedFlightRanges   = ref<FlightRange[]>([])
-const selectedRegionRanges   = ref<RegionRange[]>([])
-const selectedFlightReasons  = ref<number[]>([])
-const selectedSeatTypes      = ref<number[]>([])
-const selectedManufacturers  = ref<string[]>([])
-const selectedAircraftModels = ref<number[]>([])
-const selectedEngineTypes    = ref<string[]>([])
-const selectedEngineCounts   = ref<number[]>([])
-const selectedAirportRegions = ref<number[]>([])
-const selectedOtherUsers = ref<string[]>([])
+function loadFiltersFromQuery(): boolean {
+    const params = new URLSearchParams(window.location.search)
+    let foundAny = false
+    for (const def of FILTER_DEFS) {
+        const raw = params.get(def.name)
+        if (!raw) continue
+        const values = raw.split(',').filter(Boolean)
+        filters[def.name] = def.kind === 'number'
+            ? values.map(Number).filter(n => !Number.isNaN(n))
+            : values
+        foundAny = true
+    }
+    return foundAny
+}
 
-// When selected countries change, drop any selected regions that no longer
-// belong to any of the selected countries.
-watch(selectedCountries, (countries) => {
-    if (countries.length === 0) return
-    selectedAirportRegions.value = selectedAirportRegions.value.filter(regionId => {
-        const region = availableOptions.airportRegions.find(r => r.id === regionId)
-        if (!region) return false
-        return [...(region as any).countryCodes].some((code: string) => countries.includes(code))
-    })
-})
+function syncUrlWithFilters() {
+    const params = new URLSearchParams()
+    for (const def of FILTER_DEFS) {
+        const value = filters[def.name]
+        if (value.length > 0)
+            params.set(def.name, value.join(','))
+    }
+    const query = params.toString()
+    const newUrl = `${window.location.pathname}${query ? `?${query}` : ''}`
+    window.history.replaceState(window.history.state, '', newUrl)
+}
+
+// ── Emit ──────────────────────────────────────────────────────────────────────
 
 function emitFilters() {
-    emit('change', {
-        years:          selectedYears.value,
-        airlines:       selectedAirlines.value,
-        alliances:      selectedAlliances.value,
-        countries:      selectedCountries.value,
-        continents:     selectedContinents.value,
-        flightClasses:  selectedFlightClasses.value,
-        crewTypes:      selectedCrewTypes.value,
-        flightScopes:   selectedFlightScopes.value,
-        flightRanges:   selectedFlightRanges.value,
-        regionRanges:   selectedRegionRanges.value,
-        flightReasons:  selectedFlightReasons.value,
-        seatTypes:      selectedSeatTypes.value,
-        manufacturers:  selectedManufacturers.value,
-        aircraftModels: selectedAircraftModels.value,
-        engineTypes:    selectedEngineTypes.value,
-        engineCounts:   selectedEngineCounts.value,
-        airportRegions: selectedAirportRegions.value,
-        otherUsers: selectedOtherUsers.value,
+    syncUrlWithFilters()
+    const payload = Object.fromEntries(
+        FILTER_DEFS.map(def => [def.emitKey, filters[def.name]]),
+    )
+    emit('change', payload as Parameters<typeof emit>[1] extends [infer T] ? T : never)
+}
+
+onMounted(async () => {
+    const hasQueryFilters = loadFiltersFromQuery()
+
+    // Only emit if the URL actually seeded some filters - a plain page load
+    // (no query params) should behave exactly like before and not emit at all,
+    // since the parent already renders its own initial, unfiltered state.
+    if (!hasQueryFilters) return
+
+    // Wait a beat before emitting. Charts further down the tree (ApexCharts,
+    // in particular) initialize asynchronously on their own mount; firing our
+    // update in the same synchronous pass can hand them new series data before
+    // their internal chart instance exists yet, which throws inside the
+    // charting library. A couple of ticks is enough to let that settle.
+    await nextTick()
+    await nextTick()
+    emitFilters()
 })
+
+// ── Copy link ─────────────────────────────────────────────────────────────────
+
+const linkCopied = ref(false)
+
+async function copyFilterLink() {
+    try {
+        await navigator.clipboard.writeText(window.location.href)
+        linkCopied.value = true
+        setTimeout(() => { linkCopied.value = false }, 2000)
+    } catch {
+        // Clipboard API unavailable (e.g. non-secure context) - nothing to fall
+        // back to here, the button just silently no-ops.
+    }
 }
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
@@ -225,10 +292,12 @@ const countryFlagClass = (code: string) =>
 </script>
 
 <template>
+    <div class="flight-filters-wrapper">
         <div class="flight-filters">
 
             <v-select
-            v-model="selectedYears"
+                name="year"
+                v-model="filters.year"
                 :items="availableOptions.years"
                 label="Year"
                 multiple clearable hide-details
@@ -237,14 +306,15 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ item }}<span v-if="index < Math.min(selectedYears.length, 2) - 1">,&nbsp;</span>
+                        {{ item }}<span v-if="index < Math.min(filters.year.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedYears.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.year.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
-            v-model="selectedAirlines"
+                name="airline"
+                v-model="filters.airline"
                 :items="availableOptions.airlines"
                 item-title="name" item-value="id"
                 label="Airline"
@@ -270,15 +340,16 @@ const countryFlagClass = (code: string) =>
                 </template>
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAirlines.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.airline.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirlines.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.airline.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.alliances.length > 0"
-            v-model="selectedAlliances"
+                name="alliance"
+                v-model="filters.alliance"
                 :items="availableOptions.alliances"
                 item-title="name" item-value="id"
                 label="Alliance"
@@ -299,14 +370,15 @@ const countryFlagClass = (code: string) =>
                 </template>
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAlliances.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.alliance.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAlliances.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.alliance.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
-            v-model="selectedCountries"
+                name="country"
+                v-model="filters.country"
                 :items="availableOptions.countries"
                 item-title="name" item-value="code"
                 label="Country"
@@ -328,15 +400,16 @@ const countryFlagClass = (code: string) =>
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
                         <span :class="countryFlagClass((item as any).code)" style="margin-right: 4px;" />
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedCountries.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.country.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCountries.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.country.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.flightScopes.length > 1"
-            v-model="selectedFlightScopes"
+                name="flightScope"
+                v-model="filters.flightScope"
                 :items="availableOptions.flightScopes"
                 item-title="label" item-value="value"
                 label="Flight Scope"
@@ -346,15 +419,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).label }}<span v-if="index < Math.min(selectedFlightScopes.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).label }}<span v-if="index < Math.min(filters.flightScope.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightScopes.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightScope.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.airportRegions.length > 0"
-            v-model="selectedAirportRegions"
+                name="airportRegion"
+                v-model="filters.airportRegion"
                 :items="availableOptions.airportRegions"
                 item-title="name" item-value="id"
                 label="Region"
@@ -364,15 +438,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAirportRegions.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.airportRegion.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAirportRegions.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.airportRegion.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.regionRanges.length > 1"
-            v-model="selectedRegionRanges"
+                name="regionRange"
+                v-model="filters.regionRange"
                 :items="availableOptions.regionRanges"
                 item-title="label" item-value="value"
                 label="Region Range"
@@ -382,14 +457,15 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).label }}<span v-if="index < Math.min(selectedRegionRanges.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).label }}<span v-if="index < Math.min(filters.regionRange.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedRegionRanges.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.regionRange.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
-            v-model="selectedContinents"
+                name="continent"
+                v-model="filters.continent"
                 :items="availableOptions.continents"
                 item-title="name" item-value="code"
                 label="Continent"
@@ -399,15 +475,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedContinents.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.continent.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedContinents.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.continent.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.flightRanges.length > 1"
-            v-model="selectedFlightRanges"
+                name="flightRange"
+                v-model="filters.flightRange"
                 :items="availableOptions.flightRanges"
                 item-title="label" item-value="value"
                 label="Flight Range"
@@ -417,14 +494,15 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).label }}<span v-if="index < Math.min(selectedFlightRanges.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).label }}<span v-if="index < Math.min(filters.flightRange.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightRanges.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightRange.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
-            v-model="selectedFlightClasses"
+                name="flightClass"
+                v-model="filters.flightClass"
                 :items="availableOptions.classes"
                 item-title="name" item-value="id"
                 label="Flight Class"
@@ -434,15 +512,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedFlightClasses.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.flightClass.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightClasses.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightClass.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.flightReasons.length > 0"
-            v-model="selectedFlightReasons"
+                name="flightReason"
+                v-model="filters.flightReason"
                 :items="availableOptions.flightReasons"
                 item-title="name" item-value="id"
                 label="Flight Reason"
@@ -452,15 +531,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedFlightReasons.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.flightReason.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightReasons.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.flightReason.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.seatTypes.length > 0"
-            v-model="selectedSeatTypes"
+                name="seatType"
+                v-model="filters.seatType"
                 :items="availableOptions.seatTypes"
                 item-title="name" item-value="id"
                 label="Seat Type"
@@ -470,15 +550,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedSeatTypes.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.seatType.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedSeatTypes.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.seatType.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.manufacturers.length > 0"
-            v-model="selectedManufacturers"
+                name="manufacturer"
+                v-model="filters.manufacturer"
                 :items="availableOptions.manufacturers"
                 item-title="name" item-value="name"
                 label="Aircraft Manufacturer"
@@ -488,15 +569,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedManufacturers.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.manufacturer.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedManufacturers.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.manufacturer.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.aircraftModels.length > 0"
-            v-model="selectedAircraftModels"
+                name="aircraftModel"
+                v-model="filters.aircraftModel"
                 :items="availableOptions.aircraftModels"
                 item-title="name" item-value="id"
                 label="Aircraft Model"
@@ -506,15 +588,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedAircraftModels.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.aircraftModel.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedAircraftModels.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.aircraftModel.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.engineTypes.length > 0"
-            v-model="selectedEngineTypes"
+                name="engineType"
+                v-model="filters.engineType"
                 :items="availableOptions.engineTypes"
                 item-title="name" item-value="name"
                 label="Engine Type"
@@ -524,15 +607,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedEngineTypes.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.engineType.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedEngineTypes.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.engineType.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.engineCounts.length > 0"
-            v-model="selectedEngineCounts"
+                name="engineCount"
+                v-model="filters.engineCount"
                 :items="availableOptions.engineCounts"
                 item-title="count" item-value="count"
                 label="Engine Count"
@@ -542,15 +626,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).count }}<span v-if="index < Math.min(selectedEngineCounts.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).count }}<span v-if="index < Math.min(filters.engineCount.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedEngineCounts.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.engineCount.length - 2 }}</span>
                 </template>
             </v-select>
 
             <v-select
                 v-if="availableOptions.crewTypes.length > 0"
-            v-model="selectedCrewTypes"
+                name="crewType"
+                v-model="filters.crewType"
                 :items="availableOptions.crewTypes"
                 item-title="name" item-value="id"
                 label="Crew Type"
@@ -560,14 +645,16 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-                    {{ (item as any).name }}<span v-if="index < Math.min(selectedCrewTypes.length, 2) - 1">,&nbsp;</span>
+                        {{ (item as any).name }}<span v-if="index < Math.min(filters.crewType.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCrewTypes.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.crewType.length - 2 }}</span>
                 </template>
             </v-select>
+
             <v-select
                 v-if="availableOptions.otherUsers.length > 0"
-            v-model="selectedOtherUsers"
+                name="otherUsers"
+                v-model="filters.otherUsers"
                 :items="availableOptions.otherUsers"
                 label="Flew With"
                 multiple clearable hide-details
@@ -576,11 +663,25 @@ const countryFlagClass = (code: string) =>
             >
                 <template #selection="{ item, index }">
                     <span v-if="index < 2" class="v-select__selection-text">
-            {{ item }}<span v-if="index < Math.min(selectedOtherUsers.length, 2) - 1">,&nbsp;</span>
+                        {{ item }}<span v-if="index < Math.min(filters.otherUsers.length, 2) - 1">,&nbsp;</span>
                     </span>
-                <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedOtherUsers.length - 2 }}</span>
+                    <span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ filters.otherUsers.length - 2 }}</span>
                 </template>
             </v-select>
+
+        </div>
+
+        <div class="flight-filters-actions">
+            <v-btn
+                :prepend-icon="linkCopied ? 'mdi-check' : 'mdi-link-variant'"
+                :color="linkCopied ? 'success' : undefined"
+                variant="outlined"
+                size="small"
+                @click="copyFilterLink"
+            >
+                {{ linkCopied ? 'Copied!' : 'Copy Link to This Page With Filters' }}
+            </v-btn>
+        </div>
     </div>
 </template>
 
@@ -595,4 +696,8 @@ const countryFlagClass = (code: string) =>
 .flight-filters .v-select {
     flex: 1 1 160px;
 }
+
+.flight-filters-actions {
+    margin-top: 12px;
+}
 </style>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -31,7 +31,7 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
             <Logo variant="color" />
         </Link>
 
-        <UserSearchBox density="compact" style="max-width:400px; width: 400px;" />
+        <UserSearchBox class="user-search-box" density="compact" style="max-width:400px; width: 400px;" />
         <NotificationMenu v-if="page.props.auth?.user" :unread-count="page.props.unread_notification_count" />
 
         <!-- Desktop nav -->
@@ -371,5 +371,6 @@ header {
 @media (max-width: 600px) {
     .nav-desktop { display: none; }
     .hamburger { display: flex; }
+    .user-search-box { display: none; }
 }
 </style>

resources/js/Pages/Profile/Achievements/fun_challenges.all_london_airports.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Achievement, Flight, User, Airport } from '@/Types/types'
+import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
+import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.vue'
+import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
+import FlightBadge from '@/Components/FlightsGoneBy/FlightBadge.vue'
+
+defineOptions({ inheritAttrs: false })
+
+
+const props = defineProps<{
+    achievement: Achievement
+    user: User
+    followStatus: string
+    londonAirports: string[]
+    flights: Flight[]
+}>()
+
+interface AirportEntry {
+    code: string
+    airport: Airport | null
+    flights: Flight[]
+}
+
+const LONDON_AIRPORT_NAMES: Record<string, string> = {
+    LHR: 'Heathrow Airport',
+    LGW: 'Gatwick Airport',
+    STN: 'Stansted Airport',
+    LTN: 'Luton Airport',
+    LCY: 'City Airport',
+    SEN: 'Southend Airport',
+}
+
+
+const airports = computed<AirportEntry[]>(() => {
+    const entries = props.londonAirports.map(code => ({
+        code,
+        airport: null as Airport | null,
+        flights: [] as Flight[],
+    }))
+    const byCode = new Map(entries.map(e => [e.code, e]))
+
+    for (const flight of props.flights) {
+        const dep = flight.departure_airport
+        const arr = flight.arrival_airport
+
+        if (dep?.iata_code && byCode.has(dep.iata_code)) {
+            const entry = byCode.get(dep.iata_code)!
+            entry.airport ??= dep
+            entry.flights.push(flight)
+        }
+
+        if (arr?.iata_code && byCode.has(arr.iata_code)) {
+            const entry = byCode.get(arr.iata_code)!
+            entry.airport ??= arr
+            entry.flights.push(flight)
+        }
+    }
+
+    return entries
+})
+
+const rows = computed(() => airports.value.map(e => e.code))
+
+function entryFor(code: string): AirportEntry {
+    return airports.value.find(e => e.code === code)!
+}
+
+function flightTitle(flight: Flight): string {
+    const name = flight.airline?.name ?? 'Unknown airline'
+    return `${name}: ${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`
+}
+</script>
+
+<template>
+    <!-- Airports table -->
+    <Panel>
+        <div class="table-toolbar">
+            <PanelHeader>London Airports</PanelHeader>
+        </div>
+
+        <BadgeTable
+            :rows="rows"
+            :rowKey="code => code"
+            :hasItems="code => entryFor(code).flights.length > 0"
+            labelWidth="14em"
+        >
+            <template #label="{ row: code }">
+                <div class="airport-label">
+                    <span class="airport-code">{{ code }}</span>
+                    <span>{{ LONDON_AIRPORT_NAMES[code] ?? code }}</span>
+                </div>
+            </template>
+
+            <template #items="{ row: code }">
+                <FlightBadge
+                    v-for="flight in entryFor(code).flights"
+                    :key="flight.id"
+                    :title="flightTitle(flight)"
+                    :flight="flight"
+                />
+            </template>
+        </BadgeTable>
+    </Panel>
+
+    <!-- Requirements -->
+    <Panel>
+        <PanelHeader centered>Requirements</PanelHeader>
+        <p>
+            To complete this challenge you must fly to all {{ londonAirports.length }} of
+            London's airports — Heathrow, Gatwick, Stansted, Luton, London City, and Southend.
+        </p>
+    </Panel>
+</template>
+
+<style scoped>
+.table-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.airport-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
+}
+
+.airport-code {
+    font-weight: 600;
+    opacity: 0.7;
+    min-width: 2.75rem;
+}
+</style>

resources/js/Pages/Profile/UserAchievement.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
     regions: Region[]
     alliance: Alliance | null
     airlines: Airline[]
+    london_airports: string[]
     continents: Continent[]
     aircraft_families: Record<string, string[]>
     majorAlliances: Alliance[]
@@ -119,6 +120,7 @@ const unlocked = computed(() => {
                 :continents="continents"
                 :families="aircraft_families"
                 :major-alliances="majorAlliances"
+                :london-airports="london_airports"
             />
 
             <FollowingSelectBox