From 43e36c743b48cea46d93f7a85171f5a4e01daca2 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 28 May 2026 04:22:26 +0200
Subject: [PATCH] feat: add /friends page and /settings/friends top-friends
 management

---
 thoughts-frontend/app/friends/page.tsx        |  43 +++++
 .../app/settings/friends/page.tsx             |  34 ++++
 thoughts-frontend/components/friends-list.tsx |  47 +++++
 .../components/remote-friend-card.tsx         |  33 ++++
 .../components/top-friends-editor.tsx         | 161 ++++++++++++++++++
 .../components/top-friends-strip.tsx          |  39 +++++
 thoughts-frontend/lib/api.ts                  |  31 ++++
 7 files changed, 388 insertions(+)
 create mode 100644 thoughts-frontend/app/friends/page.tsx
 create mode 100644 thoughts-frontend/app/settings/friends/page.tsx
 create mode 100644 thoughts-frontend/components/friends-list.tsx
 create mode 100644 thoughts-frontend/components/remote-friend-card.tsx
 create mode 100644 thoughts-frontend/components/top-friends-editor.tsx
 create mode 100644 thoughts-frontend/components/top-friends-strip.tsx

diff --git a/thoughts-frontend/app/friends/page.tsx b/thoughts-frontend/app/friends/page.tsx
new file mode 100644
index 0000000..0be5f52
--- /dev/null
+++ b/thoughts-frontend/app/friends/page.tsx
@@ -0,0 +1,43 @@
+// app/friends/page.tsx
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getMe, getMyFriends, getMyRemoteFriends, getTopFriends } from "@/lib/api";
+import { FriendsList } from "@/components/friends-list";
+import { TopFriendsStrip } from "@/components/top-friends-strip";
+
+export default async function FriendsPage() {
+  const token = (await cookies()).get("auth_token")?.value;
+  if (!token) redirect("/login");
+
+  const me = await getMe(token).catch(() => null);
+  if (!me) redirect("/login");
+
+  const [localFriendsData, remoteFriends, topFriendsData] = await Promise.all([
+    getMyFriends(token).catch(() => ({
+      items: [],
+      total: 0,
+      page: 1,
+      perPage: 50,
+    })),
+    getMyRemoteFriends(token).catch(() => []),
+    getTopFriends(me.username, token).catch(() => ({ topFriends: [] })),
+  ]);
+
+  return (
+    <div className="container mx-auto max-w-2xl p-4 sm:p-6">
+      <header className="my-6">
+        <h1 className="text-3xl font-bold">Friends</h1>
+        <p className="text-muted-foreground">
+          People who follow you and who you follow back.
+        </p>
+      </header>
+      <main className="space-y-6">
+        <TopFriendsStrip topFriends={topFriendsData.topFriends} />
+        <FriendsList
+          localFriends={localFriendsData.items}
+          remoteFriends={remoteFriends}
+        />
+      </main>
+    </div>
+  );
+}
diff --git a/thoughts-frontend/app/settings/friends/page.tsx b/thoughts-frontend/app/settings/friends/page.tsx
new file mode 100644
index 0000000..4f0a6a8
--- /dev/null
+++ b/thoughts-frontend/app/settings/friends/page.tsx
@@ -0,0 +1,34 @@
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getMe, getMyFriends, getTopFriends } from "@/lib/api";
+import { TopFriendsEditor } from "@/components/top-friends-editor";
+
+export default async function FriendsSettingsPage() {
+  const token = (await cookies()).get("auth_token")?.value;
+  if (!token) redirect("/login");
+
+  const me = await getMe(token).catch(() => null);
+  if (!me) redirect("/login");
+
+  const [localFriendsData, topFriendsData] = await Promise.all([
+    getMyFriends(token).catch(() => ({ items: [], total: 0, page: 1, perPage: 50 })),
+    getTopFriends(me.username, token).catch(() => ({ topFriends: [] })),
+  ]);
+
+  return (
+    <div className="space-y-6">
+      <div className="glass-effect glossy-effect bottom rounded-md shadow-fa-lg p-4">
+        <h3 className="text-lg font-medium">Top Friends</h3>
+        <p className="text-sm text-muted-foreground">
+          Choose up to 8 friends to feature on your profile. Only local friends
+          can be top friends.
+        </p>
+      </div>
+      <TopFriendsEditor
+        token={token}
+        initialTopFriends={topFriendsData.topFriends}
+        localFriends={localFriendsData.items}
+      />
+    </div>
+  );
+}
diff --git a/thoughts-frontend/components/friends-list.tsx b/thoughts-frontend/components/friends-list.tsx
new file mode 100644
index 0000000..6285c7c
--- /dev/null
+++ b/thoughts-frontend/components/friends-list.tsx
@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { User, RemoteActor } from "@/lib/api";
+import { UserAvatar } from "./user-avatar";
+import { RemoteFriendCard } from "./remote-friend-card";
+import { Card, CardContent } from "./ui/card";
+
+interface FriendsListProps {
+  localFriends: User[];
+  remoteFriends: RemoteActor[];
+}
+
+export function FriendsList({ localFriends, remoteFriends }: FriendsListProps) {
+  if (localFriends.length === 0 && remoteFriends.length === 0) {
+    return (
+      <p className="text-center text-muted-foreground pt-8">
+        No friends yet. Follow someone and wait for them to follow back!
+      </p>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="divide-y px-6">
+        {localFriends.map((user) => (
+          <Link
+            key={user.id}
+            href={`/users/${user.username}`}
+            className="flex items-center gap-4 p-4 -mx-6 hover:bg-accent transition-colors"
+          >
+            <UserAvatar src={user.avatarUrl} alt={user.displayName} />
+            <div className="flex-1 min-w-0">
+              <p className="font-bold truncate">
+                {user.displayName || user.username}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                @{user.username}
+              </p>
+            </div>
+          </Link>
+        ))}
+        {remoteFriends.map((actor) => (
+          <RemoteFriendCard key={actor.url} actor={actor} />
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/thoughts-frontend/components/remote-friend-card.tsx b/thoughts-frontend/components/remote-friend-card.tsx
new file mode 100644
index 0000000..7ba1a93
--- /dev/null
+++ b/thoughts-frontend/components/remote-friend-card.tsx
@@ -0,0 +1,33 @@
+import { RemoteActor } from "@/lib/api";
+import { UserAvatar } from "./user-avatar";
+
+interface RemoteFriendCardProps {
+  actor: RemoteActor;
+}
+
+export function RemoteFriendCard({ actor }: RemoteFriendCardProps) {
+  return (
+    <a
+      href={actor.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-4 p-4 -mx-6 hover:bg-accent transition-colors"
+    >
+      <UserAvatar
+        src={actor.avatarUrl}
+        alt={actor.displayName ?? actor.handle}
+      />
+      <div className="flex-1 min-w-0">
+        <p className="font-bold truncate">
+          {actor.displayName || actor.handle}
+        </p>
+        <p className="text-sm text-muted-foreground truncate">
+          @{actor.handle}
+        </p>
+      </div>
+      <span className="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-500 shrink-0">
+        federated
+      </span>
+    </a>
+  );
+}
diff --git a/thoughts-frontend/components/top-friends-editor.tsx b/thoughts-frontend/components/top-friends-editor.tsx
new file mode 100644
index 0000000..b52844c
--- /dev/null
+++ b/thoughts-frontend/components/top-friends-editor.tsx
@@ -0,0 +1,161 @@
+// components/top-friends-editor.tsx
+"use client";
+
+import { useState } from "react";
+import { User, setTopFriends } from "@/lib/api";
+import { UserAvatar } from "./user-avatar";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Card, CardContent } from "./ui/card";
+
+interface TopFriendsEditorProps {
+  token: string;
+  initialTopFriends: User[];
+  localFriends: User[];
+}
+
+export function TopFriendsEditor({
+  token,
+  initialTopFriends,
+  localFriends,
+}: TopFriendsEditorProps) {
+  const [topFriends, setTopFriendsState] = useState<User[]>(initialTopFriends);
+  const [search, setSearch] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  const topIds = new Set(topFriends.map((f) => f.id));
+  const suggestions = localFriends.filter(
+    (f) =>
+      !topIds.has(f.id) &&
+      (f.username.toLowerCase().includes(search.toLowerCase()) ||
+        (f.displayName ?? "").toLowerCase().includes(search.toLowerCase()))
+  );
+
+  function remove(id: string) {
+    setTopFriendsState((prev) => prev.filter((f) => f.id !== id));
+    setSaved(false);
+  }
+
+  function add(user: User) {
+    if (topFriends.length >= 8) return;
+    setTopFriendsState((prev) => [...prev, user]);
+    setSearch("");
+    setSaved(false);
+  }
+
+  async function save() {
+    setSaving(true);
+    setError(null);
+    setSaved(false);
+    try {
+      await setTopFriends(token, topFriends.map((f) => f.id));
+      setSaved(true);
+    } catch {
+      setError("Failed to save. Please try again.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardContent className="p-4 space-y-2">
+          {topFriends.length === 0 && (
+            <p className="text-sm text-muted-foreground text-center py-4">
+              No top friends yet. Add up to 8 from the search below.
+            </p>
+          )}
+          {topFriends.map((friend, i) => (
+            <div
+              key={friend.id}
+              className="flex items-center gap-3 p-2 rounded-lg bg-accent/30"
+            >
+              <span className="text-xs text-muted-foreground w-4 text-center">
+                {i + 1}
+              </span>
+              <UserAvatar
+                src={friend.avatarUrl}
+                alt={friend.displayName ?? friend.username}
+                className="h-8 w-8"
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">
+                  {friend.displayName || friend.username}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  @{friend.username}
+                </p>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => remove(friend.id)}
+                className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
+              >
+                ×
+              </Button>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      {topFriends.length < 8 && (
+        <div className="space-y-2">
+          <Input
+            placeholder="Search local friends to add…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          {search.length > 0 && (
+            <Card>
+              <CardContent className="p-2 space-y-1">
+                {suggestions.length === 0 ? (
+                  <p className="text-sm text-muted-foreground px-2 py-1">
+                    No matches.
+                  </p>
+                ) : (
+                  suggestions.slice(0, 5).map((user) => (
+                    <button
+                      key={user.id}
+                      onClick={() => add(user)}
+                      className="flex items-center gap-3 w-full p-2 rounded-lg hover:bg-accent text-left"
+                    >
+                      <UserAvatar
+                        src={user.avatarUrl}
+                        alt={user.displayName ?? user.username}
+                        className="h-7 w-7"
+                      />
+                      <div>
+                        <p className="text-sm font-medium">
+                          {user.displayName || user.username}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          @{user.username}
+                        </p>
+                      </div>
+                    </button>
+                  ))
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center gap-3">
+        <Button onClick={save} disabled={saving}>
+          {saving ? "Saving…" : "Save"}
+        </Button>
+        {saved && (
+          <p className="text-sm text-emerald-500">Saved!</p>
+        )}
+        {error && (
+          <p className="text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/thoughts-frontend/components/top-friends-strip.tsx b/thoughts-frontend/components/top-friends-strip.tsx
new file mode 100644
index 0000000..227ad12
--- /dev/null
+++ b/thoughts-frontend/components/top-friends-strip.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { User } from "@/lib/api";
+import { UserAvatar } from "./user-avatar";
+
+interface TopFriendsStripProps {
+  topFriends: User[];
+}
+
+export function TopFriendsStrip({ topFriends }: TopFriendsStripProps) {
+  return (
+    <div className="flex items-center gap-3 p-4 rounded-lg bg-accent/30">
+      <div className="flex-1 flex items-center gap-2 flex-wrap">
+        {topFriends.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No top friends yet.</p>
+        ) : (
+          topFriends.map((f) => (
+            <Link
+              key={f.id}
+              href={`/users/${f.username}`}
+              title={f.displayName ?? f.username}
+            >
+              <UserAvatar
+                src={f.avatarUrl}
+                alt={f.displayName ?? f.username}
+                className="h-8 w-8"
+              />
+            </Link>
+          ))
+        )}
+      </div>
+      <Link
+        href="/settings/friends"
+        className="text-sm text-muted-foreground hover:underline shrink-0"
+      >
+        Edit →
+      </Link>
+    </div>
+  );
+}
diff --git a/thoughts-frontend/lib/api.ts b/thoughts-frontend/lib/api.ts
index c94b390..322825b 100644
--- a/thoughts-frontend/lib/api.ts
+++ b/thoughts-frontend/lib/api.ts
@@ -480,6 +480,37 @@ export const getRemoteFollowing = (token: string) =>
     token
   );
 
+// ── Friends ───────────────────────────────────────────────────────────────
+
+export const getMyFriends = (token: string, page = 1, perPage = 50) =>
+  apiFetch(
+    `/users/me/friends?page=${page}&per_page=${perPage}`,
+    { cache: "no-store" },
+    z.object({
+      items: z.array(UserSchema),
+      total: z.number(),
+      page: z.number(),
+      perPage: z.number(),
+    }),
+    token
+  );
+
+export const getMyRemoteFriends = (token: string) =>
+  apiFetch(
+    "/federation/me/friends",
+    { cache: "no-store" },
+    z.array(RemoteActorSchema),
+    token
+  );
+
+export const setTopFriends = (token: string, friendIds: string[]) =>
+  apiFetch(
+    "/users/me/top-friends",
+    { method: "PUT", body: JSON.stringify({ friendIds }) },
+    z.null(),
+    token
+  );
+
 export const unfollowRemoteActor = (handle: string, token: string) =>
   apiFetch(
     "/federation/me/following",