update searching brand color picker

[spartan-vutrannguyen]

Description

• Allow search by color group name

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Screen.Recording.2025-03-27.at.12.15.16.mov

Additional Notes

---

Important

Update color picker to allow searching by color group name and optimize theme refresh by reloading webviews.

• Behavior:
  • Allow search by color group name in ColorBrandPicker.tsx.
  • Expand color groups if search query is present in ColorBrandPicker.tsx.
  • Optimize theme refresh by reloading webviews in index.ts.
• Functions:
  • filteredColorGroups and filteredColorDefaults in ColorBrandPicker.tsx now include group name in search.
  • reloadWebviews() replaces individual frame refresh in ThemeManager in index.ts.

^{This description was created by for ddf9507. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to ddf9507 in 56 seconds

More details

• Looked at 92 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 12 drafted comments based on config settings.

1. apps/studio/src/lib/editor/engine/theme/index.ts:364

• Draft comment:
  Ensure reloadWebviews() fully covers the per-frame theme refresh. The previous code also refreshed selected elements (after a setTimeout); confirm this behavior is still met.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the author to confirm that a specific behavior is still met after a change. This violates the rule against asking the author to confirm their intention or to ensure behavior is intended. The comment does not provide a specific code suggestion or ask for a specific test to be written.

2. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:42

• Draft comment:
  State sync: 'expanded' is set from prop 'isExpanded'. Confirm this doesn’t conflict with user toggle toggling the local state.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

3. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:200

• Draft comment:
  Passing 'isExpanded={!!searchQuery}' forces groups expanded during search. Verify that this automatic expansion works with manual toggle behavior.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to verify the behavior of automatic expansion with manual toggle behavior. This falls under asking the author to ensure the behavior is intended, which is against the rules.

4. apps/studio/src/lib/editor/engine/theme/index.ts:364

• Draft comment:
  Simplified theme refresh: using reloadWebviews replaces individual frame updates. Confirm that this method triggers all necessary UI refresh steps (e.g. selected elements) as before.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to confirm that a method triggers all necessary UI refresh steps, which violates the rule against asking for confirmation of intention or behavior. It does not provide a specific code suggestion or ask for a specific test to be written.

5. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:42

• Draft comment:
  New isExpanded prop and useEffect in ColorGroup auto-set 'expanded' state. Verify that this behavior doesn’t conflict with manual toggling when searchQuery is active.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to verify that a new prop and useEffect do not conflict with existing functionality. This is a request for confirmation of behavior, which violates the rule against asking the author to confirm their intention or ensure behavior is intended.

6. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:105

• Draft comment:
  Filtering now checks both the group name and its colors. This meets the requirement for searching by color group name.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

7. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:196

• Draft comment:
  Passing isExpanded={!!searchQuery} auto-expands groups during a search; ensure this UX behavior is intentional.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50%
  None

8. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:115

• Draft comment:
  Similar filtering logic for colorDefaults is repeated. Consider refactoring to avoid duplication in the future.
• Reason this comment was not posted:
  Confidence changes required: 30% <= threshold 50%
  None

9. apps/studio/src/lib/editor/engine/theme/index.ts:3

• Draft comment:
  Typo alert: The import path 'ColorPalletGroup' might be a typo. If it's meant to refer to a group of color palettes, consider renaming it to 'ColorPaletteGroup' for clarity.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

10. apps/studio/src/lib/editor/engine/theme/index.ts:350

• Draft comment:
  Minor wording suggestion: On line 350, consider changing the comment from "Base on the class name, find the styles to update" to "Based on the class name, find the styles to update".
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

11. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:3

• Draft comment:
  Typo: The imported module 'ColorPalletGroup' might be intended to be 'ColorPaletteGroup' if that's the proper spelling. Please double-check the naming consistency.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

12. apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx:55

• Draft comment:
  Minor formatting issue: There is an extra space between 'gap-1' and 'flex-1' in the className attribute on the div at line 55. Consider removing the extra space for consistency.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_ME2dEQf1wpjnOjJV

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.