fix(types): make PopupModal content accept JSXElement

[sanoojes]

Summary by CodeRabbit

• Chores
  • Improved type definitions for modal content to accept React JSX elements, improving reliability and developer experience when composing UI.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PopupModal.Content type in globals.d.ts was updated to allow React.JSX.Element in addition to string and Element, changing only the typing surface; runtime behavior and control flow remain unchanged.

Changes

Cohort / File(s)	Summary
Type Definition Update globals.d.ts	Expanded PopupModal.Content.content type from string | Element to string | Element | React.JSX.Element; updated documentation comment to reflect JSX support.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A rabbit hops through typed terrain,
JSX nestled with string and DOM in the lane,
Types widened with a gentle cheer,
Popup content welcomes components here! 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly and specifically describes the main change: widening the PopupModal content type to accept JSXElement, which directly matches the file changes in globals.d.ts.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

globals.d.ts (1)

1293-1304: LGTM! Type widening correctly aligns with runtime behavior.

The runtime implementation in spicetifyWrapper.js already handles React elements via Spicetify.React.isValidElement(content) and renders them using ReactDOM.render(). This type change properly reflects that capability in the type definitions.

Consider updating the JSDoc comment to document React element support:

📝 Suggested documentation update

 		/**
 		 * You can specify a string for simple text display
-		 * or a HTML element for interactive config/setting menu
+		 * or a HTML element for interactive config/setting menu,
+		 * or a React JSX element for React-based components
 		 */
 		content: string | Element | React.JSX.Element;

,

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@globals.d.ts` around lines 1293 - 1304, Update the JSDoc for the Content
interface's content property to explicitly mention React element support: note
that content can be a string, a DOM Element, or a React element
(React.JSX.Element) and reference that the runtime (spicetifyWrapper.js) detects
React elements via Spicetify.React.isValidElement(content) and renders them with
ReactDOM.render; edit the comment above the content field in the Content
interface to include this behavior and an optional note about interactive
config/setting menus and rendering flow.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@globals.d.ts`:
- Around line 1293-1304: Update the JSDoc for the Content interface's content
property to explicitly mention React element support: note that content can be a
string, a DOM Element, or a React element (React.JSX.Element) and reference that
the runtime (spicetifyWrapper.js) detects React elements via
Spicetify.React.isValidElement(content) and renders them with ReactDOM.render;
edit the comment above the content field in the Content interface to include
this behavior and an optional note about interactive config/setting menus and
rendering flow.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7a71868d-8ba5-4c9c-9f1b-b1ea61c7d037

📥 Commits

Reviewing files that changed from the base of the PR and between 404bb10 and a40215d.

📒 Files selected for processing (1)

• globals.d.ts