From f89a466fd9a1ef026958a1984dd51b8927d8290b Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Sat, 16 May 2026 15:14:53 +0200
Subject: [PATCH] feat: load more pagination for remote user posts

---
 thoughts-frontend/app/remote-actor/page.tsx   |  9 ++++-
 .../components/remote-user-profile/index.tsx  | 40 +++++++++++++++++--
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/thoughts-frontend/app/remote-actor/page.tsx b/thoughts-frontend/app/remote-actor/page.tsx
index a5e0881..9d6adb1 100644
--- a/thoughts-frontend/app/remote-actor/page.tsx
+++ b/thoughts-frontend/app/remote-actor/page.tsx
@@ -65,8 +65,11 @@ export default async function RemoteActorPage({
   }
 
   const actor = actorResult.value;
-  const posts =
-    postsResult.status === "fulfilled" ? postsResult.value.items : [];
+  const postsData = postsResult.status === "fulfilled" ? postsResult.value : null;
+  const posts = postsData?.items ?? [];
+  const totalPages = postsData
+    ? Math.ceil(postsData.total / postsData.per_page)
+    : 1;
   const me =
     meResult.status === "fulfilled" ? (meResult.value as Me | null) : null;
   const following =
@@ -77,7 +80,9 @@ export default async function RemoteActorPage({
     <RemoteUserProfile
       key={actor.url}
       actor={actor}
+      handle={handle}
       initialPosts={posts}
+      initialTotalPages={totalPages}
       me={me}
       initialFollowed={initialFollowed}
     />
diff --git a/thoughts-frontend/components/remote-user-profile/index.tsx b/thoughts-frontend/components/remote-user-profile/index.tsx
index bd8cfc8..63bbb61 100644
--- a/thoughts-frontend/components/remote-user-profile/index.tsx
+++ b/thoughts-frontend/components/remote-user-profile/index.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { UserMinus, UserPlus } from "lucide-react";
-import { followUser, unfollowUser, RemoteActor, Thought, Me } from "@/lib/api";
+import { followUser, unfollowUser, getRemoteActorPosts, RemoteActor, Thought, Me } from "@/lib/api";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,14 +14,18 @@ import { Connections } from "./connections";
 
 interface RemoteUserProfileProps {
   actor: RemoteActor;
+  handle: string;
   initialPosts: Thought[];
+  initialTotalPages: number;
   me: Me | null;
   initialFollowed?: boolean;
 }
 
 export function RemoteUserProfile({
   actor,
+  handle,
   initialPosts,
+  initialTotalPages,
   me,
   initialFollowed = false,
 }: RemoteUserProfileProps) {
@@ -29,6 +33,24 @@ export function RemoteUserProfile({
   const [followLoading, setFollowLoading] = useState(false);
   const { token } = useAuth();
 
+  const [posts, setPosts] = useState<Thought[]>(initialPosts);
+  const [page, setPage] = useState(1);
+  const [totalPages] = useState(initialTotalPages);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const loadMore = async () => {
+    setLoadingMore(true);
+    try {
+      const result = await getRemoteActorPosts(handle, page + 1, token);
+      setPosts((prev) => [...prev, ...result.items]);
+      setPage((p) => p + 1);
+    } catch {
+      toast.error("Failed to load more posts.");
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
   const [followersActive, setFollowersActive] = useState(false);
   const [followingActive, setFollowingActive] = useState(false);
 
@@ -108,8 +130,20 @@ export function RemoteUserProfile({
             </TabsList>
 
             <TabsContent value="posts" className="space-y-4 mt-4">
-              {initialPosts.length > 0 ? (
-                <ThoughtList thoughts={initialPosts} currentUser={me} />
+              {posts.length > 0 ? (
+                <>
+                  <ThoughtList thoughts={posts} currentUser={me} />
+                  {page < totalPages && (
+                    <Button
+                      onClick={loadMore}
+                      disabled={loadingMore}
+                      variant="outline"
+                      className="w-full rounded-full"
+                    >
+                      {loadingMore ? "Loading…" : "Load more"}
+                    </Button>
+                  )}
+                </>
               ) : (
                 <Card className="flex items-center justify-center h-48">
                   <p className="text-center text-muted-foreground">