Merge pull request 'Formatting and Share Buttons' (#11) from form-validation-improvements into main

Reviewed-on: #11

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/CopyPageButton.vue

@@ -0,0 +1,55 @@
+<template>
+    <v-btn
+        :color="copied ? 'success' : color"
+        :variant="variant"
+        :icon="iconOnly"
+        :size="iconOnly ? 'x-small' : 'default'"
+        @click="handleCopy"
+    >
+        <v-icon :start="!iconOnly" :icon="copied ? 'mdi-check' : 'mdi-content-copy'" />
+        <template v-if="!iconOnly">{{ copied ? 'Copied Link To Page!' : label }}</template>
+        <v-tooltip v-if="iconOnly" activator="parent" location="top">
+            {{ copied ? 'Copied Link To Page!' : label }}
+        </v-tooltip>
+    </v-btn>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+import { copyToClipboard } from '@/Composables/useClipboard';
+
+interface Props {
+    label?: string;
+    color?: string;
+    variant?: 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain';
+    resetDelay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    label: 'Copy link',
+    color: 'primary',
+    variant: 'outlined',
+    resetDelay: 2000,
+});
+
+const { mobile } = useDisplay();
+const iconOnly = mobile;
+
+const copied = ref(false);
+let resetTimeout: ReturnType<typeof setTimeout> | null = null;
+
+async function handleCopy() {
+    try {
+        await copyToClipboard(window.location.href);
+        copied.value = true;
+
+        if (resetTimeout) clearTimeout(resetTimeout);
+        resetTimeout = setTimeout(() => {
+            copied.value = false;
+        }, props.resetDelay);
+    } catch (err) {
+        console.error('Failed to copy URL:', err);
+    }
+}
+</script>

resources/js/Components/FlightsGoneBy/FlightFilter.vue

