From 86a21a5bb7b5424daf44dc19b6ca7988e19aaa98 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 15 May 2026 04:13:51 +0200
Subject: [PATCH] feat(frontend): RemoteFollowing component

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

diff --git a/thoughts-frontend/components/federation/remote-following.tsx b/thoughts-frontend/components/federation/remote-following.tsx
new file mode 100644
index 0000000..7f0b260
--- /dev/null
+++ b/thoughts-frontend/components/federation/remote-following.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getRemoteFollowing, unfollowRemoteActor, type RemoteActor } from "@/lib/api";
+import { useAuth } from "@/hooks/use-auth";
+import { UserAvatar } from "@/components/user-avatar";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+export function RemoteFollowing() {
+  const { token } = useAuth();
+  const [following, setFollowing] = useState<RemoteActor[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!token) return;
+    getRemoteFollowing(token)
+      .then(setFollowing)
+      .catch(() => toast.error("Failed to load following"))
+      .finally(() => setLoading(false));
+  }, [token]);
+
+  const unfollow = async (handle: string) => {
+    if (!token) return;
+    setFollowing((prev) => prev.filter((f) => f.handle !== handle));
+    await unfollowRemoteActor(handle, token).catch(() => {
+      toast.error("Failed to unfollow");
+    });
+  };
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
+  if (following.length === 0)
+    return <p className="text-sm text-muted-foreground">Not following anyone remotely yet.</p>;
+
+  return (
+    <ul className="space-y-3">
+      {following.map((actor) => (
+        <li key={actor.url} className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <UserAvatar
+              src={actor.avatarUrl}
+              alt={actor.displayName}
+              className="h-8 w-8 shrink-0"
+            />
+            <div className="min-w-0">
+              <p className="text-sm font-medium truncate">
+                {actor.displayName || actor.handle}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">
+                {actor.handle}
+              </p>
+            </div>
+          </div>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => unfollow(actor.handle)}
+          >
+            Unfollow
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}