Friends tab shows who you follow and who follows you

The app's Friends tab was only a search box. It now lists Following and
Followers (with Follow / Remove buttons) until you type a search. The
website gets the same Friends page and tab; search moves there from the
top of the feed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/app/friends/page.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { FollowList } from '@/components/FollowList';
+import { UserSearch } from '@/components/UserSearch';
+import { useMe } from '@/lib/api';
+
+/** Friends: who you follow and who follows you, plus search to find new people. */
+export default function FriendsPage() {
+  const { me, loggedOut } = useMe();
+  const [tab, setTab] = useState<'following' | 'followers'>('following');
+  if (loggedOut) return <p className="muted"><Link href="/login">Log in</Link> to see your friends.</p>;
+  if (!me) return null;
+  return (
+    <div className="stack">
+      <h1>Friends</h1>
+      <UserSearch />
+      <div className="row">
+        {(['following', 'followers'] as const).map((t) => (
+          <button key={t} className={`btn btn-small ${tab === t ? 'btn-primary' : ''}`} aria-pressed={tab === t} onClick={() => setTab(t)}>
+            {t === 'following' ? 'Following' : 'Followers'}
+          </button>
+        ))}
+      </div>
+      <FollowList key={tab} username={me.username} direction={tab} />
+    </div>
+  );
+}

apps/web/src/app/page.tsx

@@ -8,7 +8,6 @@ import { Avatar } from '@/components/Avatar';
 import { Equalizer } from '@/components/Equalizer';
 import { NowPlayingCard } from '@/components/NowPlayingCard';
 import { SharingControls } from '@/components/SharingControls';
-import { UserSearch } from '@/components/UserSearch';
 import { api, fetcher, useMe } from '@/lib/api';
 import { useRealtime } from '@/lib/useRealtime';
 
@@ -60,7 +59,6 @@ function Feed() {
 
   return (
     <div className="stack">
-      <UserSearch />
       <SharingControls compact />
       {mine?.nowPlaying && (
         <section className="stack">
@@ -78,7 +76,7 @@ function Feed() {
         (following?.users.length ? (
           <p className="muted">Nobody you follow has played anything yet. Their music will show up here live.</p>
         ) : (
-          <p className="muted">Nothing yet. Find friends above, and their music will show up here live.</p>
+          <p className="muted">Nothing yet. <Link href="/friends">Find friends</Link>, and their music will show up here live.</p>
         ))}
       {/* Cards rise in on load and glide to new positions when someone pins or starts playing. */}
       <AnimatePresence initial={true}>