From b86c486530205e0edac79889fc9d2289a6c1e21e Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 15 May 2026 04:14:07 +0200
Subject: [PATCH] feat(frontend): FederationPanel tabbed wrapper

---
 .../federation/federation-panel.tsx           | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 thoughts-frontend/components/federation/federation-panel.tsx

diff --git a/thoughts-frontend/components/federation/federation-panel.tsx b/thoughts-frontend/components/federation/federation-panel.tsx
new file mode 100644
index 0000000..7d0154b
--- /dev/null
+++ b/thoughts-frontend/components/federation/federation-panel.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PendingRequests } from "./pending-requests";
+import { RemoteFollowers } from "./remote-followers";
+import { RemoteFollowing } from "./remote-following";
+import { getPendingFollowRequests } from "@/lib/api";
+import { useAuth } from "@/hooks/use-auth";
+
+export function FederationPanel() {
+  const { token } = useAuth();
+  const [pendingCount, setPendingCount] = useState(0);
+
+  useEffect(() => {
+    if (!token) return;
+    getPendingFollowRequests(token)
+      .then((r) => setPendingCount(r.length))
+      .catch(() => {});
+  }, [token]);
+
+  return (
+    <Tabs defaultValue="requests">
+      <TabsList className="mb-4">
+        <TabsTrigger value="requests">
+          Requests
+          {pendingCount > 0 && (
+            <span className="ml-1.5 rounded-full bg-primary text-primary-foreground text-xs px-1.5 py-0.5">
+              {pendingCount}
+            </span>
+          )}
+        </TabsTrigger>
+        <TabsTrigger value="followers">Followers</TabsTrigger>
+        <TabsTrigger value="following">Following</TabsTrigger>
+      </TabsList>
+      <TabsContent value="requests">
+        <PendingRequests />
+      </TabsContent>
+      <TabsContent value="followers">
+        <RemoteFollowers />
+      </TabsContent>
+      <TabsContent value="following">
+        <RemoteFollowing />
+      </TabsContent>
+    </Tabs>
+  );
+}