feat: add edit profile page

app/(app)/u/me/layout.tsx

@@ -8,13 +8,13 @@
  *   • Renders the ProfileHeader + ProfileTabs above every /u/me/* page.
  *     Tabs: Posts / Collections / Bookmarks / Mentions.
  *
- * The old left ProfileSidebar is gone. The "Edit profile" affordance
- * moved onto the header as a button that toggles edit mode on /u/me
- * via a query param (kept simple — no new route for the form).
+ * The old left ProfileSidebar is gone. The "Edit profile" affordance on
+ * the header links out to the dedicated /settings/profile editor (which
+ * lives outside this layout so it isn't framed by the header + tabs).
  */
 
-import { Suspense, useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   AtSign,
   Bookmark,
@@ -130,29 +130,13 @@ export default function MeLayout({ children }: { children: React.ReactNode }) {
         name={user.name}
         handle={user.handle}
         joinedAt={user.created_at}
-        editHref="/u/me?edit=1"
+        editHref="/settings/profile"
         postCount={counts?.posts}
         followerCount={counts?.followers}
         followingCount={counts?.following}
       />
-      {/* Tab strip hides on /u/me?edit=1 (see ConditionalTabs). The
-          Suspense boundary is required by Next.js because useSearchParams
-          forces a CSR bailout during prerender. Without it, every
-          /u/me/* route fails to build. Fallback renders the tabs as-is
-          so the visual default (tabs visible) is what users see while
-          the search params resolve. */}
-      <Suspense fallback={<ProfileTabs tabs={tabs} />}>
-        <ConditionalTabs tabs={tabs} />
-      </Suspense>
+      <ProfileTabs tabs={tabs} />
       <div className="py-6">{children}</div>
     </main>
   );
 }
-
-function ConditionalTabs({ tabs }: { tabs: ProfileTab[] }) {
-  const searchParams = useSearchParams();
-  // Hide tabs when the user is editing their profile inline — the strip
-  // is visual noise that distracts from the task they navigated in to do.
-  const editMode = searchParams.get("edit") === "1";
-  return editMode ? null : <ProfileTabs tabs={tabs} />;
-}

app/(app)/u/me/page.tsx

@@ -7,40 +7,19 @@
  * /u/me/posts#post-<id> where the Instagram-style scroll feed renders
  * the full passages.
  *
- * `?edit=1` (set by the header's Edit profile button) swaps the grid
- * for the inline edit form. Saving returns to /u/me. Keeps the URL
- * shareable while avoiding a separate route + layout.
+ * Editing the profile lives on its own page (/settings/profile), reached
+ * from the header's "Edit profile" button.
  */
 
-import { Suspense, useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 import { LayoutGrid } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
-import { ProfileEditForm } from "@/components/profile/profile-edit-form";
 import { PostGridCard } from "@/components/social/post/post-grid-card";
 import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { posts, SocialError, type Post } from "@/lib/social";
 
 export default function MyProfilePage() {
-  // useSearchParams() forces a CSR bailout during prerender; the
-  // Suspense boundary is required by Next.js so the build doesn't fail
-  // (the same wrapping is in app/u/me/layout.tsx for its own check).
-  // The fallback matches the page's idle loading state so the brief
-  // moment before search params resolve doesn't flash an empty section.
-  return (
-    <Suspense
-      fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
-    >
-      <MyProfilePageInner />
-    </Suspense>
-  );
-}
-
-function MyProfilePageInner() {
   const { user } = useAuth();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const editMode = searchParams.get("edit") === "1";
 
   const [feed, setFeed] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
@@ -87,10 +66,6 @@ function MyProfilePageInner() {
 
   if (!user) return null;
 
-  if (editMode) {
-    return <ProfileEditForm user={user} onDone={() => router.replace("/u/me")} />;
-  }
-
   return (
     <section>
       {error ? (