[WEB-4320] refactor: migrate emoji reactions to propel#8039
[WEB-4320] refactor: migrate emoji reactions to propel#8039
Conversation
…grate-emoji-components-to-propel
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughRefactors reaction UIs to use Propel's EmojiReactionPicker/EmojiReactionGroup, removes legacy ReactionSelector and many @plane/ui emoji picker modules, migrates Logo and picker imports to Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CommentUI
participant EmojiPicker
participant API
participant Auth
User->>CommentUI: open reactions UI
CommentUI->>EmojiPicker: render label (EmojiReactionGroup) + control
User->>EmojiPicker: click/select emoji
alt authenticated
EmojiPicker->>CommentUI: onChange / onReactionClick (emoji)
CommentUI->>CommentUI: normalize emoji -> decimal-string
CommentUI->>API: POST reaction with decimal-string
API-->>CommentUI: success
CommentUI->>User: updated reactions
else unauthenticated
EmojiPicker->>CommentUI: interaction
CommentUI->>Auth: navigate to login/next_path
end
sequenceDiagram
participant Editor
participant OldPicker as Old EmojiIconPicker
participant NewPicker as Propel EmojiPicker
participant Store
Editor->>OldPicker: (old) returned unified hex
OldPicker-->>Editor: unified hex
Editor->>Editor: convertHexEmojiToDecimal(unified) -> decimal + imageUrl
Editor->>Store: update logo { value: decimal, url: imageUrl }
Editor->>NewPicker: (new) returns decimal-string
NewPicker-->>Editor: { value: decimalString }
Editor->>Editor: use raw value.value, set url = undefined
Editor->>Store: update logo { value: decimalString, url: undefined }
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (3)📚 Learning: 2025-10-09T20:42:31.843ZApplied to files:
📚 Learning: 2025-10-21T17:22:05.204ZApplied to files:
📚 Learning: 2025-09-02T08:14:49.260ZApplied to files:
🧬 Code graph analysis (1)apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (3)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR removes the emoji-picker-react dependency and associated emoji functionality from the @plane/ui package, consolidating emoji picker capabilities in the @plane/propel package. It also introduces new emoji reaction components using Propel's design system.
Key changes:
- Removed
emoji-picker-reactdependency and all emoji-related exports from@plane/uipackage - Updated emoji conversion to use decimal string format instead of
convertHexEmojiToDecimalutility - Replaced custom
ReactionSelectorcomponents with new PropelEmojiReactionGroupandEmojiReactionPickercomponents - Added new
AddReactionIconto the Propel icon set
Reviewed Changes
Copilot reviewed 62 out of 63 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/package.json | Removed emoji-picker-react dependency |
| packages/ui/src/emoji/* | Deleted all emoji-related components from ui package |
| packages/propel/src/icons/actions/add-reaction-icon.tsx | Added new AddReactionIcon component |
| packages/propel/src/emoji-reaction/* | Updated to use decimal emoji string format |
| packages/editor/src/core/extensions/callout/* | Updated to use TLogoProps from types package and new emoji format |
| apps/web/core/components/issues/issue-detail/reactions/* | Migrated to Propel emoji reaction components |
| apps/web/core/store/pages/base-page.ts | Updated emoji handling to use decimal format directly |
| apps/space/core/components/issues/reactions/* | Migrated to Propel emoji reaction components |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx (1)
62-70: Await the removal API call to keep error handling intactThe
removeCommentReactionpromise is no longer awaited, so the try/catch never sees failures and we still show a success toast even if the API rejects (plus the rejection becomes unhandled). Please restore theawaitso errors propagate correctly.- removeCommentReaction(workspaceSlug, projectId, commentId, reaction, currentUser.id); + await removeCommentReaction(workspaceSlug, projectId, commentId, reaction, currentUser.id);
🧹 Nitpick comments (1)
apps/web/ce/components/breadcrumbs/project.tsx (1)
29-30: Remove orphaned comment.The comment
// store hookson line 29 has no associated code below it and appears to be leftover from a previous refactor.Apply this diff to remove the orphaned comment:
const currentProjectDetails = getPartialProjectById(projectId); - - // store hooks - + if (!currentProjectDetails) return null;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (62)
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx(3 hunks)apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx(3 hunks)apps/space/core/components/ui/index.ts(0 hunks)apps/space/core/components/ui/reaction-selector.tsx(0 hunks)apps/web/ce/components/breadcrumbs/project.tsx(1 hunks)apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx(2 hunks)apps/web/core/components/analytics/overview/active-project-item.tsx(1 hunks)apps/web/core/components/analytics/select/project.tsx(1 hunks)apps/web/core/components/analytics/work-items/workitems-insight-table.tsx(1 hunks)apps/web/core/components/comments/comment-reaction.tsx(2 hunks)apps/web/core/components/common/switcher-label.tsx(1 hunks)apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx(1 hunks)apps/web/core/components/dropdowns/project/base.tsx(1 hunks)apps/web/core/components/home/widgets/recents/page.tsx(1 hunks)apps/web/core/components/home/widgets/recents/project.tsx(1 hunks)apps/web/core/components/issues/issue-detail/reactions/index.ts(1 hunks)apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx(4 hunks)apps/web/core/components/issues/issue-detail/reactions/issue.tsx(4 hunks)apps/web/core/components/issues/issue-detail/reactions/reaction-selector.tsx(0 hunks)apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx(1 hunks)apps/web/core/components/issues/issue-layouts/utils.tsx(1 hunks)apps/web/core/components/pages/editor/header/logo-picker.tsx(2 hunks)apps/web/core/components/pages/editor/header/root.tsx(2 hunks)apps/web/core/components/pages/list/block.tsx(1 hunks)apps/web/core/components/pages/modals/page-form.tsx(3 hunks)apps/web/core/components/power-k/menus/projects.tsx(1 hunks)apps/web/core/components/profile/sidebar.tsx(1 hunks)apps/web/core/components/project/card.tsx(1 hunks)apps/web/core/components/project/create/header.tsx(1 hunks)apps/web/core/components/project/form.tsx(1 hunks)apps/web/core/components/project/multi-select-modal.tsx(1 hunks)apps/web/core/components/project/project-feature-update.tsx(1 hunks)apps/web/core/components/settings/project/sidebar/root.tsx(1 hunks)apps/web/core/components/views/form.tsx(1 hunks)apps/web/core/components/views/view-list-item.tsx(1 hunks)apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx(1 hunks)apps/web/core/components/workspace/sidebar/projects-list-item.tsx(1 hunks)apps/web/core/store/pages/base-page.ts(2 hunks)packages/editor/package.json(1 hunks)packages/editor/src/core/extensions/callout/logo-selector.tsx(4 hunks)packages/editor/src/core/extensions/callout/utils.ts(3 hunks)packages/propel/src/calendar/root.tsx(1 hunks)packages/propel/src/emoji-icon-picker/index.ts(1 hunks)packages/propel/src/emoji-icon-picker/logo.tsx(1 hunks)packages/propel/src/emoji-icon-picker/lucide-icons.tsx(1 hunks)packages/propel/src/emoji-reaction/emoji-reaction.tsx(3 hunks)packages/propel/src/icons/actions/add-reaction-icon.tsx(1 hunks)packages/propel/src/icons/actions/index.ts(1 hunks)packages/propel/src/icons/constants.tsx(1 hunks)packages/propel/src/icons/registry.ts(2 hunks)packages/propel/src/menu/menu.tsx(1 hunks)packages/ui/package.json(0 hunks)packages/ui/src/emoji/emoji-icon-helper.tsx(0 hunks)packages/ui/src/emoji/emoji-icon-picker-new.tsx(0 hunks)packages/ui/src/emoji/emoji-icon-picker.tsx(0 hunks)packages/ui/src/emoji/helpers.ts(0 hunks)packages/ui/src/emoji/icons-list.tsx(0 hunks)packages/ui/src/emoji/index.ts(0 hunks)packages/ui/src/emoji/logo.tsx(0 hunks)packages/ui/src/emoji/lucide-icons-list.tsx(0 hunks)packages/ui/src/index.ts(0 hunks)
💤 Files with no reviewable changes (13)
- packages/ui/src/index.ts
- apps/space/core/components/ui/index.ts
- packages/ui/src/emoji/emoji-icon-picker-new.tsx
- packages/ui/src/emoji/icons-list.tsx
- packages/ui/package.json
- apps/web/core/components/issues/issue-detail/reactions/reaction-selector.tsx
- packages/ui/src/emoji/index.ts
- packages/ui/src/emoji/emoji-icon-picker.tsx
- apps/space/core/components/ui/reaction-selector.tsx
- packages/ui/src/emoji/lucide-icons-list.tsx
- packages/ui/src/emoji/helpers.ts
- packages/ui/src/emoji/emoji-icon-helper.tsx
- packages/ui/src/emoji/logo.tsx
🧰 Additional context used
🧠 Learnings (13)
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
packages/propel/src/emoji-reaction/emoji-reaction.tsxpackages/propel/src/calendar/root.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/pages/editor/header/logo-picker.tsxapps/web/core/components/common/switcher-label.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/issues/issue-layouts/utils.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsxapps/web/core/components/issues/issue-detail/reactions/issue.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxpackages/editor/src/core/extensions/callout/utils.tsapps/web/core/components/home/widgets/recents/project.tsxapps/space/core/components/issues/reactions/issue-emoji-reactions.tsxapps/web/core/components/issues/issue-detail/reactions/issue-comment.tsxapps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsxapps/web/core/components/analytics/overview/active-project-item.tsxapps/web/core/components/settings/project/sidebar/root.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/views/view-list-item.tsxpackages/editor/src/core/extensions/callout/logo-selector.tsxapps/web/core/components/project/form.tsxpackages/propel/src/emoji-icon-picker/logo.tsxapps/web/core/components/cycles/list/cycle-list-project-group-header.tsxapps/web/core/components/pages/editor/header/root.tsxpackages/propel/src/menu/menu.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/store/pages/base-page.tsapps/web/core/components/comments/comment-reaction.tsxapps/space/core/components/issues/peek-overview/comment/comment-reactions.tsxapps/web/core/components/pages/list/block.tsxapps/web/core/components/pages/modals/page-form.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
packages/propel/src/emoji-reaction/emoji-reaction.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/core/components/issues/issue-detail/reactions/issue.tsxapps/web/core/components/issues/issue-detail/reactions/issue-comment.tsxapps/web/core/components/comments/comment-reaction.tsxapps/web/core/components/pages/list/block.tsx
📚 Learning: 2025-10-01T15:30:17.605Z
Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.
Applied to files:
apps/web/core/components/project/multi-select-modal.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/home/widgets/recents/page.tsxapps/web/core/components/pages/editor/header/logo-picker.tsxapps/web/core/components/common/switcher-label.tsxapps/web/core/components/views/form.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/issues/issue-layouts/utils.tsxapps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsxapps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxpackages/editor/src/core/extensions/callout/utils.tsapps/web/core/components/home/widgets/recents/project.tsxapps/web/core/components/analytics/overview/active-project-item.tsxapps/web/core/components/settings/project/sidebar/root.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/views/view-list-item.tsxpackages/editor/src/core/extensions/callout/logo-selector.tsxapps/web/core/components/project/form.tsxpackages/propel/src/emoji-icon-picker/logo.tsxapps/web/core/components/pages/editor/header/root.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/store/pages/base-page.tspackages/editor/package.jsonapps/web/core/components/pages/list/block.tsxapps/web/core/components/project/card.tsxapps/web/core/components/pages/modals/page-form.tsx
📚 Learning: 2025-05-14T13:16:23.323Z
Learnt from: vamsikrishnamathala
PR: makeplane/plane#7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias `@/plane-web` resolves to the `ce` directory, making imports like `@/plane-web/hooks/use-notification-preview` correctly resolve to files in `web/ce/hooks/`.
Applied to files:
apps/web/core/components/power-k/menus/projects.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/common/switcher-label.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/issues/issue-layouts/utils.tsxapps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/web/core/components/analytics/overview/active-project-item.tsxapps/web/core/components/settings/project/sidebar/root.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/project/form.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxpackages/editor/package.jsonapps/web/core/components/project/card.tsx
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
PR: makeplane/plane#7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/web/core/components/power-k/menus/projects.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/home/widgets/recents/page.tsxapps/web/core/components/pages/editor/header/logo-picker.tsxapps/web/core/components/views/form.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/issues/issue-layouts/utils.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/web/core/components/home/widgets/recents/project.tsxapps/space/core/components/issues/reactions/issue-emoji-reactions.tsxapps/web/core/components/settings/project/sidebar/root.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/views/view-list-item.tsxapps/web/core/components/project/form.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/store/pages/base-page.tsapps/space/core/components/issues/peek-overview/comment/comment-reactions.tsxapps/web/core/components/pages/list/block.tsxapps/web/core/components/project/card.tsxapps/web/core/components/pages/modals/page-form.tsx
📚 Learning: 2025-06-18T09:46:08.566Z
Learnt from: prateekshourya29
PR: makeplane/plane#7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
Applied to files:
apps/web/ce/components/breadcrumbs/project.tsx
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
PR: makeplane/plane#7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/space/core/components/issues/reactions/issue-emoji-reactions.tsxapps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
📚 Learning: 2025-01-24T09:37:19.339Z
Learnt from: mathalav55
PR: makeplane/plane#6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, `ISSUE_DISPLAY_FILTERS_BY_LAYOUT` and `ISSUE_DISPLAY_FILTERS_BY_PAGE` are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
Applied to files:
apps/web/core/components/views/form.tsx
📚 Learning: 2025-10-09T20:43:07.762Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/core/components/new-user-popup.tsx:4-6
Timestamp: 2025-10-09T20:43:07.762Z
Learning: The `next-themes` library is React-compatible and can be used outside of Next.js applications. It's not Next.js-specific despite its name.
Applied to files:
apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
📚 Learning: 2025-10-06T01:44:38.472Z
Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/collapsible/collapsible.stories.tsx:4-4
Timestamp: 2025-10-06T01:44:38.472Z
Learning: In Storybook v9, imports use bare paths instead of scoped packages. For example, `import { useArgs } from "storybook/preview-api"` is correct (not `storybook/preview-api`). This applies to other Storybook modules as well - the scoped storybook/* packages were consolidated into bare "storybook/*" imports.
Applied to files:
apps/web/core/components/project/form.tsx
📚 Learning: 2024-11-28T07:02:54.664Z
Learnt from: mathalav55
PR: makeplane/plane#6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx:11-14
Timestamp: 2024-11-28T07:02:54.664Z
Learning: When components are still located in `core`, it's appropriate for files to import them using `@/components/...`, and the migration to the new import paths is not necessary in such cases.
Applied to files:
apps/web/core/components/project/form.tsxapps/web/core/components/project/card.tsx
📚 Learning: 2025-03-11T19:42:41.769Z
Learnt from: janreges
PR: makeplane/plane#6743
File: packages/i18n/src/store/index.ts:160-161
Timestamp: 2025-03-11T19:42:41.769Z
Learning: In the Plane project, the file 'packages/i18n/src/store/index.ts' already includes support for Polish language translations with the case "pl".
Applied to files:
apps/web/core/components/project/form.tsx
📚 Learning: 2025-08-29T08:45:15.953Z
Learnt from: sriramveeraghanta
PR: makeplane/plane#7672
File: pnpm-workspace.yaml:8-9
Timestamp: 2025-08-29T08:45:15.953Z
Learning: The makeplane/plane repository uses pnpm v10.12.1, which supports onlyBuiltDependencies configuration in pnpm-workspace.yaml files.
Applied to files:
packages/editor/package.json
🧬 Code graph analysis (13)
packages/propel/src/emoji-reaction/emoji-reaction.tsx (1)
packages/propel/src/icons/actions/add-reaction-icon.tsx (1)
AddReactionIcon(6-21)
packages/propel/src/icons/constants.tsx (1)
packages/propel/src/icons/icon.tsx (1)
Icon(10-13)
apps/web/core/components/pages/editor/header/logo-picker.tsx (1)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)
packages/propel/src/icons/actions/add-reaction-icon.tsx (1)
packages/propel/src/icons/icon-wrapper.tsx (1)
IconWrapper(11-42)
packages/propel/src/icons/registry.ts (1)
packages/propel/src/icons/actions/add-reaction-icon.tsx (1)
AddReactionIcon(6-21)
apps/web/core/components/issues/issue-detail/reactions/issue.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
packages/editor/src/core/extensions/callout/logo-selector.tsx (2)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)packages/editor/src/core/extensions/callout/utils.ts (1)
DEFAULT_CALLOUT_BLOCK_ATTRIBUTES(12-20)
apps/web/core/components/pages/editor/header/root.tsx (1)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)
apps/web/core/components/comments/comment-reaction.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/web/core/components/pages/modals/page-form.tsx (1)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: CodeQL analysis (javascript-typescript)
🔇 Additional comments (41)
packages/editor/package.json (1)
46-47: Verify the duplicate dependency removal mentioned in PR objectives.The PR objectives state "removal of a duplicate dependency in editor/package.json," but the only visible change is the reordering of
@plane/utilsto appear after@plane/propel. I don't see any duplicate dependency or a removal in the provided code.Can you clarify:
- Was a duplicate dependency actually removed, or was only the order changed?
- If removed, what was the duplicate entry (e.g., was
@plane/utilslisted twice)?This will help confirm the completeness of the changes in this file.
apps/web/ce/components/breadcrumbs/project.tsx (1)
4-4: LGTM! Import migration aligns with refactor goals.The Logo component import has been successfully migrated to
@plane/propel/emoji-icon-pickeras part of the centralization effort. The usage pattern on line 55 remains unchanged, and the component interface appears fully compatible.apps/web/core/components/workspace/sidebar/projects-list-item.tsx (1)
18-18: LGTM! Clean migration to the propel package.The Logo import has been successfully migrated from a local module to
@plane/propel/emoji-icon-pickeras part of the broader refactoring effort. The component usage remains unchanged throughout the file, preserving existing behavior.apps/web/core/components/project/project-feature-update.tsx (1)
10-10: LGTM! Logo import successfully migrated to propel.The import path change centralizes Logo to the
@plane/propel/emoji-icon-pickerpackage while preserving all existing functionality and usage patterns.apps/web/core/components/dropdowns/project/base.tsx (1)
9-9: LGTM! Logo import migrated correctly.The centralized Logo import is used consistently throughout the component at lines 105, 146, and 165 with no functional changes.
apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx (1)
7-7: LGTM! Consistent Logo import migration.Import successfully migrated to the propel package, preserving existing rendering behavior.
apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx (1)
7-7: LGTM! Logo import migration complete.Import path updated to use the centralized propel package, maintaining existing functionality.
packages/propel/src/menu/menu.tsx (1)
4-4: LGTM! Relative icon imports corrected.The change from absolute to relative imports for Chevron icons within the propel package aligns with the PR's objective to fix relative icon imports. This improves internal module resolution without affecting functionality.
packages/propel/src/calendar/root.tsx (1)
5-5: LGTM! Relative import fix applied.Consistent with the icon import corrections across the propel package, this change improves internal module resolution.
apps/web/core/components/project/multi-select-modal.tsx (1)
9-9: LGTM! Logo import migrated successfully.The centralized Logo import is used correctly at lines 108 and 157 with no functional changes.
packages/propel/src/icons/actions/add-reaction-icon.tsx (1)
1-21: LGTM! New AddReactionIcon implementation looks solid.The component follows established icon patterns with proper use of
React.useId()for unique clip paths, IconWrapper integration, and appropriate prop handling. The SVG correctly renders a smiley face with a plus sign as intended.packages/editor/src/core/extensions/callout/logo-selector.tsx (3)
2-4: LGTM! Import migration is clean.The imports have been successfully migrated to use the centralized
@plane/propel/emoji-icon-pickerpackage with the updatedTLogoPropstype.
21-31: LGTM! Type migration is correct.The
logoValueconstruction correctly uses the newTLogoPropstype and appropriately converts the emoji unicode to a string format.
89-92: LGTM! Default props logic is correct.The
defaultIconColoranddefaultOpenprops correctly derive their values from thelogoValuestate, ensuring the picker opens to the appropriate tab with the right color preselected.apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx (4)
3-9: LGTM! Import migration is complete.The imports correctly include the new Propel emoji reaction components and helpers, with proper separation of type imports per the codebase conventions.
67-86: LGTM! Reaction transformation is well-structured.The memoized transformation correctly converts internal reaction data to the Propel
EmojiReactionTypeformat, includes a sensible limit of 1000 users to prevent memory issues, and properly tracks the current user's reaction state.
100-107: LGTM! Picker selection handler is correct.The handler correctly assumes that
EmojiReactionPickerprovides the emoji in decimal string format, which aligns with the Propel API contract. The inline comment is helpful for maintainability.
109-127: LGTM! New emoji reaction UI is well-integrated.The migration to
EmojiReactionPickerandEmojiReactionGroupis complete and correct. The component properly handles iframe detection, authentication state, and user interactions while providing a cleaner, more maintainable implementation.packages/propel/src/emoji-icon-picker/lucide-icons.tsx (1)
154-154: LGTM! Icon import path updated for module consolidation.The change from an absolute package import to a relative import (
"../icons") aligns with the PR's goal of consolidating icon and emoji resources within theemoji-icon-pickermodule. This is an internal refactor with no functional impact.apps/web/core/components/project/card.tsx (1)
12-12: LGTM! Logo import successfully migrated.The Logo component import has been updated to use the centralized
@plane/propel/emoji-icon-pickerpackage, consistent with the broader refactoring effort across the codebase.apps/web/core/components/analytics/work-items/workitems-insight-table.tsx (1)
8-8: LGTM! Logo import path updated.The Logo import has been successfully migrated to the centralized package. The component usage in the analytics table remains unchanged and correct.
apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx (1)
3-3: LGTM! Logo import migrated for favorites helper.The Logo import has been updated to use the centralized package. The conditional rendering logic for different logo types (material vs lucide) based on entity type remains correct.
apps/web/core/components/common/switcher-label.tsx (1)
2-2: LGTM! Logo import updated in switcher component.The Logo import has been successfully migrated to the centralized package, maintaining the existing conditional rendering logic for project/workspace switchers.
apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx (1)
4-4: LGTM! Logo import updated for filter configuration.The Logo import has been successfully migrated to the centralized package. The separate Avatar import from
@plane/uiis correctly maintained, following the codebase pattern of keeping value imports separated.packages/propel/src/icons/registry.ts (1)
1-1: LGTM! Clean addition to the icon registry.The new AddReactionIcon import and registry entry follow the existing patterns correctly. The icon component implementation exists and is properly structured.
Also applies to: 116-116
apps/web/core/components/profile/sidebar.tsx (1)
16-16: LGTM! Proper migration to centralized Logo component.The Logo import has been correctly migrated from the local path to the centralized
@plane/propel/emoji-icon-pickerpackage. The usage pattern at line 164 remains unchanged, preserving backward compatibility.packages/propel/src/emoji-icon-picker/index.ts (1)
3-3: LGTM! Proper API extension.The logo module export correctly extends the public API of the emoji-icon-picker package, enabling the Logo component to be imported by consumers across the codebase.
apps/web/core/components/home/widgets/recents/project.tsx (1)
3-3: LGTM! Consistent Logo migration.The Logo import has been properly migrated to the centralized package. The usage at line 35 with the
size={16}prop remains consistent with the existing API.apps/web/core/components/pages/list/block.tsx (1)
6-6: LGTM! Clean Logo migration with proper prop usage.The Logo import has been correctly migrated to the centralized package. The usage at line 44 properly specifies both
size={16}andtype="lucide"props, maintaining consistency with the logo system.apps/web/core/components/views/view-list-item.tsx (1)
7-7: LGTM! Proper Logo component migration.The Logo import has been correctly updated to use the centralized package. The usage at line 37 with
size={16}andtype="lucide"props maintains consistency across view-related components.apps/web/core/components/power-k/menus/projects.tsx (1)
5-5: LGTM! Consistent Logo migration for menu context.The Logo import has been properly migrated to the centralized package. The usage at line 22 with
size={14}is appropriately sized for the menu context.apps/web/core/components/settings/project/sidebar/root.tsx (1)
5-5: LGTM! Final Logo migration complete.The Logo import has been correctly migrated to the centralized package. The usage at line 28 relies on the default size, which is appropriate for the settings sidebar context.
packages/propel/src/emoji-icon-picker/logo.tsx (1)
10-12: LGTM! Circular import properly resolved.The change from barrel imports to local relative imports is correct. Since this file is part of the emoji-icon-picker package, importing from the package's own barrel export (
@plane/propel/emoji-icon-picker) would create a circular dependency.apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx (1)
4-4: LGTM! Import path updated correctly.The Logo component import has been successfully migrated to the centralized
@plane/propel/emoji-icon-pickerpackage, aligning with the PR's objective to consolidate emoji/icon components.apps/web/core/components/analytics/overview/active-project-item.tsx (1)
2-3: LGTM! Imports migrated correctly.Both Logo and ProjectIcon imports have been updated to use the centralized propel packages, maintaining consistency with the broader refactoring effort.
apps/web/core/components/issues/issue-layouts/utils.tsx (1)
9-9: LGTM! Import source updated correctly.The Logo component import has been migrated to the centralized package, consistent with the PR's refactoring objectives.
packages/propel/src/icons/actions/index.ts (1)
2-2: LGTM! New icon export added correctly.The AddReactionIcon export follows the established pattern and is properly ordered between the existing action icon exports.
apps/web/core/components/project/create/header.tsx (1)
6-6: LGTM! Emoji picker imports consolidated.The imports have been successfully consolidated to use the centralized
@plane/propel/emoji-icon-pickerpackage for all emoji/icon picker functionality, aligning with the PR's objective to standardize these components.apps/web/core/components/project/form.tsx (1)
11-11: LGTM! Emoji picker imports centralized correctly.All emoji/icon picker related components are now imported from the centralized
@plane/propel/emoji-icon-pickerpackage, maintaining clean separation from other UI components.packages/propel/src/icons/constants.tsx (1)
4-4: Icon registration verified and complete.The AddReactionIcon has been properly registered in both the ActionsIconsMap (constants.tsx:4) and the icon registry (registry.ts:116) with correct import statement. Naming conventions and pattern consistency confirmed across all locations.
apps/web/core/components/comments/comment-reaction.tsx (1)
68-83: Smooth EmojiReactionPicker integrationNice job translating the comment reaction flow onto the shared EmojiReactionPicker/Group primitives. The memoized aggregation keeps tooltip data intact while the new handlers preserve the decimal payload expected by
activityOperations.react, so the UX stays consistent with the old selector without bespoke UI code.
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
Show resolved
Hide resolved
anmolsinghbhatia
requested review from
prateekshourya29 and
vamsikrishnamathala
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
apps/web/core/components/issues/issue-detail/reactions/issue.tsx (1)
13-13: Remove the unused import.The
formatTextListimport is no longer used after the refactoring to Propel components.Apply this diff:
-import { cn, formatTextList } from "@plane/utils"; +import { cn } from "@plane/utils";apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx (1)
87-105: Keepnext_pathintact when forwarding unauthenticated users.The redirect builds
/?next_path=${pathName}?${queryParam}. IfqueryParamcontains&(e.g., multiple filters), everything after the first&is parsed as a separate top-level query parameter, breaking the full path preservation through login.Apply this diff to URL-encode the full next path:
+ const redirectToLogin = () => { + const nextPath = queryParam ? `${pathName}?${queryParam}` : pathName; + router.push(`/?next_path=${encodeURIComponent(nextPath)}`); + }; + const handleEmojiClick = (emoji: string) => { if (!user) { - router.push(`/?next_path=${pathName}?${queryParam}`); + redirectToLogin(); return; } const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0)); const reactionString = emojiCodePoints.join("-"); handleReactionClick(reactionString); }; const handleEmojiSelect = (emoji: string) => { if (!user) { - router.push(`/?next_path=${pathName}?${queryParam}`); + redirectToLogin(); return; } handleReactionClick(emoji); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx(1 hunks)apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx(4 hunks)apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx(3 hunks)apps/web/core/components/comments/comment-reaction.tsx(2 hunks)apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx(4 hunks)apps/web/core/components/issues/issue-detail/reactions/issue.tsx(4 hunks)packages/propel/src/animated-counter/animated-counter.tsx(2 hunks)packages/propel/src/emoji-icon-picker/emoji-picker.tsx(1 hunks)packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx(8 hunks)packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx(1 hunks)packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx(5 hunks)packages/propel/src/emoji-reaction/emoji-reaction.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
🧰 Additional context used
🧠 Learnings (6)
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/core/components/comments/comment-reaction.tsxapps/web/core/components/issues/issue-detail/reactions/issue.tsxpackages/propel/src/emoji-reaction/emoji-reaction.tsxapps/space/core/components/issues/peek-overview/comment/comment-reactions.tsxapps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
apps/web/core/components/comments/comment-reaction.tsxapps/web/core/components/issues/issue-detail/reactions/issue.tsxpackages/propel/src/emoji-reaction/emoji-reaction.tsx
📚 Learning: 2025-10-06T01:44:38.472Z
Learnt from: lifeiscontent
PR: makeplane/plane#7888
File: packages/propel/src/collapsible/collapsible.stories.tsx:4-4
Timestamp: 2025-10-06T01:44:38.472Z
Learning: In Storybook v9, imports use bare paths instead of scoped packages. For example, `import { useArgs } from "storybook/preview-api"` is correct (not `storybook/preview-api`). This applies to other Storybook modules as well - the scoped storybook/* packages were consolidated into bare "storybook/*" imports.
Applied to files:
packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
📚 Learning: 2025-10-21T17:22:05.204Z
Learnt from: lifeiscontent
PR: makeplane/plane#7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.
Applied to files:
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsxapps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
PR: makeplane/plane#7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsxapps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
📚 Learning: 2025-10-09T20:43:07.762Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/core/components/new-user-popup.tsx:4-6
Timestamp: 2025-10-09T20:43:07.762Z
Learning: The `next-themes` library is React-compatible and can be used outside of Next.js applications. It's not Next.js-specific despite its name.
Applied to files:
apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
🧬 Code graph analysis (6)
apps/web/core/components/comments/comment-reaction.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/web/core/components/issues/issue-detail/reactions/issue.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
packages/propel/src/emoji-reaction/emoji-reaction.tsx (2)
packages/propel/src/animated-counter/animated-counter.tsx (1)
AnimatedCounter(16-95)packages/propel/src/icons/actions/add-reaction-icon.tsx (1)
AddReactionIcon(6-21)
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx (2)
packages/utils/src/emoji.ts (1)
groupReactions(53-79)packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx (1)
packages/propel/src/emoji-icon-picker/helper.tsx (1)
stringToEmoji(143-154)
apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx (1)
apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx (1)
IssueEmojiReactions(22-123)
🔇 Additional comments (6)
packages/propel/src/animated-counter/animated-counter.tsx (2)
10-14: LGTM! Content-based sizing improves flexibility.Simplifying
sizeClassesto text-only sizes makes the counter more adaptable to different contexts. The content-driven approach should work well with the emoji reaction components.Optionally verify that reaction counters render correctly across all usage contexts (issue reactions, comment reactions, etc.) to ensure the removal of explicit dimensions doesn't cause any layout shifts in edge cases.
47-47: Nice addition for animation stability.The
min-w-2constraint prevents the container from collapsing during slide transitions, ensuring smooth animations even when counts change between different digit widths.apps/web/core/components/issues/issue-detail/reactions/issue.tsx (1)
114-125: LGTM! Emoji conversion logic is sound.The handlers correctly convert between emoji characters and decimal-string format for the API.
handleReactionClickconverts the display emoji back to the stored format, whilehandleEmojiSelectreceives the decimal format directly from the picker.packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx (1)
36-39: LGTM! Story args initialization improves Storybook experience.Adding initial args to the interactive stories provides better default values in Storybook controls while preserving the render logic.
Also applies to: 83-86, 127-130, 141-144, 183-186
packages/propel/src/emoji-reaction/emoji-reaction.tsx (2)
88-107: LGTM! AddReactionIcon integration is clean.The new
AddReactionIconprovides a semantically appropriate icon for the add reaction button with consistent sizing (h-6 w-6) and styling.
15-37: Based on my search of the codebase, I found no external usage of thesizeprop onEmojiReaction,EmojiReactionGroup, orEmojiReactionButtoncomponents. The onlysizeprop usage found in the emoji-reaction file is on the internalAnimatedCountercomponent (line 76), which is a separate component.This means while removing
sizefrom the public interface definitions is technically a breaking API change, it appears to have zero practical impact because no consumers were actually using it. The prop was likely unused or internal-only.Clarify PR description: removing unused
sizeprop has no practical breaking changes.The PR description stating "No breaking changes (pure refactor)" is accurate in practice. While the
sizeprop was removed fromEmojiReactionProps,EmojiReactionGroupProps, andEmojiReactionButtonProps, the codebase shows no external consumers relied on this prop. This is a safe simplification rather than a true breaking change to dependencies.
apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
Show resolved
Hide resolved
3 participants
📦 Summary
Migrates all emoji reaction components from custom implementations to @plane/propel/emoji-reaction, providing enhanced UI/UX with animated counters, better tooltips, and consistent styling across web and space applications.
🎯 Motivation
🔄 Changes
Web App (apps/web)
Space App (apps/space)
Propel Package (packages/propel)
🌄 Media
✅ Outcome
Summary by CodeRabbit
New Features
Refactor
Chores