feat(frontend): followers/following tabs on remote actor profile with lazy loading + pagination

thoughts-frontend/components/remote-user-card.tsx

@@ -3,14 +3,19 @@
 import { useState } from "react";
 import { useAuth } from "@/hooks/use-auth";
 import Link from "next/link";
-import { followUser, RemoteActor } from "@/lib/api";
+import { followUser } from "@/lib/api";
 import { Button } from "@/components/ui/button";
 import { UserAvatar } from "@/components/user-avatar";
 import { toast } from "sonner";
 import { UserPlus } from "lucide-react";
 
 interface RemoteUserCardProps {
-  actor: RemoteActor;
+  actor: {
+    handle: string;
+    displayName: string | null;
+    avatarUrl: string | null;
+    url: string;
+  };
 }
 
 export function RemoteUserCard({ actor }: RemoteUserCardProps) {

thoughts-frontend/components/remote-user-profile.tsx

@@ -7,7 +7,9 @@ import { ThoughtList } from "@/components/thought-list";
 import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ExternalLink, UserPlus, UserMinus } from "lucide-react";
-import { followUser, unfollowUser, RemoteActor, Thought, Me } from "@/lib/api";
+import { followUser, unfollowUser, RemoteActor, Thought, Me, getActorFollowers, getActorFollowing, ActorConnection } from "@/lib/api";
+import { RemoteUserCard } from "@/components/remote-user-card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { toast } from "sonner";
 import { useAuth } from "@/hooks/use-auth";
 
