[WEB-5305] refactor: migrate emoji and logo components to propel and remove duplication #8038
Conversation
…grate-emoji-components-to-propel
|
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. WalkthroughThis PR migrates emoji/icon picker and Logo usage from local Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Consumer Component
participant OldUI as `@plane/ui` (old)
participant Propel as `@plane/propel/emoji-icon-picker`
rect rgba(240,248,255,0.6)
Note over Component,OldUI: Before
Component->>OldUI: import Logo / EmojiIconPicker
OldUI->>Component: returns { type, value: { unified,... }, imageUrl }
end
rect rgba(240,255,240,0.6)
Note over Component,Propel: After
Component->>Propel: import Logo / EmojiPicker
Propel->>Component: returns { type, value: "12345", url: undefined }
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
anmolsinghbhatia
requested review from
prateekshourya29,
sriramveeraghanta and
vamsikrishnamathala
There was a problem hiding this comment.
Pull Request Overview
This PR removes the emoji-picker-react dependency and consolidates emoji/icon picker functionality into the @plane/propel package. The old emoji components from @plane/ui are removed, and all references are updated to use the new @plane/propel/emoji-icon-picker implementation.
- Removed
emoji-picker-reactdependency and old emoji components from@plane/ui - Migrated emoji picker functionality to
@plane/propelpackage with improved type safety - Updated all import statements across the codebase to use the new
@plane/propel/emoji-icon-pickermodule - Changed emoji data format from hex to decimal representation
Reviewed Changes
Copilot reviewed 45 out of 46 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Removed emoji-picker-react dependency lock entry |
| packages/ui/package.json | Removed emoji-picker-react from dependencies |
| packages/ui/src/index.ts | Removed emoji module export |
| packages/ui/src/emoji/* | Deleted old emoji picker implementation files |
| packages/propel/src/emoji-icon-picker/index.ts | Added Logo export to propel package |
| packages/propel/src/emoji-icon-picker/logo.tsx | Updated imports to use local helper functions |
| packages/editor/package.json | Added @plane/propel dependency |
| packages/editor/src/core/extensions/callout/* | Updated imports and emoji handling to use new decimal format |
| apps/web/core/store/pages/base-page.ts | Updated emoji handling to work with decimal format instead of hex |
| apps/web/core/components/* | Updated 20+ component files to import Logo from @plane/propel/emoji-icon-picker |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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 (45)
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/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-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/emoji-icon-picker/index.ts(1 hunks)packages/propel/src/emoji-icon-picker/logo.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 (10)
- packages/ui/src/emoji/helpers.ts
- packages/ui/src/emoji/logo.tsx
- packages/ui/src/emoji/icons-list.tsx
- packages/ui/src/emoji/emoji-icon-picker-new.tsx
- packages/ui/src/index.ts
- packages/ui/src/emoji/lucide-icons-list.tsx
- packages/ui/src/emoji/index.ts
- packages/ui/src/emoji/emoji-icon-helper.tsx
- packages/ui/package.json
- packages/ui/src/emoji/emoji-icon-picker.tsx
🧰 Additional context used
🧠 Learnings (11)
📚 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/issues/issue-layouts/utils.tsxapps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsxapps/web/core/components/home/widgets/recents/page.tsxpackages/editor/src/core/extensions/callout/logo-selector.tsxapps/web/core/components/cycles/list/cycle-list-project-group-header.tsxapps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/analytics/overview/active-project-item.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/project/form.tsxapps/web/core/components/views/view-list-item.tsxapps/web/core/components/project/multi-select-modal.tsxapps/web/core/components/project/card.tsxapps/web/core/components/pages/modals/page-form.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/core/components/pages/list/block.tsxapps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsxapps/web/core/components/views/form.tsxapps/web/core/components/project/create/header.tsxpackages/editor/src/core/extensions/callout/utils.tsapps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsxapps/web/core/components/pages/editor/header/logo-picker.tsxapps/web/core/store/pages/base-page.tspackages/propel/src/emoji-icon-picker/logo.tsxapps/web/core/components/pages/editor/header/root.tsxapps/web/core/components/common/switcher-label.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/web/core/components/home/widgets/recents/project.tsxapps/web/core/components/settings/project/sidebar/root.tsx
📚 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/issues/issue-layouts/utils.tsxapps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsxpackages/editor/src/core/extensions/callout/logo-selector.tsxapps/web/core/components/cycles/list/cycle-list-project-group-header.tsxapps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/analytics/overview/active-project-item.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/project/form.tsxapps/web/core/components/views/view-list-item.tsxapps/web/core/components/pages/modals/page-form.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/core/components/pages/list/block.tsxapps/web/core/components/project/create/header.tsxpackages/editor/src/core/extensions/callout/utils.tsapps/web/core/components/pages/editor/header/logo-picker.tsxapps/web/core/store/pages/base-page.tspackages/propel/src/emoji-icon-picker/logo.tsxapps/web/core/components/pages/editor/header/root.tsxapps/web/core/components/common/switcher-label.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/web/core/components/home/widgets/recents/project.tsxapps/web/core/components/settings/project/sidebar/root.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/issues/issue-layouts/utils.tsxapps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsxapps/web/core/components/home/widgets/recents/page.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/project/form.tsxapps/web/core/components/views/view-list-item.tsxapps/web/core/components/project/card.tsxapps/web/core/components/pages/modals/page-form.tsxapps/web/core/components/project/project-feature-update.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/core/components/pages/list/block.tsxapps/web/core/components/views/form.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/pages/editor/header/logo-picker.tsxapps/web/core/store/pages/base-page.tsapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/web/core/components/home/widgets/recents/project.tsxapps/web/core/components/settings/project/sidebar/root.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/issues/issue-layouts/utils.tsxapps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsxapps/web/ce/components/breadcrumbs/project.tsxapps/web/core/components/analytics/select/project.tsxapps/web/core/components/workspace/sidebar/projects-list-item.tsxapps/web/core/components/dropdowns/project/base.tsxapps/web/core/components/analytics/overview/active-project-item.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/project/form.tsxapps/web/core/components/project/card.tsxpackages/editor/package.jsonapps/web/core/components/project/project-feature-update.tsxapps/web/core/components/power-k/menus/projects.tsxapps/web/core/components/project/create/header.tsxapps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.tsxapps/web/core/components/home/widgets/recents/project.tsxapps/web/core/components/settings/project/sidebar/root.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/analytics/select/project.tsxapps/web/core/components/profile/sidebar.tsxapps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsxapps/web/core/components/analytics/work-items/workitems-insight-table.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
📚 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/power-k/menus/projects.tsxapps/web/core/components/pages/list/block.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/views/form.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-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/pages/editor/header/root.tsx
🧬 Code graph analysis (4)
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/modals/page-form.tsx (1)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)
apps/web/core/components/pages/editor/header/logo-picker.tsx (1)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)
apps/web/core/components/pages/editor/header/root.tsx (1)
packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)
EmojiPicker(10-136)
🪛 Biome (2.1.2)
packages/editor/package.json
[error] 46-46: The key @plane/propel was already declared.
This where a duplicated key was declared again.
If a key is defined multiple times, only the last definition takes effect. Previous definitions are ignored.
(lint/suspicious/noDuplicateObjectKeys)
⏰ 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)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Build and lint web apps
🔇 Additional comments (41)
apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx (1)
3-3: LGTM! Clean migration to centralized Logo component.The import change aligns with the PR objectives to consolidate emoji and logo components in
@plane/propel/emoji-icon-picker. The usage on line 21 remains identical, confirming API compatibility.packages/editor/src/core/extensions/callout/utils.ts (1)
2-2: Type migration verified successfully—no compatibility issues.The
TLogoPropstype structure is fully compatible with the code's usage patterns. All property accesses are properly guarded with optional chaining (?.) and have fallback defaults via the||operator on lines 50-51 and 56-58. The type migration is safe and requires no changes.apps/web/core/components/profile/sidebar.tsx (1)
16-16: LGTM! Clean import migration.The Logo import path has been successfully updated to the centralized emoji-icon-picker package. The component usage remains unchanged and consistent with the PR's refactoring objectives.
apps/web/core/components/power-k/menus/projects.tsx (1)
5-5: LGTM! Import path updated correctly.The Logo import has been migrated to the emoji-icon-picker package as intended. Usage remains consistent with existing behavior.
apps/web/core/components/project/project-feature-update.tsx (1)
10-10: LGTM! Import source updated correctly.The Logo component import has been successfully migrated to the centralized package. The implementation remains functionally identical.
apps/web/core/components/home/widgets/recents/page.tsx (1)
2-2: LGTM! Import migration completed successfully.The Logo import path has been updated to the emoji-icon-picker package. The component usage with logo_props, size, and type parameters remains unchanged.
apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx (1)
4-4: LGTM! Import path refactored correctly.The Logo component import has been migrated to the centralized emoji-icon-picker package. Usage remains consistent and correct.
apps/web/core/components/analytics/overview/active-project-item.tsx (1)
2-3: LGTM! Import migration completed.The Logo import has been successfully migrated to the emoji-icon-picker package. The import ordering adjustment (Logo before ProjectIcon) improves consistency. Component usage remains unchanged.
apps/web/core/components/dropdowns/project/base.tsx (1)
9-9: LGTM! Import path updated correctly.The Logo import has been migrated to the centralized emoji-icon-picker package. All Logo usages throughout the component (lines 105, 146, and within helper functions) remain consistent and functional.
apps/web/core/components/settings/project/sidebar/root.tsx (1)
5-5: LGTM! Import source migrated successfully.The Logo component import has been updated to the emoji-icon-picker package. Usage in the settings sidebar remains unchanged and correct.
packages/propel/src/emoji-icon-picker/index.ts (1)
3-3: LGTM!The Logo export is correctly added to the public API, consistent with the existing export pattern for other emoji-icon-picker modules.
apps/web/core/components/pages/list/block.tsx (1)
6-6: LGTM!The Logo import migration is clean and straightforward. The component usage at Line 44 remains unchanged, maintaining existing behavior.
apps/web/core/components/issues/issue-layouts/utils.tsx (1)
9-9: LGTM!The Logo import migration is consistent with the broader refactoring effort. Usage at Line 141 within
getProjectColumnsremains unchanged.apps/web/ce/components/breadcrumbs/project.tsx (1)
4-4: LGTM!Clean import path migration. The Logo usage at Line 55 maintains the same props and behavior.
apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx (1)
4-4: LGTM!The Logo import is correctly migrated to the emoji-icon-picker package while Avatar appropriately remains with @plane/ui. Usage at Line 353 is preserved.
apps/web/core/components/home/widgets/recents/project.tsx (1)
3-3: LGTM!The import path change is straightforward and maintains the same Logo usage at Line 35.
apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx (1)
7-7: LGTM!The Logo import migration is clean. Usage at Line 68 within the project filter options remains unchanged.
apps/web/core/components/project/multi-select-modal.tsx (1)
9-9: LGTM!The Logo import is correctly migrated. Both usages (Lines 108 and 157) maintain the same props and rendering behavior.
apps/web/core/components/common/switcher-label.tsx (1)
2-2: LGTM! Clean import migration.The Logo import has been successfully migrated to the centralized emoji-icon-picker package with no changes to functionality.
apps/web/core/components/workspace/sidebar/projects-list-item.tsx (1)
18-18: LGTM! Import migration successful.The Logo import path has been correctly updated to use the centralized emoji-icon-picker package. Usage in both the drag preview (line 134) and the main list item (line 275) remains unchanged.
apps/web/core/components/analytics/select/project.tsx (1)
5-6: LGTM! Import migration successful.Both Logo and ProjectIcon imports have been correctly updated. The conditional rendering logic (Logo when logo_props exists, otherwise ProjectIcon) remains unchanged.
apps/web/core/components/analytics/work-items/workitems-insight-table.tsx (1)
8-8: LGTM! Import migration successful.The Logo import has been updated to the centralized emoji-icon-picker package. Usage at line 84 maintains the existing conditional logic (Logo when logo_props exists, otherwise ProjectIcon).
apps/web/core/components/project/card.tsx (1)
12-12: LGTM! Import migration successful.The Logo import has been correctly updated to use the centralized emoji-icon-picker package. Usage at line 220 remains unchanged.
apps/web/core/components/views/view-list-item.tsx (1)
7-7: LGTM! Import migration successful.The Logo import has been updated to the centralized emoji-icon-picker package. The conditional rendering logic at line 37 (Logo when logo_props.in_use is true, otherwise ViewsIcon) remains unchanged.
apps/web/core/components/views/form.tsx (1)
10-10: LGTM! Import migration successful.Both EmojiPicker and Logo imports have been correctly updated to use the centralized emoji-icon-picker package. Usage at lines 112 (EmojiPicker) and 122 (Logo) remains unchanged, preserving the existing form logic.
apps/web/core/store/pages/base-page.ts (2)
5-5: Import source updated for TChangeHandlerProps.The type import has been successfully migrated from
@plane/uito@plane/propel/emoji-icon-picker.
444-473: Based on comprehensive verification, I can now generate the final response:
The review comment is incorrect — no data format incompatibility exists.
The emoji value handling has NOT changed the storage format as claimed. Both old and new code paths store decimal format:
- Old flow: Hex unified →
convertHexEmojiToDecimal()inupdatePageLogo→ decimal stored- New flow: Emoji character →
emojiToString()in emoji picker → decimal storedThe
stringToEmoji()function already expects and correctly handles decimal format (parses decimals split by "-"). The conversion simply moved fromupdatePageLogoto the emoji picker component.convertHexEmojiToDecimalis now unused but this is not a breaking change—it's simply dead code.No database migration is needed. Existing emoji values remain compatible because they were already stored in decimal format.
packages/propel/src/emoji-icon-picker/logo.tsx (1)
10-12: Import refactoring to local modules.The imports have been refactored to use local relative paths within the
emoji-icon-pickerpackage. This internal reorganization maintains the same functionality while improving module boundaries.apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx (1)
7-7: Logo import successfully migrated to emoji-icon-picker package.The Logo component import has been updated to use the centralized
@plane/propel/emoji-icon-pickerpackage, aligning with the PR's consolidation goals.apps/web/core/components/project/create/header.tsx (2)
6-6: Import migration to emoji-icon-picker package.Successfully migrated to import
EmojiPicker,EmojiIconPickerTypes, andLogofrom the consolidated@plane/propel/emoji-icon-pickerpackage.
82-86: Emoji value handling updated to new format.The emoji value handling now uses
val.valuedirectly, consistent with the new decimal string format introduced across the codebase. This aligns with the migration pattern in other files.apps/web/core/components/pages/modals/page-form.tsx (2)
11-11: Component migration to EmojiPicker.Successfully migrated from
EmojiIconPickertoEmojiPickerfrom the@plane/propel/emoji-icon-pickerpackage.
68-110: EmojiPicker integration with consistent emoji value handling.The component has been updated to use
EmojiPickerwith emoji value handling that matches the new decimal string format (value: val.value, url: undefined). This is consistent with the migration pattern across the codebase.packages/editor/src/core/extensions/callout/logo-selector.tsx (2)
2-4: Import migration and type updates.Successfully migrated imports to use
EmojiPicker,Logo, andTLogoPropsfrom the consolidated@plane/propel/emoji-icon-pickerpackage.
54-66: Well-documented emoji format change.The inline comment at line 55 helpfully documents that "val.value is now a string in decimal format." This clarifies the data format change where emoji values are now stored as decimal strings (e.g., "128512") rather than hex-converted values. The explicit setting of
url: undefinedis consistent with the migration pattern.apps/web/core/components/pages/editor/header/logo-picker.tsx (2)
4-4: Import migration to emoji-icon-picker package.Successfully migrated to import
EmojiPicker,EmojiIconPickerTypes, andLogofrom the consolidated package.
28-48: Component migration to EmojiPicker.The component has been successfully migrated from
EmojiIconPickertoEmojiPickerwhile preserving all props and functionality. TheupdatePageLogocallback will receive emoji values in the new decimal string format.apps/web/core/components/pages/editor/header/root.tsx (2)
5-5: Import migration to EmojiPicker.Successfully updated import from
EmojiIconPickertoEmojiPickerfrom the@plane/propel/emoji-icon-pickerpackage.
35-64: Component migration completed.The component has been successfully migrated from
EmojiIconPickertoEmojiPickerwhile maintaining all props and functionality. This completes the migration pattern seen across the codebase.apps/web/core/components/project/form.tsx (2)
11-11: LGTM! Import consolidation is clean.The migration consolidates EmojiPicker, EmojiIconPickerTypes, and Logo imports into a single package source, which aligns with the PR's centralization goals.
Also applies to: 15-15
208-222: Data structure and emoji value format match updated type expectations.The onChange handler correctly transforms EmojiPicker selections to the
TLogoPropsstructure:
- Emoji case: Creates
{ in_use: "emoji", emoji: { value: <string> } }where the string is the decimal-formatted emoji code fromemojiToString()(e.g., "128204-1234-5678"), matching the expected raw decimal format.- Icon case: Creates
{ in_use: "icon", icon: { name, color } }, matching the icon structure inTLogoProps.The dynamic key assignment and data transformation are implemented correctly and align with the type definition in
packages/types/src/common.ts.
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
📦 Summary
Migrates all emoji-related and Logo components from @plane/ui to @plane/propel/emoji-icon-picker, consolidating functionality and removing duplication across codebases.
🎯 Motivation
🔄 Changes
✅ Outcome
Summary by CodeRabbit
Refactor
Chores