feat: v0.21.0 — ISS-023 Relocate panel moves to left pane

components/LeftPane.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState, type ChangeEvent } from 'react';
+import type { GeoJsonFeatureCollection } from '@/lib/airports';
 import type { PlaneState, StateSnapshot } from '@/lib/game/state';
 import { PLANE_TYPES } from '@/lib/game/catalog';
 import { abandonPenalty } from '@/lib/game/penalty';
@@ -95,6 +96,34 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
   // ISS-021 (v0.20.0): shared action runner for the On board section (moved here from RightPane).
   const { runAction, busy: actionsBusy, actionError } = useGameAction(state, applySnapshot, onError);
 
+  // ISS-023 (v0.21.0): Relocate selections — moved here from the right-pane market row; same
+  // "effective selection" pattern as there: the user's pick while it stays valid, else a sensible
+  // default (first grounded plane / first airport).
+  const [relocatePlaneId, setRelocatePlaneId] = useState<string | null>(null);
+  const [relocateDestIcao, setRelocateDestIcao] = useState<string | null>(null);
+
+  // ISS-010 (v0.18.0): one-time /api/airports fetch per page life — destination options for the
+  // Relocate section, sorted by name so e2e selection is stable. Same promise-ref pattern as Map.tsx;
+  // on failure airportOptions stays null and the Relocate button simply remains disabled. Moved here
+  // from RightPane in ISS-023 (v0.21.0) — the relocate-dest select was its only consumer there.
+  const [airportOptions, setAirportOptions] = useState<Array<{ name: string; icao: string }> | null>(null);
+  const airportsPromiseRef = useRef<Promise<Array<{ name: string; icao: string }>> | null>(null);
+  useEffect(() => {
+    if (!airportsPromiseRef.current) {
+      airportsPromiseRef.current = fetch('/api/airports', { cache: 'no-store' })
+        .then((res) => {
+          if (!res.ok) throw new Error(`GET /api/airports → HTTP ${res.status}`);
+          return res.json() as Promise<GeoJsonFeatureCollection>;
+        })
+        .then((fc) =>
+          fc.features
+            .map((f) => ({ name: f.properties.name, icao: f.properties.icao }))
+            .sort((a, b) => a.name.localeCompare(b.name, 'en')),
+        );
+    }
+    void airportsPromiseRef.current.then(setAirportOptions).catch(() => {});
+  }, []);
+
   // POST /api/sim (retried up to SIM_POST_MAX_ATTEMPTS× on failure — CI runs #44/#47), then
   // refetch the full snapshot immediately so the pane reflects the new controls without waiting
   // for the next poll tick. After the final attempt fails keep the stale UI and surface an error
@@ -168,6 +197,14 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
   const clockMs = state?.simState.clockMs ?? 0;
   const onboard = state ? state.planes.filter((p) => p.status === 'flying' || slotsUsedFor(state, p.id) > 0) : [];
 
+  // ISS-023 (v0.21.0): Relocate — any GROUNDED plane can be repositioned to any airport via the
+  // existing fly endpoint (pure repositioning, no package needed since v0.12.0). Moved here from
+  // the right-pane market row; with state null both fall back to null and the section isn't rendered.
+  const grounded = state ? state.planes.filter((p) => p.status === 'available') : [];
+  const relocatePlane = grounded.find((p) => p.id === relocatePlaneId) ?? grounded[0] ?? null;
+  const relocateDest =
+    airportOptions === null ? null : airportOptions.find((a) => a.icao === relocateDestIcao) ?? airportOptions[0] ?? null;
+
   // Slider commit (v0.9.1): the displayed value follows the drag optimistically via
   // pendingScale; POST /api/sim fires after a 250 ms debounce, or immediately when the
   // user releases the slider (browsers fire a native 'change' on release). The server's
@@ -399,6 +436,53 @@ export default function LeftPane({ state, loading, error, onRefresh, applySnapsh
             )}
           </section>
 
+          {/* ISS-023 (v0.21.0): moved here from the right-pane market row — it belongs with
+              everything else about our planes, between On board and Time. */}
+          <section className="pane-section">
+            <h3 className="pane-heading">Relocate</h3>
+            {/* ISS-010 (v0.18.0): relocate a grounded plane — the fly endpoint already allows pure
+                repositioning, this row just exposes it for planes with nothing on board. */}
+            <div className="market-row market-row-relocate">
+              <select
+                data-testid="relocate-plane"
+                aria-label="Plane to relocate"
+                value={relocatePlane?.id ?? ''}
+                onChange={(e) => setRelocatePlaneId(e.target.value || null)}
+              >
+                {grounded.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {PLANE_TYPES[p.model]?.name ?? p.model} — {p.locationIcao}
+                  </option>
+                ))}
+              </select>
+              <select
+                data-testid="relocate-dest"
+                aria-label="Relocation destination airport"
+                value={relocateDest?.icao ?? ''}
+                onChange={(e) => setRelocateDestIcao(e.target.value || null)}
+              >
+                {airportOptions?.map((a) => (
+                  <option key={a.icao} value={a.icao}>
+                    {a.name}
+                  </option>
+                ))}
+              </select>
+              <button
+                type="button"
+                data-testid="relocate-go"
+                className="pane-btn"
+                disabled={actionsBusy || relocatePlane === null || relocateDest === null}
+                onClick={() => {
+                  if (relocatePlane && relocateDest) {
+                    void runAction(`/api/planes/${relocatePlane.id}/fly`, { destIcao: relocateDest.icao });
+                  }
+                }}
+              >
+                Relocate
+              </button>
+            </div>
+          </section>
+
           <section className="pane-section">
             <h3 className="pane-heading">Time</h3>
             <p data-testid="sim-clock" className="sim-clock">