fix: user post feed view

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

@@ -5,19 +5,20 @@
  *
  * Split out from page.tsx so the page itself can be a server component
  * exporting `generateMetadata` for the OG card. The layout owns the
- * ProfileHeader + tabs + outer container; this component only renders
- * the inner scroll column (the Instagram-style feed of full posts).
+ * ProfileHeader + tabs + outer container (and 404s for unknown handles);
+ * this component only renders the inner scroll column.
  *
- * Hash-anchor behaviour: when arriving with `#post-<id>`, we scroll to
- * that post once the feed has loaded. Used by the SharePostSheet flow
- * — share short URL resolves to /u/<handle>/posts#post-<id>, recipient
- * lands here, and we scroll to the post that was actually shared.
+ * Anchor-first + keyset infinite scroll via usePostScrollFeed: arriving with
+ * `#post-<id>` (from a grid thumbnail or a shared link) fetches that post
+ * directly so it lands at the top instantly — even for very old posts — then
+ * pages older posts beneath it as you scroll.
  */
 
-import { use, useEffect, useRef, useState } from "react";
-import { notFound } from "next/navigation";
-import { profile, SocialError, type Post } from "@/lib/social";
+import { use } from "react";
+import { Loader2 } from "lucide-react";
+import { profile, type Post } from "@/lib/social";
 import { PostScrollCard } from "@/components/social/post/post-scroll-card";
+import { usePostScrollFeed } from "@/components/social/post/use-post-scroll-feed";
 
 export function ScrollFeed({
   params,
@@ -25,54 +26,21 @@ export function ScrollFeed({
   params: Promise<{ handle: string }>;
 }) {
   const { handle } = use(params);
-  const [feed, setFeed] = useState<Post[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [missing, setMissing] = useState(false);
-  const scrolledToHashRef = useRef(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    profile
-      .feed(handle, 60)
-      .then((rows) => {
-        if (cancelled) return;
-        setFeed(rows ?? []);
-      })
-      .catch((err) => {
-        if (err instanceof SocialError && err.status === 404) {
-          setMissing(true);
-        }
-      })
-      .finally(() => !cancelled && setLoading(false));
-    return () => {
-      cancelled = true;
-    };
-  }, [handle]);
-
-  useEffect(() => {
-    if (loading || feed.length === 0 || scrolledToHashRef.current) return;
-    if (typeof window === "undefined") return;
-    const hash = window.location.hash;
-    if (!hash) return;
-    scrolledToHashRef.current = true;
-    requestAnimationFrame(() => {
-      const el = document.getElementById(hash.slice(1));
-      if (el) el.scrollIntoView({ block: "start", behavior: "auto" });
-    });
-  }, [loading, feed.length]);
-
-  if (missing) notFound();
+  const { feed, setFeed, loading, hasMore, sentinelRef } = usePostScrollFeed(
+    (before, limit) =>
+      profile.feed(handle, { limit, before: before ?? undefined }),
+  );
 
   // When the owner views their own profile here and hides a post, drop it
   // from the feed immediately (it moves to their Hidden tab). No-op for
   // other viewers, who never see the Hide control.
   function onHiddenChange(id: string, hidden: boolean) {
-    if (hidden) setFeed((rows) => rows.filter((p) => p.id !== id));
+    if (hidden) setFeed((rows: Post[]) => rows.filter((p) => p.id !== id));
   }
 
   return (
     <div className="max-w-xl w-full mx-auto space-y-6">
-      {loading ? (
+      {loading && feed.length === 0 ? (
         <p className="text-sm text-muted-foreground">Loading…</p>
       ) : feed.length === 0 ? (
         <p className="text-sm text-muted-foreground">No posts yet.</p>
@@ -81,6 +49,12 @@ export function ScrollFeed({
           <PostScrollCard key={p.id} post={p} onHiddenChange={onHiddenChange} />
         ))
       )}
+
+      {hasMore && feed.length > 0 ? (
+        <div ref={sentinelRef} className="flex justify-center py-6">
+          <Loader2 className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : null}
     </div>
   );
 }