feat: v2 rewrite — hexagonal arch, ActivityPub federation, NATS, deployment-ready (#1)

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>
+  );
+}

thoughts-frontend/components/federation/pending-requests.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  getPendingFollowRequests,
+  acceptFollowRequest,
+  rejectFollowRequest,
+  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";
+import Link from "next/link";
+import { fullFediverseHandle } from "@/lib/utils";
+
+interface Props {
+  compact?: boolean;
+}
+
+export function PendingRequests({ compact = false }: Props) {
+  const { token } = useAuth();
+  const [requests, setRequests] = useState<RemoteActor[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!token) return;
+    getPendingFollowRequests(token)
+      .then(setRequests)
+      .catch(() => toast.error("Failed to load follow requests"))
+      .finally(() => setLoading(false));
+  }, [token]);
+
+  const accept = async (actorUrl: string) => {
+    if (!token) return;
+    setRequests((prev) => prev.filter((r) => r.url !== actorUrl));
+    await acceptFollowRequest(actorUrl, token).catch(() => {
+      toast.error("Failed to accept follow request");
+    });
+  };
+
+  const reject = async (actorUrl: string) => {
+    if (!token) return;
+    setRequests((prev) => prev.filter((r) => r.url !== actorUrl));
+    await rejectFollowRequest(actorUrl, token).catch(() => {
+      toast.error("Failed to reject follow request");
+    });
+  };
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
+  if (requests.length === 0)
+    return <p className="text-sm text-muted-foreground">No pending requests.</p>;
+
+  return (
+    <ul className={compact ? "space-y-2" : "space-y-3"}>
+      {requests.map((actor) => (
+        <li
+          key={actor.url}
+          className="flex items-center justify-between gap-3"
+        >
+          <Link
+            href={`/users/@${fullFediverseHandle(actor.handle, actor.url)}`}
+            className="flex items-center gap-2 min-w-0 hover:opacity-80"
+          >
+            <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 font-mono">
+                @{fullFediverseHandle(actor.handle, actor.url)}
+              </p>
+            </div>
+          </Link>
+          <div className="flex gap-2 shrink-0">
+            <Button size="sm" onClick={() => accept(actor.url)}>
+              Accept
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => reject(actor.url)}
+            >
+              Reject
+            </Button>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

thoughts-frontend/components/federation/remote-followers.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getRemoteFollowers, rejectFollowRequest, 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";
+import Link from "next/link";
+import { fullFediverseHandle } from "@/lib/utils";
+
+export function RemoteFollowers() {
+  const { token } = useAuth();
+  const [followers, setFollowers] = useState<RemoteActor[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!token) return;
+    getRemoteFollowers(token)
+      .then(setFollowers)
+      .catch(() => toast.error("Failed to load followers"))
+      .finally(() => setLoading(false));
+  }, [token]);
+
+  const remove = async (actorUrl: string) => {
+    if (!token) return;
+    setFollowers((prev) => prev.filter((f) => f.url !== actorUrl));
+    await rejectFollowRequest(actorUrl, token).catch(() => {
+      toast.error("Failed to remove follower");
+    });
+  };
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
+  if (followers.length === 0)
+    return <p className="text-sm text-muted-foreground">No remote followers yet.</p>;
+
+  return (
+    <ul className="space-y-3">
+      {followers.map((actor) => (
+        <li key={actor.url} className="flex items-center justify-between gap-3">
+          <Link
+            href={`/users/@${fullFediverseHandle(actor.handle, actor.url)}`}
+            className="flex items-center gap-2 min-w-0 hover:opacity-80"
+          >
+            <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 font-mono">
+                @{fullFediverseHandle(actor.handle, actor.url)}
+              </p>
+            </div>
+          </Link>
+          <Button size="sm" variant="outline" onClick={() => remove(actor.url)}>
+            Remove
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}

thoughts-frontend/components/federation/remote-following.tsx

@@ -0,0 +1,71 @@
+"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";
+import Link from "next/link";
+import { fullFediverseHandle } from "@/lib/utils";
+
+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 (actor: RemoteActor) => {
+    if (!token) return;
+    const handle = fullFediverseHandle(actor.handle, actor.url);
+    setFollowing((prev) => prev.filter((f) => f.url !== actor.url));
+    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">
+          <Link
+            href={`/users/@${fullFediverseHandle(actor.handle, actor.url)}`}
+            className="flex items-center gap-2 min-w-0 hover:opacity-80"
+          >
+            <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 font-mono">
+                @{fullFediverseHandle(actor.handle, actor.url)}
+              </p>
+            </div>
+          </Link>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => unfollow(actor)}
+          >
+            Unfollow
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}