From 6162722c875d0c07813fdc62dc1fb3023fb65dc4 Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Tue, 30 Sep 2025 13:12:17 -0400
Subject: [PATCH] account page render fix

---
 app/portal/account/AccountPanel.tsx | 99 +++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 app/portal/account/AccountPanel.tsx

diff --git a/app/portal/account/AccountPanel.tsx b/app/portal/account/AccountPanel.tsx
new file mode 100644
index 00000000..2d566c10
--- /dev/null
+++ b/app/portal/account/AccountPanel.tsx
@@ -0,0 +1,99 @@
+// app/portal/account/AccountPanel.tsx
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Me = {
+    id: string;
+    username: string;
+    first_name?: string | null;
+    last_name?: string | null;
+    email?: string | null;
+    location?: string | null;
+    avatar?: { id: string; filename_download: string } | null;
+};
+
+export default function AccountPanel() {
+    const [me, setMe] = useState<Me | null>(null);
+    const [err, setErr] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        let alive = true;
+        (async () => {
+            try {
+                setErr(null);
+                const r = await fetch("/api/account", {
+                    credentials: "include",
+                    cache: "no-store",
+                });
+                if (!r.ok) throw new Error(`Load failed (${r.status})`);
+                const j = await r.json();
+                if (alive) setMe(j);
+            } catch (e: any) {
+                if (alive) setErr(e?.message || "Failed to load account");
+            } finally {
+                if (alive) setLoading(false);
+            }
+        })();
+        return () => {
+            alive = false;
+        };
+    }, []);
+
+    if (loading) return <div className="rounded-md border p-6 text-sm opacity-70">Loading…</div>;
+    if (err) return <div className="rounded-md border p-6 text-red-600">Error: {err}</div>;
+    if (!me) return null;
+
+    const avatarUrl =
+    me.avatar?.id
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, "")}/assets/${me.avatar.id}`
+    : null;
+
+    return (
+        <div className="space-y-6">
+        <div className="rounded-md border p-4">
+        <h2 className="text-lg font-semibold mb-2">Account</h2>
+
+        <div className="flex items-center gap-4 mb-4">
+        <div className="h-16 w-16 rounded-full overflow-hidden border bg-muted flex items-center justify-center">
+        {avatarUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={avatarUrl} alt="Avatar" className="h-full w-full object-cover" />
+        ) : (
+            <span className="text-xs opacity-60">No Avatar</span>
+        )}
+        </div>
+        <div className="text-xs text-muted-foreground">
+        Usernames can’t be changed.
+        </div>
+        </div>
+
+        <div className="grid sm:grid-cols-2 gap-3 text-sm">
+        <div>
+        <div className="opacity-60">Username</div>
+        <div className="font-medium">{me.username}</div>
+        </div>
+        <div>
+        <div className="opacity-60">First Name</div>
+        <div>{me.first_name || "—"}</div>
+        </div>
+        <div>
+        <div className="opacity-60">Last Name</div>
+        <div>{me.last_name || "—"}</div>
+        </div>
+        <div>
+        <div className="opacity-60">Email</div>
+        <div>{me.email || "—"}</div>
+        </div>
+        <div>
+        <div className="opacity-60">Location</div>
+        <div>{me.location || "—"}</div>
+        </div>
+        </div>
+        </div>
+
+        {/* Add your edit forms/buttons below; they should only trigger reauth on submit */}
+        </div>
+    );
+}