Improve MineGeo interface and functionality

components/AccountSettings.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { UserRound, LockKeyhole, Mail } from "lucide-react";
@@ -14,6 +16,7 @@ export function AccountSettings({
   displayName: string;
   passwordUpdated?: boolean;
 }) {
+  const { t } = useI18n();
   const [name, setName] = useState(displayName),
     [message, setMessage] = useState(""),
     [error, setError] = useState(""),
@@ -68,13 +71,15 @@ export function AccountSettings({
         <div className="settings-heading">
           <UserRound size={22} />
           <div>
-            <h2>Your public profile.</h2>
-            <p className="muted">A name for the maps and places you share.</p>
+            <h2>{t("Your public profile.")}</h2>
+            <p className="muted">
+              {t("A name for the maps and places you share.")}
+            </p>
           </div>
         </div>
         <form onSubmit={save}>
           <label className="field">
-            Display name
+            {t("Display name")}
             <input
               name="displayName"
               autoComplete="nickname"
@@ -86,29 +91,31 @@ export function AccountSettings({
               disabled={busy}
             />
             <small>
-              2–32 characters. Display names do not have to be unique.
+              {t("2–32 characters. Display names do not have to be unique.")}
             </small>
           </label>
           <div className="account-email">
             <Mail size={17} />
             <div>
-              <span>Email address</span>
+              <span>{t("Email address")}</span>
               <strong>{email}</strong>
-              <small>Used for sign-in and recovery. Only you can see it.</small>
+              <small>
+                {t("Used for sign-in and recovery. Only you can see it.")}
+              </small>
             </div>
           </div>
           {error && (
             <p role="alert" className="error-message">
-              {error}
+              {t(error)}
             </p>
           )}
           {message && (
             <p role="status" className="success-message">
-              {message}
+              {t(message)}
             </p>
           )}
           <button className="button primary" disabled={busy}>
-            {busy ? "Saving…" : "Save display name"}
+            {busy ? t("Saving…") : t("Save display name")}
           </button>
         </form>
       </section>
@@ -116,24 +123,25 @@ export function AccountSettings({
         <div className="settings-heading">
           <LockKeyhole size={22} />
           <div>
-            <h2>Password & security.</h2>
-            <p className="muted">Keep your account yours.</p>
+            <h2>{t("Password & security.")}</h2>
+            <p className="muted">{t("Keep your account yours.")}</p>
           </div>
         </div>
         {passwordUpdated && (
           <p role="status" className="success-message">
-            Your password has been updated.
+            {t("Your password has been updated.")}
           </p>
         )}
         <PasswordForm />
         <div className="settings-recovery">
-          <h3>Signed up with an email link?</h3>
+          <h3>{t("Signed up with an email link?")}</h3>
           <p className="muted">
-            Set your first password, or recover a forgotten one, using a link
-            sent to your account email.
+            {t(
+              "Set your first password, or recover a forgotten one, using a link sent to your account email.",
+            )}
           </p>
           <button className="button" disabled={sending} onClick={recover}>
-            {sending ? "Sending…" : "Email me a password reset link"}
+            {sending ? t("Sending…") : t("Email me a password reset link")}
           </button>
           {recoveryMessage && (
             <p role="status" className="success-message">