From d98c338e52b035680c6a8f1f92f3ddc242afbcb5 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 15 May 2026 04:25:33 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20unify=20local+remote=20followe?=
 =?UTF-8?q?rs/following=20=E2=80=94=20profile=20tab=20becomes=20Requests?=
 =?UTF-8?q?=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/users/[username]/followers/page.tsx   | 22 ++++++++++++++-----
 .../app/users/[username]/following/page.tsx   | 22 ++++++++++++++-----
 .../app/users/[username]/page.tsx             |  6 ++---
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/thoughts-frontend/app/users/[username]/followers/page.tsx b/thoughts-frontend/app/users/[username]/followers/page.tsx
index 02be5d6..5dda901 100644
--- a/thoughts-frontend/app/users/[username]/followers/page.tsx
+++ b/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>
   );
diff --git a/thoughts-frontend/app/users/[username]/following/page.tsx b/thoughts-frontend/app/users/[username]/following/page.tsx
index 00a05ed..f6b4e72 100644
--- a/thoughts-frontend/app/users/[username]/following/page.tsx
+++ b/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>
   );
diff --git a/thoughts-frontend/app/users/[username]/page.tsx b/thoughts-frontend/app/users/[username]/page.tsx
index 659e17b..25474f8 100644
--- a/thoughts-frontend/app/users/[username]/page.tsx
+++ b/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>