feat: add edit profile page
This commit is contained in:
@@ -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} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user