feat: v0.22.0 — ISS-022 target airport distinct-color ring on job-list / relocation hover

components/Map.tsx

@@ -38,6 +38,10 @@ const AIRPORTS_HIGHLIGHT_LAYER_ID = 'airports-highlight';
 // relocation's planned route is never in it. applyHoverRef pushes data into it on every hover.
 const HOVER_ROUTES_SOURCE_ID = 'hover-routes';
 const HOVER_ROUTE_LAYER_ID = 'hover-route';
+// ISS-022 (v0.22.0): the DESTINATION airport's ring — a second, differently-colored circle over
+// the same `airports` source so the target stands out from the origin's plain yellow ring.
+// applyHoverRef filters it to the hovered target's destination icao only.
+const AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID = 'airports-target-highlight';
 
 function escapeHtml(s: string): string {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -146,6 +150,10 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
         ['any', ['==', ['get', 'icao'], originIcao], ['==', ['get', 'icao'], destIcao]],
       );
     }
+    // ISS-022: the destination gets its own distinct-colored ring on top (package AND route hovers).
+    if (map.getLayer(AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID)) {
+      map.setFilter(AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID, ['==', ['get', 'icao'], destIcao]);
+    }
   };
 
   useEffect(() => {
@@ -431,6 +439,23 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
             },
           });
         }
+        // ISS-022 (v0.22.0): the destination's ring — same geometry as airports-highlight but a
+        // DIFFERENT color so the target stands out over the origin's yellow ring; added last so it
+        // also sits above the hover-route line at its endpoint. Starts filtered to match nothing.
+        if (!map.getLayer(AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID)) {
+          map.addLayer({
+            id: AIRPORTS_TARGET_HIGHLIGHT_LAYER_ID,
+            type: 'circle',
+            source: AIRPORTS_SOURCE_ID,
+            filter: ['==', ['get', 'icao'], ''],
+            paint: {
+              'circle-radius': 9, // same ring size as airports-highlight (r=5 base circles)
+              'circle-color': 'rgba(0, 0, 0, 0)', // transparent fill — stroke-only ring
+              'circle-stroke-width': 3,
+              'circle-stroke-color': '#4ade80', // green — distinct from the yellow endpoint rings
+            },
+          });
+        }
         // Layer-scoped listeners survive setStyle (they filter by layer id at event
         // time), so off+on with the same reference re-wires without duplicating.
         map.off('click', AIRPORTS_LAYER_ID, onAirportClick);