584 create system popover

[Shubham009-prog]

Description

Added a new Block (Popover Block).

Changes Made

1. Added popover images
2. Added popover in default menu.
3. Added a new folder for popover.

How to Test

1. Just Drag and drop the Popover Block to designer page.
2. Also can customize the popup appearence.

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

584 create system popover

---

User description

Description

Added a new Block (Popover Block).

Changes Made

1. Added popover images
2. Added popover in default menu.
3. Added a new folder for popover.

How to Test

1. Just Drag and drop the Popover Block to designer page.
2. Also can customize the popup appearence.

---

PR Type

• Enhancement

---

Description

• Added popover block component with design and interactive modes.

• Registered popover block in defaults and export index.

• Created configuration with UI settings and event triggers.

• Updated assets and default menu with popover images and item.

---

Changes walkthrough 📝

Relevant files

Enhancement

index.ts Register and expose Popover block                                                libs/renderer/src/components/block-defaults/index.ts Imported popover block config. Added popover block type to union. Registered popover block in registry. Exported popover block configuration. +5/-0      PopoverBlock.tsx New Popover Block Component                                                            libs/renderer/src/components/block-defaults/popover-block/PopoverBlock.tsx Created popover block component. Implemented design and interactive rendering. Added anchor and event handling logic. Managed open state based on click/hover. +231/-0  config.tsx Popover Block Configuration                                                            libs/renderer/src/components/block-defaults/popover-block/config.tsx Defined popover block default config. Set up UI settings and color options. Configured trigger, design mode, and target block. Added custom settings and content menu. +219/-0  index.ts Popover Block Index Export                                                              libs/renderer/src/components/block-defaults/popover-block/index.ts Re-exported config and popover block component. Created simplified entry file. +2/-0      index.ts Add Popover Assets                                                                              packages/client/src/assets/blocks/index.ts Added exports for popover active image. Added exports for popover hover image. +2/-0      default-menu.ts Add Popover Menu Item                                                                        packages/client/src/components/blocks-workspace/menus/default-menu.ts Added popover block menu item. Integrated popover images and helper text. Configured default JSON for popover block. +25/-0

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Naming Conflict There are multiple definitions of a handleClose function in overlapping scopes. This shadowing may lead to unexpected behavior. Refactor these functions to avoid confusion. const handleClose = () => { if (!isStatic) { setData("open", "false"); } }; // Determine the anchor element based on a targetId if provided const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null); useEffect(() => { if (targetId) { const element = document.querySelector( `[data-block="${targetId}"]`, ) as HTMLElement | null; setAnchorEl(element); } else { setAnchorEl(null); } }, [targetId]); useEffect(() => { if (!anchorEl) return; const handleOpen = () => { setData("open", "true"); }; const handleClose = () => { setData("open", "false"); }; if (data.openTrigger === "click") { anchorEl.addEventListener("click", handleOpen); return () => { anchorEl.removeEventListener("click", handleOpen); }; } Config Inconsistency The default value for the open property is set to an empty string in the block configuration, while the default menu uses a boolean false. Ensure a consistent type is used for the open property to avoid potential runtime issues. open: "", openTrigger: "click", contentBgColor: "", },

[QodoAI-Agent]

PR Code Suggestions ✨

No code suggestions found for the PR.

[johbaxter]

Looks good enough for first cut.

I commented out Hover trigger, does not work.

I think it would be cool to have some load state on this where we just overlay loading indicator in popover window

Maybe this can be a setting on a Container block

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-03-20

Added

• Introduced a new popover block with integrated settings and menu support.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'