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

2026-05-16 09:42:40 +00:00
parent 071809bc3f
commit 9aee4ceb6d
224 changed files with 35418 additions and 1469 deletions
--- a/thoughts-frontend/components/api-keys-list.tsx
+++ b/thoughts-frontend/components/api-keys-list.tsx
@@ -64,7 +64,7 @@ export function ApiKeyList({ initialApiKeys }: ApiKeyListProps) {
    try {
      const newKeyResponse = await createApiKey(values, token);
      setKeys((prev) => [...prev, newKeyResponse]);
-      setNewKey(newKeyResponse.plaintextKey ?? null);
+      setNewKey(newKeyResponse.key ?? null);
      form.reset();
      toast.success("API Key created successfully.");
    } catch {
@@ -113,7 +113,7 @@ export function ApiKeyList({ initialApiKeys }: ApiKeyListProps) {
                        {`Created on ${format(key.createdAt, "PPP")}`}
                      </p>
                      <p className="text-xs font-mono text-muted-foreground mt-1">
-                        {`${key.keyPrefix}...`}
+                        {key.id}
                      </p>
                    </div>
                  </div>
--- a/thoughts-frontend/components/edit-profile-form.tsx
+++ b/thoughts-frontend/components/edit-profile-form.tsx
@@ -3,9 +3,8 @@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { useRouter } from "next/navigation";
-import { useAuth } from "@/hooks/use-auth";
-import { Me, UpdateProfileSchema, updateProfile } from "@/lib/api";
+import { Me, UpdateProfileSchema } from "@/lib/api";
+import { updateProfile } from "@/app/actions/profile";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
@@ -16,19 +15,15 @@ import {
  FormLabel,
  FormControl,
  FormMessage,
-  FormDescription,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { TopFriendsCombobox } from "@/components/top-friends-combobox";

 interface EditProfileFormProps {
  currentUser: Me;
 }

 export function EditProfileForm({ currentUser }: EditProfileFormProps) {
-  const router = useRouter();
-  const { token } = useAuth();

  const form = useForm<z.infer<typeof UpdateProfileSchema>>({
    resolver: zodResolver(UpdateProfileSchema),
@@ -38,18 +33,14 @@ export function EditProfileForm({ currentUser }: EditProfileFormProps) {
      avatarUrl: currentUser.avatarUrl ?? undefined,
      headerUrl: currentUser.headerUrl ?? undefined,
      customCss: currentUser.customCss ?? undefined,
-      topFriends: currentUser.topFriends ?? [],
    },
  });

  async function onSubmit(values: z.infer<typeof UpdateProfileSchema>) {
-    if (!token) return;
    toast.info("Updating your profile...");
    try {
-      await updateProfile(values, token);
+      await updateProfile(currentUser.username, values);
      toast.success("Profile updated successfully!");
-      router.push(`/users/${currentUser.username}`);
-      router.refresh();
    } catch (err) {
      toast.error(`Failed to update profile. ${err}`);
    }
@@ -135,25 +126,6 @@ export function EditProfileForm({ currentUser }: EditProfileFormProps) {
                </FormItem>
              )}
            />
-            <FormField
-              name="topFriends"
-              control={form.control}
-              render={({ field }) => (
-                <FormItem className="flex flex-col">
-                  <FormLabel>Top Friends</FormLabel>
-                  <FormControl>
-                    <TopFriendsCombobox
-                      value={field.value || []}
-                      onChange={field.onChange}
-                    />
-                  </FormControl>
-                  <FormDescription>
-                    Select up to 8 of your friends to display on your profile.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
          </CardContent>
          <CardFooter className="border-t px-6 py-4">
            <Button type="submit" disabled={form.formState.isSubmitting}>
--- a/thoughts-frontend/components/empty-state.tsx
+++ b/thoughts-frontend/components/empty-state.tsx
@@ -0,0 +1,12 @@
+interface EmptyStateProps {
+  message: string
+  className?: string
+}
+
+export function EmptyState({ message, className }: EmptyStateProps) {
+  return (
+    <p className={`text-center text-muted-foreground pt-8 ${className ?? ""}`}>
+      {message}
+    </p>
+  )
+}
--- a/thoughts-frontend/components/federation/federation-panel.tsx
+++ 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>
+  );
+}
--- a/thoughts-frontend/components/federation/pending-requests.tsx
+++ b/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>
+  );
+}
--- a/thoughts-frontend/components/federation/remote-followers.tsx
+++ b/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>
+  );
+}
--- a/thoughts-frontend/components/federation/remote-following.tsx
+++ b/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>
+  );
+}
--- a/thoughts-frontend/components/follow-button.tsx
+++ b/thoughts-frontend/components/follow-button.tsx
@@ -1,66 +1,41 @@
-"use client";
+"use client"

