SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
DCCONSTRUCTIONS 2026-04-22 20:57:24 +03:00
parent 2ec2a4fcd3
commit b8f2654e80
4 changed files with 239 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 && (

200
plane-src/apps/web/core/components/emoji/minimal-picker.tsx Normal file
View File

@ -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>
);
};

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

@ -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 emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
const reactionString = emojiCodePoints.join("-");
const reactionString = Array.from(emoji)
.map((char) => char.codePointAt(0))
.join("-");
issueCommentReactionOperations.react(reactionString);
};
const handleEmojiSelect = (emoji: string) => {
// emoji is already in decimal string format from EmojiReactionPicker
issueCommentReactionOperations.react(emoji);
// Convert emoji back to decimal string format for the API
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}
onChange={handleEmojiSelect}
onOpenChange={setIsPickerOpen}
onEmojiSelect={handleEmojiSelect}
disabled={disabled}
emojiStorageKey="nodedc-comment-reactions-recent"
label={
<EmojiReactionGroup
reactions={reactions}

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

@ -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 emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
const reactionString = emojiCodePoints.join("-");
const reactionString = Array.from(emoji)
.map((char) => char.codePointAt(0))
.join("-");
issueReactionOperations.react(reactionString);
};
const handleEmojiSelect = (emoji: string) => {
// emoji is already in decimal string format from EmojiReactionPicker
issueReactionOperations.react(emoji);
// Convert emoji back to decimal string format for the API
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}
onChange={handleEmojiSelect}
onOpenChange={setIsPickerOpen}
onEmojiSelect={handleEmojiSelect}
disabled={disabled}
emojiStorageKey="nodedc-issue-reactions-recent"
label={
<EmojiReactionGroup
reactions={reactions}