From d88eb5d1275f08e7d24ed78fa92ed62e232c0bca Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 15 May 2026 04:28:36 +0200
Subject: [PATCH] feat(frontend): show @handle and link to profile in
 federation actor lists

---
 .../components/federation/pending-requests.tsx       | 12 ++++++++----
 .../components/federation/remote-followers.tsx       | 12 ++++++++----
 .../components/federation/remote-following.tsx       | 12 ++++++++----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/thoughts-frontend/components/federation/pending-requests.tsx b/thoughts-frontend/components/federation/pending-requests.tsx
index 57dd975..6f995b8 100644
--- a/thoughts-frontend/components/federation/pending-requests.tsx
+++ b/thoughts-frontend/components/federation/pending-requests.tsx
@@ -11,6 +11,7 @@ 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";
 
 interface Props {
   compact?: boolean;
@@ -56,7 +57,10 @@ export function PendingRequests({ compact = false }: Props) {
           key={actor.url}
           className="flex items-center justify-between gap-3"
         >
-          <div className="flex items-center gap-2 min-w-0">
+          <Link
+            href={`/users/@${actor.handle}`}
+            className="flex items-center gap-2 min-w-0 hover:opacity-80"
+          >
             <UserAvatar
               src={actor.avatarUrl}
               alt={actor.displayName}
@@ -66,11 +70,11 @@ export function PendingRequests({ compact = false }: Props) {
               <p className="text-sm font-medium truncate">
                 {actor.displayName || actor.handle}
               </p>
-              <p className="text-xs text-muted-foreground truncate">
-                {actor.handle}
+              <p className="text-xs text-muted-foreground truncate font-mono">
+                @{actor.handle}
               </p>
             </div>
-          </div>
+          </Link>
           <div className="flex gap-2 shrink-0">
             <Button size="sm" onClick={() => accept(actor.url)}>
               Accept
diff --git a/thoughts-frontend/components/federation/remote-followers.tsx b/thoughts-frontend/components/federation/remote-followers.tsx
index 5355da6..7414c76 100644
--- a/thoughts-frontend/components/federation/remote-followers.tsx
+++ b/thoughts-frontend/components/federation/remote-followers.tsx
@@ -6,6 +6,7 @@ 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";
 
 export function RemoteFollowers() {
   const { token } = useAuth();
@@ -36,7 +37,10 @@ export function RemoteFollowers() {
     <ul className="space-y-3">
       {followers.map((actor) => (
         <li key={actor.url} className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-2 min-w-0">
+          <Link
+            href={`/users/@${actor.handle}`}
+            className="flex items-center gap-2 min-w-0 hover:opacity-80"
+          >
             <UserAvatar
               src={actor.avatarUrl}
               alt={actor.displayName}
@@ -46,11 +50,11 @@ export function RemoteFollowers() {
               <p className="text-sm font-medium truncate">
                 {actor.displayName || actor.handle}
               </p>
-              <p className="text-xs text-muted-foreground truncate">
-                {actor.handle}
+              <p className="text-xs text-muted-foreground truncate font-mono">
+                @{actor.handle}
               </p>
             </div>
-          </div>
+          </Link>
           <Button size="sm" variant="outline" onClick={() => remove(actor.url)}>
             Remove
           </Button>
diff --git a/thoughts-frontend/components/federation/remote-following.tsx b/thoughts-frontend/components/federation/remote-following.tsx
index 7f0b260..33e1a67 100644
--- a/thoughts-frontend/components/federation/remote-following.tsx
+++ b/thoughts-frontend/components/federation/remote-following.tsx
@@ -6,6 +6,7 @@ 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";
 
 export function RemoteFollowing() {
   const { token } = useAuth();
@@ -36,7 +37,10 @@ export function RemoteFollowing() {
     <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">
+          <Link
+            href={`/users/@${actor.handle}`}
+            className="flex items-center gap-2 min-w-0 hover:opacity-80"
+          >
             <UserAvatar
               src={actor.avatarUrl}
               alt={actor.displayName}
@@ -46,11 +50,11 @@ export function RemoteFollowing() {
               <p className="text-sm font-medium truncate">
                 {actor.displayName || actor.handle}
               </p>
-              <p className="text-xs text-muted-foreground truncate">
-                {actor.handle}
+              <p className="text-xs text-muted-foreground truncate font-mono">
+                @{actor.handle}
               </p>
             </div>
-          </div>
+          </Link>
           <Button
             size="sm"
             variant="outline"