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/components/Nav.tsx

@@ -5,13 +5,14 @@ import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import { client, useMe } from '@/lib/api';
 
-/** Top bar: logo and the three main places. On phones those move to a bottom tab bar. */
+/** Top bar: logo and the four main places. On phones those move to a bottom tab bar. */
 export function Nav() {
   const { me } = useMe();
   const path = usePathname();
   const tabs = me
     ? [
         { href: '/', label: 'Feed', icon: <FeedIcon />, active: path === '/' },
+        { href: '/friends', label: 'Friends', icon: <FriendsIcon />, active: path.startsWith('/friends') },
         { href: `/u/${me.username}`, label: 'Profile', icon: <ProfileIcon />, active: path.startsWith(`/u/${me.username}`) },
         { href: '/settings', label: 'Settings', icon: <SettingsIcon />, active: path.startsWith('/settings') || path === '/admin' },
       ]
@@ -89,6 +90,14 @@ const FeedIcon = () => (
     <circle cx="18" cy="16" r="3" />
   </svg>
 );
+const FriendsIcon = () => (
+  <svg {...icon} aria-hidden>
+    <circle cx="9" cy="8" r="3.5" />
+    <path d="M2 20c0-3.6 3.1-6 7-6s7 2.4 7 6" />
+    <path d="M16 4.5a3.5 3.5 0 0 1 0 7" />
+    <path d="M18 14c2.4.6 4 2.6 4 6" />
+  </svg>
+);
 const ProfileIcon = () => (
   <svg {...icon} aria-hidden>
     <circle cx="12" cy="8" r="4" />