feat(frontend): remote actor profile page with bio, fields, and posts

thoughts-frontend/app/users/[username]/page.tsx

@@ -5,8 +5,11 @@ import {
   getTopFriends,
   getUserProfile,
   getUserThoughts,
+  lookupRemoteActor,
+  getRemoteActorPosts,
   Me,
 } from "@/lib/api";
+import { RemoteUserProfile } from "@/components/remote-user-profile";
 import { UserAvatar } from "@/components/user-avatar";
 import { Calendar, Settings } from "lucide-react";
 import { Card } from "@/components/ui/card";
@@ -27,6 +30,28 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
   const { username } = await params;
   const token = (await cookies()).get("auth_token")?.value ?? null;
 
+  const HANDLE_RE = /^@[\w.-]+@[\w.-]+\.\w+$/;
+
+  if (HANDLE_RE.test(username)) {
+    const [actorResult, postsResult, meResult] = await Promise.allSettled([
+      lookupRemoteActor(username, token),
+      getRemoteActorPosts(username, 1, token),
+      token ? getMe(token) : Promise.resolve(null),
+    ]);
+
+    if (actorResult.status === "rejected") {
+      notFound();
+    }
+
+    const actor = actorResult.value as Awaited<ReturnType<typeof lookupRemoteActor>>;
+    const posts =
+      postsResult.status === "fulfilled" ? postsResult.value.items : [];
+    const me =
+      meResult.status === "fulfilled" ? (meResult.value as Me | null) : null;
+
+    return <RemoteUserProfile actor={actor} initialPosts={posts} me={me} />;
+  }
+
   const userProfilePromise = getUserProfile(username, token);
   const thoughtsPromise = getUserThoughts(username, token);
   const mePromise = token ? getMe(token) : Promise.resolve(null);

