feat: add edit profile page

2026-06-15 23:54:34 +05:30
parent 0608e2b6f6
commit 197e13c0ef
4 changed files with 146 additions and 119 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * /settings/profile — dedicated profile editor.
+ *
+ * Lives outside the /u/me profile layout (same reasoning as /settings) so it
+ * carries the default site chrome instead of the ProfileHeader + tabs frame.
+ * The "Edit profile" button on the profile header links here. The page owns
+ * the title + back button; ProfileEditForm renders the sections. Saving stays
+ * on the page (toast); the back button / Cancel return to /u/me.
+ */
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ChevronLeft } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { ProfileEditForm } from "@/components/profile/profile-edit-form";
+
+export default function EditProfilePage() {
+  const { user, loading } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const router = useRouter();
+
+  // Same auth gate as the /u/me layout: prompt anonymous visitors and bounce
+  // them home if they dismiss it.
+  useEffect(() => {
+    if (loading || user) return;
+    let cancelled = false;
+    (async () => {
+      const ok = await requireAuth();
+      if (!ok && !cancelled) router.replace("/");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, user, requireAuth, router]);
+
+  return (
+    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-6 space-y-10">
+      <header className="space-y-1">
+        <Link
+          href="/u/me"
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronLeft className="size-4" />
+          Back to profile
+        </Link>
+        <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground pt-2">
+          Edit profile
+        </h1>
+      </header>
+
+      {loading || !user ? (
+        <p className="text-sm text-muted-foreground">
+          {loading ? "Loading…" : "Sign in to edit your profile."}
+        </p>
+      ) : (
+        <ProfileEditForm user={user} onDone={() => router.push("/u/me")} />
+      )}
+    </main>
+  );
+}