feat: add replace_hero hook to custom section

app/(app)/u/[handle]/posts-grid.tsx

@@ -3,18 +3,20 @@
 /**
  * PostsGrid — client-side body for /u/[handle] (Posts tab).
  *
- * Split out from page.tsx so the page itself can be a server component
- * that exports `generateMetadata` for the public-profile OG card. The
- * /u/[handle]/layout.tsx still owns ProfileHeader + tab strip + the
- * outer max-w-3xl container; this grid just renders the post grid
- * inside that shell. Tapping a thumbnail jumps to
- * /u/[handle]/posts#post-<id> where the Instagram-style scroll feed
- * shows the full passages.
+ * Split out from page.tsx so the page itself can be a server component that
+ * exports `generateMetadata` for the public-profile OG card. The
+ * /u/[handle]/layout.tsx still owns ProfileHeader + tab strip + the outer
+ * container (and 404s unknown handles); this just renders the post grid.
+ *
+ * Window-virtualised, infinite-scroll 2-up grid (usePostScrollFeed keyset-pages
+ * the user's posts). Tapping a thumbnail jumps to /u/[handle]/posts#post-<id>
+ * where the scroll feed shows the full passages.
  */
 
-import { use, useEffect, useState } from "react";
-import { profile, type Post } from "@/lib/social";
-import { PostViews } from "@/components/social/post/post-views";
+import { use } from "react";
+import { profile } from "@/lib/social";
+import { VirtualPostGrid } from "@/components/social/post/virtual-post-grid";
+import { usePostScrollFeed } from "@/components/social/post/use-post-scroll-feed";
 import { usePublicProfile } from "./profile-context";
 
 export function PostsGrid({
@@ -24,34 +26,18 @@ export function PostsGrid({
 }) {
   const { handle } = use(params);
   const data = usePublicProfile();
-  const [feed, setFeed] = useState<Post[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    profile
-      .feed(handle, { limit: 30 })
-      .then((rows) => {
-        if (!cancelled) setFeed(rows ?? []);
-      })
-      .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]);
-
-  if (loading) {
-    return <p className="text-sm text-muted-foreground">Loading…</p>;
-  }
+  const { feed, loading, hasMore, sentinelRef } = usePostScrollFeed(
+    (before, limit) =>
+      profile.feed(handle, { limit, before: before ?? undefined }),
+    24,
+  );
 
   return (
-    <PostViews
+    <VirtualPostGrid
       posts={feed}
+      loading={loading}
+      hasMore={hasMore}
+      sentinelRef={sentinelRef}
       hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
       emptyMessage="No posts yet — quotes shared by this user will appear here."
     />