From 01ba176eca19595c9258baedd4beee16cf4adc05 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Jan 2026 17:11:27 +0000
Subject: [PATCH] Move reactions inline after timestamp with subtler styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reactions now appear directly after the timestamp in the message header:
- Removed absolute positioning and background color
- Increased spacing between emoji and count (gap-1 instead of gap-0.5)
- Simple inline display with no border or background
- Appears in natural reading flow: "Alice  10:30 AM  ❤️ 3  👍 1"
- Removed relative positioning from message container (no longer needed)

This makes reactions much more subtle and integrated into the message UI.
---
 src/components/ChatViewer.tsx            | 12 ++++++------
 src/components/chat/MessageReactions.tsx |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 9338d8e..0c273ac 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -310,7 +310,7 @@ const MessageItem = memo(function MessageItem({
       (CHAT_KINDS as readonly number[]).includes(replyEvent.kind);
 
     return (
-      <div className="pl-2 my-1 relative">
+      <div className="pl-2 my-1">
         <div
           className="p-[1px] rounded"
           style={{
@@ -339,6 +339,8 @@ const MessageItem = memo(function MessageItem({
               <span className="text-xs text-muted-foreground">
                 <Timestamp timestamp={message.timestamp} />
               </span>
+              {/* Reactions display - inline after timestamp */}
+              <MessageReactions messageId={message.id} relays={relays} />
             </div>
             {shouldShowReplyPreview && (
               <ReplyPreview
@@ -357,21 +359,21 @@ const MessageItem = memo(function MessageItem({
             )}
           </div>
         </div>
-        {/* Reactions display - lazy loaded per message */}
-        <MessageReactions messageId={message.id} relays={relays} />
       </div>
     );
   }
 
   // Regular user messages - wrap in context menu if event exists
   const messageContent = (
-    <div className="group relative flex items-start hover:bg-muted/50 px-3">
+    <div className="group flex items-start hover:bg-muted/50 px-3">
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
           <UserName pubkey={message.author} className="font-semibold text-sm" />
           <span className="text-xs text-muted-foreground">
             <Timestamp timestamp={message.timestamp} />
           </span>
+          {/* Reactions display - inline after timestamp */}
+          <MessageReactions messageId={message.id} relays={relays} />
           {canReply && onReply && (
             <button
               onClick={() => onReply(message.id)}
@@ -400,8 +402,6 @@ const MessageItem = memo(function MessageItem({
             </span>
           )}
         </div>
-        {/* Reactions display - lazy loaded per message */}
-        <MessageReactions messageId={message.id} relays={relays} />
       </div>
     </div>
   );
diff --git a/src/components/chat/MessageReactions.tsx b/src/components/chat/MessageReactions.tsx
index 7cdae6e..db3816c 100644
--- a/src/components/chat/MessageReactions.tsx
+++ b/src/components/chat/MessageReactions.tsx
@@ -134,11 +134,11 @@ export function MessageReactions({ messageId, relays }: MessageReactionsProps) {
   if (aggregated.length === 0) return null;
 
   return (
-    <div className="absolute bottom-0.5 right-1 flex gap-0.5">
+    <>
       {aggregated.map((reaction) => (
         <span
           key={reaction.customEmoji?.shortcode || reaction.emoji}
-          className="inline-flex items-center gap-0.5 px-1 rounded bg-muted/80 text-[10px] leading-tight"
+          className="inline-flex items-center gap-1 text-[10px] leading-tight"
           title={`${reaction.count} reaction${reaction.count > 1 ? "s" : ""}`}
         >
           {reaction.customEmoji ? (
@@ -153,6 +153,6 @@ export function MessageReactions({ messageId, relays }: MessageReactionsProps) {
           <span className="text-muted-foreground">{reaction.count}</span>
         </span>
       ))}
-    </div>
+    </>
   );
 }