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 } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import { ArrowUp, Paperclip, SmilePlus } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
@@ -17,6 +17,7 @@ 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";
@@ -58,12 +59,177 @@ const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
 ];
 
 const toolbarItems = TOOLBAR_ITEMS.lite;
-const EMOJI_ITEM: ToolbarMenuItem<"emoji"> = {
+const COMMENT_RECENT_EMOJI_STORAGE_KEY = "nodedc-comment-emoji-recent";
-  itemKey: "emoji",
+const COMMENT_RECENT_EMOJI_LIMIT = 8;
-  renderKey: "emoji",
+const COMMENT_EMOJIS = [
-  name: "Emoji",
+  "😀",
-  icon: SmilePlus,
+  "😃",
-  editors: ["lite", "document"],
+  "😄",
+  "😁",
+  "😆",
+  "😅",
+  "🤣",
+  "😂",
+  "🙂",
+  "😉",
+  "😊",
+  "😇",
+  "🥰",
+  "😍",
+  "🤩",
+  "😘",
+  "😗",
+  "😚",
+  "😋",
+  "😛",
+  "😜",
+  "🤪",
+  "🫠",
+  "🤗",
+  "🤔",
+  "🫡",
+  "🤝",
+  "👏",
+  "🙌",
+  "👍",
+  "👎",
+  "🔥",
+  "💯",
+  "✨",
+  "🎉",
+  "❤️",
+  "🧡",
+  "💛",
+  "💚",
+  "💙",
+  "💜",
+  "🤍",
+  "🤎",
+  "🖤",
+  "😎",
+  "🤓",
+  "🥳",
+  "😴",
+  "🤯",
+  "😬",
+  "😌",
+  "🥲",
+  "😭",
+  "😡",
+  "🤮",
+  "🤢",
+  "🤡",
+  "👀",
+  "🙏",
+  "👌",
+  "✅",
+  "❌",
+];
+
+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) {
@@ -83,6 +249,7 @@ export function IssueCommentToolbar(props: Props) {
   } = props;
   // State to manage active states of toolbar items
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
 
   // Function to update active states
   const updateActiveStates = useCallback(() => {
@@ -125,15 +292,11 @@ export function IssueCommentToolbar(props: Props) {
               <Paperclip className="h-4 w-4" strokeWidth={2} />
             </button>
           </Tooltip>
-          <Tooltip tooltipContent="Emoji">
+          <CompactCommentEmojiPicker
-            <button
+            isOpen={isEmojiPickerOpen}
-              type="button"
+            onOpenChange={setIsEmojiPickerOpen}
-              onClick={() => executeCommand(EMOJI_ITEM)}
+            onEmojiSelect={(emoji) => editorRef?.setEditorValueAtCursorPosition(emoji)}
-              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} />
-            </button>
-          </Tooltip>
         </div>
         {showSubmitButton && (
           <button

plane-src/packages/editor/src/core/components/menus/menu-items.ts

@@ -27,6 +27,7 @@ import {
   MinusSquare,
   Palette,
   AlignCenter,
+  SmilePlus,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { LinkIcon } from "@plane/propel/icons";
@@ -37,6 +38,7 @@ import {
   insertHorizontalRule,
   insertImage,
   insertTableCommand,
+  openEmojiPicker,
   setLinkEditor,
   setText,
   setTextAlign,
@@ -255,6 +257,14 @@ export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => (
   icon: AlignCenter,
 });
 
+export const EmojiItem = (editor: Editor): EditorMenuItem<"emoji"> => ({
+  key: "emoji",
+  name: "Emoji",
+  isActive: () => false,
+  command: () => openEmojiPicker(editor),
+  icon: SmilePlus,
+});
+
 export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEditorCommands>[] => {
   if (!editor) return [];
 
@@ -282,5 +292,6 @@ export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEdito
     TextColorItem(editor),
     BackgroundColorItem(editor),
     TextAlignItem(editor),
+    EmojiItem(editor),
   ] as EditorMenuItem<TEditorCommands>[];
 };

plane-src/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx

@@ -4,20 +4,68 @@
  * See the LICENSE file for details.
  */
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { EmojiPicker } from "frimousse";
 import { cn } from "../../utils";
 
 type EmojiRootProps = {
   onChange: (value: string) => void;
+  categoryHeadersHidden?: boolean;
+  recentEmojiLimit?: number;
+  recentEmojiStorageKey?: string;
+  recentEmojisHidden?: boolean;
   searchPlaceholder?: string;
   searchDisabled?: boolean;
+  searchHidden?: boolean;
+  skinToneSelectorHidden?: boolean;
+};
+
+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 writeRecentEmojis = (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;
 };
 
 export function EmojiRoot(props: EmojiRootProps) {
-  const { onChange, searchPlaceholder = "Search", searchDisabled = false } = props;
+  const {
+    onChange,
+    categoryHeadersHidden = false,
+    recentEmojiLimit = 12,
+    recentEmojiStorageKey = "nodedc-recent-emojis",
+    recentEmojisHidden = true,
+    searchPlaceholder = "Search",
+    searchDisabled = false,
+    searchHidden = false,
+    skinToneSelectorHidden = false,
+  } = props;
   const searchWrapperRef = useRef<HTMLDivElement>(null);
+  const [recentEmojis, setRecentEmojis] = useState<string[]>(() => readRecentEmojis(recentEmojiStorageKey));
+
   useEffect(() => {
+    if (searchHidden) return;
+
     const focusInput = () => {
       const searchWrapper = searchWrapperRef.current;
       if (searchWrapper) {
@@ -29,41 +77,83 @@ export function EmojiRoot(props: EmojiRootProps) {
       }
     };
     focusInput();
-  }, []);
+  }, [searchHidden]);
+
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      if (!recentEmojisHidden) {
+        setRecentEmojis(writeRecentEmojis(recentEmojiStorageKey, emoji, recentEmojiLimit));
+      }
+
+      onChange(emoji);
+    },
+    [onChange, recentEmojiLimit, recentEmojiStorageKey, recentEmojisHidden]
+  );
 
   return (
     <EmojiPicker.Root
       data-slot="emoji-picker"
       className="isolate flex h-full w-full flex-col rounded-md border-none p-2"
-      onEmojiSelect={(val) => onChange(val.emoji)}
+      onEmojiSelect={(val) => handleEmojiSelect(val.emoji)}
     >
-      <div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
+      {(!searchHidden || !skinToneSelectorHidden) && (
-        <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
+        <div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
-          <EmojiPicker.Search
+          {!searchHidden && (
-            placeholder={searchPlaceholder}
+            <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
-            disabled={searchDisabled}
+              <EmojiPicker.Search
-            className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
+                placeholder={searchPlaceholder}
-          />
+                disabled={searchDisabled}
+                className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
+              />
+            </div>
+          )}
+          {!skinToneSelectorHidden && (
+            <EmojiPicker.SkinToneSelector
+              data-slot="emoji-picker-skin-tone-selector"
+              className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
+            />
+          )}
         </div>
-        <EmojiPicker.SkinToneSelector
+      )}
-          data-slot="emoji-picker-skin-tone-selector"
+      {!recentEmojisHidden && recentEmojis.length > 0 && (
-          className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
+        <div className="border-b border-subtle/60 px-2 pb-2 pt-1">
-        />
+          <div className="flex flex-wrap gap-1.5">
-      </div>
+            {recentEmojis.map((emoji) => (
+              <button
+                key={emoji}
+                type="button"
+                onClick={() => handleEmojiSelect(emoji)}
+                className="flex size-8 items-center justify-center rounded-md text-16 transition-colors hover:bg-layer-1"
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
       <EmojiPicker.Viewport data-slot="emoji-picker-content" className={cn("relative flex-1 outline-none")}>
         <EmojiPicker.List
           data-slot="emoji-picker-list"
           className={cn("pb-2 select-none")}
           components={{
-            CategoryHeader: ({ category, ...props }) => (
+            CategoryHeader: categoryHeadersHidden
-              <div
+              ? ({ ...props }) => (
-                data-slot="emoji-picker-list-category-header"
+                  <div
-                className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
+                    data-slot="emoji-picker-list-category-header"
-                {...props}
+                    className="pointer-events-none h-0 overflow-hidden p-0 text-[0]"
-              >
+                    aria-hidden="true"
-                {category.label}
+                    {...props}
-              </div>
+                  />
-            ),
+                )
+              : ({ category, ...props }) => (
+                  <div
+                    data-slot="emoji-picker-list-category-header"
+                    className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
+                    {...props}
+                  >
+                    {category.label}
+                  </div>
+                ),
             Row: ({ children, ...props }) => (
               <div data-slot="emoji-picker-list-row" className="scroll-my-1.5 px-1.5" {...props}>
                 {children}

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

@@ -16,16 +16,22 @@ export interface EmojiReactionPickerProps {
   isOpen: boolean;
   handleToggle: (value: boolean) => void;
   buttonClassName?: string;
+  categoryHeadersHidden?: boolean;
   closeOnSelect?: boolean;
   disabled?: boolean;
   dropdownClassName?: string;
   label: React.ReactNode;
   onChange: (emoji: string) => void;
   placement?: TPlacement;
+  recentEmojiLimit?: number;
+  recentEmojiStorageKey?: string;
+  recentEmojisHidden?: boolean;
   searchDisabled?: boolean;
+  searchHidden?: boolean;
   searchPlaceholder?: string;
   side?: TSide;
   align?: TAlign;
+  skinToneSelectorHidden?: boolean;
 }
 
 export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
@@ -33,16 +39,22 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
     isOpen,
     handleToggle,
     buttonClassName,
+    categoryHeadersHidden = false,
     closeOnSelect = true,
     disabled = false,
     dropdownClassName,
     label,
     onChange,
     placement = "bottom-start",
+    recentEmojiLimit = 12,
+    recentEmojiStorageKey,
+    recentEmojisHidden = true,
     searchDisabled = false,
+    searchHidden = false,
     searchPlaceholder = "Search",
     side = "bottom",
     align = "start",
+    skinToneSelectorHidden = false,
   } = props;
 
   // side and align calculations
@@ -78,9 +90,15 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
       >
         <div className="h-80 overflow-hidden overflow-y-auto">
           <EmojiRoot
+            categoryHeadersHidden={categoryHeadersHidden}
             onChange={handleEmojiChange}
+            recentEmojiLimit={recentEmojiLimit}
+            recentEmojiStorageKey={recentEmojiStorageKey}
+            recentEmojisHidden={recentEmojisHidden}
+            searchHidden={searchHidden}
             searchPlaceholder={searchPlaceholder}
             searchDisabled={searchDisabled}
+            skinToneSelectorHidden={skinToneSelectorHidden}
           />
         </div>
       </Popover.Panel>