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/mobile/src/app/(tabs)/index.tsx

@@ -1,9 +1,9 @@
 import { router } from 'expo-router';
 import { useState } from 'react';
-import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
+import { FlatList, RefreshControl, StyleSheet, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 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 { Body, Button, Card, Title } from '@/components/ui';
 import { api } from '@/lib/api';
@@ -15,10 +15,16 @@ import { colors, space } from '@/lib/theme';
 export default function FeedScreen() {
   const { me } = useSession();
   const { data: feed, mutate, isLoading } = useSWR<FeedItemDTO[]>('/feed');
+  // 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);
   const [refreshing, setRefreshing] = useState(false);
 
   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);
@@ -42,7 +48,7 @@ export default function FeedScreen() {
 
   const refresh = async () => {
     setRefreshing(true);
-    await mutate().catch(() => {});
+    await Promise.all([mutate(), mutateMine()]).catch(() => {});
     setRefreshing(false);
   };
 
@@ -55,6 +61,12 @@ export default function FeedScreen() {
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={refresh} tintColor={colors.muted} />}
         ListHeaderComponent={
           <View style={styles.header}>
+            {mine?.nowPlaying && (
+              <View style={{ gap: space.sm }}>
+                <Text style={styles.sectionLabel}>YOU</Text>
+                <NowPlayingCard np={mine.nowPlaying} preferred={me?.preferredService} showUser={false} />
+              </View>
+            )}
             <Title>Friends listening</Title>
             {!me?.preferredService && (
               <Card>
@@ -89,4 +101,5 @@ const styles = StyleSheet.create({
   safe: { flex: 1, backgroundColor: colors.bg },
   list: { padding: space.lg, gap: space.md, paddingBottom: space.xl * 3 },
   header: { gap: space.md, marginBottom: space.xs },
+  sectionLabel: { color: colors.muted, fontSize: 12, fontWeight: '700', letterSpacing: 0.8 },
 });