@@ -26,6 +28,17 @@ export function RemoteUserProfile({
   const [loading, setLoading] = useState(false);
   const { token } = useAuth();
 
+  type ConnectionTab = "posts" | "followers" | "following";
+  const [activeTab, setActiveTab] = useState<ConnectionTab>("posts");
+  const [followers, setFollowers] = useState<ActorConnection[]>([]);
+  const [following, setFollowing] = useState<ActorConnection[]>([]);
+  const [followersPage, setFollowersPage] = useState(1);
+  const [followingPage, setFollowingPage] = useState(1);
+  const [followersHasMore, setFollowersHasMore] = useState(false);
+  const [followingHasMore, setFollowingHasMore] = useState(false);
+  const [followersLoaded, setFollowersLoaded] = useState(false);
+  const [followingLoaded, setFollowingLoaded] = useState(false);
+
   const handleFollow = async () => {
     if (!token) {
       toast.error("You must be logged in to follow users.");
@@ -50,6 +63,30 @@ export function RemoteUserProfile({
     }
   };
 
+  const loadFollowers = async (page: number) => {
+    const result = await getActorFollowers(actor.handle, page, token).catch(() => null);
+    if (!result) return;
+    setFollowers((prev) => (page === 1 ? result.items : [...prev, ...result.items]));
+    setFollowersHasMore(result.hasMore);
+    setFollowersLoaded(true);
+    setFollowersPage(page);
+  };
+
+  const loadFollowing = async (page: number) => {
+    const result = await getActorFollowing(actor.handle, page, token).catch(() => null);
+    if (!result) return;
+    setFollowing((prev) => (page === 1 ? result.items : [...prev, ...result.items]));
+    setFollowingHasMore(result.hasMore);
+    setFollowingLoaded(true);
+    setFollowingPage(page);
+  };
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab as ConnectionTab);
+    if (tab === "followers" && !followersLoaded) loadFollowers(1);
+    if (tab === "following" && !followingLoaded) loadFollowing(1);
+  };
+
   const isOwnProfile = me?.username === actor.handle;
 
   const authorDetails = new Map<string, { avatarUrl?: string | null }>();
@@ -133,31 +170,6 @@ export function RemoteUserProfile({
                 </Link>
               </Button>
 
-              {(actor.followersUrl || actor.followingUrl) && (
-                <div className="mt-3 flex gap-3 text-sm">
-                  {actor.followersUrl && (
-                    <Link
-                      href={actor.followersUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-muted-foreground hover:text-foreground hover:underline"
-                    >
-                      Followers
-                    </Link>
-                  )}
-                  {actor.followingUrl && (
-                    <Link
-                      href={actor.followingUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-muted-foreground hover:text-foreground hover:underline"
-                    >
-                      Following
-                    </Link>
-                  )}
-                </div>
-              )}
-
               {actor.alsoKnownAs && (
                 <p className="mt-2 text-xs text-muted-foreground">
                   Also known as:{" "}
@@ -194,7 +206,15 @@ export function RemoteUserProfile({
           </div>
         </aside>
 
-        <div className="col-span-1 lg:col-span-3 space-y-4">
+        <div className="col-span-1 lg:col-span-3">
+          <Tabs defaultValue="posts" onValueChange={handleTabChange}>
+            <TabsList>
+              <TabsTrigger value="posts">Posts</TabsTrigger>
+              <TabsTrigger value="followers">Followers</TabsTrigger>
+              <TabsTrigger value="following">Following</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="posts" className="space-y-4 mt-4">
               {initialPosts.length > 0 ? (
                 <ThoughtList
                   thoughts={initialPosts}
@@ -208,6 +228,64 @@ export function RemoteUserProfile({
                   </p>
                 </Card>
               )}
+            </TabsContent>
+
+            <TabsContent value="followers" className="mt-4">
+              {!followersLoaded ? (
+                <Card className="flex items-center justify-center h-48">
+                  <p className="text-center text-muted-foreground">Loading followers…</p>
+                </Card>
+              ) : followers.length === 0 ? (
+                <Card className="flex items-center justify-center h-48">
+                  <p className="text-center text-muted-foreground">
+                    No followers cached yet — check back soon.
+                  </p>
+                </Card>
+              ) : (
+                <div className="space-y-2">
+                  {followers.map((f) => (
+                    <RemoteUserCard key={f.url} actor={f} />
+                  ))}
+                  {followersHasMore && (
+                    <button
+                      onClick={() => loadFollowers(followersPage + 1)}
+                      className="w-full text-sm text-muted-foreground hover:text-foreground py-2"
+                    >
+                      Load more
+                    </button>
+                  )}
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="following" className="mt-4">
+              {!followingLoaded ? (
+                <Card className="flex items-center justify-center h-48">
+                  <p className="text-center text-muted-foreground">Loading following…</p>
+                </Card>
+              ) : following.length === 0 ? (
+                <Card className="flex items-center justify-center h-48">
+                  <p className="text-center text-muted-foreground">
+                    No following cached yet — check back soon.
+                  </p>
+                </Card>
+              ) : (
+                <div className="space-y-2">
+                  {following.map((f) => (
+                    <RemoteUserCard key={f.url} actor={f} />
+                  ))}
+                  {followingHasMore && (
+                    <button
+                      onClick={() => loadFollowing(followingPage + 1)}
+                      className="w-full text-sm text-muted-foreground hover:text-foreground py-2"
+                    >
+                      Load more
+                    </button>
+                  )}
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
         </div>
       </main>
     </div>

thoughts-frontend/lib/api.ts

@@ -270,6 +270,44 @@ export const getRemoteActorPosts = (
     token
   );
 
+export const ActorConnectionSchema = z.object({
+  handle: z.string(),
+  displayName: z.string().nullable(),
+  avatarUrl: z.string().nullable(),
+  url: z.string(),
+});
+export type ActorConnection = z.infer<typeof ActorConnectionSchema>;
+
+const ActorConnectionPageSchema = z.object({
+  items: z.array(ActorConnectionSchema),
+  page: z.number(),
+  hasMore: z.boolean(),
+});
+
+export const getActorFollowers = (
+  handle: string,
+  page: number,
+  token: string | null
+) =>
+  apiFetch(
+    `/federation/actors/${encodeURIComponent(handle)}/followers-list?page=${page}`,
+    {},
+    ActorConnectionPageSchema,
+    token
+  );
+
+export const getActorFollowing = (
+  handle: string,
+  page: number,
+  token: string | null
+) =>
+  apiFetch(
+    `/federation/actors/${encodeURIComponent(handle)}/following-list?page=${page}`,
+    {},
+    ActorConnectionPageSchema,
+    token
+  );
+
 export const getAllUsers = (page: number = 1, pageSize: number = 20) =>
   apiFetch(
     `/users?page=${page}&per_page=${pageSize}`,