From 7d28b5a040bd173eac0161c266338e949dd7f100 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Fri, 12 Jun 2026 12:39:40 +0200
Subject: [PATCH] fix(issues): remove duplicate emoji reaction entry from
 comment header (#4068)

The comment card exposed two identical add-reaction affordances: a
QuickEmojiPicker in the header's top-right actions and the add button
inside the bottom ReactionBar. Keep only the bottom one.

- Drop QuickEmojiPicker from the root header and reply-row headers
- Always show the ReactionBar add button (it is the only entry point
  now), removing the isLongContent gating
- Remove the now-unused hideAddButton prop from ReactionBar

MUL-3262

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 packages/ui/components/common/reaction-bar.tsx    |  4 +---
 packages/views/issues/components/comment-card.tsx | 15 ---------------
 2 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/packages/ui/components/common/reaction-bar.tsx b/packages/ui/components/common/reaction-bar.tsx
index 12a05c852..1b57305c6 100644
--- a/packages/ui/components/common/reaction-bar.tsx
+++ b/packages/ui/components/common/reaction-bar.tsx
@@ -40,7 +40,6 @@ interface ReactionBarProps {
   onToggle: (emoji: string) => void;
   getActorName: (type: string, id: string) => string;
   className?: string;
-  hideAddButton?: boolean;
 }
 
 function ReactionBar({
@@ -49,7 +48,6 @@ function ReactionBar({
   onToggle,
   getActorName,
   className,
-  hideAddButton,
 }: ReactionBarProps) {
   const grouped = groupReactions(reactions, currentUserId);
 
@@ -78,7 +76,7 @@ function ReactionBar({
           </TooltipContent>
         </Tooltip>
       ))}
-      {!hideAddButton && <QuickEmojiPicker onSelect={onToggle} />}
+      <QuickEmojiPicker onSelect={onToggle} />
     </div>
   );
 }
diff --git a/packages/views/issues/components/comment-card.tsx b/packages/views/issues/components/comment-card.tsx
index 8ddbea578..b7f36b863 100644
--- a/packages/views/issues/components/comment-card.tsx
+++ b/packages/views/issues/components/comment-card.tsx
@@ -26,7 +26,6 @@ import {
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@multica/ui/components/ui/collapsible";
 import { ActorAvatar } from "../../common/actor-avatar";
 import { ReactionBar } from "@multica/ui/components/common/reaction-bar";
-import { QuickEmojiPicker } from "@multica/ui/components/common/quick-emoji-picker";
 import { cn } from "@multica/ui/lib/utils";
 import { copyText } from "@multica/ui/lib/clipboard";
 import { useActorName } from "@multica/core/workspace/hooks";
@@ -400,8 +399,6 @@ function CommentRow({
   const [confirmDelete, setConfirmDelete] = useState(false);
 
   const reactions = entry.reactions ?? [];
-  const contentText = entry.content ?? "";
-  const isLongContent = contentText.length > 500 || contentText.split("\n").length > 8;
 
   return (
     <div className="py-1.5">
@@ -437,10 +434,6 @@ function CommentRow({
         )}
 
         <div className="ml-auto flex items-center gap-0.5">
-          <QuickEmojiPicker
-            onSelect={(emoji) => onToggleReaction(entry.id, emoji)}
-            align="end"
-          />
           <DropdownMenu>
             <DropdownMenuTrigger
               render={
@@ -563,7 +556,6 @@ function CommentRow({
             currentUserId={currentUserId}
             onToggle={(emoji) => onToggleReaction(entry.id, emoji)}
             getActorName={getActorName}
-            hideAddButton={!isLongContent}
             className="mt-1.5 pl-12 pr-4"
           />
         </>
@@ -612,8 +604,6 @@ function CommentCardImpl({
   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;
 
@@ -709,10 +699,6 @@ function CommentCardImpl({
 
             {open && (
               <div className="ml-auto flex items-center gap-0.5">
-                <QuickEmojiPicker
-                  onSelect={(emoji) => onToggleReaction(entry.id, emoji)}
-                  align="end"
-                />
               <DropdownMenu>
                 <DropdownMenuTrigger
                   render={
@@ -844,7 +830,6 @@ function CommentCardImpl({
                   currentUserId={currentUserId}
                   onToggle={(emoji) => onToggleReaction(entry.id, emoji)}
                   getActorName={getActorName}
-                  hideAddButton={!isLongContent}
                   className="mt-1.5 pl-10"
                 />
               </>