feat: v0.20.0 — ISS-021 move On board to left pane, widen left 360/280

components/RightPane.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { GeoJsonFeatureCollection } from '@/lib/airports';
 import type { PackageState, PlaneState, StateSnapshot } from '@/lib/game/state';
 import { PLANE_TYPES } from '@/lib/game/catalog';
-import { abandonPenalty } from '@/lib/game/penalty';
 import { formatCash, formatDeadlineRelative } from '@/lib/format';
+import { useGameAction } from '@/lib/useGameAction';
 import type { HoverTarget } from './hoverTypes';
 
 interface RightPaneProps {
@@ -109,13 +109,9 @@ function LoadControls({
 }
 
 export default function RightPane({ state, loading, applySnapshot, onHover, onError }: RightPaneProps) {
-  const [busy, setBusy] = useState(false);
-  // Inline error from a failed action — auto-clears on the next successful poll (the shell's
-  // snapshot prop changes every tick) or the next successful action.
-  const [actionError, setActionError] = useState<string | null>(null);
-  useEffect(() => {
-    if (state !== null) setActionError(null);
-  }, [state]);
+  // ISS-021 (v0.20.0): shared action runner — busy gate, inline pane error + shell toast on
+  // failure, full post-action snapshot pushed into the shared state on success.
+  const { runAction, busy, actionError } = useGameAction(state, applySnapshot, onError);
 
   // Market picker selections — same "effective selection" pattern as LoadControls: the
   // user's pick while it stays valid, else a sensible default (first catalog entry / first plane).
@@ -149,36 +145,6 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
     void airportsPromiseRef.current.then(setAirportOptions).catch(() => {});
   }, []);
 
-  // POST an action endpoint. Every success returns the FULL post-action snapshot (v0.8.0
-  // convention) — pushed into the shared state immediately; a 4xx {error} body becomes the
-  // inline pane error and the stale UI stays until the next poll. Buttons are disabled while
-  // a request is in flight, so at most one action runs at a time.
-  const runAction = useCallback(
-    async (path: string, body?: unknown) => {
-      if (busy) return;
-      setBusy(true);
-      try {
-        const res = await fetch(path, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: body === undefined ? undefined : JSON.stringify(body),
-          cache: 'no-store',
-        });
-        const data = (await res.json()) as StateSnapshot & { error?: string };
-        if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
-        setActionError(null);
-        applySnapshot(data);
-      } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        setActionError(message); // inline pane error stays…
-        onError?.(message); // …and the shell mirrors it as a bottom-right toast (ISS-008)
-      } finally {
-        setBusy(false);
-      }
-    },
-    [applySnapshot, busy, onError],
-  );
-
   if (loading && !state) {
     return (
       <aside data-testid="right-pane" className="pane right-pane">
@@ -192,13 +158,6 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
   const clockMs = state.simState.clockMs;
   const open = state.packages.filter((p) => p.status === 'open');
 
-  // On board (v0.12.0): every plane that carries cargo or is mid-flight gets a block —
-  // its loaded/expired packages with fly-to-destination + abandon controls, and flying
-  // planes show their current leg.
-  const onboard = state.planes.filter(
-    (p) => p.status === 'flying' || slotsUsedFor(state, p.id) > 0,
-  );
-
   const catalog = state.catalog;
   const buyEntry = catalog.find((e) => e.model === buyModelId) ?? catalog[0] ?? null;
 
@@ -270,92 +229,7 @@ export default function RightPane({ state, loading, applySnapshot, onHover, onEr
         )}
       </section>
 
-      <section className="pane-section">
-        <h3 className="pane-heading">On board</h3>
-        {onboard.length === 0 ? (
-          <p className="pane-muted">Nothing on board.</p>
-        ) : (
-          onboard.map((plane) => {
-            const cargo = state.packages.filter(
-              (pkg) => pkg.planeId === plane.id && (pkg.status === 'loaded' || pkg.status === 'expired'),
-            );
-            return (
-              // ISS-002: hovering the on-board block (including its cargo rows) highlights the plane.
-              // Handlers live only on the outer div — React's enter/leave don't fire when moving to a
-              // child, so this covers the whole block without flicker between sub-elements.
-              <div
-                key={plane.id}
-                data-testid={`onboard-${plane.id}`}
-                className="onboard-block"
-                onMouseEnter={() => onHover({ kind: 'plane', id: plane.id })}
-                onMouseLeave={() => onHover(null)}
-              >
-                <div className="contract-main">
-                  <span className="plane-model">{planeName(plane)}</span>
-                  {plane.status === 'flying' ? (
-                    <>
-                      <span className="plane-status status-flying">in flight</span>
-                      {plane.destName && (
-                        <span data-testid={`plane-leg-${plane.id}`} className="contract-route">
-                          {plane.locationName} → {plane.destName}
-                        </span>
-                      )}
-                    </>
-                  ) : (
-                    <span className="plane-status status-available">{plane.locationIcao}</span>
-                  )}
-                </div>
-                {cargo.map((pkg) => {
-                  const penalty = abandonPenalty(pkg, clockMs);
-                  return (
-                    <div key={pkg.id} data-testid={`onboard-package-${pkg.id}`} className="contract-row">
-                      <div className="contract-main">
-                        <button
-                          type="button"
-                          data-testid={`refuel-for-${pkg.id}`}
-                          className="pane-btn"
-                          disabled={busy || plane.status !== 'available'}
-                          onClick={() => void runAction(`/api/planes/${plane.id}/refuel`, { mode: 'forFlight', packageId: pkg.id })}
-                        >
-                          Refuel
-                        </button>
-                        <button
-                          type="button"
-                          data-testid={`fly-to-${pkg.id}`}
-                          className="pane-btn"
-                          disabled={busy || plane.status !== 'available'}
-                          onClick={() => void runAction(`/api/planes/${plane.id}/fly`, { destIcao: pkg.destIcao })}
-                        >
-                          Fly to {pkg.destName}
-                        </button>
-                        <button
-                          type="button"
-                          data-testid={`abandon-${pkg.id}`}
-                          className="pane-btn"
-                          disabled={busy || plane.status !== 'available'}
-                          onClick={() => void runAction(`/api/packages/${pkg.id}/abandon`)}
-                        >
-                          Abandon{' '}
-                          <span data-testid={`abandon-penalty-${pkg.id}`}>−{formatCash(penalty)}</span>
-                        </button>
-                      </div>
-                      <div className="contract-sub">
-                        <span className="contract-route">{pkg.originName} → {pkg.destName}</span>
-                        <span>{formatCash(pkg.reward)}</span>
-                        {pkg.status === 'expired' ? (
-                          <span data-testid={`onboard-expired-${pkg.id}`}>expired</span>
-                        ) : (
-                          <span>{formatDeadlineRelative(pkg.deadlineSimTime, clockMs)}</span>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          })
-        )}
-      </section>
+      {/* ISS-021 (v0.20.0): the On board section moved to the left pane (between Fleet and Time). */}
 
       <section className="pane-section">
         <h3 className="pane-heading">Market</h3>