thoughts-frontend/components/remote-user-profile.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { UserAvatar } from "@/components/user-avatar";
+import { ThoughtList } from "@/components/thought-list";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, UserPlus, UserMinus } from "lucide-react";
+import { followUser, unfollowUser, RemoteActor, Thought, Me } from "@/lib/api";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/use-auth";
+
+interface RemoteUserProfileProps {
+  actor: RemoteActor;
+  initialPosts: Thought[];
+  me: Me | null;
+}
+
+export function RemoteUserProfile({
+  actor,
+  initialPosts,
+  me,
+}: RemoteUserProfileProps) {
+  const [followed, setFollowed] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { token } = useAuth();
+
+  const handleFollow = async () => {
+    if (!token) {
+      toast.error("You must be logged in to follow users.");
+      return;
+    }
+    setLoading(true);
+    try {
+      if (followed) {
+        await unfollowUser(actor.handle, token);
+        setFollowed(false);
+      } else {
+        await followUser(actor.handle, token);
+        setFollowed(true);
+        toast.success(`Follow request sent to ${actor.handle}`);
+      }
+    } catch {
+      toast.error(
+        followed ? "Failed to unfollow." : "Failed to send follow request."
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isOwnProfile = me?.username === actor.handle;
+
+  const authorDetails = new Map<string, { avatarUrl?: string | null }>();
+  initialPosts.forEach((t) => {
+    authorDetails.set(t.author.username, { avatarUrl: actor.avatarUrl });
+  });
+
+  return (
+    <div>
+      <div
+        className="h-48 bg-muted bg-cover bg-center"
+        style={{
+          backgroundImage: actor.bannerUrl
+            ? `url(${actor.bannerUrl})`
+            : "none",
+        }}
+      />
+
+      <main className="container mx-auto max-w-6xl p-4 -mt-16 grid grid-cols-1 lg:grid-cols-4 gap-8">
+        <aside className="col-span-1 space-y-6">
+          <div className="sticky top-20 space-y-6">
+            <Card className="p-6 bg-card/80 backdrop-blur-lg">
+              <div className="flex justify-between items-start">
+                <div className="w-24 h-24 rounded-full border-4 border-background shrink-0">
+                  <UserAvatar
+                    src={actor.avatarUrl}
+                    alt={actor.displayName}
+                    className="w-full h-full"
+                  />
+                </div>
+                {!isOwnProfile && token && (
+                  <Button
+                    onClick={handleFollow}
+                    disabled={loading}
+                    variant={followed ? "secondary" : "default"}
+                    size="sm"
+                  >
+                    {followed ? (
+                      <>
+                        <UserMinus className="mr-2 h-4 w-4" /> Unfollow
+                      </>
+                    ) : (
+                      <>
+                        <UserPlus className="mr-2 h-4 w-4" /> Follow
+                      </>
+                    )}
+                  </Button>
+                )}
+              </div>
+
+              <div className="mt-4">
+                <h1 className="text-2xl font-bold">
+                  {actor.displayName ?? actor.handle}
+                </h1>
+                <p className="text-sm text-muted-foreground">{actor.handle}</p>
+              </div>
+
+              {actor.bio && (
+                <p className="mt-4 text-sm whitespace-pre-wrap">{actor.bio}</p>
+              )}
+
+              <Button
+                asChild
+                variant="outline"
+                size="sm"
+                className="mt-4 w-full"
+              >
+                <Link href={actor.url} target="_blank" rel="noopener noreferrer">
+                  <ExternalLink className="mr-2 h-4 w-4" />
+                  View on {new URL(actor.url).hostname}
+                </Link>
+              </Button>
+
+              {actor.alsoKnownAs && (
+                <p className="mt-2 text-xs text-muted-foreground">
+                  Also known as:{" "}
+                  <Link
+                    href={actor.alsoKnownAs}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    {actor.alsoKnownAs}
+                  </Link>
+                </p>
+              )}
+
+              {actor.attachment.length > 0 && (
+                <table className="mt-4 w-full text-sm border-collapse">
+                  <tbody>
+                    {actor.attachment.map((field) => (
+                      <tr key={field.name} className="border-t">
+                        <td className="py-1 pr-2 font-medium text-muted-foreground">
+                          {field.name}
+                        </td>
+                        <td
+                          className="py-1"
+                          dangerouslySetInnerHTML={{ __html: field.value }}
+                        />
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </Card>
+          </div>
+        </aside>
+
+        <div className="col-span-1 lg:col-span-3 space-y-4">
+          {initialPosts.length > 0 ? (
+            <ThoughtList
+              thoughts={initialPosts}
+              authorDetails={authorDetails}
+              currentUser={me}
+            />
+          ) : (
+            <Card className="flex items-center justify-center h-48">
+              <p className="text-center text-muted-foreground">
+                Posts are being fetched — check back soon.
+              </p>
+            </Card>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}

thoughts-frontend/lib/api.ts

@@ -15,11 +15,22 @@ export const UserSchema = z.object({
 
 export const MeSchema = UserSchema;
 
+export const ProfileFieldSchema = z.object({
+  name: z.string(),
+  value: z.string(),
+});
+export type ProfileField = z.infer<typeof ProfileFieldSchema>;
+
 export const RemoteActorSchema = z.object({
   handle: z.string(),
   displayName: z.string().nullable(),
   avatarUrl: z.string().nullable(),
   url: z.string(),
+  bio: z.string().nullable(),
+  bannerUrl: z.string().nullable(),
+  alsoKnownAs: z.string().nullable(),
+  outboxUrl: z.string().nullable(),
+  attachment: z.array(ProfileFieldSchema),
 });
 export type RemoteActor = z.infer<typeof RemoteActorSchema>;
 
@@ -240,6 +251,23 @@ export const lookupRemoteActor = (handle: string, token: string | null) =>
     token
   );
 
+export const getRemoteActorPosts = (
+  handle: string,
+  page: number,
+  token: string | null
+) =>
+  apiFetch(
+    `/federation/actors/${encodeURIComponent(handle)}/posts?page=${page}&per_page=20`,
+    {},
+    z.object({
+      total: z.number(),
+      page: z.number(),
+      per_page: z.number(),
+      items: z.array(ThoughtSchema),
+    }),
+    token
+  );
+
 export const getAllUsers = (page: number = 1, pageSize: number = 20) =>
   apiFetch(
     `/users?page=${page}&per_page=${pageSize}`,