@@ -213,17 +213,6 @@ function buildOptions(flights: Flight[]) {
 
 const availableOptions = buildOptions(props.flights)
 
-// When selected countries change, drop any selected regions that no longer
-// belong to any of the selected countries.
-watch(() => filters.country, (countries) => {
-    if (countries.length === 0) return
-    filters.airportRegion = filters.airportRegion.filter((regionId: number) => {
-        const region = availableOptions.airportRegions.find(r => r.id === regionId)
-        if (!region) return false
-        return [...region.countryCodes].some((code: string) => countries.includes(code))
-    })
-})
-
 // ── URL query sync ──────────────────────────────────────────────────────────
 
 function loadFiltersFromQuery(): boolean {
@@ -281,20 +270,6 @@ onMounted(async () => {
     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 ───────────────────────────────────────────────────────────────────
 
@@ -681,18 +656,6 @@ const countryFlagClass = (code: string) =>
             </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>
 

resources/js/Components/FlightsGoneBy/GenericBadgeTable.vue

@@ -4,6 +4,7 @@ defineProps<{
     rowKey: (row: T) => string | number
     hasItems: (row: T) => boolean
     labelWidth?: string
+    compactOnMobile?: boolean
 }>()
 </script>
 
@@ -15,7 +16,11 @@ defineProps<{
             class="badge-row"
         >
             <!-- Label column: consumer provides content -->
-            <div class="badge-label" :style="labelWidth ? `width: ${labelWidth}` : ''">
+            <div
+                class="badge-label"
+                :class="{ 'badge-label--compact': compactOnMobile }"
+                :style="labelWidth ? `width: ${labelWidth}` : ''"
+            >
                 <slot name="label" :row="row" />
             </div>
 
@@ -38,8 +43,6 @@ defineProps<{
     container-type: inline-size;
 }
 
-
-
 .badge-row {
     display: flex;
     align-items: center;
@@ -49,7 +52,7 @@ defineProps<{
 
 .badge-label {
     flex: 0 0 auto;
-    width: 15em;
+    width: 21em;
     padding: 0.5em;
     border-right: 1px solid var(--table-border);
     align-self: stretch;
@@ -63,6 +66,12 @@ defineProps<{
         font-size: 0.75rem;
         width: 9em;
     }
+
+    .badge-label--compact {
+        font-size: 0.7rem;
+        width: clamp(6em, 50cqw, 9em);
+        flex-shrink: 0;
+    }
 }
 
 .badge-scroll-container {

resources/js/Components/FlightsGoneBy/MainFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link, usePage } from "@inertiajs/vue3"
 import { SharedProps } from "@/Types/types"
+import CopyPageButton from "@/Components/FlightsGoneBy/CopyPageButton.vue";
 
 const page = usePage<SharedProps>().props
 const year = new Date().getFullYear()
@@ -63,9 +64,17 @@ footer {
     color: #ffc107;
 }
 
+.footer-version {
+    opacity: 0.8;
+    margin-left: 0.4em;
+}
+
 @media (max-width: 600px) {
     footer {
-        padding: 0 1rem;
+        flex-wrap: wrap;
+        flex: 0 0 auto;
+        row-gap: 0.5rem;
+        padding: 0.6rem 1rem;
     }
 
     .footer-copyright {
@@ -75,10 +84,6 @@ footer {
     .footer-link {
         font-size: 0.6rem;
     }
-}
 
-.footer-version {
-    opacity: 0.8;
-    margin-left: 0.4em;
 }
 </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="nav-desktop" 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/Components/UserSearchBox.vue

@@ -63,6 +63,7 @@ watch(search, (newQuery) => {
             no-filter
             clearable
             hide-details
+            hide-no-data
             autocomplete="off"
         >
             <template #item="{ item }">

resources/js/Layouts/MainLayout.vue

@@ -9,6 +9,7 @@ import { ref } from "vue";
 import NotificationListener from "@/Components/FlightsGoneBy/NotificationListener.vue";
 import {SharedProps} from "@/Types/types";
 import PushNotificationPrompt from "@/Components/PushNotificationPrompt.vue";
+import CopyPageButton from "@/Components/FlightsGoneBy/CopyPageButton.vue";
 const transitionKey = ref(0);
 
 const page = usePage<SharedProps>().props
@@ -27,6 +28,9 @@ router.on('success', () => {
                     <slot />
                 </main>
             </Transition>
+            <span class="footer-share">
+                <CopyPageButton label="Share Link" />
+            </span>
             <MainFooter :key="`footer-${transitionKey}`" />
         </div>
         <NotificationListener v-if="page.auth.user?.id" :user-id="page.auth.user?.id" />
@@ -51,6 +55,14 @@ footer {
     min-height: 3rem;
 }
 
+@media (max-width: 600px) {
+    footer {
+        flex: 0 1 auto;
+        min-height: 3.25rem;
+        padding-block: 0.35rem;
+    }
+}
+
 main {
     flex: 1 1 auto;
     background: transparent;
@@ -60,6 +72,12 @@ main {
     align-items: center;
 }
 
+.footer-share {
+    padding:1em;
+    display: flex;
+    justify-content: center;
+}
+
 .fade-enter-from,
 .fade-leave-to { opacity: 0; }
 .fade-enter-active,

resources/js/Pages/Profile/Achievements/countries_continents.all_continent_pairs_both_ways.vue

@@ -21,6 +21,12 @@ const continents = computed(() => props.continents.filter(c => c.internal_name !
 
 const { entriesByDeparture, departureNames, completedCount, totalCount } =
     useDirectedContinentPairs(flights, continents)
+
+// Split "Africa → Asia" into ["Africa", "Asia"] for independent flex items
+function splitLabel(label: string): [string, string] {
+    const [from, to] = label.split('→').map(part => part.trim())
+    return [from, to]
+}
 </script>
 
 <template>
@@ -35,11 +41,16 @@ const { entriesByDeparture, departureNames, completedCount, totalCount } =
             :rows="entriesByDeparture.get(dep) ?? []"
             :rowKey="entry => entry.key"
             :hasItems="entry => entry.flights.length > 0"
-            labelWidth="18em"
+            compactOnMobile
         >
             <template #label="{ row: entry }">
                 <div class="pair-label">
-                    <span class="pair-name">{{ entry.label }}</span>
+                    <span class="pair-part">{{ splitLabel(entry.label)[0] }}</span>
+                    <span class="pair-divider">
+                        <span class="divider-horizontal">{{ '\u2192\uFE0E' }}</span>
+                        <span class="divider-vertical">{{ '\u2193\uFE0E' }}</span>
+                    </span>
+                    <span class="pair-part">{{ splitLabel(entry.label)[1] }}</span>
                 </div>
             </template>
 
@@ -80,4 +91,55 @@ const { entriesByDeparture, departureNames, completedCount, totalCount } =
     gap: 1rem;
     margin-bottom: 0.75rem;
 }
+
+.pair-label {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    padding: 0 0.25rem;
+}
+
+.pair-part {
+    font-size: 0.9rem;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.pair-divider {
+    font-size: 0.9rem;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+.divider-vertical {
+    display: none;
+}
+
+@container (max-width: 480px) {
+    .pair-label {
+        flex-direction: column;
+        gap: 0.1rem;
+    }
+
+    .pair-part {
+        font-size: 0.7rem;
+        white-space: normal;
+    }
+
+    .pair-divider {
+        font-size: 0.65rem;
+        line-height: 1;
+    }
+
+    .divider-horizontal {
+        display: none;
+    }
+
+    .divider-vertical {
+        display: inline;
+    }
+}
 </style>

resources/js/Pages/Profile/Achievements/countries_continents.all_continent_pairs_one_way.vue

@@ -19,6 +19,12 @@ const flights = computed(() => props.flights)
 const continents = computed(() => props.continents.filter(c => c.internal_name !== 'antarctica'))
 
 const { entries, completedCount, totalCount } = useUndirectedContinentPairs(flights, continents)
+
+// Split "Africa↔Asia" into ["Africa", "Asia"] for independent flex items
+function splitLabel(label: string): [string, string] {
+    const [from, to] = label.split('↔')
+    return [from, to]
+}
 </script>
 
 <template>
@@ -32,11 +38,16 @@ const { entries, completedCount, totalCount } = useUndirectedContinentPairs(flig
             :rows="entries"
             :rowKey="entry => entry.key"
             :hasItems="entry => entry.flights.length > 0"
-            labelWidth="18em"
+            compactOnMobile
         >
             <template #label="{ row: entry }">
                 <div class="pair-label">
-                    <span class="pair-name">{{ entry.label }}</span>
+                    <span class="pair-part">{{ splitLabel(entry.label)[0] }}</span>
+                    <span class="pair-divider">
+                        <span class="divider-horizontal">{{ '\u2194\uFE0E' }}</span>
+                        <span class="divider-vertical">{{ '\u2195\uFE0E' }}</span>
+                    </span>
+                    <span class="pair-part">{{ splitLabel(entry.label)[1] }}</span>
                 </div>
             </template>
 
@@ -80,12 +91,51 @@ const { entries, completedCount, totalCount } = useUndirectedContinentPairs(flig
 .pair-label {
     width: 100%;
     display: flex;
+    flex-direction: row;
     align-items: center;
-    gap: 0.5rem;
+    justify-content: center;
+    gap: 0.35rem;
     padding: 0 0.25rem;
 }
 
-.pair-name {
+.pair-part {
     font-size: 0.9rem;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.pair-divider {
+    font-size: 0.9rem;
+    opacity: 0.6;
+    flex-shrink: 0;
+}
+
+.divider-vertical {
+    display: none;
+}
+
+@container (max-width: 480px) {
+    .pair-label {
+        flex-direction: column;
+        gap: 0.1rem;
+    }
+
+    .pair-part {
+        font-size: 0.7rem;
+        white-space: normal;
+    }
+
+    .pair-divider {
+        font-size: 0.65rem;
+        line-height: 1;
+    }
+
+    .divider-horizontal {
+        display: none;
+    }
+
+    .divider-vertical {
+        display: inline;
+    }
 }
 </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