feat: add edit profile page

This commit is contained in:
gosangam
2026-06-15 23:54:34 +05:30
parent 0608e2b6f6
commit 197e13c0ef
4 changed files with 146 additions and 119 deletions
+7 -23
View File
@@ -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} />;
}