Add live account appeal updates and restricted status settings

app/settings/page.tsx

@@ -3,9 +3,10 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Header, Footer } from "@/components/Shell";
 import { AccountSettings } from "@/components/AccountSettings";
-import { user } from "@/lib/supabase";
+import { rawUser } from "@/lib/supabase";
 import { accountProfile } from "@/lib/profile";
 import { Username } from "@/components/Username";
+import { ShieldCheck } from "lucide-react";
 export async function generateMetadata() {
   const { t } = await getI18n();
   return { title: t("Account settings") };
@@ -16,18 +17,30 @@ export default async function Settings({
   searchParams: Promise<{ password?: string }>;
 }) {
   const { t } = await getI18n();
-  const account = await user();
+  const account = await rawUser();
   if (!account) redirect("/log-in?next=%2Fsettings");
   const [profile, query] = await Promise.all([
     accountProfile(account),
     searchParams,
   ]);
+  const active = profile.account_status === "active";
+  const statusLabel =
+    profile.account_status === "banned"
+      ? "Banned"
+      : profile.account_status === "deactivated"
+        ? "Deactivated"
+        : profile.account_status === "deleting"
+          ? "Deletion pending"
+          : "Active";
   return (
     <>
       <Header />
       <main className="section page-content">
-        <Link className="text-link" href="/dashboard">
-          {t("← My account")}
+        <Link
+          className="text-link"
+          href={active ? "/dashboard" : "/ban/appeal"}
+        >
+          {t(active ? "← My account" : "← Account access & appeals")}
         </Link>
         <div className="account-page-heading">
           <span className="eyebrow">{t("YOUR CARTOGRAPHER ACCOUNT")}</span>
@@ -37,12 +50,44 @@ export default async function Settings({
             {t("Your name, your sign-in, your next expedition.")}
           </p>
         </div>
-        <AccountSettings
-          email={account.email ?? ""}
-          displayName={profile.display_name}
-          appearance={profile}
-          passwordUpdated={query.password === "updated"}
-        />
+        <section
+          className="tool-card account-status-card"
+          aria-labelledby="account-status-title"
+        >
+          <ShieldCheck size={24} aria-hidden="true" />
+          <h2 id="account-status-title">{t("Account status")}</h2>
+          <p>
+            <span
+              className="badge"
+              data-account-status={profile.account_status}
+            >
+              {t(statusLabel)}
+            </span>
+          </p>
+          <p>
+            {t(
+              active
+                ? "Your account is active. You can use MineGeo normally."
+                : "Account changes are disabled while access is restricted.",
+            )}
+          </p>
+          {!active && profile.account_reason && (
+            <p className="account-status-reason">{profile.account_reason}</p>
+          )}
+          {!active && (
+            <Link className="button" href="/ban/appeal">
+              {t("View account status & appeal")}
+            </Link>
+          )}
+        </section>
+        {active && (
+          <AccountSettings
+            email={account.email ?? ""}
+            displayName={profile.display_name}
+            appearance={profile}
+            passwordUpdated={query.password === "updated"}
+          />
+        )}
       </main>
       <Footer />
     </>