Add recently played to profiles

A play is recorded when a new track starts (pausing and resuming doesn't
count; returning after 10+ minutes does). Profiles show the last 10,
excluding the track playing now; 50 are kept per user. Recent plays are
free on every plan; the paid flag is renamed to fullHistory.

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

apps/mobile/src/components/ProfileView.tsx

@@ -10,6 +10,7 @@ import { useSession } from '@/lib/session';
 import { colors, space } from '@/lib/theme';
 import { Avatar } from './Avatar';
 import { NowPlayingCard } from './NowPlayingCard';
+import { RecentPlays } from './RecentPlays';
 import { Screen } from './Screen';
 import { TrackCard } from './TrackCard';
 import { Body, Button, Card, Heading, Row, Title } from './ui';
@@ -22,7 +23,9 @@ export function ProfileView({ username, edges }: { username: string; edges?: ('t
 
   useRealtime(true, (msg) => {
     if (msg.type === 'now_playing' && profile && msg.data.user.id === profile.user.id) {
-      mutate({ ...profile, nowPlaying: msg.data }, { revalidate: false });
+      // A new track moves the previous one into "Recently played", so refetch; otherwise patch in place.
+      const newTrack = msg.data.track.id !== profile.nowPlaying?.track.id;
+      mutate({ ...profile, nowPlaying: msg.data }, { revalidate: newTrack });
     }
   });
 
@@ -104,6 +107,8 @@ export function ProfileView({ username, edges }: { username: string; edges?: ('t
       ) : (
         <Body muted>Nothing playing right now.</Body>
       )}
+
+      <RecentPlays plays={profile.recent} preferred={me?.preferredService} />
     </Screen>
   );
 }

apps/mobile/src/components/RecentPlays.tsx

@@ -0,0 +1,50 @@
+import { Image } from 'expo-image';
+import { Linking, Pressable, StyleSheet, Text, View } from 'react-native';
+import { openUrl, timeAgo, type RecentPlayDTO, type StreamingService } from '@musicshare/shared';
+import { showError } from '@/lib/errors';
+import { colors, radius, space } from '@/lib/theme';
+import { Card, Heading } from './ui';
+
+export function RecentPlays({ plays, preferred }: { plays: RecentPlayDTO[]; preferred: StreamingService | null | undefined }) {
+  if (plays.length === 0) return null;
+  return (
+    <Card style={{ gap: 0 }}>
+      <Heading style={{ marginBottom: space.sm }}>Recently played</Heading>
+      {plays.map((p, i) => (
+        <Pressable
+          key={`${p.playedAt}-${i}`}
+          disabled={!preferred}
+          accessibilityRole={preferred ? 'link' : undefined}
+          onPress={() => preferred && Linking.openURL(openUrl(p.track, preferred).url).catch((e) => showError(e, "Couldn't open link"))}
+          style={({ pressed }) => [styles.row, i > 0 && styles.divider, pressed && { opacity: 0.6 }]}>
+          {p.track.artworkUrl ? (
+            <Image source={p.track.artworkUrl} style={styles.art} />
+          ) : (
+            <View style={[styles.art, styles.artEmpty]}>
+              <Text style={{ color: colors.muted }}>♪</Text>
+            </View>
+          )}
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <Text style={styles.title} numberOfLines={1}>
+              {p.track.title}
+            </Text>
+            <Text style={styles.artist} numberOfLines={1}>
+              {p.track.artist}
+            </Text>
+          </View>
+          <Text style={styles.time}>{timeAgo(p.playedAt)}</Text>
+        </Pressable>
+      ))}
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: space.md, paddingVertical: space.sm },
+  divider: { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border },
+  art: { width: 40, height: 40, borderRadius: radius.sm, backgroundColor: colors.surface2 },
+  artEmpty: { alignItems: 'center', justifyContent: 'center' },
+  title: { color: colors.text, fontWeight: '600', fontSize: 14 },
+  artist: { color: colors.muted, fontSize: 13 },
+  time: { color: colors.muted, fontSize: 12 },
+});