[WEB-5614] chore: work item detail comment and sidebar enhancements (#8397)

apps/web/core/components/comments/card/root.tsx

@@ -1,7 +1,7 @@
-import type { FC } from "react";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { EmojiReactionButton, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
 import type { EditorRefApi } from "@plane/editor";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 // plane web imports
@@ -35,11 +35,23 @@ export const CommentCard = observer(function CommentCard(props: TCommentCard) {
   } = props;
   // states
   const [isEditing, setIsEditing] = useState(false);
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
   // refs
   const readOnlyEditorRef = useRef<EditorRefApi>(null);
   // derived values
   const workspaceId = comment?.workspace;
 
+  const userReactions = comment?.id ? activityOperations.userReactions(comment.id) : undefined;
+
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      if (!userReactions || !comment?.id) return;
+      // emoji is already in decimal string format from EmojiReactionPicker
+      void activityOperations.react(comment.id, emoji, userReactions);
+    },
+    [activityOperations, comment?.id, userReactions]
+  );
+
   if (!comment || !workspaceId) return null;
 
   return (
@@ -47,13 +59,24 @@ export const CommentCard = observer(function CommentCard(props: TCommentCard) {
       comment={comment}
       quickActions={
         !disabled && (
-          <CommentQuickActions
-            activityOperations={activityOperations}
-            comment={comment}
-            setEditMode={() => setIsEditing(true)}
-            showAccessSpecifier={showAccessSpecifier}
-            showCopyLinkOption={showCopyLinkOption}
-          />
+          <div className="flex items-center gap-1">
+            <EmojiReactionPicker
+              isOpen={isPickerOpen}
+              handleToggle={setIsPickerOpen}
+              onChange={handleEmojiSelect}
+              disabled={disabled}
+              label={<EmojiReactionButton onAddReaction={() => setIsPickerOpen(true)} />}
+              placement="bottom-start"
+            />
+
+            <CommentQuickActions
+              activityOperations={activityOperations}
+              comment={comment}
+              setEditMode={() => setIsEditing(true)}
+              showAccessSpecifier={showAccessSpecifier}
+              showCopyLinkOption={showCopyLinkOption}
+            />
+          </div>
         )
       }
       ends={ends}

apps/web/core/components/comments/comment-reaction.tsx

@@ -61,6 +61,12 @@ export const CommentReactions = observer(function CommentReactions(props: TProps
 
   if (!userReactions) return null;
 
+  // Don't render anything if there are no reactions and it's disabled
+  if (reactions.length === 0 && disabled) return null;
+
+  // Don't show the add button if there are no reactions
+  const showAddButton = !disabled && reactions.length > 0;
+
   return (
     <div className="relative">
       <EmojiReactionPicker
@@ -72,7 +78,7 @@ export const CommentReactions = observer(function CommentReactions(props: TProps
           <EmojiReactionGroup
             reactions={reactions}
             onReactionClick={handleReactionClick}
-            showAddButton={!disabled}
+            showAddButton={showAddButton}
             onAddReaction={() => setIsPickerOpen(true)}
           />
         }

apps/web/core/components/comments/quick-actions.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from "react";
 import { observer } from "mobx-react";
-import { Globe2, Link, Lock, Pencil, Trash2 } from "lucide-react";
+import { Globe2, Link, Lock, Pencil, Trash2, MoreHorizontal } from "lucide-react";
 // plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu } from "@plane/ui";
@@ -76,7 +77,7 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
   );
 
   return (
-    <CustomMenu ellipsis closeOnSelect>
+    <CustomMenu customButton={<IconButton icon={MoreHorizontal} variant="ghost" size="sm" />} closeOnSelect>
       {MENU_ITEMS.map((item) => {
         if (item.shouldRender === false) return null;
 

apps/web/core/components/common/layout/sidebar/property-list-item.tsx

@@ -13,7 +13,7 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
   const { icon: Icon, label, children, appendElement, childrenClassName } = props;
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-start gap-2">
       <div className="flex shrink-0 items-center gap-1.5 w-30 text-body-xs-regular text-tertiary h-7.5">
         <Icon className="size-4 shrink-0" />
         <span>{label}</span>