Improve MineGeo interface and functionality

components/ReportContent.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useEffect, useRef, useState } from "react";
 import { api } from "./StartGame";
 import { reportCategories } from "@/shared/moderation";
@@ -12,6 +14,7 @@ export function ReportContent({
   sessionId?: string;
   round?: number;
 }) {
+  const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [target, setTarget] = useState("map");
   const [category, setCategory] = useState("broken");
@@ -70,11 +73,11 @@ export function ReportContent({
           setMessage("");
         }}
       >
-        Report content
+        {t("Report content")}
       </button>
       {message && (
         <p role="status" className="success-message">
-          {message}
+          {t(message)}
         </p>
       )}
       {open && (
@@ -85,52 +88,52 @@ export function ReportContent({
           onCancel={() => setOpen(false)}
         >
           <form onSubmit={submit}>
-            <h2 id="report-title">Report content</h2>
+            <h2 id="report-title">{t("Report content")}</h2>
             <p className="muted">
-              Sign in to send a report. A moderator reviews the content and your
-              explanation. Three confirmed reports unpublish the map until an
-              owner appeal is approved.
+              {t(
+                "Sign in to send a report. A moderator reviews the content and your explanation. Three confirmed reports unpublish the map until an owner appeal is approved.",
+              )}
             </p>
             <label className="field">
-              What are you reporting?
+              {t("What are you reporting?")}
               <select
                 value={target}
                 onChange={(e) => setTarget(e.target.value)}
               >
-                <option value="map">Entire map</option>
+                <option value="map">{t("Entire map")}</option>
                 {sessionId && (
                   <option value="panorama">
-                    This panorama (round {(round ?? 0) + 1})
+                    {t("This panorama (round")} {(round ?? 0) + 1})
                   </option>
                 )}
               </select>
             </label>
             <label className="field">
-              Reason
+              {t("Reason")}
               <select
                 value={category}
                 onChange={(e) => setCategory(e.target.value)}
               >
                 {Object.entries(reportCategories).map(([value, label]) => (
                   <option key={value} value={value}>
-                    {label}
+                    {t(label)}
                   </option>
                 ))}
               </select>
             </label>
             <label className="field">
-              What happened?
+              {t("What happened?")}
               <textarea
                 required
                 minLength={10}
                 maxLength={2000}
                 value={reason}
                 onChange={(e) => setReason(e.target.value)}
-                placeholder="Describe the problem and where to find it."
+                placeholder={t("Describe the problem and where to find it.")}
               />
             </label>
             <label className="field">
-              Evidence link (optional)
+              {t("Evidence link (optional)")}
               <input
                 type="url"
                 maxLength={1000}
@@ -141,7 +144,7 @@ export function ReportContent({
             </label>
             {error && (
               <p role="alert" className="error-message">
-                {error}
+                {t(error)}
               </p>
             )}
             <div className="inline-actions">
@@ -149,7 +152,7 @@ export function ReportContent({
                 className="button primary"
                 disabled={busy || reason.trim().length < 10}
               >
-                {busy ? "Sending…" : "Send report"}
+                {busy ? t("Sending…") : t("Send report")}
               </button>
               <button
                 type="button"
@@ -157,7 +160,7 @@ export function ReportContent({
                 disabled={busy}
                 onClick={() => setOpen(false)}
               >
-                Cancel
+                {t("Cancel")}
               </button>
             </div>
           </form>