thoughts-frontend/app/users/[username]/followers/page.tsx

@@ -1,7 +1,8 @@
 import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
-import { getFollowersList } from "@/lib/api";
+import { getFollowersList, getMe } from "@/lib/api";
 import { UserListCard } from "@/components/user-list-card";
+import { RemoteFollowers } from "@/components/federation/remote-followers";
 
 interface FollowersPageProps {
   params: Promise<{ username: string }>;
@@ -11,22 +12,33 @@ export default async function FollowersPage({ params }: FollowersPageProps) {
   const { username } = await params;
   const token = (await cookies()).get("auth_token")?.value ?? null;
 
-  const followersData = await getFollowersList(username, token).catch(
-    () => null
-  );
+  const [followersData, me] = await Promise.all([
+    getFollowersList(username, token).catch(() => null),
+    token ? getMe(token).catch(() => null) : null,
+  ]);
 
   if (!followersData) {
     notFound();
   }
 
+  const isOwnProfile = me?.username === username;
+
   return (
     <div className="container mx-auto max-w-2xl p-4 sm:p-6">
       <header className="my-6">
         <h1 className="text-3xl font-bold">Followers</h1>
         <p className="text-muted-foreground">Users following @{username}.</p>
       </header>
-      <main>
+      <main className="space-y-8">
         <UserListCard users={followersData.items} />
+        {isOwnProfile && (
+          <section>
+            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
+              Remote followers
+            </h2>
+            <RemoteFollowers />
+          </section>
+        )}
       </main>
     </div>
   );

thoughts-frontend/app/users/[username]/following/page.tsx

@@ -1,7 +1,8 @@
 import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
-import { getFollowingList } from "@/lib/api";
+import { getFollowingList, getMe } from "@/lib/api";
 import { UserListCard } from "@/components/user-list-card";
+import { RemoteFollowing } from "@/components/federation/remote-following";
 
 interface FollowingPageProps {
   params: Promise<{ username: string }>;
@@ -11,22 +12,33 @@ export default async function FollowingPage({ params }: FollowingPageProps) {
   const { username } = await params;
   const token = (await cookies()).get("auth_token")?.value ?? null;
 
-  const followingData = await getFollowingList(username, token).catch(
-    () => null
-  );
+  const [followingData, me] = await Promise.all([
+    getFollowingList(username, token).catch(() => null),
+    token ? getMe(token).catch(() => null) : null,
+  ]);
 
   if (!followingData) {
     notFound();
   }
 
+  const isOwnProfile = me?.username === username;
+
   return (
     <div className="container mx-auto max-w-2xl p-4 sm:p-6">
       <header className="my-6">
         <h1 className="text-3xl font-bold">Following</h1>
         <p className="text-muted-foreground">Users that @{username} follows.</p>
       </header>
-      <main>
+      <main className="space-y-8">
         <UserListCard users={followingData.items} />
+        {isOwnProfile && (
+          <section>
+            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
+              Remote following
+            </h2>
+            <RemoteFollowing />
+          </section>
+        )}
       </main>
     </div>
   );

thoughts-frontend/app/users/[username]/page.tsx

@@ -54,7 +54,7 @@ import { ThoughtThread } from "@/components/thought-thread";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { FederationPanel } from "@/components/federation/federation-panel";
+import { PendingRequests } from "@/components/federation/pending-requests";
 
 interface ProfilePageProps {
   params: Promise<{ username: string }>;
@@ -256,7 +256,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
             <TabsList className="mb-4">
               <TabsTrigger value="thoughts">Thoughts</TabsTrigger>
               {isOwnProfile && (
-                <TabsTrigger value="federation">Federation</TabsTrigger>
+                <TabsTrigger value="federation">Requests</TabsTrigger>
               )}
             </TabsList>
             <TabsContent value="thoughts" className="space-y-4">
@@ -281,7 +281,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
             </TabsContent>
             {isOwnProfile && (
               <TabsContent value="federation">
-                <FederationPanel />
+                <PendingRequests />
               </TabsContent>
             )}
           </Tabs>