snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { EditorRefApi } from "@plane/editor";
+import { useHashScroll } from "@plane/hooks";
+import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+import { EIssueCommentAccessSpecifier } from "@plane/types";
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+// local imports
+import { CommentReactions } from "../comment-reaction";
+import { CommentCardEditForm } from "./edit-form";
+import { EmojiReactionButton, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import { useMember } from "@/hooks/store/use-member";
+
+export type TCommentCardDisplayProps = {
+  activityOperations: TCommentsOperations;
+  comment: TIssueComment;
+  disabled: boolean;
+  entityId: string;
+  projectId?: string;
+  readOnlyEditorRef: React.RefObject<EditorRefApi | null>;
+  showAccessSpecifier: boolean;
+  workspaceId: string;
+  workspaceSlug: string;
+  isEditing?: boolean;
+  setIsEditing?: (isEditing: boolean) => void;
+  renderFooter?: (ReactionsComponent: ReactNode | null) => ReactNode;
+  renderQuickActions?: () => ReactNode;
+};
+
+export const CommentCardDisplay = observer(function CommentCardDisplay(props: TCommentCardDisplayProps) {
+  const {
+    activityOperations,
+    comment,
+    disabled,
+    projectId,
+    readOnlyEditorRef,
+    showAccessSpecifier,
+    workspaceId,
+    workspaceSlug,
+    isEditing = false,
+    setIsEditing,
+    renderFooter,
+    renderQuickActions,
+  } = props;
+  // states
+  const [highlightClassName, setHighlightClassName] = useState("");
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const userDetails = getUserDetails(comment?.actor);
+  const displayName = comment?.actor_detail?.is_bot
+    ? comment?.actor_detail?.first_name + `Bot`
+    : (userDetails?.display_name ?? comment?.actor_detail?.display_name);
+  const avatarUrl = userDetails?.avatar_url ?? comment?.actor_detail?.avatar_url;
+
+  const userReactions = activityOperations.userReactions(comment.id);
+
+  // navigation
+  const pathname = usePathname();
+  // derived values
+  const commentBlockId = `comment-${comment?.id}`;
+  // Check if there are any reactions to determine if we should render the footer
+  const reactionIds = activityOperations.reactionIds(comment.id);
+  const hasReactions = reactionIds && Object.keys(reactionIds).some((key) => reactionIds[key]?.length > 0);
+
+  // scroll to comment
+  const { isHashMatch } = useHashScroll({
+    elementId: commentBlockId,
+    pathname,
+  });
+
+  useEffect(() => {
+    if (!isHashMatch) return;
+    setHighlightClassName("border-accent-strong");
+    const timeout = setTimeout(() => {
+      setHighlightClassName("");
+    }, 8000);
+
+    return () => clearTimeout(timeout);
+  }, [isHashMatch]);
+
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      if (!userReactions) return;
+      // emoji is already in decimal string format from EmojiReactionPicker
+      void activityOperations.react(comment.id, emoji, userReactions);
+    },
+    [activityOperations, comment.id, userReactions]
+  );
+
+  const shouldRenderReactions = hasReactions && !disabled;
+
+  return (
+    <div id={commentBlockId} className="relative flex flex-col gap-2">
+      {showAccessSpecifier && (
+        <div className="absolute top-2.5 right-2.5 z-[1] text-tertiary">
+          {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
+            <LockOutline className="size-3" />
+          ) : (
+            <GlobeOutline className="size-3" />
+          )}
+        </div>
+      )}
+      <div className="relative mb-3 flex w-full items-center gap-2">
+        <Avatar alt={displayName} fallback={displayName?.[0]?.toUpperCase()} size="2xs" src={getFileURL(avatarUrl)} />
+        <div className="flex flex-1 flex-wrap items-center gap-1">
+          <div className="text-caption-sm-medium">{displayName}</div>
+          <div className="text-caption-sm-regular text-tertiary">
+            commented{" "}
+            <Tooltip
+              label={`${renderFormattedDate(comment.created_at)} at ${renderFormattedTime(comment.created_at)}`}
+              side="bottom"
+              layout="single"
+              delay={200}
+            >
+              <span className="text-tertiary">
+                {calculateTimeAgo(comment.created_at)}
+                {comment.edited_at && " (edited)"}
+              </span>
+            </Tooltip>
+          </div>
+        </div>
+        {!disabled && (
+          <div className="flex shrink-0 items-center gap-1">
+            <EmojiReactionPicker
+              isOpen={isPickerOpen}
+              handleToggle={setIsPickerOpen}
+              onChange={handleEmojiSelect}
+              disabled={disabled}
+              label={<EmojiReactionButton onAddReaction={() => setIsPickerOpen(true)} />}
+              placement="bottom-start"
+            />
+            {renderQuickActions ? renderQuickActions() : null}
+          </div>
+        )}
+      </div>
+      {isEditing && setIsEditing ? (
+        <CommentCardEditForm
+          activityOperations={activityOperations}
+          comment={comment}
+          isEditing={isEditing}
+          readOnlyEditorRef={readOnlyEditorRef.current}
+          setIsEditing={setIsEditing}
+          projectId={projectId}
+          workspaceId={workspaceId}
+          workspaceSlug={workspaceSlug}
+        />
+      ) : (
+        <>
+          <LiteTextEditor
+            editable={false}
+            ref={readOnlyEditorRef}
+            id={comment.id}
+            initialValue={comment.comment_html ?? ""}
+            workspaceId={workspaceId}
+            workspaceSlug={workspaceSlug}
+            containerClassName={cn("!py-1 transition-[border-color] duration-500", highlightClassName)}
+            projectId={projectId?.toString()}
+            displayConfig={{
+              fontSize: "small-font",
+            }}
+            parentClassName="border-none"
+          />
+          {shouldRenderReactions &&
+            (renderFooter ? (
+              renderFooter(
+                <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+              )
+            ) : (
+              <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+            ))}
+        </>
+      )}
+    </div>
+  );
+});

