feat: add policy pages

2026-06-02 01:57:08 +05:30
parent 0352cb2003
commit 91d5d272d2
168 changed files with 1326 additions and 81 deletions
@@ -0,0 +1,114 @@
+"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} />;
+}