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

packages/propel/src/emoji-reaction/emoji-reaction.tsx

@@ -4,6 +4,7 @@ import { stringToEmoji } from "../emoji-icon-picker";
 import { AddReactionIcon } from "../icons";
 import { Tooltip } from "../tooltip";
 import { cn } from "../utils";
+import { IconButton } from "../icon-button";
 
 export interface EmojiReactionType {
   emoji: string;
@@ -100,22 +101,17 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   return (
-    <button
-      ref={ref}
-      onClick={onAddReaction}
-      className={cn(
-        "inline-flex items-center justify-center rounded-full border border-dashed border-strong",
-        "bg-surface-1 text-placeholder transition-all duration-200",
-        "hover:border-accent-strong hover:text-accent-primary hover:bg-accent-primary/5",
-        "focus:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-1",
-        "h-6 w-6",
-        className
-      )}
-      title="Add reaction"
-      {...props}
-    >
-      <AddReactionIcon className="h-3 w-3" />
-    </button>
+    <Tooltip tooltipContent="Add reaction">
+      <IconButton
+        ref={ref}
+        icon={AddReactionIcon}
+        variant="ghost"
+        size="sm"
+        onClick={onAddReaction}
+        className={className}
+        {...props}
+      />
+    </Tooltip>
   );
 });
 

packages/propel/src/icons/arrows/index.ts

@@ -2,3 +2,4 @@ export * from "./chevron-down";
 export * from "./chevron-left";
 export * from "./chevron-right";
 export * from "./chevron-up";
+export * from "./reply-icon";

packages/propel/src/icons/arrows/reply-icon.tsx

@@ -0,0 +1,13 @@
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M5.52865 4.19526C5.789 3.93491 6.211 3.93491 6.47135 4.19526C6.73168 4.45561 6.7317 4.87763 6.47135 5.13797L4.27604 7.33328H10.6667C11.5507 7.33328 12.3983 7.68472 13.0234 8.30985C13.6485 8.93496 14 9.78257 14 10.6666V11.9999C14 12.3681 13.7015 12.6666 13.3333 12.6666C12.9652 12.6666 12.6667 12.3681 12.6667 11.9999V10.6666C12.6667 10.1362 12.4558 9.62762 12.0807 9.25255C11.7526 8.92442 11.3223 8.72189 10.8646 8.67638L10.6667 8.66662H4.27604L6.47135 10.8619C6.73168 11.1223 6.7317 11.5443 6.47135 11.8046C6.21101 12.065 5.78899 12.065 5.52865 11.8046L2.19531 8.4713C2.1642 8.4402 2.13648 8.40583 2.11198 8.36909C2.09464 8.3431 2.07971 8.31603 2.06641 8.28836C2.05178 8.25798 2.03859 8.22669 2.02865 8.19396C2.02526 8.18281 2.02297 8.17139 2.02018 8.16011C2.0075 8.10875 2 8.05523 2 7.99995C2 7.94683 2.00649 7.89518 2.01823 7.84565C2.02148 7.83195 2.02452 7.81815 2.02865 7.80464C2.03858 7.77214 2.05185 7.74107 2.06641 7.71089C2.07918 7.68436 2.09353 7.65841 2.11003 7.63341C2.13495 7.59564 2.16344 7.56047 2.19531 7.5286L5.52865 4.19526Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}

packages/propel/src/icons/constants.tsx

@@ -16,6 +16,7 @@ export const ArrowsIconsMap = [
   { icon: <Icon name="arrow.chevron-left" />, title: "ChevronLeftIcon" },
   { icon: <Icon name="arrow.chevron-right" />, title: "ChevronRightIcon" },
   { icon: <Icon name="arrow.chevron-up" />, title: "ChevronUpIcon" },
+  { icon: <Icon name="arrow.reply" />, title: "ReplyIcon" },
 ];
 
 export const WorkspaceIconsMap = [

packages/propel/src/icons/registry.ts

@@ -12,6 +12,7 @@ import { ChevronDownIcon } from "./arrows/chevron-down";
 import { ChevronLeftIcon } from "./arrows/chevron-left";
 import { ChevronRightIcon } from "./arrows/chevron-right";
 import { ChevronUpIcon } from "./arrows/chevron-up";
+import { ReplyIcon } from "./arrows/reply-icon";
 import { DefaultIcon } from "./default-icon";
 import { BoardLayoutIcon } from "./layouts/board-icon";
 import { CalendarLayoutIcon } from "./layouts/calendar-icon";
@@ -139,6 +140,7 @@ export const ICON_REGISTRY = {
   "arrow.chevron-left": ChevronLeftIcon,
   "arrow.chevron-right": ChevronRightIcon,
   "arrow.chevron-up": ChevronUpIcon,
+  "arrow.reply": ReplyIcon,
 
   // Default fallback
   default: DefaultIcon,