apps/web/core/components/comments/card/edit-form.tsx

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { useForm } from "react-hook-form";
+import type { EditorRefApi } from "@plane/editor";
+import { CloseOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+
+type Props = {
+  activityOperations: TCommentsOperations;
+  comment: TIssueComment;
+  isEditing: boolean;
+  projectId?: string;
+  readOnlyEditorRef: EditorRefApi | null;
+  setIsEditing: (isEditing: boolean) => void;
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+export const CommentCardEditForm = observer(function CommentCardEditForm(props: Props) {
+  const {
+    activityOperations,
+    comment,
+    isEditing,
+    projectId,
+    readOnlyEditorRef,
+    setIsEditing,
+    workspaceId,
+    workspaceSlug,
+  } = props;
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // form info
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    watch,
+    setValue,
+  } = useForm<Partial<TIssueComment>>({
+    defaultValues: { comment_html: comment?.comment_html },
+  });
+  const commentHTML = watch("comment_html");
+
+  const isEmpty = isCommentEmpty(commentHTML);
+  const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
+  const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
+  const isDisabled = isSubmitting || isEmpty || isSubmitButtonDisabled;
+
+  const onEnter = async (formData: Partial<TIssueComment>) => {
+    if (isSubmitting || !comment) return;
+
+    setIsEditing(false);
+
+    await activityOperations.updateComment(comment.id, formData);
+
+    editorRef.current?.setEditorValue(formData?.comment_html ?? "<p></p>");
+    readOnlyEditorRef?.setEditorValue(formData?.comment_html ?? "<p></p>");
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      setFocus("comment_html");
+    }
+  }, [isEditing, setFocus]);
+
+  return (
+    <form className="flex flex-col gap-2">
+      <div
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isEmpty) handleSubmit(onEnter)(e);
+        }}
+      >
+        <LiteTextEditor
+          editable
+          workspaceId={workspaceId}
+          workspaceSlug={workspaceSlug}
+          ref={editorRef}
+          id={comment.id}
+          initialValue={commentHTML ?? ""}
+          value={null}
+          onChange={(_comment_json, comment_html) => setValue("comment_html", comment_html)}
+          onEnterKeyPress={(e) => {
+            if (!isEmpty && !isSubmitting) {
+              handleSubmit(onEnter)(e);
+            }
+          }}
+          showSubmitButton={false}
+          uploadFile={async (blockId, file) => {
+            const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file, comment.id);
+            return asset_id;
+          }}
+          duplicateFile={async (assetId: string) => {
+            const { asset_id } = await activityOperations.duplicateCommentAsset(assetId, comment.id);
+            return asset_id;
+          }}
+          projectId={projectId}
+          parentClassName="p-2 bg-surface-1"
+          displayConfig={{
+            fontSize: "small-font",
+          }}
+        />
+      </div>
+      <div className="flex gap-2 self-end">
+        {!isEmpty && (
+          <button
+            type="button"
+            onClick={handleSubmit(onEnter)}
+            disabled={isDisabled}
+            className={cn(
+              "group grid size-7 place-items-center rounded-lg border border-success-subtle bg-success-subtle shadow-raised-100 duration-300",
+              isDisabled ? "" : "hover:bg-success-subtle-1"
+            )}
+          >
+            <TickOutline className="size-4 text-success-primary" />
+          </button>
+        )}
+        <button
+          type="button"
+          disabled={isSubmitting}
+          className={cn(
+            "group grid size-7 place-items-center rounded-lg border border-danger-subtle bg-danger-subtle shadow-raised-100 duration-300",
+            isSubmitting ? "" : "hover:bg-danger-subtle-hover"
+          )}
+          onClick={() => {
+            setIsEditing(false);
+            editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
+          }}
+        >
+          <CloseOutline className="size-4 text-danger-primary" />
+        </button>
+      </div>
+    </form>
+  );
+});

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

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TIssueComment, TCommentsOperations } from "@plane/types";
+// local imports
+import { CommentQuickActions } from "../quick-actions";
+import { CommentBlock } from "../comment-block";
+import { CommentCardDisplay } from "./display";
+
+type TCommentCard = {
+  workspaceSlug: string;
+  entityId: string;
+  comment: TIssueComment | undefined;
+  activityOperations: TCommentsOperations;
+  ends: "top" | "bottom" | undefined;
+  showAccessSpecifier: boolean;
+  showCopyLinkOption: boolean;
+  enableReplies: boolean;
+  disabled?: boolean;
+  projectId?: string;
+};
+
+export const CommentCard = observer(function CommentCard(props: TCommentCard) {
+  const {
+    workspaceSlug,
+    entityId,
+    comment,
+    activityOperations,
+    ends,
+    showAccessSpecifier,
+    showCopyLinkOption,
+    disabled = false,
+    projectId,
+  } = props;
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+  // refs
+  const readOnlyEditorRef = useRef<EditorRefApi>(null);
+  // derived values
+  const workspaceId = comment?.workspace;
+
+  if (!comment || !workspaceId) return null;
+
+  return (
+    <CommentBlock comment={comment} ends={ends}>
+      <CommentCardDisplay
+        activityOperations={activityOperations}
+        entityId={entityId}
+        comment={comment}
+        disabled={disabled}
+        projectId={projectId}
+        readOnlyEditorRef={readOnlyEditorRef}
+        showAccessSpecifier={showAccessSpecifier}
+        workspaceId={workspaceId}
+        workspaceSlug={workspaceSlug}
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        renderQuickActions={() => (
+          <CommentQuickActions
+            activityOperations={activityOperations}
+            comment={comment}
+            setEditMode={() => setIsEditing(true)}
+            showAccessSpecifier={showAccessSpecifier}
+            showCopyLinkOption={showCopyLinkOption}
+          />
+        )}
+      />
+    </CommentBlock>
+  );
+});

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

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ReplyOutline } from "@makeplane/propel/icons";
+import type { TIssueComment } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+
+type TCommentBlock = {
+  comment: TIssueComment;
+  ends: "top" | "bottom" | undefined;
+  children: ReactNode;
+};
+
+export const CommentBlock = observer(function CommentBlock(props: TCommentBlock) {
+  const { comment, ends, children } = props;
+  const commentBlockRef = useRef<HTMLDivElement>(null);
+
+  if (!comment) return null;
+  return (
+    <div
+      id={comment.id}
+      className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}
+      ref={commentBlockRef}
+    >
+      <div
+        className="transition-border absolute top-0 bottom-0 left-[13px] w-px bg-layer-3 duration-1000"
+        aria-hidden
+      />
+      <div
+        className={cn(
+          "transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-subtle bg-layer-2 uppercase shadow-raised-100 duration-1000"
+        )}
+      >
+        <ReplyOutline width={14} height={14} className="text-secondary" aria-hidden="true" />
+      </div>
+      <div className="flex flex-grow flex-col gap-3 truncate">
+        <div className="mb-2 rounded-lg border border-subtle bg-layer-2 p-3 text-body-sm-regular shadow-raised-100">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm, Controller } from "react-hook-form";
+// plane imports
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+import type { EditorRefApi } from "@plane/editor";
+import type { TIssueComment, TCommentsOperations } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// services
+import { FileService } from "@/services/file.service";
+
+type TCommentCreate = {
+  entityId: string;
+  workspaceSlug: string;
+  activityOperations: TCommentsOperations;
+  showToolbarInitially?: boolean;
+  projectId?: string;
+  onSubmitCallback?: (elementId: string) => void;
+};
+
+// services
+const fileService = new FileService();
+
+export const CommentCreate = observer(function CommentCreate(props: TCommentCreate) {
+  const {
+    workspaceSlug,
+    entityId,
+    activityOperations,
+    showToolbarInitially = false,
+    projectId,
+    onSubmitCallback,
+  } = props;
+  // states
+  const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const workspaceStore = useWorkspace();
+  // derived values
+  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
+  // form info
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<Partial<TIssueComment>>({
+    defaultValues: {
+      comment_html: "<p></p>",
+    },
+  });
+
+  const onSubmit = async (formData: Partial<TIssueComment>) => {
+    try {
+      const comment = await activityOperations.createComment(formData);
+      if (comment?.id) onSubmitCallback?.(comment.id);
+      if (uploadedAssetIds.length > 0) {
+        if (projectId) {
+          await fileService.updateBulkProjectAssetsUploadStatus(workspaceSlug, projectId.toString(), entityId, {
+            asset_ids: uploadedAssetIds,
+          });
+        } else {
+          await fileService.updateBulkWorkspaceAssetsUploadStatus(workspaceSlug, entityId, {
+            asset_ids: uploadedAssetIds,
+          });
+        }
+        setUploadedAssetIds([]);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      reset({
+        comment_html: "<p></p>",
+      });
+      editorRef.current?.clearEditor();
+    }
+  };
+
+  const commentHTML = watch("comment_html");
+  const isEmpty = isCommentEmpty(commentHTML ?? undefined);
+
+  return (
+    <div
+      className={cn("sticky bottom-0 z-[4] bg-surface-1 sm:static")}
+      onKeyDown={(e) => {
+        if (
+          e.key === "Enter" &&
+          !e.shiftKey &&
+          !e.ctrlKey &&
+          !e.metaKey &&
+          !isEmpty &&
+          !isSubmitting &&
+          editorRef.current?.isEditorReadyToDiscard()
+        )
+          handleSubmit(onSubmit)(e);
+      }}
+    >
+      <Controller
+        name="access"
+        control={control}
+        render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+          <Controller
+            name="comment_html"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <LiteTextEditor
+                editable
+                workspaceId={workspaceId}
+                id={"add_comment_" + entityId}
+                value={"<p></p>"}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                onEnterKeyPress={(e) => {
+                  if (!isEmpty && !isSubmitting) {
+                    handleSubmit(onSubmit)(e);
+                  }
+                }}
+                ref={editorRef}
+                initialValue={value ?? "<p></p>"}
+                containerClassName="min-h-min"
+                onChange={(comment_json, comment_html) => onChange(comment_html)}
+                accessSpecifier={accessValue ?? EIssueCommentAccessSpecifier.INTERNAL}
+                handleAccessChange={onAccessChange}
+                isSubmitting={isSubmitting}
+                uploadFile={async (blockId, file) => {
+                  const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file);
+                  setUploadedAssetIds((prev) => [...prev, asset_id]);
+                  return asset_id;
+                }}
+                duplicateFile={async (assetId: string) => {
+                  const { asset_id } = await activityOperations.duplicateCommentAsset(assetId);
+                  setUploadedAssetIds((prev) => [...prev, asset_id]);
+                  return asset_id;
+                }}
+                showToolbarInitially={showToolbarInitially}
+                parentClassName="p-2"
+                displayConfig={{
+                  fontSize: "small-font",
+                }}
+              />
+            )}
+          />
+        )}
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+// helpers
+// local imports
+
+export type TProps = {
+  comment: TIssueComment;
+  disabled?: boolean;
+  activityOperations: TCommentsOperations;
+};
+
+export const CommentReactions = observer(function CommentReactions(props: TProps) {
+  const { comment, activityOperations, disabled = false } = props;
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
+  const userReactions = activityOperations.userReactions(comment.id);
+  const reactionIds = activityOperations.reactionIds(comment.id);
+
+  // Transform reactions data to Propel EmojiReactionType format
+  const reactions: EmojiReactionType[] = useMemo(() => {
+    if (!reactionIds) return [];
+
+    return Object.keys(reactionIds)
+      .filter((reaction) => reactionIds[reaction]?.length > 0)
+      .map((reaction) => {
+        // Get user names for this reaction
+        const tooltipContent = activityOperations.getReactionUsers(reaction, reactionIds);
+        // Parse the tooltip content string to extract user names
+        const users = tooltipContent ? tooltipContent.split(", ") : [];
+
+        return {
+          emoji: stringToEmoji(reaction),
+          count: reactionIds[reaction].length,
+          reacted: userReactions?.includes(reaction) || false,
+          users: users,
+        };
+      });
+  }, [reactionIds, userReactions, activityOperations]);
+
+  const handleReactionClick = (emoji: string) => {
+    if (disabled || !userReactions) return;
+    // Convert emoji back to decimal string format for the API
+    const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
+    const reactionString = emojiCodePoints.join("-");
+    activityOperations.react(comment.id, reactionString, userReactions);
+  };
+
+  const handleEmojiSelect = (emoji: string) => {
+    if (!userReactions) return;
+    // emoji is already in decimal string format from EmojiReactionPicker
+    activityOperations.react(comment.id, emoji, userReactions);
+  };
+
+  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
+        isOpen={isPickerOpen}
+        handleToggle={setIsPickerOpen}
+        onChange={handleEmojiSelect}
+        disabled={disabled}
+        label={
+          <EmojiReactionGroup
+            reactions={reactions}
+            onReactionClick={handleReactionClick}
+            showAddButton={showAddButton}
+            onAddReaction={() => setIsPickerOpen(true)}
+          />
+        }
+        placement="bottom-start"
+      />
+    </div>
+  );
+});

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

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { E_SORT_ORDER } from "@plane/constants";
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+// local components
+import { CommentCard } from "./card/root";
+import { CommentCreate } from "./comment-create";
+
+type TCommentsWrapper = {
+  projectId?: string;
+  entityId: string;
+  isEditingAllowed?: boolean;
+  activityOperations: TCommentsOperations;
+  comments: TIssueComment[] | string[];
+  sortOrder?: E_SORT_ORDER;
+  getCommentById?: (activityId: string) => TIssueComment | undefined;
+  showAccessSpecifier?: boolean;
+  showCopyLinkOption?: boolean;
+  enableReplies?: boolean;
+};
+
+export const CommentsWrapper = observer(function CommentsWrapper(props: TCommentsWrapper) {
+  const {
+    entityId,
+    activityOperations,
+    comments,
+    getCommentById,
+    isEditingAllowed = true,
+    projectId,
+    showAccessSpecifier = false,
+    showCopyLinkOption = false,
+    enableReplies = false,
+  } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const renderCommentCreate = useMemo(
+    () =>
+      isEditingAllowed && (
+        <CommentCreate
+          workspaceSlug={workspaceSlug}
+          entityId={entityId}
+          activityOperations={activityOperations}
+          projectId={projectId}
+        />
+      ),
+    [isEditingAllowed, workspaceSlug, entityId, activityOperations, projectId]
+  );
+
+  return (
+    <div className="relative flex h-full flex-col gap-y-2 overflow-hidden">
+      {renderCommentCreate}
+      <div className="flex-grow overflow-y-auto py-4">
+        {comments?.map((data, index) => {
+          let comment;
+          if (typeof data === "string") {
+            comment = getCommentById?.(data);
+          } else {
+            comment = data;
+          }
+
+          if (!comment) return null;
+          return (
+            <CommentCard
+              key={comment.id}
+              workspaceSlug={workspaceSlug}
+              entityId={entityId}
+              comment={comment}
+              activityOperations={activityOperations}
+              disabled={!isEditingAllowed}
+              ends={index === 0 ? "top" : index === comments.length - 1 ? "bottom" : undefined}
+              projectId={projectId}
+              showAccessSpecifier={showAccessSpecifier}
+              showCopyLinkOption={showCopyLinkOption}
+              enableReplies={enableReplies}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+});

apps/web/core/components/comments/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./comments";

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

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import {
+  DeleteOutline,
+  EditOutline,
+  GlobeOutline,
+  LinkOutline,
+  LockOutline,
+  MoreHorizontalOutline,
+} from "@makeplane/propel/icons";
+// 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";
+import { cn } from "@plane/utils";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+type TCommentCard = {
+  activityOperations: TCommentsOperations;
+  comment: TIssueComment;
+  setEditMode: () => void;
+  showAccessSpecifier: boolean;
+  showCopyLinkOption: boolean;
+};
+
+export const CommentQuickActions = observer(function CommentQuickActions(props: TCommentCard) {
+  const { activityOperations, comment, setEditMode, showAccessSpecifier, showCopyLinkOption } = props;
+  // store hooks
+  const { data: currentUser } = useUser();
+  // derived values
+  const isAuthor = currentUser?.id === comment.actor;
+  const canEdit = isAuthor;
+  const canDelete = isAuthor;
+  // translation
+  const { t } = useTranslation();
+
+  const MENU_ITEMS = useMemo(
+    function MENU_ITEMS(): TContextMenuItem[] {
+      return [
+        {
+          key: "edit",
+          action: setEditMode,
+          title: t("common.actions.edit"),
+          icon: EditOutline,
+          shouldRender: canEdit,
+        },
+        {
+          key: "copy_link",
+          action: () => activityOperations.copyCommentLink(comment.id),
+          title: t("common.actions.copy_link"),
+          icon: LinkOutline,
+          shouldRender: showCopyLinkOption,
+        },
+        {
+          key: "access_specifier",
+          action: () =>
+            activityOperations.updateComment(comment.id, {
+              access:
+                comment.access === EIssueCommentAccessSpecifier.INTERNAL
+                  ? EIssueCommentAccessSpecifier.EXTERNAL
+                  : EIssueCommentAccessSpecifier.INTERNAL,
+            }),
+          title:
+            comment.access === EIssueCommentAccessSpecifier.INTERNAL
+              ? t("issue.comments.switch.public")
+              : t("issue.comments.switch.private"),
+          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? GlobeOutline : LockOutline,
+          shouldRender: showAccessSpecifier,
+        },
+        {
+          key: "delete",
+          action: () => activityOperations.removeComment(comment.id),
+          title: t("common.actions.delete"),
+          icon: DeleteOutline,
+          shouldRender: canDelete,
+        },
+      ].filter((item) => item.shouldRender !== false);
+    },
+    [t, setEditMode, canEdit, showCopyLinkOption, activityOperations, comment, showAccessSpecifier, canDelete]
+  );
+
+  if (MENU_ITEMS.length === 0) return null;
+
+  return (
+    <CustomMenu customButton={<IconButton icon={MoreHorizontalOutline} variant="ghost" size="sm" />} closeOnSelect>
+      {MENU_ITEMS.map((item) => (
+        <CustomMenu.MenuItem
+          key={item.key}
+          onClick={() => item.action()}
+          className={cn(
+            "flex items-center gap-2",
+            {
+              "text-placeholder": item.disabled,
+            },
+            item.className
+          )}
+          disabled={item.disabled}
+        >
+          {item.icon && <item.icon className={cn("size-3 shrink-0", item.iconClassName)} />}
+          <div>
+            <h5>{item.title}</h5>
+            {item.description && (
+              <p
+                className={cn("whitespace-pre-line text-tertiary", {
+                  "text-placeholder": item.disabled,
+                })}
+              >
+                {item.description}
+              </p>
+            )}
+          </div>
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
+  );
+});