fix: user post feed view

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

@@ -30,7 +30,7 @@ export function PostsGrid({
   useEffect(() => {
     let cancelled = false;
     profile
-      .feed(handle, 30)
+      .feed(handle, { limit: 30 })
       .then((rows) => {
         if (!cancelled) setFeed(rows ?? []);
       })

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>
   );
 }

app/(app)/u/me/posts/page.tsx

@@ -4,53 +4,34 @@
  * /u/me/posts — the owner's Instagram-style scroll feed.
  *
  * Reached by tapping a thumbnail from the /u/me Posts grid. The clicked
- * post's id arrives as a `#post-<id>` hash, and `scroll-mt-*` on each
- * card spaces it below the sticky header so the anchor lands cleanly.
+ * post's id arrives as a `#post-<id>` hash; usePostScrollFeed fetches that
+ * post directly so it lands at the top instantly (even for old posts), then
+ * keyset-pages older posts beneath it as you scroll.
  *
  * Owner controls (Delete + Update background) are mounted per-card.
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { PostScrollCard } from "@/components/social/post/post-scroll-card";
+import { usePostScrollFeed } from "@/components/social/post/use-post-scroll-feed";
 import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { posts, SocialError, type Post } from "@/lib/social";
 
 export default function MyPostsFeedPage() {
   const { user } = useAuth();
-  const [feed, setFeed] = useState<Post[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  // Defer the feed (which calls the authed /posts/mine) until we have a user.
+  if (!user) return null;
+  return <OwnerScrollFeed />;
+}
+
+function OwnerScrollFeed() {
+  const { feed, setFeed, loading, hasMore, error, setError, sentinelRef } =
+    usePostScrollFeed((before, limit) =>
+      posts.mine({ limit, before: before ?? undefined }),
+    );
   const [pendingDelete, setPendingDelete] = useState<string | null>(null);
-  const scrolledToHashRef = useRef(false);
-
-  useEffect(() => {
-    if (!user) return;
-    posts
-      .mine()
-      .then((rows) => setFeed(rows ?? []))
-      .catch((err) =>
-        setError(
-          err instanceof SocialError ? err.message : "Could not load posts.",
-        ),
-      )
-      .finally(() => setLoading(false));
-  }, [user]);
-
-  // Hash anchor: when the feed mounts, jump to the post identified in the
-  // URL hash. Defer one tick so the cards have laid out and `scroll-mt-*`
-  // can position the anchor below the sticky header.
-  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]);
 
   async function performDelete() {
     const id = pendingDelete;
@@ -79,13 +60,11 @@ export default function MyPostsFeedPage() {
     if (hidden) setFeed((rows) => rows.filter((p) => p.id !== id));
   }
 
-  if (!user) return null;
-
   return (
     <div className="max-w-xl w-full mx-auto space-y-6">
       {error ? (
         <p className="text-sm text-destructive">{error}</p>
-      ) : 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>
@@ -101,6 +80,12 @@ export default function MyPostsFeedPage() {
         ))
       )}
 
+      {hasMore && feed.length > 0 ? (
+        <div ref={sentinelRef} className="flex justify-center py-6">
+          <Loader2 className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : null}
+
       <ConfirmModal
         open={!!pendingDelete}
         onClose={() => setPendingDelete(null)}