Icon Badge Added

[KirthikaKumar-K]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

feat(renderer): badge icon added

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement, Bug fix

---

Description

• Add badge support to icon block display

• Introduce badge settings panel in editor

• Set default badge data in block config

• Safeguard listener settings with optional chaining

---

Changes walkthrough 📝

	Relevant files
Enhancement	IconBlock.tsx Wrap IconBlock icon with badge                                                      libs/renderer/src/components/block-defaults/icon-block/IconBlock.tsx Imported MUI Badge component Wrapped icon output with Badge wrapper Used data.badgeContent and data.color props +5/-1      IconGeneralSettings.tsx Add badge settings UI component                                                    libs/renderer/src/components/block-defaults/icon-block/IconGeneralSettings.tsx Added IconGeneralSettings component Toggle showBadge via Switch control Conditional inputs for badge content and color +78/-0
Configuration changes	config.tsx Update icon block config for badge defaults                            libs/renderer/src/components/block-defaults/icon-block/config.tsx Added badgeContent, color, showBadge defaults Imported and rendered IconGeneralSettings Updated default icon value to "Home" +11/-3    default-menu.ts Include badge defaults in default menu                                      packages/client/src/components/blocks-workspace/menus/default-menu.ts Added badgeContent, color, showBadge fields Set default icon to "Home" +5/-0
Bug fix	ListenerSettings.tsx Safeguard listener access with optional chaining                  libs/renderer/src/components/block-settings/ListenerSettings.tsx Added optional chaining for listeners access Prevent runtime errors if listener key is missing +2/-2

---

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: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Conditional Rendering Badge wraps the icon unconditionally; it should only render when showBadge is true. return <Badge badgeContent={data.badgeContent} color={data.color}><Icon sx={{ width, maxWidth, height, maxHeight, color }} /></Badge>; Zero Badge Display When badgeContent is 0 the Badge will still display "0"; consider using showZero or hiding the badge when content is zero. return <Badge badgeContent={data.badgeContent} color={data.color}><Icon sx={{ width, maxWidth, height, maxHeight, color }} /></Badge>; Null Safety Using optional chaining on toJS(listeners)[listener]?.order and ?.type can yield undefined; add validation or defaults to prevent runtime errors. toJS(listeners)[listener]?.order; const type = toJS(listeners)[listener]?.type;

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Conditionally hide badge wrapper Conditionally hide or remove the badge wrapper when showBadge is false to prevent unnecessary rendering. You can use the invisible prop on Badge or wrap rendering in a conditional check. libs/renderer/src/components/block-defaults/icon-block/IconBlock.tsx [34] -return <Badge badgeContent={data.badgeContent} color={data.color}><Icon sx={{ width, maxWidth, height, maxHeight, color }} /></Badge>; +return ( + <Badge + badgeContent={data.badgeContent} + color={data.color} + invisible={!data.showBadge} + > + <Icon sx={{ width, maxWidth, height, maxHeight, color }} /> + </Badge> +); Suggestion importance[1-10]: 6 __ Why: Rendering <Badge> unconditionally leads to empty badges when showBadge is false, so using its invisible prop or a conditional improves UX and performance.	Low
	Remove redundant Switch prop Remove the redundant value prop from the Switch component since checked already controls its state. This avoids potential prop conflicts. libs/renderer/src/components/block-defaults/icon-block/IconGeneralSettings.tsx [53-58] <Switch - value={showBadge} checked={showBadge} onChange={toggleShowBadge} size="small" color="primary" /> Suggestion importance[1-10]: 3 __ Why: The value prop on <Switch> is redundant when checked already controls its state, so removing it cleans up the component with minimal impact.	Low
Possible issue	Add defaults after optional chaining Provide default fallbacks for order and type when optional chaining returns undefined to prevent runtime errors. Use || [] for arrays and || "" for strings. libs/renderer/src/components/block-settings/ListenerSettings.tsx [81-82] const blockListeners: ListenerActions[] = - toJS(listeners)[listener]?.order; -const type = toJS(listeners)[listener]?.type; + toJS(listeners)[listener]?.order || []; +const type = toJS(listeners)[listener]?.type || ""; Suggestion importance[1-10]: 5 __ Why: Providing || [] and || "" fallbacks for order and type prevents potential undefined errors and improves resilience without major changes.	Low

[johbaxter]

Badge content should probably take a string

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-06-05 #1247

Added

• Badge support for icon blocks with configurable content and color
• Settings controls for toggling badges and adjusting count and color

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

[QodoAI-Agent]

Changelog updates: 🔄

2025-06-05 *

Added

• Support for badge display on icon widgets with configurable content, color and visibility toggle
• New badge settings in the icon block settings panel

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