fix(color-picker): confirm color change before updating workflow color

[waleedlatif1]

Summary

• confirm color change before updating workflow color instead of changing on selection

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 11, 2026 11:22pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes a UX issue where workflow colors were being updated immediately upon selecting a preset color, rather than requiring explicit confirmation from the user.

What Changed

The color picker in the workflow context menu now uses a two-step confirmation pattern:

1. Preset color selection - Clicking a preset color button now only updates the local hexInput state instead of immediately calling onColorChange()
2. Explicit confirmation - Users must click the check button to apply the color change

Implementation Details

Two minimal changes achieve this behavior:

• Line 350: Changed onColorChange(color) to setHexInput(color) so preset selection only updates local state
• Line 354: Changed ring indicator to use hexInput instead of currentColor to show the currently selected (but not yet confirmed) color

The existing confirmation infrastructure (check button with handleHexSubmit) handles the actual color update, maintaining proper validation and normalization.

State Management

The implementation correctly handles state synchronization:

• hexInput is synced with currentColor via useEffect when the menu opens or when props change
• Clicking outside the menu without confirming discards the local selection
• The confirmation flow normalizes hex values and updates the workflow through the existing updateWorkflow mechanism

Code Quality

The changes follow all project conventions:

• Proper hook ordering and patterns
• Maintains existing error handling and validation
• Uses optional callback chaining (onColorChange?.(...))
• No style guide violations introduced

Confidence Score: 5/5

• This PR is safe to merge with no concerns
• The changes are minimal (2 lines), well-scoped, and correctly implement the intended behavior. The implementation properly uses existing validation and state management patterns. All edge cases have been verified: state synchronization works correctly, the visual indicator updates properly, confirmation flow is sound, and the changes follow all project style guidelines. No security issues, logic errors, or breaking changes were identified.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx	5/5	Updated color picker to require explicit confirmation via check button instead of applying color immediately on preset selection. Changes are minimal, well-scoped, and maintain proper state synchronization.

Sequence Diagram

sequenceDiagram
    actor User
    participant Menu as ContextMenu
    participant State as hexInput (local state)
    participant Parent as WorkflowItem
    participant Store as WorkflowRegistry
    
    User->>Menu: Opens color picker
    activate Menu
    Menu->>State: Initialize hexInput from currentColor
    Note over State: hexInput = currentColor || '#ffffff'
    
    User->>Menu: Clicks preset color button
    Menu->>State: setHexInput(color)
    Note over Menu: Visual ring indicator updates
    Note over Menu: Check button enabled if valid & different
    
    User->>Menu: Clicks check button (confirm)
    Menu->>Menu: normalizeHex(hexInput)
    Menu->>Parent: onColorChange(normalized)
    Menu->>State: setHexInput(normalized)
    
    Parent->>Store: updateWorkflow(id, {color})
    activate Store
    Store-->>Parent: Workflow updated
    deactivate Store
    
    Parent-->>Menu: currentColor prop updates
    Menu->>State: useEffect syncs hexInput with currentColor
    Note over State: hexInput = currentColor
    
    deactivate Menu

Loading

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}