Flight queue UI: dotted map line, left-pane Queue sub-section, e2e (ISS-043 part 2)

components/Map.tsx

@@ -8,7 +8,7 @@ import { DEFAULT_STYLE_ID, STYLES, STYLE_STORAGE_KEY, isStyleId, localAssetsAvai
 import type { GeoJsonFeatureCollection } from '../lib/airports';
 import type { StateSnapshot } from '../lib/game/state';
 import type { HoverTarget } from './hoverTypes';
-import { hoverRouteGeoJson, hoverTraceGeoJson, planesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
+import { hoverRouteGeoJson, hoverTraceGeoJson, planesGeoJson, queuedRoutesGeoJson, routesGeoJson, type AirportCoord, type PlaneFeatureProps } from '../lib/mapData';
 import { weatherFor } from '../lib/weather';
 import { approxLocalTime } from '../lib/localTime';
 
@@ -28,6 +28,10 @@ const PLANES_GROUNDED_LAYER_ID = 'planes-grounded';
 const PLANES_FLYING_LAYER_ID = 'planes-flying';
 const ROUTES_SOURCE_ID = 'routes';
 const ROUTES_LEGS_LAYER_ID = 'routes-legs';
+// ISS-043 (v0.26.0): the dotted queue line — a flying plane's NOT-yet-started legs
+// (dest → queue[0] → …) as their own source + layer, drawn under everything else dynamic.
+const QUEUE_ROUTES_SOURCE_ID = 'queue-routes';
+const QUEUE_ROUTES_LAYER_ID = 'queue-routes';
 // ISS-002 (v0.15.0): top-most hover-highlight layers, added after the base layers so they
 // render above them. Each starts filtered to match nothing; applyHoverRef drives the filters.
 const PLANES_HIGHLIGHT_LAYER_ID = 'planes-highlight';
@@ -95,6 +99,11 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
     if (routesSource && airportsIndexRef.current) {
       void routesSource.setData(routesGeoJson(st, airportsIndexRef.current));
     }
+    // ISS-043 (v0.26.0): the dotted queue line — same airport-index guard as the solid legs above.
+    const queueRoutesSource = map.getSource(QUEUE_ROUTES_SOURCE_ID) as maplibregl.GeoJSONSource | undefined;
+    if (queueRoutesSource && airportsIndexRef.current) {
+      void queueRoutesSource.setData(queuedRoutesGeoJson(st.planes, airportsIndexRef.current));
+    }
   };
 
   useEffect(() => {
@@ -357,6 +366,27 @@ export default function FlightMap({ state, hovered, applySnapshot }: MapProps) {
             },
           });
         }
+        // ISS-043 (v0.26.0): dotted queue line — added after routes-legs but BEFORE the hover
+        // layers so a hovered trace still draws on top of it. Muted slate + fine dots reads as
+        // "planned/future", distinct from the solid amber active leg and the [2,2] yellow hover dash.
+        if (!map.getSource(QUEUE_ROUTES_SOURCE_ID)) {
+          map.addSource(QUEUE_ROUTES_SOURCE_ID, {
+            type: 'geojson',
+            data: queuedRoutesGeoJson(stateRef.current?.planes ?? [], airportsIndexRef.current ?? new Map()),
+          });
+        }
+        if (!map.getLayer(QUEUE_ROUTES_LAYER_ID)) {
+          map.addLayer({
+            id: QUEUE_ROUTES_LAYER_ID,
+            type: 'line',
+            source: QUEUE_ROUTES_SOURCE_ID,
+            paint: {
+              'line-color': '#64748b', // muted slate — planned legs, not actively flying
+              'line-width': 3,
+              'line-dasharray': [0.1, 1.5], // dotted — distinct from solid legs and the [2,2] hover dash
+            },
+          });
+        }
         if (!map.getSource(PLANES_SOURCE_ID)) {
           map.addSource(PLANES_SOURCE_ID, { type: 'geojson', data: planesGeoJson(stateRef.current) });
         }