feat: add replace_hero hook to custom section

components/social/post/use-post-scroll-feed.ts

@@ -14,15 +14,14 @@
  *     stop when a page is short) — the same idiom as the home feed.
  *
  * `fetchPage(before, limit)` is supplied by the caller so the same hook serves
- * the owner feed (posts.mine) and the public feed (profile.feed). `setFeed` is
- * returned so the owner page can optimistically prune on delete/hide.
+ * the scroll feeds (posts.mine / profile.feed) AND the virtualised profile
+ * grids — anything that keyset-pages a user's posts. `setFeed` is returned so
+ * the owner views can optimistically prune on delete/hide.
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { posts as postsApi, type FeedCursor, type Post } from "@/lib/social";
 
-const PAGE = 10;
-
 type FetchPage = (before: FeedCursor | null, limit: number) => Promise<Post[]>;
 
 const cursorOf = (p: Post): FeedCursor => ({
@@ -30,7 +29,7 @@ const cursorOf = (p: Post): FeedCursor => ({
   id: p.id,
 });
 
-export function usePostScrollFeed(fetchPage: FetchPage) {
+export function usePostScrollFeed(fetchPage: FetchPage, pageSize = 10) {
   const [feed, setFeed] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
   const [hasMore, setHasMore] = useState(true);
@@ -51,7 +50,7 @@ export function usePostScrollFeed(fetchPage: FetchPage) {
     if (fetchingRef.current || !hasMore) return;
     fetchingRef.current = true;
     try {
-      const rows = (await fetchPage(cursorRef.current, PAGE)) ?? [];
+      const rows = (await fetchPage(cursorRef.current, pageSize)) ?? [];
       const fresh = rows.filter((p) => !idsRef.current.has(p.id));
       if (fresh.length > 0) {
         fresh.forEach((p) => idsRef.current.add(p.id));
@@ -60,7 +59,7 @@ export function usePostScrollFeed(fetchPage: FetchPage) {
         setFeed((prev) => [...prev, ...fresh]);
       }
       // Stop on a short page OR a page that produced nothing new (stalled).
-      if (rows.length < PAGE || fresh.length === 0) setHasMore(false);
+      if (rows.length < pageSize || fresh.length === 0) setHasMore(false);
     } catch {
       setHasMore(false);
       setError((e) => e ?? "Could not load posts.");
@@ -68,7 +67,7 @@ export function usePostScrollFeed(fetchPage: FetchPage) {
       fetchingRef.current = false;
       setLoading(false);
     }
-  }, [fetchPage, hasMore]);
+  }, [fetchPage, hasMore, pageSize]);
 
   // First load: anchor-first when arriving with #post-<id>, else newest page.
   useEffect(() => {