Feed: show everyone you follow

The feed only listed people who had played something, so following
someone who hadn't connected a service yet looked like it did nothing.
Under the feed, a "Following" row now shows everyone else you follow,
linking to their profiles, and the empty message says why it's empty.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8

apps/web/src/app/globals.css

@@ -140,6 +140,11 @@ input:focus, textarea:focus, select:focus {
 .list-row.danger .list-label { color: var(--danger); }
 .list-panel { padding: 0.25rem 0.4rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
 .list-message { margin: 0.5rem 0 0; }
+.quiet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.75rem; }
+.quiet-person { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-decoration: none; font-size: 0.82rem; text-align: center; min-width: 0; }
+.quiet-person span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.quiet-person:hover span { text-decoration: underline; }
+.quiet-more { justify-content: center; color: var(--muted); }
 .avatar-picker { display: flex; gap: 1rem; align-items: center; }
 .avatar-picker-actions { display: flex; flex-direction: column; gap: 0.4rem; }
 .grow { flex: 1; min-width: 0; }

apps/web/src/app/page.tsx

@@ -3,7 +3,8 @@
 import { AnimatePresence, motion } from 'motion/react';
 import Link from 'next/link';
 import useSWR from 'swr';
-import { sortFeed, type FeedItemDTO, type ProfileDTO } from '@musicshare/shared';
+import { sortFeed, type FeedItemDTO, type FollowListDTO, type ProfileDTO } from '@musicshare/shared';
+import { Avatar } from '@/components/Avatar';
 import { Equalizer } from '@/components/Equalizer';
 import { NowPlayingCard } from '@/components/NowPlayingCard';
 import { SharingControls } from '@/components/SharingControls';
@@ -23,6 +24,10 @@ function Feed() {
   const { data: feed, mutate } = useSWR<FeedItemDTO[]>('/feed', fetcher);
   // Your own profile, for the "You" card. Loading it also marks you as watched, so your updates arrive quickly.
   const { data: mine, mutate: mutateMine } = useSWR<ProfileDTO>(me ? `/users/${me.username}` : null, fetcher);
+  // Everyone you follow; the feed only has the ones who've played something.
+  const { data: following } = useSWR<FollowListDTO>(me ? `/users/${me.username}/following` : null, fetcher);
+  const inFeed = new Set(feed?.map((n) => n.user.id));
+  const quiet = following?.users.filter((u) => !inFeed.has(u.id)) ?? [];
 
   useRealtime(true, (msg) => {
     if (msg.type !== 'now_playing') return;
@@ -69,9 +74,12 @@ function Feed() {
           Pick your streaming service in <Link href="/settings">Settings</Link> so songs open in the right app.
         </p>
       )}
-      {feed?.length === 0 && (
-        <p className="muted">Nothing yet. Follow some friends and their music will show up here live.</p>
-      )}
+      {feed?.length === 0 &&
+        (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>
+        ))}
       {/* Cards rise in on load and glide to new positions when someone pins or starts playing. */}
       <AnimatePresence initial={true}>
         {feed?.map((np, i) => (
@@ -92,6 +100,25 @@ function Feed() {
           </motion.div>
         ))}
       </AnimatePresence>
+
+      {quiet.length > 0 && (
+        <section className="stack">
+          <h2 className="section-label">Following · nothing played yet</h2>
+          <div className="card quiet-list">
+            {quiet.map((u) => (
+              <Link key={u.id} href={`/u/${u.username}`} className="quiet-person" title={`@${u.username}`}>
+                <Avatar user={u} size={44} />
+                <span>{u.displayName ?? u.username}</span>
+              </Link>
+            ))}
+            {following?.nextCursor && me && (
+              <Link href={`/u/${me.username}/following`} className="quiet-person quiet-more">
+                See all
+              </Link>
+            )}
+          </div>
+        </section>
+      )}
     </div>
   );
 }