Improve MineGeo interface and functionality

components/ModeratorSettings.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { useState } from "react";
+import { Settings2 } from "lucide-react";
+import { useI18n } from "./I18nProvider";
+import { useSiteSettings } from "./SiteSettingsProvider";
+import { api } from "@/lib/client-api";
+import type { SiteSettings } from "@/shared/site-settings";
+
+export function ModeratorSettings() {
+  const { t } = useI18n();
+  const { settings, updateSettings } = useSiteSettings();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [saved, setSaved] = useState(false);
+  async function toggle() {
+    setBusy(true);
+    setError("");
+    setSaved(false);
+    try {
+      const next = await api<SiteSettings>(
+        "moderation/settings",
+        {
+          betaBadgeEnabled: !settings.betaBadgeEnabled,
+        },
+        "PATCH",
+      );
+      updateSettings(next);
+      setSaved(true);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <section
+      className="tool-card moderator-settings"
+      aria-labelledby="site-settings-heading"
+    >
+      <div className="settings-heading">
+        <Settings2 size={24} aria-hidden="true" />
+        <div>
+          <h2 id="site-settings-heading">{t("Site settings")}</h2>
+          <p>
+            {t(
+              "Changes apply to every player. Only moderators can edit these settings.",
+            )}
+          </p>
+        </div>
+      </div>
+      <div className="moderator-setting-row">
+        <div>
+          <h3>{t("Beta badge")}</h3>
+          <p className="muted">
+            {t("Show BETA next to the MineGeo logo throughout the site.")}
+          </p>
+          <p className="muted">
+            {settings.betaBadgeEnabled
+              ? t("Visible to all players")
+              : t("Hidden for all players")}
+          </p>
+        </div>
+        <button className="button" disabled={busy} onClick={toggle}>
+          {busy
+            ? t("Saving…")
+            : settings.betaBadgeEnabled
+              ? t("Hide beta badge")
+              : t("Show beta badge")}
+        </button>
+      </div>
+      {error && (
+        <p role="alert" className="error-message">
+          {t(error)}
+        </p>
+      )}
+      {saved && (
+        <p role="status" className="muted">
+          {t("Setting saved. Open pages update within 30 seconds.")}
+        </p>
+      )}
+    </section>
+  );
+}