fix (global colors): add modified indicator

[kaeizen]

fixes #3576

Summary by CodeRabbit

• New Features
  • The Global Colors settings now display a modified indicator when custom colors are present, making it easier to see when global color settings have been personalized.
  • Indicator visibility updates automatically based on existing custom colors.
  • No changes to other controls or toggles; existing behavior remains the same.

[coderabbitai]

Walkthrough

Introduces reading stackable/global-colors from settings and passes a computed showModifiedIndicator prop to PanelAdvancedSettings in the global colors inspector. Uses optional chaining to safely detect existing custom colors. No public API changes.

Changes

Cohort / File(s)	Summary
Global Colors Inspector src/plugins/global-settings/colors/index.js	Read stackableColors from getSettings(), compute showModifiedIndicator as !!stackableColors?.length, and pass it to PanelAdvancedSettings. No other logic altered; uses optional chaining.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant G as GlobalColorsInspector
    participant S as Settings (getSettings)
    participant P as PanelAdvancedSettings

    U->>G: Open Global Colors
    G->>S: getSettings()
    S-->>G: { stackable: { global-colors: [...] } }
    G->>G: compute showModifiedIndicator = !!stackableColors?.length
    G->>P: render with showModifiedIndicator
    note over P: Indicator visible when colors exist

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Show modified indicator when a global color is added [#3576]	✅

Assessment against linked issues: Out-of-scope changes

None found.

Poem

I nibble code like clover leaves, hop-hop—such glee!
An orange dot now twinkles where the palettes be. 🟠
I thump my foot in cadence, “Settings, do your part!”
With colors counted smartly, the indicator’s art.
Carrots, commits, and contrasts—ship it, whee!

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/global-colors-modified-indicator

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

🤖 Pull request artifacts

file	commit
pr3586-stackable-3586-merge.zip	e99924f

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3586-stackable-3586-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/plugins/global-settings/colors/index.js (1)

116-116: Nit: prefer length > 0 over !!length for clarity; optionally include toggle changes

Current logic is fine; this just improves readability. Optionally, include the hide-toggles to mark any panel change as “modified”.

Apply one of the following:

-                showModifiedIndicator={ !! stackableColors?.length }
+                showModifiedIndicator={ stackableColors?.length > 0 }

Optional (consider any non-default toggle as modified too):

-                showModifiedIndicator={ !! stackableColors?.length }
+                showModifiedIndicator={
+                  (stackableColors?.length > 0) ||
+                  hideThemeColors || hideDefaultColors || hideSiteEditorColors
+                }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 60e5ed7 and e99924f.

📒 Files selected for processing (1)

• src/plugins/global-settings/colors/index.js (2 hunks)

⏰ 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). (6)

• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 7.3 and WP latest

🔇 Additional comments (1)

src/plugins/global-settings/colors/index.js (1)

73-77: Global Settings: stackableColors Already Defaults to an Empty Array

• The stackable/global-colors store’s DEFAULT_STATE and its resolver both ensure stackableColors is always defined as an array (default []).
• There is no separate getStackableColors() selector—custom colors live under getSettings().stackableColors as expected.
• PanelAdvancedSettings accepts the showModifiedIndicator prop (defaulted to false in its implementation and overridden here via !! stackableColors?.length).

No changes needed—the existing store defaults and selector shape guarantee safety.