Improve MineGeo interface and functionality

components/MapAppeal.tsx

@@ -1,4 +1,7 @@
 "use client";
+import { statusMessage } from "@/shared/i18n";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useCallback, useEffect, useState } from "react";
 import { api } from "./StartGame";
 
@@ -24,6 +27,7 @@ export function MapAppeal({
   banReason: string | null;
   onChange: () => void;
 }) {
+  const { t } = useI18n();
   const [appeals, setAppeals] = useState<Appeal[]>([]);
   const [reason, setReason] = useState("");
   const [error, setError] = useState("");
@@ -61,30 +65,41 @@ export function MapAppeal({
     <section className="tool-card">
       <h2>
         {bannedAt
-          ? "Map unpublished · appeal required"
-          : "Community report strikes"}
+          ? t("Map unpublished · appeal required")
+          : t("Community report strikes")}
       </h2>
       <p>
-        {strikes}/3 confirmed reports.{" "}
+        {strikes}
+        {t("/3 confirmed reports.")}{" "}
         {bannedAt
-          ? "This map cannot be published until a moderator approves your appeal."
-          : "Three confirmed reports automatically unpublish this map."}
+          ? t(
+              "This map cannot be published until a moderator approves your appeal.",
+            )
+          : t("Three confirmed reports automatically unpublish this map.")}
       </p>
       {banReason && <p>{banReason}</p>}
       {appeals.map((a) => (
         <div key={a.id}>
-          <span className="badge">Appeal: {a.state}</span>
+          <span className="badge">
+            {t("Appeal:")} {t(statusMessage(a.state))}
+          </span>
           <p>{a.reason}</p>
-          {a.review_reason && <p>Moderator feedback: {a.review_reason}</p>}
+          {a.review_reason && (
+            <p>
+              {t("Moderator feedback:")} {a.review_reason}
+            </p>
+          )}
         </div>
       ))}
       {bannedAt &&
         (appeals.some((a) => a.state === "open") ? (
-          <p role="status">Your appeal is waiting for moderator review.</p>
+          <p role="status">
+            {t("Your appeal is waiting for moderator review.")}
+          </p>
         ) : (
           <form onSubmit={submit}>
             <label className="field">
-              Explain why the map ban should be lifted
+              {t("Explain why the map ban should be lifted")}
               <textarea
                 value={reason}
                 onChange={(e) => setReason(e.target.value)}
@@ -97,13 +112,13 @@ export function MapAppeal({
               className="button primary"
               disabled={busy || reason.trim().length < 10}
             >
-              {busy ? "Sending…" : "Appeal map ban"}
+              {busy ? t("Sending…") : t("Appeal map ban")}
             </button>
           </form>
         ))}
       {error && (
         <p role="alert" className="error-message">
-          {error}
+          {t(error)}
         </p>
       )}
     </section>