From 3a96567fc10d1b862eddaf603a7cd47efd61bf0f Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 5 Apr 2026 04:17:36 +0800
Subject: [PATCH] fix(web): remove duplicate emoji button on comment card
 (#419)

* fix(web): remove duplicate emoji button on parent comment card

The parent CommentCard rendered two emoji pickers: one in the header
toolbar (QuickEmojiPicker) and another inside ReactionBar (which has
its own QuickEmojiPicker when hideAddButton is not set). Added
hideAddButton to the parent's ReactionBar, matching the pattern
already used in CommentRow for replies.

* fix(web): show emoji button at bottom for long comments

For short comments, the emoji picker only appears in the top-right
toolbar. For long comments (>500 chars or >8 newlines), the ReactionBar
also shows an add button at the bottom so users don't have to scroll
back up to add reactions.
---
 apps/web/features/issues/components/comment-card.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/features/issues/components/comment-card.tsx b/apps/web/features/issues/components/comment-card.tsx
index 0ad2ecc2..57e49851 100644
--- a/apps/web/features/issues/components/comment-card.tsx
+++ b/apps/web/features/issues/components/comment-card.tsx
@@ -148,6 +148,8 @@ function CommentRow({
   };
 
   const reactions = entry.reactions ?? [];
+  const contentText = entry.content ?? "";
+  const isLongContent = contentText.length > 500 || contentText.split("\n").length > 8;
 
   return (
     <div className={`py-3${isTemp ? " opacity-60" : ""}`}>
@@ -252,7 +254,7 @@ function CommentRow({
               reactions={reactions}
               currentUserId={currentUserId}
               onToggle={(emoji) => onToggleReaction(entry.id, emoji)}
-              hideAddButton
+              hideAddButton={!isLongContent}
               className="mt-1.5 pl-8"
             />
           )}
@@ -330,6 +332,8 @@ function CommentCard({
   const replyCount = allNestedReplies.length;
   const contentPreview = (entry.content ?? "").replace(/\n/g, " ").slice(0, 80);
   const reactions = entry.reactions ?? [];
+  const contentText = entry.content ?? "";
+  const isLongContent = contentText.length > 500 || contentText.split("\n").length > 8;
 
   const isHighlighted = highlightedCommentId === entry.id;
 
@@ -458,6 +462,7 @@ function CommentCard({
                     reactions={reactions}
                     currentUserId={currentUserId}
                     onToggle={(emoji) => onToggleReaction(entry.id, emoji)}
+                    hideAddButton={!isLongContent}
                     className="mt-1.5 pl-10"
                   />
                 )}