fix: resolve issue #6025 - default color selection in appearance page

[Louis454545]

Summary

Fixes #6025

This PR resolves the issue where default colors in the appearance settings page were not showing as selected when they should be the active defaults.

Changes Made

• Fixed selection logic in all color picker components:
  • ColorPickerAppPrimaryColor.tsx
  • ColorPickerAppAccentColor.tsx
  • ColorPickerAppDestructiveColor.tsx
  • ColorPickerAppMainView.tsx
  • ColorPickerAppBgColor.tsx
• Updated isSelected logic to use existing helper functions (isDefaultColor, isDefaultColorPrimary, etc.)
• Ensures default colors are properly highlighted with ring selection when active

Testing

• Tested locally with fresh appearance settings
• Verified default colors show as selected on page load
• Confirmed custom color selection still works correctly
• All existing functionality preserved

Technical Details

The issue was caused by exact RGBA value matching between predefined color arrays and stored default values. The fix leverages existing helper functions in useAppearance.ts that properly handle theme-aware default color detection.

🤖 Generated with Claude Code

---

Important

Fixes default color selection logic in appearance settings by using helper functions for theme-aware detection.

• Behavior:
  • Fixes default color selection logic in ColorPickerAppPrimaryColor.tsx, ColorPickerAppAccentColor.tsx, and ColorPickerAppDestructiveColor.tsx.
  • Uses helper functions like isDefaultColor, isDefaultColorPrimary, etc., to determine if a color is selected.
  • Ensures default colors are highlighted with a ring when active.
• Technical Details:
  • Replaces exact RGBA value matching with theme-aware default color detection using helper functions from useAppearance.ts.

^{This description was created by for 38b0202. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 38b0202 in 1 minute and 15 seconds. Click for details.

• Reviewed 120 lines of code in 5 files
• Skipped 0 files when reviewing.
• Skipped posting 5 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/ColorPickerAppAccentColor.tsx:39

• Draft comment:
  Selection logic properly combines explicit RGBA equality and the default helper (isDefaultColorAccent) to ensure the active default is highlighted.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. web-app/src/containers/ColorPickerAppBgColor.tsx:59

• Draft comment:
  The combined check using explicit RGBA matching with the default helper (isDefaultColor) is correctly ensuring that the default background color displays as selected.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

3. web-app/src/containers/ColorPickerAppDestructiveColor.tsx:44

• Draft comment:
  The logic here correctly handles destructive color selection by combining exact equality with the default helper (isDefaultColorDestructive).
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

4. web-app/src/containers/ColorPickerAppMainView.tsx:32

• Draft comment:
  The main view color picker now properly uses a combined check of explicit RGBA equality and the helper (isDefaultColorMainView) to highlight default colors.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

5. web-app/src/containers/ColorPickerAppPrimaryColor.tsx:45

• Draft comment:
  The selection logic here accurately combines the explicit RGBA match with the default helper (isDefaultColorPrimary) to ensure default primary colors are selected.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

Workflow ID: wflow_zUqo2pBVnEyIi369

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[urmauur]

LGTM