Add map import and export with durable refresh progress

components/MapRefresh.tsx

@@ -1,30 +1,46 @@
 "use client";
 import { useI18n } from "@/components/I18nProvider";
 
-import { useEffect, useState } from "react";
-import { api } from "./StartGame";
+import { useEffect, useRef, useState } from "react";
+import { api } from "@/lib/client-api";
+import { refreshCapture, type MapCapture } from "@/shared/map-refresh";
+import type { ProcessingJob } from "@/shared/processing-progress";
 
 export function MapRefresh({
   id,
   disabled,
   onQueued,
+  refreshKey,
+  job,
 }: {
   id: string;
   disabled: boolean;
   onQueued: () => void;
+  refreshKey: number;
+  job: ProcessingJob | null;
 }) {
   const { t, formatDate } = useI18n();
-  const [sources, setSources] = useState<
-    { id: string; name: string; created_at: string }[]
-  >([]);
-  const [source, setSource] = useState(id);
+  const [sources, setSources] = useState<MapCapture[]>([]);
+  const [source, setSource] = useState("");
+  const choice = useRef<{ mapId: string; sourceId: string } | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
   useEffect(() => {
     let active = true;
     api<{ sources: typeof sources }>(`datasets/${id}/refresh-map`)
       .then((r) => {
-        if (active) setSources(r.sources);
+        if (active) {
+          setSources(r.sources);
+          setSource(
+            refreshCapture(
+              r.sources,
+              choice.current?.mapId === id
+                ? choice.current.sourceId
+                : undefined,
+            ),
+          );
+          setError("");
+        }
       })
       .catch((e) => {
         if (active) setError(e.message);
@@ -32,7 +48,7 @@ export function MapRefresh({
     return () => {
       active = false;
     };
-  }, [id]);
+  }, [id, refreshKey, job?.id, job?.state]);
   async function refresh() {
     setBusy(true);
     setError("");
@@ -58,7 +74,10 @@ export function MapRefresh({
         {t("Terrain capture")}
         <select
           value={source}
-          onChange={(e) => setSource(e.target.value)}
+          onChange={(e) => {
+            choice.current = { mapId: id, sourceId: e.target.value };
+            setSource(e.target.value);
+          }}
           disabled={disabled || busy}
         >
           {sources.map((s) => (
@@ -69,6 +88,11 @@ export function MapRefresh({
           ))}
         </select>
       </label>
+      <p className="muted">
+        {t(
+          "The newest eligible capture is selected automatically. Choose the original capture only if you want its older terrain.",
+        )}
+      </p>
       <button
         className="button"
         disabled={disabled || busy || !sources.some((s) => s.id === source)}
@@ -81,6 +105,16 @@ export function MapRefresh({
           "Panoramas stay unchanged. Refreshing uses no panorama slots, even at 24/24. Submit the finished map update for review to make it playable.",
         )}
       </p>
+      {job?.kind === "map" && job.state === "complete" && (
+        <p role="status" className="success-message">
+          {t("Last successful refresh used: {capture}.", {
+            capture:
+              job.source_dataset_id === id
+                ? t("Original capture")
+                : `${sources.find((s) => s.id === job.source_dataset_id)?.name ?? t("Terrain capture")} · ${job.source_dataset_id?.slice(0, 8) ?? ""}`,
+          })}
+        </p>
+      )}
       {error && (
         <p role="alert" className="error-message">
           {t(error)}