feat(popover): add expandOnHover, added the ability to change the color of a workflow icon, new workflow naming convention

[waleedlatif1]

Summary

• add expandOnHover to popover
• added the ability to change the color of a workflow to a chosen or custom color
• added new workflow naming convention (cosmos)

Type of Change

• New feature

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 5:15am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds three key features to enhance workflow management:

1. Workflow Color Customization

• Created new lib/workflows/colors.ts with 36 preset workflow colors organized in 6 shades across 6 base colors (purple, blue, green, red, orange, pink)
• Moved getNextWorkflowColor() from registry utils to the colors file for better separation of concerns
• Added color picker UI to workflow context menu with both preset color grid and custom hex input
• Updated all imports across 7 files to use the new colors module location

2. PopoverFolder expandOnHover Feature

• Added hover-triggered submenu capability to the popover component system
• When expandOnHover={true}, hovering shows a floating submenu alongside the parent menu via portal
• Clicking still uses inline navigation mode with back button
• The submenu renders as a fixed-position portal to escape overflow clipping

3. Cosmos-Themed Workflow Naming Convention

• Replaced generic naming adjectives/nouns with cosmos-themed vocabulary (celestial bodies, phenomena, cosmic properties)
• Max 9 characters per word for compact workflow names like "radiant-nebula" or "blazing-comet"

Code Organization

• Good separation of concerns with colors moved to dedicated file
• Consistent import updates across all affected files
• Clean integration between components

Confidence Score: 3/5

• This PR has good code organization but contains a critical UX bug and a typo that need fixing before merge
• Score reflects two issues: (1) The hover submenu portal lacks mouse event handlers which will prevent users from interacting with the color picker - this is a blocking UX issue. (2) There's a typo "Sidbuck" in the workflow naming adjectives. The refactoring and color extraction are well done, but the expandOnHover implementation needs completion to be functional.
• Pay close attention to apps/sim/components/emcn/components/popover/popover.tsx (hover submenu interaction) and apps/sim/stores/workflows/registry/utils.ts (naming typo)

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/lib/workflows/colors.ts	5/5	New file with workflow color constants - clean implementation with 36 colors organized in 6 shades
apps/sim/components/emcn/components/popover/popover.tsx	2/5	Added expandOnHover feature for floating submenus, but portal lacks mouse handlers causing submenu to close when interacting
apps/sim/stores/workflows/registry/utils.ts	3/5	Refactored to move colors out, added cosmos naming theme - contains typo 'Sidbuck' on line 68
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx	4/5	Added color picker with expandOnHover PopoverFolder - implementation looks solid with hex validation

Sequence Diagram

sequenceDiagram
    participant User
    participant WorkflowItem
    participant ContextMenu
    participant PopoverFolder
    participant ColorPicker
    participant WorkflowRegistry

    User->>WorkflowItem: Right-click workflow
    WorkflowItem->>ContextMenu: Open context menu
    ContextMenu->>ContextMenu: Show menu options
    
    User->>ContextMenu: Hover over "Change color"
    ContextMenu->>PopoverFolder: expandOnHover=true
    PopoverFolder->>PopoverFolder: Calculate submenu position
    PopoverFolder->>PopoverFolder: Set lastHoveredItem
    PopoverFolder->>ColorPicker: Render via portal
    
    alt User clicks preset color
        User->>ColorPicker: Click color button
        ColorPicker->>ContextMenu: onColorChange(color)
        ContextMenu->>WorkflowItem: handleColorChange(color)
        WorkflowItem->>WorkflowRegistry: updateWorkflow(id, {color})
        WorkflowRegistry-->>WorkflowItem: Update complete
    else User enters custom hex
        User->>ColorPicker: Type hex value
        ColorPicker->>ColorPicker: Validate hex
        User->>ColorPicker: Press Enter or click check
        ColorPicker->>ContextMenu: onColorChange(normalizedHex)
        ContextMenu->>WorkflowItem: handleColorChange(color)
        WorkflowItem->>WorkflowRegistry: updateWorkflow(id, {color})
        WorkflowRegistry-->>WorkflowItem: Update complete
    end

    Note over PopoverFolder,ColorPicker: Issue: Portal lacks mouse handlers<br/>Submenu closes when trying to interact

Loading

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}