UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: локальный emoji popup для комментариев деталей задач

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">
-        <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
-          <EmojiPicker.Search
-            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"
-          />
+      {(!searchHidden || !skinToneSelectorHidden) && (
+        <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 && (
+            <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
+              <EmojiPicker.Search
+                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"
-          className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
-        />
-      </div>
+      )}
+      {!recentEmojisHidden && recentEmojis.length > 0 && (
+        <div className="border-b border-subtle/60 px-2 pb-2 pt-1">
+          <div className="flex flex-wrap gap-1.5">
+            {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 }) => (
-              <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>
-            ),
+            CategoryHeader: categoryHeadersHidden
+              ? ({ ...props }) => (
+                  <div
+                    data-slot="emoji-picker-list-category-header"
+                    className="pointer-events-none h-0 overflow-hidden p-0 text-[0]"
+                    aria-hidden="true"
+                    {...props}
+                  />
+                )
+              : ({ 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>