From 6fad966b7eca4fe8c235c432b83151e1c03cfe55 Mon Sep 17 00:00:00 2001
From: josh <josh.dredge@outlook.com>
Date: Tue, 16 Jun 2026 18:46:46 +1000
Subject: [PATCH] Updated Map View

---
 .../FlightsGoneBy/AchievementCard.vue         |  1 +
 .../js/Components/FlightsGoneBy/FlightMap.vue |  6 +--
 .../FlightsGoneBy/FlightToolTip.vue           | 45 +++++++++++--------
 .../Components/FlightsGoneBy/GlassTooltip.vue | 10 ++++-
 .../js/Pages/Profile/UserAchievement.vue      |  2 +-
 5 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/resources/js/Components/FlightsGoneBy/AchievementCard.vue b/resources/js/Components/FlightsGoneBy/AchievementCard.vue
index e6eccf3..0e259ed 100644
--- a/resources/js/Components/FlightsGoneBy/AchievementCard.vue
+++ b/resources/js/Components/FlightsGoneBy/AchievementCard.vue
@@ -50,6 +50,7 @@ const unlocked = computed(() => {
         :class="{ locked: !unlocked && !inProgress }"
         rounded="lg"
         elevation="2"
+        :id = "achievement.internal_name"
     >
         <v-card-text class="cardLayout">
             <div class="achievement-inner">
diff --git a/resources/js/Components/FlightsGoneBy/FlightMap.vue b/resources/js/Components/FlightsGoneBy/FlightMap.vue
index f396f59..dcf9cc6 100644
--- a/resources/js/Components/FlightsGoneBy/FlightMap.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightMap.vue
@@ -14,7 +14,7 @@
         </div>
         <div v-if="showLegend" class="map-legend" :class="{ 'map-legend--open': legendOpen }">
             <button class="map-legend__toggle" @click="legendOpen = !legendOpen">
-                <span class="mdi mdi-map-legend" />
+                <span class="mdi mdi-format-list-bulleted" />
                 <span class="map-legend__toggle-label">Legend</span>
                 <span class="mdi" :class="legendOpen ? 'mdi-chevron-down' : 'mdi-chevron-up'" />
             </button>
@@ -894,14 +894,14 @@ export default defineComponent({
     display:        flex;
     flex-direction: column;
     gap:            6px;
-    padding:        0 10px 10px;
+    padding:        0 10px 0;
     max-height:     0;
     overflow:       hidden;
     transition:     max-height 0.2s ease, padding 0.2s ease;
 }
 .map-legend--open .map-legend__body {
     max-height: 200px;
-    padding-top: 2px;
+    padding: 2px 10px 10px;
 }
 
 .map-legend__row {
diff --git a/resources/js/Components/FlightsGoneBy/FlightToolTip.vue b/resources/js/Components/FlightsGoneBy/FlightToolTip.vue
index 6a5940f..dcca3ce 100644
--- a/resources/js/Components/FlightsGoneBy/FlightToolTip.vue
+++ b/resources/js/Components/FlightsGoneBy/FlightToolTip.vue
@@ -9,6 +9,7 @@ import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
 import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
 import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
 import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
+import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
 
 defineProps<{
     flight: Flight
@@ -23,34 +24,40 @@ defineProps<{
             </div>
         </template>
 
-        <ToolTipHeader>
+        <template #default="{ isActive }">
+            <ToolTipHeader>
             <span class="designator">
                 <AirlineLogo hideTooltip :airline="flight.airline" size="24" />
                 {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
             </span>
-        </ToolTipHeader>
+            </ToolTipHeader>
 
-        <ToolTipName>
-            <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
-            <span class="arrow">→</span>
-            <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
-        </ToolTipName>
+            <ToolTipName>
+                <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
+                <span class="arrow">→</span>
+                <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
+            </ToolTipName>
 
-        <ToolTipDivider />
 
-        <ToolTipRows v-if="flight.livery_url">
-            <LiveryImage :flight="flight" />
-        </ToolTipRows>
+            <ToolTipRows  v-if="isActive.value">
+                <FlightMap :flights="[flight]" :showLegend="false" />
+            </ToolTipRows>
 
-        <ToolTipDivider v-if="flight.livery_url" />
+            <ToolTipDivider />
 
-        <ToolTipRows>
-            <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
-            <ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
-            <ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
-            <ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short"  v-if="flight.aircraft" />
-            <ToolTipRow label="Date" :value="flight.departure_date_display" />
-        </ToolTipRows>
+            <ToolTipRows>
+                <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
+                <ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
+                <ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
+                <ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
+                <ToolTipRow label="Date" :value="flight.departure_date_display" />
+            </ToolTipRows>
+            <ToolTipDivider v-if="flight.livery_url" />
+            <ToolTipRows v-if="flight.livery_url">
+                <LiveryImage :flight="flight" />
+            </ToolTipRows>
+
+        </template>
     </GlassTooltip>
 </template>
 
diff --git a/resources/js/Components/FlightsGoneBy/GlassTooltip.vue b/resources/js/Components/FlightsGoneBy/GlassTooltip.vue
index 14b03a4..f1224a3 100644
--- a/resources/js/Components/FlightsGoneBy/GlassTooltip.vue
+++ b/resources/js/Components/FlightsGoneBy/GlassTooltip.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import {Anchor} from "vuetify";
+import {Ref} from "vue";
 
 defineProps<{
     location?: Anchor;
     openDelay?: number;
 }>();
+
+defineSlots<{
+    activator(props: any): any;
+    default(props: { isActive: Ref<boolean> }): any;
+}>();
 </script>
 
 <template>
@@ -13,9 +19,9 @@ defineProps<{
             <slot name="activator" v-bind="activatorScope" />
         </template>
 
-        <template #default>
+        <template #default="tooltipScope">
             <div class="glass-tooltip glass glass-border">
-                <slot />
+                <slot v-bind="tooltipScope" />
             </div>
         </template>
     </v-tooltip>
diff --git a/resources/js/Pages/Profile/UserAchievement.vue b/resources/js/Pages/Profile/UserAchievement.vue
index fe9b756..949e4d5 100644
--- a/resources/js/Pages/Profile/UserAchievement.vue
+++ b/resources/js/Pages/Profile/UserAchievement.vue
@@ -70,7 +70,7 @@ const difficultyVariant = computed(() => {
     <ProfileLayout :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
         <Head :title="`${achievement.name}`" />
         <div class="innerLayout">
-            <ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`"  :href="route('profile.achievements', { user: user.name })" />
+            <ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`"  :href="`${route('profile.achievements', { user: user.name })}#${achievement.internal_name}`" />
 
 
             <VAlert type="info" v-if="loggedInUser?.id !== user.id && loggedInUser">