ui enhancements

app/u/[handle]/page.tsx

@@ -1,131 +1,55 @@
 "use client";
 
 /**
- * Public profile at /u/[handle].
+ * Public profile — Posts tab (default).
  *
- * Anonymous-friendly. Mirrors /u/me's shell — ProfileHeader at the top,
- * a smaller tab strip (Posts + Collections only; Bookmarks and Mentions
- * are private), then a grid of the active tab's content.
- *
- * Owner-handle redirect: when the logged-in user lands on their own
- * /u/<handle>, we send them to /u/me where the owner controls live.
+ * The /u/[handle] layout owns the ProfileHeader + tab strip + container;
+ * this page only renders the post grid. Tapping a thumbnail jumps to
+ * /u/[handle]/posts#post-<id> where the Instagram-style scroll feed
+ * shows the full passages.
  */
 
 import { use, useEffect, useState } from "react";
-import Link from "next/link";
-import { notFound, useRouter } from "next/navigation";
-import { FolderClosed, LayoutGrid } from "lucide-react";
-import {
-  profile,
-  SocialError,
-  type Post,
-  type PublicProfile,
-} from "@/lib/social";
-import { ProfileHeader } from "@/components/profile/profile-header";
-import {
-  ProfileTabs,
-  type ProfileTab,
-} from "@/components/profile/profile-tabs";
+import { profile, type Post } from "@/lib/social";
 import { PostViews } from "@/components/social/post-views";
-import { CollectionViews } from "@/components/social/collection-views";
-import { useAuth } from "@/components/auth/auth-provider";
+import { usePublicProfile } from "./profile-context";
 
-type Tab = "posts" | "collections";
-
-export default function PublicProfilePage(props: {
+export default function PublicProfilePostsPage(props: {
   params: Promise<{ handle: string }>;
-  searchParams?: Promise<{ tab?: string }>;
 }) {
   const { handle } = use(props.params);
-  const search = props.searchParams ? use(props.searchParams) : undefined;
-  const tab: Tab = search?.tab === "collections" ? "collections" : "posts";
-  const router = useRouter();
-  const { user } = useAuth();
-  const [data, setData] = useState<PublicProfile | null>(null);
+  const data = usePublicProfile();
   const [feed, setFeed] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
-  const [notFoundState, setNotFound] = useState(false);
-
-  const isOwn = !!user && user.handle.toLowerCase() === handle.toLowerCase();
-  useEffect(() => {
-    if (isOwn) router.replace("/u/me");
-  }, [isOwn, router]);
 
   useEffect(() => {
-    if (isOwn) return;
     let cancelled = false;
     setLoading(true);
-    Promise.all([profile.get(handle), profile.feed(handle, 30)])
-      .then(([p, posts]) => {
-        if (cancelled) return;
-        setData(p);
-        setFeed(posts ?? []);
+    profile
+      .feed(handle, 30)
+      .then((rows) => {
+        if (!cancelled) setFeed(rows ?? []);
       })
-      .catch((err) => {
-        if (err instanceof SocialError && err.status === 404) {
-          setNotFound(true);
-        }
+      .catch(() => {
+        // Layout already 404'd if the handle is unknown; if the feed
+        // itself fails we just show an empty grid rather than blocking
+        // the page with an error toast.
       })
       .finally(() => !cancelled && setLoading(false));
     return () => {
       cancelled = true;
     };
-  }, [handle, isOwn]);
+  }, [handle]);
 
-  if (notFoundState) notFound();
-  if (isOwn) return null;
-
-  if (loading || !data) {
-    return (
-      <main className="flex-1 max-w-3xl w-full mx-auto px-4 py-12">
-        <p className="text-sm text-muted-foreground">Loading profile…</p>
-      </main>
-    );
+  if (loading) {
+    return <p className="text-sm text-muted-foreground">Loading…</p>;
   }
 
-  const tabs: ProfileTab[] = [
-    {
-      href: `/u/${data.handle}`,
-      label: "Posts",
-      icon: <LayoutGrid className="size-5" />,
-    },
-    {
-      href: `/u/${data.handle}?tab=collections`,
-      label: "Collections",
-      icon: <FolderClosed className="size-5" />,
-    },
-  ];
-
   return (
-    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
-      <ProfileHeader
-        avatarURL={data.avatar_url}
-        name={data.name}
-        handle={data.handle}
-        postCount={data.post_count}
-        joinedAt={data.joined_at}
-      />
-      <ProfileTabs tabs={tabs} />
-      <div className="py-6">
-        {tab === "collections" ? (
-          data.public_collections && data.public_collections.length > 0 ? (
-            <CollectionViews
-              collections={data.public_collections}
-              hrefFor={(c) => `/c/${c.id}`}
-            />
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              No public collections yet.
-            </p>
-          )
-        ) : (
-          <PostViews
-            posts={feed}
-            hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
-            emptyMessage="No posts yet — quotes shared by this user will appear here."
-          />
-        )}
-      </div>
-    </main>
+    <PostViews
+      posts={feed}
+      hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
+      emptyMessage="No posts yet — quotes shared by this user will appear here."
+    />
   );
 }