From 8ba996616c602b3deb22487e3b76b7a4c824d7b7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Jan 2026 11:43:05 +0000
Subject: [PATCH] refactor: simplify zap message rendering in chat

- Put timestamp right next to recipient (removed ml-auto)
- Use RichText with content prop and event for emoji resolution
- Inline simple expressions, remove unnecessary variables
- Follow codebase patterns from ZapCompactPreview
---
 src/components/ChatViewer.tsx | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 6b88f5b..75092e4 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -174,9 +174,6 @@ const MessageItem = memo(function MessageItem({
 
   // Zap messages have special styling with gradient border
   if (message.type === "zap") {
-    const zapAmount = message.metadata?.zapAmount || 0;
-    const zapRecipient = message.metadata?.zapRecipient;
-    // Get the zap request event for RichText (contains emoji tags)
     const zapRequest = message.event ? getZapRequest(message.event) : null;
 
     return (
@@ -189,34 +186,34 @@ const MessageItem = memo(function MessageItem({
           }}
         >
           <div className="rounded-lg bg-background px-3 py-1.5">
-            <div className="flex items-center gap-2 flex-wrap">
+            <div className="flex items-center gap-2">
               <UserName
                 pubkey={message.author}
                 className="font-semibold text-sm"
               />
               <Zap className="size-4 fill-yellow-500 text-yellow-500" />
               <span className="text-yellow-500 font-bold">
-                {zapAmount.toLocaleString("en", { notation: "compact" })}
+                {(message.metadata?.zapAmount || 0).toLocaleString("en", {
+                  notation: "compact",
+                })}
               </span>
-              {zapRecipient && (
-                <UserName pubkey={zapRecipient} className="text-sm" />
+              {message.metadata?.zapRecipient && (
+                <UserName
+                  pubkey={message.metadata.zapRecipient}
+                  className="text-sm"
+                />
               )}
-              <span className="text-xs text-muted-foreground ml-auto">
+              <span className="text-xs text-muted-foreground">
                 <Timestamp timestamp={message.timestamp} />
               </span>
             </div>
             {message.content && (
-              <div className="mt-1 text-sm break-words">
-                {zapRequest ? (
-                  <RichText
-                    event={zapRequest}
-                    className="text-sm leading-tight"
-                    options={{ showMedia: false, showEventEmbeds: false }}
-                  />
-                ) : (
-                  message.content
-                )}
-              </div>
+              <RichText
+                content={message.content}
+                event={zapRequest || undefined}
+                className="mt-1 text-sm leading-tight break-words"
+                options={{ showMedia: false, showEventEmbeds: false }}
+              />
             )}
           </div>
         </div>