Show your own now-playing at the top of the feed

The feed only listed people you follow, so with no follows it looked like
nothing was being picked up.

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

apps/web/src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import useSWR from 'swr';
-import { sortFeed, type FeedItemDTO } from '@musicshare/shared';
+import { sortFeed, type FeedItemDTO, type ProfileDTO } from '@musicshare/shared';
 import { NowPlayingCard } from '@/components/NowPlayingCard';
 import { UserSearch } from '@/components/UserSearch';
 import { api, fetcher, useMe } from '@/lib/api';
@@ -18,9 +18,15 @@ export default function Home() {
 function Feed() {
   const { me } = useMe();
   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);
 
   useRealtime(true, (msg) => {
-    if (msg.type !== 'now_playing' || msg.data.user.id === me?.id) return;
+    if (msg.type !== 'now_playing') return;
+    if (msg.data.user.id === me?.id) {
+      if (mine) mutateMine({ ...mine, nowPlaying: msg.data }, { revalidate: false });
+      return;
+    }
     mutate(
       (current = []) => {
         const existing = current.find((n) => n.user.id === msg.data.user.id);
@@ -47,6 +53,12 @@ function Feed() {
   return (
     <div className="stack">
       <UserSearch />
+      {mine?.nowPlaying && (
+        <section className="stack">
+          <h2 className="section-label">You</h2>
+          <NowPlayingCard np={mine.nowPlaying} preferred={me?.preferredService} showUser={false} />
+        </section>
+      )}
       <h1>Friends listening</h1>
       {!me?.preferredService && (
         <p className="notice">