-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { useAuth } from "@/hooks/use-auth";
-import { followUser, unfollowUser } from "@/lib/api";
-import { Button } from "@/components/ui/button";
-import { toast } from "sonner";
-import { UserPlus, UserMinus } from "lucide-react";
+import { useOptimistic } from "react"
+import { followUser, unfollowUser } from "@/app/actions/social"
+import { Button } from "@/components/ui/button"
+import { toast } from "sonner"
+import { UserPlus, UserMinus } from "lucide-react"

 interface FollowButtonProps {
-  username: string;
-  isInitiallyFollowing: boolean;
+  username: string
+  isInitiallyFollowing: boolean
 }

-export function FollowButton({
-  username,
-  isInitiallyFollowing,
-}: FollowButtonProps) {
-  const [isFollowing, setIsFollowing] = useState(isInitiallyFollowing);
-  const [isLoading, setIsLoading] = useState(false);
-  const { token } = useAuth();
-  const router = useRouter();
-
-  const handleClick = async () => {
-    if (!token) {
-      toast.error("You must be logged in to follow users.");
-      return;
-    }
-
-    setIsLoading(true);
-    const action = isFollowing ? unfollowUser : followUser;
+export function FollowButton({ username, isInitiallyFollowing }: FollowButtonProps) {
+  const [optimisticFollowing, setOptimisticFollowing] = useOptimistic(isInitiallyFollowing)

+  async function handleClick() {
+    const next = !optimisticFollowing
+    setOptimisticFollowing(next)
    try {
-      // Optimistic update
-      setIsFollowing(!isFollowing);
-      await action(username, token);
-      router.refresh(); // Re-fetch server component data to get the latest follower count etc.
+      await (next ? followUser(username) : unfollowUser(username))
    } catch {
-      // Revert on error
-      setIsFollowing(isFollowing);
-      toast.error(`Failed to ${isFollowing ? "unfollow" : "follow"} user.`);
-    } finally {
-      setIsLoading(false);
+      setOptimisticFollowing(!next) // revert
+      toast.error(`Failed to ${next ? "follow" : "unfollow"} user.`)
    }
-  };
+  }

  return (
    <Button
      onClick={handleClick}
-      disabled={isLoading}
-      variant={isFollowing ? "secondary" : "default"}
-      data-following={isFollowing}
+      variant={optimisticFollowing ? "secondary" : "default"}
+      data-following={optimisticFollowing}
    >
-      {isFollowing ? (
-        <>
-          <UserMinus className="mr-2 h-4 w-4" /> Unfollow
-        </>
+      {optimisticFollowing ? (
+        <><UserMinus className="mr-2 h-4 w-4" /> Unfollow</>
      ) : (
-        <>
-          <UserPlus className="mr-2 h-4 w-4" /> Follow
-        </>
+        <><UserPlus className="mr-2 h-4 w-4" /> Follow</>
      )}
    </Button>
-  );
+  )
 }
--- a/thoughts-frontend/components/loading-skeleton.tsx
+++ b/thoughts-frontend/components/loading-skeleton.tsx
@@ -0,0 +1,57 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function ThoughtSkeleton() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center gap-4">
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-4/5" />
+      </CardContent>
+    </Card>
+  )
+}
+
+export function ProfileSkeleton() {
+  return (
+    <Card>
+      <CardContent className="pt-6 flex items-center gap-4">
+        <Skeleton className="h-16 w-16 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function TagsSkeleton() {
+  return (
+    <Card>
+      <CardContent className="pt-4 space-y-2">
+        <Skeleton className="h-4 w-24 mb-3" />
+        {[...Array(5)].map((_, i) => (
+          <Skeleton key={i} className="h-6 w-full rounded-full" />
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function CountSkeleton() {
+  return (
+    <Card>
+      <CardContent className="pt-4 pb-4">
+        <Skeleton className="h-6 w-32" />
+      </CardContent>
+    </Card>
+  )
+}
--- a/thoughts-frontend/components/pagination-nav.tsx
+++ b/thoughts-frontend/components/pagination-nav.tsx
@@ -0,0 +1,76 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+interface Props {
+  page: number;
+  totalPages: number;
+  buildHref: (page: number) => string;
+}
+
+function pageNumbers(
+  page: number,
+  totalPages: number
+): (number | "ellipsis")[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "ellipsis")[] = [1];
+
+  if (page > 3) pages.push("ellipsis");
+
+  const start = Math.max(2, page - 1);
+  const end = Math.min(totalPages - 1, page + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+
+  if (page < totalPages - 2) pages.push("ellipsis");
+
+  pages.push(totalPages);
+
+  return pages;
+}
+
+export function PaginationNav({ page, totalPages, buildHref }: Props) {
+  if (totalPages <= 1) return null;
+
+  return (
+    <Pagination className="mt-8">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            href={page > 1 ? buildHref(page - 1) : "#"}
+            aria-disabled={page <= 1}
+          />
+        </PaginationItem>
+
+        {pageNumbers(page, totalPages).map((p, i) =>
+          p === "ellipsis" ? (
+            <PaginationItem key={`ellipsis-${i}`}>
+              <PaginationEllipsis />
+            </PaginationItem>
+          ) : (
+            <PaginationItem key={p}>
+              <PaginationLink href={buildHref(p)} isActive={p === page}>
+                {p}
+              </PaginationLink>
+            </PaginationItem>
+          )
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            href={page < totalPages ? buildHref(page + 1) : "#"}
+            aria-disabled={page >= totalPages}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
--- a/thoughts-frontend/components/post-thought-form.tsx
+++ b/thoughts-frontend/components/post-thought-form.tsx
@@ -1,125 +0,0 @@
-"use client";
-
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormControl,
-  FormMessage,
-} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { CreateThoughtSchema, createThought } from "@/lib/api";
-import { useAuth } from "@/hooks/use-auth";
-import { toast } from "sonner";
-import { Globe, Lock, Users } from "lucide-react";
-import { useState } from "react";
-import { Confetti } from "./confetti";
-
-export function PostThoughtForm() {
-  const router = useRouter();
-  const { token } = useAuth();
-  const [showConfetti, setShowConfetti] = useState(false);
-
-  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
-    resolver: zodResolver(CreateThoughtSchema),
-    defaultValues: { content: "", visibility: "Public" },
-  });
-
-  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
-    if (!token) {
-      toast.error("You must be logged in to post.");
-      return;
-    }
-
-    try {
-      await createThought(values, token);
-      toast.success("Your thought has been posted!");
-      setShowConfetti(true);
-      form.reset();
-      router.refresh(); // This is the key to updating the feed
-    } catch {
-      toast.error("Failed to post thought. Please try again.");
-    }
-  }
-
-  return (
-    <>
-      <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
-      <Card>
-        <CardContent className="p-4">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="content"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormControl>
-                      <Textarea
-                        placeholder="What's on your mind?"
-                        className="resize-none"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <div className="flex justify-between items-center">
-                <FormField
-                  control={form.control}
-                  name="visibility"
-                  render={({ field }) => (
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger className="w-[150px]">
-                          <SelectValue placeholder="Visibility" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="Public">
-                          <div className="flex items-center gap-2">
-                            <Globe className="h-4 w-4" /> Public
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="FriendsOnly">
-                          <div className="flex items-center gap-2">
-                            <Users className="h-4 w-4" /> Friends Only
-                          </div>
-                        </SelectItem>
-                        <SelectItem value="Private">
-                          <div className="flex items-center gap-2">
-                            <Lock className="h-4 w-4" /> Private
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-                <Button type="submit" disabled={form.formState.isSubmitting}>
-                  {form.formState.isSubmitting ? "Posting..." : "Post Thought"}
-                </Button>
-              </div>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </>
-  );
-}
--- a/thoughts-frontend/components/remote-user-card.tsx
+++ b/thoughts-frontend/components/remote-user-card.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { useAuth } from "@/hooks/use-auth";
+import Link from "next/link";
+import { followUser } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { UserAvatar } from "@/components/user-avatar";
+import { toast } from "sonner";
+import { UserPlus } from "lucide-react";
+
+interface RemoteUserCardProps {
+  actor: {
+    handle: string;
+    displayName: string | null;
+    avatarUrl: string | null;
+    url: string;
+  };
+}
+
+export function RemoteUserCard({ actor }: RemoteUserCardProps) {
+  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 {
+      await followUser(actor.handle, token);
+      setFollowed(true);
+      toast.success(`Follow request sent to ${actor.handle}`);
+    } catch {
+      toast.error("Failed to send follow request.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between p-4 border rounded-lg">
+      <Link
+        href={`/users/@${actor.handle}`}
+        className="flex items-center gap-3 hover:opacity-80"
+      >
+        <UserAvatar src={actor.avatarUrl} alt={actor.displayName ?? actor.handle} />
+        <div className="min-w-0">
+          <p className="font-medium truncate">{actor.displayName ?? actor.handle}</p>
+          <p className="text-sm text-muted-foreground truncate">{actor.handle}</p>
+        </div>
+      </Link>
+      <Button
+        onClick={handleFollow}
+        disabled={loading || followed}
+        variant={followed ? "secondary" : "default"}
+        size="sm"
+      >
+        <UserPlus className="mr-2 h-4 w-4" />
+        {followed ? "Requested" : "Follow"}
+      </Button>
+    </div>
+  );
+}
--- a/thoughts-frontend/components/remote-user-profile/connections.tsx
+++ b/thoughts-frontend/components/remote-user-profile/connections.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { ActorConnection, getActorFollowers, getActorFollowing } from "@/lib/api";
+import { Card } from "@/components/ui/card";
+import { RemoteUserCard } from "@/components/remote-user-card";
+
+interface ConnectionsProps {
+  handle: string;
+  token: string | null;
+  type: "followers" | "following";
+  /** Parent sets this to true when the tab becomes active for the first time. */
+  active: boolean;
+}
+
+export function Connections({ handle, token, type, active }: ConnectionsProps) {
+  const [items, setItems] = useState<ActorConnection[]>([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  const load = async (p: number) => {
+    const fetchFn = type === "followers" ? getActorFollowers : getActorFollowing;
+    const result = await fetchFn(handle, p, token).catch(() => null);
+    if (!result) return;
+    setItems((prev) => (p === 1 ? result.items : [...prev, ...result.items]));
+    setHasMore(result.hasMore);
+    setLoaded(true);
+    setPage(p);
+  };
+
+  useEffect(() => {
+    if (active && !loaded) {
+      load(1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active]);
+
+  const emptyMessage =
+    type === "followers"
+      ? "No followers cached yet — check back soon."
+      : "No following cached yet — check back soon.";
+
+  if (!loaded) {
+    return (
+      <Card className="flex items-center justify-center h-48">
+        <p className="text-center text-muted-foreground">Loading {type}…</p>
+      </Card>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <Card className="flex items-center justify-center h-48">
+        <p className="text-center text-muted-foreground">{emptyMessage}</p>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((f) => (
+        <RemoteUserCard key={f.url} actor={f} />
+      ))}
+      {hasMore && (
+        <button
+          onClick={() => load(page + 1)}
+          className="w-full text-sm text-muted-foreground hover:text-foreground py-2"
+        >
+          Load more
+        </button>
+      )}
+    </div>
+  );
+}
--- a/thoughts-frontend/components/remote-user-profile/index.tsx
+++ b/thoughts-frontend/components/remote-user-profile/index.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { useState } from "react";
+import { UserMinus, UserPlus } from "lucide-react";
+import { followUser, unfollowUser, RemoteActor, Thought, Me } from "@/lib/api";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ThoughtList } from "@/components/thought-list";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/use-auth";
+import { ProfileCard } from "./profile-card";
+import { Connections } from "./connections";
+
+interface RemoteUserProfileProps {
+  actor: RemoteActor;
+  initialPosts: Thought[];
+  me: Me | null;
+  initialFollowed?: boolean;
+}
+
+export function RemoteUserProfile({
+  actor,
+  initialPosts,
+  me,
+  initialFollowed = false,
+}: RemoteUserProfileProps) {
+  const [followed, setFollowed] = useState(initialFollowed);
+  const [followLoading, setFollowLoading] = useState(false);
+  const { token } = useAuth();
+
+  const [followersActive, setFollowersActive] = useState(false);
+  const [followingActive, setFollowingActive] = useState(false);
+
+  const handleFollow = async () => {
+    if (!token) {
+      toast.error("You must be logged in to follow users.");
+      return;
+    }
+    setFollowLoading(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 {
+      setFollowLoading(false);
+    }
+  };
+
+  const handleTabChange = (tab: string) => {
+    if (tab === "followers") setFollowersActive(true);
+    if (tab === "following") setFollowingActive(true);
+  };
+
+  const isOwnProfile = me?.username === actor.handle;
+
+  const followButton =
+    !isOwnProfile && token ? (
+      <Button
+        onClick={handleFollow}
+        disabled={followLoading}
+        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>
+    ) : undefined;
+
+  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">
+              <ProfileCard actor={actor} action={followButton} />
+            </Card>
+          </div>
+        </aside>
+
+        <div className="col-span-1 lg:col-span-3">
+          <Tabs defaultValue="posts" onValueChange={handleTabChange}>
+            <TabsList>
+              <TabsTrigger value="posts">Posts</TabsTrigger>
+              <TabsTrigger value="followers">Followers</TabsTrigger>
+              <TabsTrigger value="following">Following</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="posts" className="space-y-4 mt-4">
+              {initialPosts.length > 0 ? (
+                <ThoughtList thoughts={initialPosts} 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>
+              )}
+            </TabsContent>
+
+            <TabsContent value="followers" className="mt-4">
+              <Connections
+                handle={actor.handle}
+                token={token}
+                type="followers"
+                active={followersActive}
+              />
+            </TabsContent>
+
+            <TabsContent value="following" className="mt-4">
+              <Connections
+                handle={actor.handle}
+                token={token}
+                type="following"
+                active={followingActive}
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/thoughts-frontend/components/remote-user-profile/profile-card.tsx
+++ b/thoughts-frontend/components/remote-user-profile/profile-card.tsx
@@ -0,0 +1,98 @@
+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+import { ReactNode } from "react";
+import { RemoteActor } from "@/lib/api";
+import { UserAvatar } from "@/components/user-avatar";
+import { Button } from "@/components/ui/button";
+
+interface ProfileCardProps {
+  actor: RemoteActor;
+  /** Slot rendered next to the avatar (e.g. follow/unfollow button). */
+  action?: ReactNode;
+}
+
+export function ProfileCard({ actor, action }: ProfileCardProps) {
+  let hostname: string | null = null;
+  try {
+    if (actor.url) hostname = new URL(actor.url).hostname;
+  } catch {
+    hostname = actor.url;
+  }
+
+  return (
+    <>
+      <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>
+        {action}
+      </div>
+
+      <div className="mt-4 min-w-0">
+        <h1 className="text-2xl font-bold truncate">
+          {actor.displayName ?? actor.handle}
+        </h1>
+        <p className="text-sm text-muted-foreground truncate">{actor.handle}</p>
+      </div>
+
+      {actor.bio && (
+        <div
+          className="mt-4 text-sm [&_a]:underline [&_a]:text-primary [&_p]:mb-2"
+          dangerouslySetInnerHTML={{ __html: actor.bio }}
+        />
+      )}
+
+      <Button asChild variant="outline" size="sm" className="mt-4 w-full">
+        <Link
+          href={actor.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center overflow-hidden"
+        >
+          <ExternalLink className="mr-2 h-4 w-4 shrink-0" />
+          <span className="truncate">{hostname}</span>
+        </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 && (
+        <div className="mt-4 space-y-0 text-sm">
+          {actor.attachment.map((field) => (
+            <div
+              key={field.name}
+              className="grid grid-cols-[minmax(0,5rem)_1fr] gap-2 border-t py-1"
+            >
+              <span
+                className="font-medium text-muted-foreground truncate"
+                title={field.name}
+              >
+                {field.name}
+              </span>
+              <span
+                className="break-all min-w-0 [&_a]:underline [&_a]:text-primary"
+                dangerouslySetInnerHTML={{ __html: field.value }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
--- a/thoughts-frontend/components/reply-form.tsx
+++ b/thoughts-frontend/components/reply-form.tsx
@@ -1,97 +0,0 @@
-"use client";
-
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { useRouter } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormControl,
-  FormMessage,
-} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
-import { CreateThoughtSchema, createThought } from "@/lib/api";
-import { useAuth } from "@/hooks/use-auth";
-import { toast } from "sonner";
-import { useState } from "react";
-import { Confetti } from "./confetti";
-
-interface ReplyFormProps {
-  parentThoughtId: string;
-  onReplySuccess: () => void; // A callback to close the form after success
-}
-
-export function ReplyForm({ parentThoughtId, onReplySuccess }: ReplyFormProps) {
-  const router = useRouter();
-  const { token } = useAuth();
-  const [showConfetti, setShowConfetti] = useState(false);
-
-  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
-    resolver: zodResolver(CreateThoughtSchema),
-    defaultValues: {
-      content: "",
-      replyToId: parentThoughtId,
-      visibility: "Public", // Replies default to Public
-    },
-  });
-
-  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
-    if (!token) {
-      toast.error("You must be logged in to reply.");
-      return;
-    }
-
-    try {
-      await createThought(values, token);
-      toast.success("Your reply has been posted!");
-      form.reset();
-      setShowConfetti(true);
-      console.log("Showing confetti");
-      onReplySuccess();
-      router.refresh();
-    } catch {
-      toast.error("Failed to post reply. Please try again.");
-    }
-  }
-
-  return (
-    <>
-      <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 p-4">
-          <FormField
-            control={form.control}
-            name="content"
-            render={({ field }) => (
-              <FormItem>
-                <FormControl>
-                  <Textarea
-                    placeholder="Post your reply..."
-                    className="resize-none bg-white glass-effect glossy-efect bottom shadow-fa-sm"
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className="flex justify-end gap-2">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={onReplySuccess} // Close button
-            >
-              Cancel
-            </Button>
-            <Button type="submit" disabled={form.formState.isSubmitting}>
-              {form.formState.isSubmitting ? "Replying..." : "Reply"}
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </>
-  );
-}
--- a/thoughts-frontend/components/thought-card.tsx
+++ b/thoughts-frontend/components/thought-card.tsx
@@ -7,11 +7,11 @@ import {
  CardHeader,
 } from "@/components/ui/card";
 import { UserAvatar } from "./user-avatar";
-import { deleteThought, Me, Thought } from "@/lib/api";
-import { formatDistanceToNow } from "date-fns";
+import { Me, Thought } from "@/lib/api";
+import { deleteThought } from "@/app/actions/thoughts";
+import { format, formatDistanceToNow } from "date-fns";
 import { useAuth } from "@/hooks/use-auth";
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import {
  DropdownMenu,
@@ -36,43 +36,35 @@ import {
  MoreHorizontal,
  Trash2,
 } from "lucide-react";
-import { ReplyForm } from "@/components/reply-form";
+import { ThoughtForm } from "@/components/thought-form";
 import Link from "next/link";
 import { cn } from "@/lib/utils";

 interface ThoughtCardProps {
  thought: Thought;
-  author: {
-    username: string;
-    displayName?: string | null;
-    avatarUrl?: string | null;
-  };
  currentUser: Me | null;
  isReply?: boolean;
 }

 export function ThoughtCard({
  thought,
-  author,
  currentUser,
  isReply = false,
 }: ThoughtCardProps) {
+  const { author } = thought;
  const [isAlertOpen, setIsAlertOpen] = useState(false);
  const [isReplyOpen, setIsReplyOpen] = useState(false);
  const { token } = useAuth();
-  const router = useRouter();
  const timeAgo = formatDistanceToNow(new Date(thought.createdAt), {
    addSuffix: true,
  });

-  const isAuthor = currentUser?.username === thought.authorUsername;
+  const isAuthor = currentUser?.username === thought.author.username;

  const handleDelete = async () => {
-    if (!token) return;
    try {
-      await deleteThought(thought.id, token);
+      await deleteThought(thought.id);
      toast.success("Thought deleted successfully.");
-      router.refresh();
    } catch (error) {
      console.error("Failed to delete thought:", error);
      toast.error("Failed to delete thought.");
@@ -106,6 +98,22 @@ export function ThoughtCard({
            </span>
          </div>
        )}
+        {!thought.replyToId && thought.replyToUrl && (
+          <div className="text-sm text-muted-foreground flex items-center gap-2">
+            <CornerUpLeft className="h-4 w-4 text-primary/70" />
+            <span>
+              Replying to{" "}
+              <a
+                href={thought.replyToUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:underline text-primary text-shadow-sm"
+              >
+                original post ↗
+              </a>
+            </span>
+          </div>
+        )}
      </div>
      <Card className="mt-2">
        <CardHeader className="flex flex-row items-center justify-between space-y-0">
@@ -121,9 +129,13 @@ export function ThoughtCard({
              <span className="font-bold">
                {author.displayName || author.username}
              </span>
-              <span className="text-sm text-muted-foreground text-shadow-sm">
+              <time
+                dateTime={new Date(thought.createdAt).toISOString()}
+                title={format(new Date(thought.createdAt), "PPP p")}
+                className="text-sm text-muted-foreground text-shadow-sm"
+              >
                {timeAgo}
-              </span>
+              </time>
            </div>
          </Link>
          <DropdownMenu>
@@ -152,9 +164,20 @@ export function ThoughtCard({
          </DropdownMenu>
        </CardHeader>
        <CardContent>
-          <p className="whitespace-pre-wrap break-words text-shadow-sm">
-            {thought.content}
-          </p>
+          {thought.author.local ? (
+            <p className="whitespace-pre-wrap break-words text-shadow-sm">
+              {thought.content}
+            </p>
+          ) : (
+            <div
+              className="text-sm break-words [&_a]:underline [&_a]:text-primary [&_p]:mb-2 [&_.media-notice]:text-muted-foreground [&_.media-notice]:italic"
+              dangerouslySetInnerHTML={{
+                __html:
+                  thought.content.trim() ||
+                  '<p class="media-notice">📎 Media attachment — not supported</p>',
+              }}
+            />
+          )}
        </CardContent>

        {token && (
@@ -172,9 +195,9 @@ export function ThoughtCard({

        {isReplyOpen && (
          <div className="border-t m-4 rounded-2xl border-border/50 bg-secondary/20 ">
-            <ReplyForm
-              parentThoughtId={thought.id}
-              onReplySuccess={() => setIsReplyOpen(false)}
+            <ThoughtForm
+              replyToId={thought.id}
+              onSuccess={() => setIsReplyOpen(false)}
            />
          </div>
        )}
--- a/thoughts-frontend/components/thought-form.tsx
+++ b/thoughts-frontend/components/thought-form.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+} from "@/components/ui/form"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { CreateThoughtSchema } from "@/lib/api"
+import { useAuth } from "@/hooks/use-auth"
+import { toast } from "sonner"
+import { Globe, Lock, Users } from "lucide-react"
+import { useState } from "react"
+import { Confetti } from "./confetti"
+import { createThought } from "@/app/actions/thoughts"
+
+interface ThoughtFormProps {
+  /** Set to the parent thought ID when composing a reply. */
+  replyToId?: string
+  /** Called after successful submit (e.g. close the reply panel). */
+  onSuccess?: () => void
+  /** Whether to wrap in a Card. Defaults to true when no replyToId. */
+  card?: boolean
+}
+
+export function ThoughtForm({ replyToId, onSuccess, card = !replyToId }: ThoughtFormProps) {
+  const { token } = useAuth()
+  const [showConfetti, setShowConfetti] = useState(false)
+
+  const form = useForm<z.infer<typeof CreateThoughtSchema>>({
+    resolver: zodResolver(CreateThoughtSchema),
+    defaultValues: {
+      content: "",
+      visibility: "public",
+      ...(replyToId ? { inReplyToId: replyToId } : {}),
+    },
+  })
+
+  async function onSubmit(values: z.infer<typeof CreateThoughtSchema>) {
+    if (!token) {
+      toast.error("You must be logged in.")
+      return
+    }
+    try {
+      await createThought(values)
+      toast.success(replyToId ? "Reply posted!" : "Thought posted!")
+      setShowConfetti(true)
+      form.reset()
+      onSuccess?.()
+    } catch {
+      toast.error(replyToId ? "Failed to post reply." : "Failed to post thought.")
+    }
+  }
+
+  const inner = (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="content"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Textarea
+                  placeholder={replyToId ? "Post your reply..." : "What's on your mind?"}
+                  className={`resize-none ${replyToId ? "bg-white shadow-fa-sm" : ""}`}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className={`flex ${replyToId ? "justify-end gap-2" : "justify-between items-center"}`}>
+          {!replyToId && (
+            <FormField
+              control={form.control}
+              name="visibility"
+              render={({ field }) => (
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger className="w-[150px]">
+                      <SelectValue placeholder="Visibility" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="public">
+                      <div className="flex items-center gap-2"><Globe className="h-4 w-4" /> Public</div>
+                    </SelectItem>
+                    <SelectItem value="followers">
+                      <div className="flex items-center gap-2"><Users className="h-4 w-4" /> Followers</div>
+                    </SelectItem>
+                    <SelectItem value="unlisted">
+                      <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Unlisted</div>
+                    </SelectItem>
+                    <SelectItem value="direct">
+                      <div className="flex items-center gap-2"><Lock className="h-4 w-4" /> Direct</div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              )}
+            />
+          )}
+          {replyToId && (
+            <Button type="button" variant="ghost" onClick={() => onSuccess?.()}>
+              Cancel
+            </Button>
+          )}
+          <Button type="submit" disabled={form.formState.isSubmitting}>
+            {form.formState.isSubmitting
+              ? (replyToId ? "Replying..." : "Posting...")
+              : (replyToId ? "Reply" : "Post Thought")}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+
+  return (
+    <>
+      <Confetti fire={showConfetti} onComplete={() => setShowConfetti(false)} />
+      {card
+        ? <Card><CardContent className="p-4">{inner}</CardContent></Card>
+        : <div className="space-y-2 p-4">{inner}</div>
+      }
+    </>
+  )
+}
--- a/thoughts-frontend/components/thought-list.tsx
+++ b/thoughts-frontend/components/thought-list.tsx
@@ -4,15 +4,10 @@ import { Card, CardContent } from "./ui/card";

 interface ThoughtListProps {
  thoughts: Thought[];
-  authorDetails: Map<string, { avatarUrl?: string | null }>;
  currentUser: Me | null;
 }

-export function ThoughtList({
-  thoughts,
-  authorDetails,
-  currentUser,
-}: ThoughtListProps) {
+export function ThoughtList({ thoughts, currentUser }: ThoughtListProps) {
  if (thoughts.length === 0) {
    return (
      <p className="text-center text-muted-foreground pt-8">
@@ -25,21 +20,13 @@ export function ThoughtList({
    <Card>
      <CardContent className="divide-y p-0">
        <div className="space-y-6 p-4">
-          {thoughts.map((thought) => {
-            const author = {
-              username: thought.authorUsername,
-              displayName: thought.authorDisplayName,
-              ...authorDetails.get(thought.authorUsername),
-            };
-            return (
-              <ThoughtCard
-                key={thought.id}
-                thought={thought}
-                author={author}
-                currentUser={currentUser}
-              />
-            );
-          })}
+          {thoughts.map((thought) => (
+            <ThoughtCard
+              key={thought.id}
+              thought={thought}
+              currentUser={currentUser}
+            />
+          ))}
        </div>
      </CardContent>
    </Card>
--- a/thoughts-frontend/components/thought-thread.tsx
+++ b/thoughts-frontend/components/thought-thread.tsx
@@ -3,28 +3,19 @@ import { ThoughtCard } from "./thought-card";

 interface ThoughtThreadProps {
  thought: ThoughtThreadType;
-  authorDetails: Map<string, { avatarUrl?: string | null }>;
  currentUser: Me | null;
  isReply?: boolean;
 }

 export function ThoughtThread({
  thought,
-  authorDetails,
  currentUser,
  isReply = false,
 }: ThoughtThreadProps) {
-  const author = {
-    username: thought.authorUsername,
-    displayName: thought.authorDisplayName,
-    ...authorDetails.get(thought.authorUsername),
-  };
-
  return (
    <div id={`thought-thread-${thought.id}`} className="flex flex-col gap-0">
      <ThoughtCard
        thought={thought}
-        author={author}
        currentUser={currentUser}
        isReply={isReply}
      />
@@ -38,7 +29,6 @@ export function ThoughtThread({
            <ThoughtThread
              key={reply.id}
              thought={reply}
-              authorDetails={authorDetails}
              currentUser={currentUser}
              isReply={true}
            />
--- a/thoughts-frontend/components/top-friends.tsx
+++ b/thoughts-frontend/components/top-friends.tsx
@@ -1,51 +1,25 @@
 import Link from "next/link";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { UserAvatar } from "./user-avatar";
-import { getUserProfile, User } from "@/lib/api";
+import { getTopFriends } from "@/lib/api";
 import { cookies } from "next/headers";

 interface TopFriendsProps {
-  mode: "friends" | "top-friends";
-  usernames: string[];
+  username: string;
 }

-export async function TopFriends({
-  mode = "top-friends",
-  usernames,
-}: TopFriendsProps) {
+export async function TopFriends({ username }: TopFriendsProps) {
  const token = (await cookies()).get("auth_token")?.value ?? null;
+  const data = await getTopFriends(username, token).catch(() => ({ topFriends: [] }));
+  const friends = data.topFriends;

-  if (usernames.length === 0) {
-    return (
-      <Card className="p-4">
-        <CardHeader className="p-0 pb-2">
-          <CardTitle className="text-lg text-shadow-md">Top Friends</CardTitle>
-        </CardHeader>
-        <CardContent className="p-0">
-          <p className="text-sm text-muted-foreground">
-            No top friends to display.
-          </p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  const friendsResults = await Promise.allSettled(
-    usernames.map((username) => getUserProfile(username, token))
-  );
-
-  const friends = friendsResults
-    .filter(
-      (result): result is PromiseFulfilledResult<User> =>
-        result.status === "fulfilled"
-    )
-    .map((result) => result.value);
+  if (friends.length === 0) return null;

  return (
    <Card id="top-friends" className="p-4">
      <CardHeader id="top-friends__header" className="p-0 pb-2">
        <CardTitle id="top-friends__title" className="text-lg text-shadow-md">
-          {mode === "top-friends" ? "Top Friends" : "Friends"}
+          Top Friends
        </CardTitle>
      </CardHeader>
      <CardContent id="top-friends__content" className="p-0">
@@ -59,7 +33,7 @@ export async function TopFriends({
            <UserAvatar src={friend.avatarUrl} alt={friend.username} />
            <span
              id={`top-friends__name-${friend.id}`}
-              className="text-xs truncate w-full group-hover:underline font-medium text-shadow-sm"
+              className="text-xs truncate w-full font-medium text-shadow-sm"
            >
              {friend.displayName || friend.username}
            </span>