115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* /u/me shared layout — auth gate + Instagram-style profile shell.
|
|
*
|
|
* • Anonymous visitors trigger the global AuthModal and are bounced
|
|
* home if they dismiss it (unchanged from before).
|
|
* • 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).
|
|
*/
|
|
|
|
import { Suspense, useEffect } from "react";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
import {
|
|
AtSign,
|
|
Bookmark,
|
|
FolderClosed,
|
|
LayoutGrid,
|
|
} from "lucide-react";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import { useAuthGate } from "@/components/auth/auth-gate";
|
|
import { ProfileHeader } from "@/components/profile/profile-header";
|
|
import { ProfileTabs, type ProfileTab } from "@/components/profile/profile-tabs";
|
|
|
|
export default function MeLayout({ children }: { children: React.ReactNode }) {
|
|
const { user, loading } = useAuth();
|
|
const { requireAuth } = useAuthGate();
|
|
const router = useRouter();
|
|
|
|
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]);
|
|
|
|
if (loading || !user) {
|
|
return (
|
|
<main className="flex-1 flex items-center justify-center px-4 py-12">
|
|
<p className="text-sm text-muted-foreground">
|
|
{loading ? "Loading…" : "Sign in to view your library."}
|
|
</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const tabs: ProfileTab[] = [
|
|
{
|
|
href: "/u/me",
|
|
label: "Posts",
|
|
icon: <LayoutGrid className="size-5" />,
|
|
activeFor: ["/u/me/posts"],
|
|
},
|
|
{
|
|
href: "/u/me/collections",
|
|
label: "Collections",
|
|
icon: <FolderClosed className="size-5" />,
|
|
},
|
|
{
|
|
href: "/u/me/bookmarks",
|
|
label: "Bookmarks",
|
|
icon: <Bookmark className="size-5" />,
|
|
},
|
|
{
|
|
href: "/u/me/mentions",
|
|
label: "Mentions",
|
|
icon: <AtSign className="size-5" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
|
|
<ProfileHeader
|
|
avatarURL={user.avatar_url}
|
|
name={user.name}
|
|
handle={user.handle}
|
|
joinedAt={user.created_at}
|
|
editHref="/u/me?edit=1"
|
|
/>
|
|
{/* 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>
|
|
<div className="py-6">{children}</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function ConditionalTabs({ tabs }: { tabs: ProfileTab[] }) {
|
|
const searchParams = useSearchParams();
|
|
const pathname = usePathname();
|
|
// Hide tabs when the user is in a focused subview:
|
|
// • /u/me?edit=1 — the inline profile-edit form
|
|
// • /u/me/settings — the reading-prefs page
|
|
// In either case the strip is visual noise that distracts from the
|
|
// task they navigated in to do.
|
|
const editMode = searchParams.get("edit") === "1";
|
|
const settingsMode = pathname.startsWith("/u/me/settings");
|
|
return editMode || settingsMode ? null : <ProfileTabs tabs={tabs} />;
|
|
}
|