Emoji reactions on songs

React to a friend's current song or any of their recent plays: tap an
emoji to add yours (or take it back), "☺+" for the quick six, and a full
picker with search and categories (Unicode emoji up to 13.1, generated
into the shared package so web and mobile match). One reaction per person
per play; a new one replaces the old. Chips show counts and, on hover/
long label, who reacted; yours is highlighted. Listeners and followers get
the update live. Not on your own plays, not across a block (blocking also
clears reactions between the two people).

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

apps/web/src/components/RecentPlays.tsx

@@ -1,13 +1,17 @@
 'use client';
 
+import { Reactions } from './Reactions';
 import { SERVICE_LABELS, openUrl, timeAgo, type ProfileDTO, type RecentPlayDTO, type StreamingService } from '@musicshare/shared';
 
 export function RecentPlays({
   plays,
   preferred,
   attribution = {},
+  ownerId,
 }: {
   plays: RecentPlayDTO[];
+  /** Whose plays these are (they can't react to their own). */
+  ownerId: string;
   preferred: StreamingService | null | undefined;
   attribution?: ProfileDTO['attribution'];
 }) {
@@ -30,7 +34,7 @@ export function RecentPlays({
             </>
           );
           return (
-            <li key={`${p.playedAt}-${i}`}>
+            <li key={p.listenId ?? `${p.playedAt}-${i}`}>
               {target ? (
                 <a
                   className="recent-row"
@@ -44,6 +48,7 @@ export function RecentPlays({
               ) : (
                 <div className="recent-row">{row}</div>
               )}
+              <Reactions listenId={p.listenId} reactions={p.reactions} ownerId={ownerId} />
             </li>
           );
         })}