feat: add /friends page and /settings/friends top-friends management

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

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

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

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