94 lines
2.6 KiB
TypeScript
94 lines
2.6 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 { useEffect } from "react";
|
|
import { useRouter } 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"
|
|
/>
|
|
<ProfileTabs tabs={tabs} />
|
|
<div className="py-6">{children}</div>
|
|
</main>
|
|
);
|
|
}
|