diff --git a/src/components/chat/MessageReactions.tsx b/src/components/chat/MessageReactions.tsx
index db3816c..d4429cf 100644
--- a/src/components/chat/MessageReactions.tsx
+++ b/src/components/chat/MessageReactions.tsx
@@ -3,6 +3,7 @@ import { use$ } from "applesauce-react/hooks";
import eventStore from "@/services/event-store";
import pool from "@/services/relay-pool";
import { EMOJI_SHORTCODE_REGEX } from "@/lib/emoji-helpers";
+import { getDisplayName } from "@/lib/nostr-utils";
interface MessageReactionsProps {
messageId: string;
@@ -136,23 +137,54 @@ export function MessageReactions({ messageId, relays }: MessageReactionsProps) {
return (
<>
{aggregated.map((reaction) => (
- 1 ? "s" : ""}`}
- >
- {reaction.customEmoji ? (
-
- ) : (
- {reaction.emoji}
- )}
- {reaction.count}
-
+ reaction={reaction}
+ />
))}
>
);
}
+
+/**
+ * Single reaction badge with tooltip showing who reacted
+ */
+function ReactionBadge({ reaction }: { reaction: ReactionSummary }) {
+ // Load profiles for all reactors to get display names
+ const profiles = use$(
+ () => eventStore.profiles(reaction.pubkeys),
+ [reaction.pubkeys],
+ );
+
+ // Build tooltip with emoji and list of names
+ const tooltip = useMemo(() => {
+ const names = reaction.pubkeys.map((pubkey) => {
+ const profile = profiles?.get(pubkey);
+ return getDisplayName(pubkey, profile);
+ });
+
+ // Format: "❤️ 3\nAlice, Bob, Carol" or "❤️ 1\nAlice"
+ const emojiDisplay = reaction.customEmoji
+ ? `:${reaction.customEmoji.shortcode}:`
+ : reaction.emoji;
+ return `${emojiDisplay} ${reaction.count}\n${names.join(", ")}`;
+ }, [reaction, profiles]);
+
+ return (
+
+ {reaction.customEmoji ? (
+
+ ) : (
+ {reaction.emoji}
+ )}
+ {reaction.count}
+
+ );
+}