UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: унификация emoji popup в деталях задач и реакциях

plane-src/apps/web/core/components/editor/lite-text/toolbar.tsx

@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { ArrowUp, Paperclip, SmilePlus } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
@@ -17,12 +17,12 @@ import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { GlobeIcon, LockIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
-import { Popover } from "@plane/propel/popover";
 import { Tooltip } from "@plane/propel/tooltip";
 // constants
 import { cn } from "@plane/utils";
 import type { ToolbarMenuItem } from "@/constants/editor";
 import { IMAGE_ITEM, TOOLBAR_ITEMS } from "@/constants/editor";
+import { MinimalEmojiPicker } from "@/components/emoji/minimal-picker";
 // helpers
 
 type Props = {
@@ -59,178 +59,6 @@ const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
 ];
 
 const toolbarItems = TOOLBAR_ITEMS.lite;
-const COMMENT_RECENT_EMOJI_STORAGE_KEY = "nodedc-comment-emoji-recent";
-const COMMENT_RECENT_EMOJI_LIMIT = 8;
-const COMMENT_EMOJIS = [
-  "😀",
-  "😃",
-  "😄",
-  "😁",
-  "😆",
-  "😅",
-  "🤣",
-  "😂",
-  "🙂",
-  "😉",
-  "😊",
-  "😇",
-  "🥰",
-  "😍",
-  "🤩",
-  "😘",
-  "😗",
-  "😚",
-  "😋",
-  "😛",
-  "😜",
-  "🤪",
-  "🫠",
-  "🤗",
-  "🤔",
-  "🫡",
-  "🤝",
-  "👏",
-  "🙌",
-  "👍",
-  "👎",
-  "🔥",
-  "💯",
-  "✨",
-  "🎉",
-  "❤️",
-  "🧡",
-  "💛",
-  "💚",
-  "💙",
-  "💜",
-  "🤍",
-  "🤎",
-  "🖤",
-  "😎",
-  "🤓",
-  "🥳",
-  "😴",
-  "🤯",
-  "😬",
-  "😌",
-  "🥲",
-  "😭",
-  "😡",
-  "🤮",
-  "🤢",
-  "🤡",
-  "👀",
-  "🙏",
-  "👌",
-  "✅",
-  "❌",
-];
-
-const readRecentCommentEmojis = (storageKey: string) => {
-  if (typeof window === "undefined") return [];
-
-  try {
-    const value = window.localStorage.getItem(storageKey);
-    if (!value) return [];
-
-    const parsed = JSON.parse(value);
-    return Array.isArray(parsed) ? parsed.filter((emoji): emoji is string => typeof emoji === "string") : [];
-  } catch {
-    return [];
-  }
-};
-
-const writeRecentCommentEmoji = (storageKey: string, emoji: string, limit: number) => {
-  if (typeof window === "undefined") return [];
-
-  const next = [emoji, ...readRecentCommentEmojis(storageKey).filter((value) => value !== emoji)].slice(0, limit);
-
-  try {
-    window.localStorage.setItem(storageKey, JSON.stringify(next));
-  } catch {
-    return next;
-  }
-
-  return next;
-};
-
-type CompactCommentEmojiPickerProps = {
-  isOpen: boolean;
-  onEmojiSelect: (emoji: string) => void;
-  onOpenChange: (value: boolean) => void;
-};
-
-const CompactCommentEmojiPicker: React.FC<CompactCommentEmojiPickerProps> = ({
-  isOpen,
-  onEmojiSelect,
-  onOpenChange,
-}) => {
-  const [recentEmojis, setRecentEmojis] = useState<string[]>(() =>
-    readRecentCommentEmojis(COMMENT_RECENT_EMOJI_STORAGE_KEY)
-  );
-
-  const handleEmojiSelect = useCallback(
-    (emoji: string) => {
-      setRecentEmojis(
-        writeRecentCommentEmoji(COMMENT_RECENT_EMOJI_STORAGE_KEY, emoji, COMMENT_RECENT_EMOJI_LIMIT)
-      );
-      onEmojiSelect(emoji);
-      onOpenChange(false);
-    },
-    [onEmojiSelect, onOpenChange]
-  );
-
-  const mainEmojis = useMemo(
-    () => COMMENT_EMOJIS.filter((emoji) => !recentEmojis.includes(emoji)),
-    [recentEmojis]
-  );
-
-  const renderEmojiButton = (emoji: string, isRecent = false) => (
-    <button
-      key={`${isRecent ? "recent" : "main"}-${emoji}`}
-      type="button"
-      onMouseDown={(event) => event.preventDefault()}
-      onClick={() => handleEmojiSelect(emoji)}
-      className={cn(
-        "grid place-items-center rounded-[14px] text-[1.35rem] leading-none transition-colors hover:bg-layer-1",
-        isRecent ? "size-9" : "h-9 w-9"
-      )}
-    >
-      {emoji}
-    </button>
-  );
-
-  return (
-    <Popover open={isOpen} onOpenChange={onOpenChange}>
-      <Popover.Button className="outline-none">
-        <Tooltip tooltipContent="Emoji">
-          <div className="grid size-10 place-items-center rounded-[16px] bg-layer-1/85 text-secondary transition-colors hover:bg-layer-1 focus-visible:outline-none">
-            <SmilePlus className="h-4 w-4" strokeWidth={2} />
-          </div>
-        </Tooltip>
-      </Popover.Button>
-      <Popover.Panel
-        positionerClassName="z-50"
-        className="nodedc-dropdown-surface my-1 w-[22rem] overflow-hidden rounded-[20px] p-3"
-        side="top"
-        align="start"
-        sideOffset={8}
-        data-prevent-outside-click="true"
-        onMouseDown={(event) => event.stopPropagation()}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="max-h-80 overflow-y-auto pr-1">
-          {recentEmojis.length > 0 && (
-            <div className="mb-2 flex flex-wrap gap-1.5 border-b border-subtle/60 pb-2">
-              {recentEmojis.map((emoji) => renderEmojiButton(emoji, true))}
-            </div>
-          )}
-          <div className="grid grid-cols-8 gap-1.5">{mainEmojis.map((emoji) => renderEmojiButton(emoji))}</div>
-        </div>
-      </Popover.Panel>
-    </Popover>
-  );
-};
 
 export function IssueCommentToolbar(props: Props) {
   const { t } = useTranslation();
@@ -292,10 +120,18 @@ export function IssueCommentToolbar(props: Props) {
               <Paperclip className="h-4 w-4" strokeWidth={2} />
             </button>
           </Tooltip>
-          <CompactCommentEmojiPicker
+          <MinimalEmojiPicker
+            label={
+              <Tooltip tooltipContent="Emoji">
+                <div className="grid size-10 place-items-center rounded-[16px] bg-layer-1/85 text-secondary transition-colors hover:bg-layer-1 focus-visible:outline-none">
+                  <SmilePlus className="h-4 w-4" strokeWidth={2} />
+                </div>
+              </Tooltip>
+            }
             isOpen={isEmojiPickerOpen}
             onOpenChange={setIsEmojiPickerOpen}
             onEmojiSelect={(emoji) => editorRef?.setEditorValueAtCursorPosition(emoji)}
+            emojiStorageKey="nodedc-comment-emoji-recent"
           />
         </div>
         {showSubmitButton && (

plane-src/apps/web/core/components/emoji/minimal-picker.tsx

@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useMemo, useState } from "react";
+import { Popover } from "@plane/propel/popover";
+import { cn } from "@plane/utils";
+import type { TAlign, TPlacement, TSide } from "@plane/propel/utils/placement";
+
+const DEFAULT_RECENT_EMOJI_LIMIT = 8;
+const DEFAULT_EMOJIS = [
+  "😀",
+  "😃",
+  "😄",
+  "😁",
+  "😆",
+  "😅",
+  "🤣",
+  "😂",
+  "🙂",
+  "😉",
+  "😊",
+  "😇",
+  "🥰",
+  "😍",
+  "🤩",
+  "😘",
+  "😗",
+  "😚",
+  "😋",
+  "😛",
+  "😜",
+  "🤪",
+  "🫠",
+  "🤗",
+  "🤔",
+  "🫡",
+  "🤝",
+  "👏",
+  "🙌",
+  "👍",
+  "👎",
+  "🔥",
+  "💯",
+  "✨",
+  "🎉",
+  "❤️",
+  "🧡",
+  "💛",
+  "💚",
+  "💙",
+  "💜",
+  "🤍",
+  "🤎",
+  "🖤",
+  "😎",
+  "🤓",
+  "🥳",
+  "😴",
+  "🤯",
+  "😬",
+  "😌",
+  "🥲",
+  "😭",
+  "😡",
+  "🤮",
+  "🤢",
+  "🤡",
+  "👀",
+  "🙏",
+  "👌",
+  "✅",
+  "❌",
+];
+
+const readRecentEmojis = (storageKey: string) => {
+  if (typeof window === "undefined") return [];
+
+  try {
+    const value = window.localStorage.getItem(storageKey);
+    if (!value) return [];
+
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed.filter((emoji): emoji is string => typeof emoji === "string") : [];
+  } catch {
+    return [];
+  }
+};
+
+const writeRecentEmoji = (storageKey: string, emoji: string, limit: number) => {
+  if (typeof window === "undefined") return [];
+
+  const next = [emoji, ...readRecentEmojis(storageKey).filter((value) => value !== emoji)].slice(0, limit);
+
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(next));
+  } catch {
+    return next;
+  }
+
+  return next;
+};
+
+type MinimalEmojiPickerProps = {
+  align?: TAlign;
+  disabled?: boolean;
+  dropdownClassName?: string;
+  emojiStorageKey?: string;
+  isOpen: boolean;
+  label: React.ReactNode;
+  onEmojiSelect: (emoji: string) => void;
+  onOpenChange: (value: boolean) => void;
+  placement?: TPlacement;
+  recentEmojiLimit?: number;
+  side?: TSide;
+  sideOffset?: number;
+};
+
+export const MinimalEmojiPicker: React.FC<MinimalEmojiPickerProps> = ({
+  align = "start",
+  disabled = false,
+  dropdownClassName,
+  emojiStorageKey = "nodedc-recent-emojis",
+  isOpen,
+  label,
+  onEmojiSelect,
+  onOpenChange,
+  placement = "top-start",
+  recentEmojiLimit = DEFAULT_RECENT_EMOJI_LIMIT,
+  side = "top",
+  sideOffset = 8,
+}) => {
+  const [recentEmojis, setRecentEmojis] = useState<string[]>(() => readRecentEmojis(emojiStorageKey));
+
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      setRecentEmojis(writeRecentEmoji(emojiStorageKey, emoji, recentEmojiLimit));
+      onEmojiSelect(emoji);
+      onOpenChange(false);
+    },
+    [emojiStorageKey, onEmojiSelect, onOpenChange, recentEmojiLimit]
+  );
+
+  const mainEmojis = useMemo(
+    () => DEFAULT_EMOJIS.filter((emoji) => !recentEmojis.includes(emoji)),
+    [recentEmojis]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={onOpenChange}>
+      <Popover.Button className="outline-none" disabled={disabled}>
+        {label}
+      </Popover.Button>
+      <Popover.Panel
+        positionerClassName="z-50"
+        className={cn("nodedc-dropdown-surface my-1 w-[22rem] overflow-hidden rounded-[20px] p-3", dropdownClassName)}
+        placement={placement}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        data-prevent-outside-click="true"
+        onMouseDown={(event) => event.stopPropagation()}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="max-h-80 overflow-y-auto pr-1">
+          {recentEmojis.length > 0 && (
+            <div className="mb-2 flex flex-wrap gap-1.5 border-b border-subtle/60 pb-2">
+              {recentEmojis.map((emoji) => (
+                <button
+                  key={`recent-${emoji}`}
+                  type="button"
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => handleEmojiSelect(emoji)}
+                  className="grid size-9 place-items-center rounded-[14px] text-[1.35rem] leading-none transition-colors hover:bg-layer-1"
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="grid grid-cols-8 gap-1.5">
+            {mainEmojis.map((emoji) => (
+              <button
+                key={`main-${emoji}`}
+                type="button"
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => handleEmojiSelect(emoji)}
+                className="grid h-9 w-9 place-items-center rounded-[14px] text-[1.35rem] leading-none transition-colors hover:bg-layer-1"
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+};

plane-src/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx

@@ -7,13 +7,14 @@
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import { EmojiReactionGroup } from "@plane/propel/emoji-reaction";
 import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
+import { MinimalEmojiPicker } from "@/components/emoji/minimal-picker";
 
 export type TIssueCommentReaction = {
   workspaceSlug: string;
@@ -110,24 +111,28 @@ export const IssueCommentReaction = observer(function IssueCommentReaction(props
 
   const handleReactionClick = (emoji: string) => {
     if (disabled) return;
-    // Convert emoji back to decimal string format for the API
+    const reactionString = Array.from(emoji)
-    const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
+      .map((char) => char.codePointAt(0))
-    const reactionString = emojiCodePoints.join("-");
+      .join("-");
     issueCommentReactionOperations.react(reactionString);
   };
 
   const handleEmojiSelect = (emoji: string) => {
-    // emoji is already in decimal string format from EmojiReactionPicker
+    // Convert emoji back to decimal string format for the API
-    issueCommentReactionOperations.react(emoji);
+    const reactionString = Array.from(emoji)
+      .map((char) => char.codePointAt(0))
+      .join("-");
+    issueCommentReactionOperations.react(reactionString);
   };
 
   return (
     <div className="relative mt-4">
-      <EmojiReactionPicker
+      <MinimalEmojiPicker
         isOpen={isPickerOpen}
-        handleToggle={setIsPickerOpen}
+        onOpenChange={setIsPickerOpen}
-        onChange={handleEmojiSelect}
+        onEmojiSelect={handleEmojiSelect}
         disabled={disabled}
+        emojiStorageKey="nodedc-comment-reactions-recent"
         label={
           <EmojiReactionGroup
             reactions={reactions}

plane-src/apps/web/core/components/issues/issue-detail/reactions/issue.tsx

@@ -7,13 +7,14 @@
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
-import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import { EmojiReactionGroup } from "@plane/propel/emoji-reaction";
 import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
 // hooks
 // ui
 import { cn } from "@plane/utils";
+import { MinimalEmojiPicker } from "@/components/emoji/minimal-picker";
 // helpers
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
@@ -116,24 +117,28 @@ export const IssueReaction = observer(function IssueReaction(props: TIssueReacti
 
   const handleReactionClick = (emoji: string) => {
     if (disabled) return;
-    // Convert emoji back to decimal string format for the API
+    const reactionString = Array.from(emoji)
-    const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
+      .map((char) => char.codePointAt(0))
-    const reactionString = emojiCodePoints.join("-");
+      .join("-");
     issueReactionOperations.react(reactionString);
   };
 
   const handleEmojiSelect = (emoji: string) => {
-    // emoji is already in decimal string format from EmojiReactionPicker
+    // Convert emoji back to decimal string format for the API
-    issueReactionOperations.react(emoji);
+    const reactionString = Array.from(emoji)
+      .map((char) => char.codePointAt(0))
+      .join("-");
+    issueReactionOperations.react(reactionString);
   };
 
   return (
     <div className={cn("relative mt-4", className)}>
-      <EmojiReactionPicker
+      <MinimalEmojiPicker
         isOpen={isPickerOpen}
-        handleToggle={setIsPickerOpen}
+        onOpenChange={setIsPickerOpen}
-        onChange={handleEmojiSelect}
+        onEmojiSelect={handleEmojiSelect}
         disabled={disabled}
+        emojiStorageKey="nodedc-issue-reactions-recent"
         label={
           <EmojiReactionGroup
             reactions={reactions}