feat: add replace_hero hook to custom section

2026-06-21 23:36:25 +05:30
parent 5cd75c27f9
commit f92b41384e
4 changed files with 192 additions and 103 deletions
@@ -0,0 +1,133 @@
+"use client";
+
+/**
+ * VirtualPostGrid — window-virtualised, infinite-scroll 2-up thumbnail grid for
+ * the profile Posts tabs (/u/me and /u/[handle]).
+ *
+ * Mirrors HomeFeed's window virtualization, but the unit of virtualization is a
+ * GRID ROW (two square cards) rather than a single card. Data (keyset paging +
+ * the bottom sentinel) comes from usePostScrollFeed; this component only owns
+ * rendering + windowing, so a profile with hundreds of posts stays cheap.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { Loader2 } from "lucide-react";
+import type { Post } from "@/lib/social";
+import { PostGridCard } from "./post-grid-card";
+
+const COLS = 2;
+
+export function VirtualPostGrid({
+  posts,
+  loading,
+  hasMore,
+  sentinelRef,
+  emptyMessage,
+  hrefFor,
+  onDelete,
+  onUpdated,
+}: {
+  posts: Post[];
+  loading: boolean;
+  hasMore: boolean;
+  /** Bottom sentinel observed by usePostScrollFeed to load the next page. */
+  sentinelRef: React.RefObject<HTMLDivElement | null>;
+  emptyMessage?: string;
+  hrefFor?: (post: Post) => string;
+  onDelete?: (id: string) => void;
+  onUpdated?: (updated: Post) => void;
+}) {
+  // Chunk the flat post list into rows of COLS for row-level virtualization.
+  const rows = useMemo(() => {
+    const out: Post[][] = [];
+    for (let i = 0; i < posts.length; i += COLS) out.push(posts.slice(i, i + COLS));
+    return out;
+  }, [posts]);
+
+  // Document-absolute top of the grid, so the window virtualizer can map window
+  // scroll → visible rows (the profile header/tabs sit above us). Re-measured
+  // on resize and any body reflow. Same approach as HomeFeed.
+  const parentRef = useRef<HTMLDivElement>(null);
+  const [offsetTop, setOffsetTop] = useState(0);
+  useEffect(() => {
+    const measure = () => {
+      const el = parentRef.current;
+      if (el) setOffsetTop(el.getBoundingClientRect().top + window.scrollY);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const ro = new ResizeObserver(measure);
+    ro.observe(document.body);
+    return () => {
+      window.removeEventListener("resize", measure);
+      ro.disconnect();
+    };
+  }, []);
+
+  const virtualizer = useWindowVirtualizer({
+    count: rows.length,
+    estimateSize: () => 240, // square card + gap; measureElement corrects it
+    overscan: 6,
+    scrollMargin: offsetTop,
+  });
+
+  if (loading && posts.length === 0) {
+    return (
+      <div className="flex justify-center py-16">
+        <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!loading && posts.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {emptyMessage ?? "Nothing here yet."}
+      </p>
+    );
+  }
+
+  const virtualRows = virtualizer.getVirtualItems();
+
+  return (
+    <div>
+      <div
+        ref={parentRef}
+        className="relative w-full"
+        style={{ height: virtualizer.getTotalSize() }}
+      >
+        {virtualRows.map((vr) => {
+          const row = rows[vr.index];
+          return (
+            <div
+              key={row[0]?.id ?? vr.index}
+              data-index={vr.index}
+              ref={virtualizer.measureElement}
+              className="absolute left-0 top-0 w-full"
+              style={{ transform: `translateY(${vr.start - offsetTop}px)` }}
+            >
+              <div className="grid grid-cols-2 gap-2 sm:gap-3 pb-2 sm:pb-3">
+                {row.map((p) => (
+                  <PostGridCard
+                    key={p.id}
+                    post={p}
+                    href={hrefFor?.(p)}
+                    onDelete={onDelete}
+                    onUpdated={onUpdated}
+                  />
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {hasMore ? (
+        <div ref={sentinelRef} className="flex justify-center py-6">
+          <Loader2 className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : null}
+    </div>
+  );
+}