Improve MineGeo interface and functionality

components/MapRefresh.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useEffect, useState } from "react";
 import { api } from "./StartGame";
 
@@ -11,6 +13,7 @@ export function MapRefresh({
   disabled: boolean;
   onQueued: () => void;
 }) {
+  const { t, formatDate } = useI18n();
   const [sources, setSources] = useState<
     { id: string; name: string; created_at: string }[]
   >([]);
@@ -44,15 +47,15 @@ export function MapRefresh({
   }
   return (
     <section className="editor-panel">
-      <span className="eyebrow">THE MAP PLAYERS GUESS ON</span>
-      <h2>Refresh guessing map</h2>
+      <span className="eyebrow">{t("THE MAP PLAYERS GUESS ON")}</span>
+      <h2>{t("Refresh guessing map")}</h2>
       <p className="muted">
-        Rebuild the overhead map from a processed capture. To show new
-        buildings, export the same area again and upload it first. Select that
-        capture here; its boundaries must match this map exactly.
+        {t(
+          "Rebuild the overhead map from a processed capture. To show new buildings, export the same area again and upload it first. Select that capture here; its boundaries must match this map exactly.",
+        )}
       </p>
       <label className="field">
-        Terrain capture
+        {t("Terrain capture")}
         <select
           value={source}
           onChange={(e) => setSource(e.target.value)}
@@ -60,8 +63,8 @@ export function MapRefresh({
         >
           {sources.map((s) => (
             <option key={s.id} value={s.id}>
-              {s.id === id ? "Original capture" : s.name} ·{" "}
-              {new Date(s.created_at).toLocaleDateString()} · {s.id.slice(0, 8)}
+              {s.id === id ? t("Original capture") : s.name} ·{" "}
+              {formatDate(s.created_at)} · {s.id.slice(0, 8)}
             </option>
           ))}
         </select>
@@ -71,15 +74,16 @@ export function MapRefresh({
         disabled={disabled || busy || !sources.some((s) => s.id === source)}
         onClick={refresh}
       >
-        {busy ? "Queueing…" : "Refresh guessing map"}
+        {busy ? t("Queueing…") : t("Refresh guessing map")}
       </button>
       <p className="muted">
-        Panoramas stay unchanged. Refreshing uses no panorama slots, even at
-        24/24. Submit the finished map update for review to make it playable.
+        {t(
+          "Panoramas stay unchanged. Refreshing uses no panorama slots, even at 24/24. Submit the finished map update for review to make it playable.",
+        )}
       </p>
       {error && (
         <p role="alert" className="error-message">
-          {error}
+          {t(error)}
         </p>
       )}
     </section>