updated workflow naming conventions

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Check } from 'lucide-react'
 import {
   Popover,
   PopoverAnchor,
@@ -12,6 +14,29 @@ import {
 import { cn } from '@/lib/core/utils/cn'
 import { WORKFLOW_COLORS } from '@/lib/workflows/colors'
 
+/**
+ * Validates a hex color string.
+ * Accepts 3 or 6 character hex codes with or without #.
+ */
+function isValidHex(hex: string): boolean {
+  const cleaned = hex.replace('#', '')
+  return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleaned)
+}
+
+/**
+ * Normalizes a hex color to lowercase 6-character format with #.
+ */
+function normalizeHex(hex: string): string {
+  let cleaned = hex.replace('#', '').toLowerCase()
+  if (cleaned.length === 3) {
+    cleaned = cleaned
+      .split('')
+      .map((c) => c + c)
+      .join('')
+  }
+  return `#${cleaned}`
+}
+
 interface ContextMenuProps {
   /**
    * Whether the context menu is open
@@ -173,7 +198,51 @@ export function ContextMenu({
   disableCreate = false,
   disableCreateFolder = false,
 }: ContextMenuProps) {
-  // Section visibility for divider logic
+  const [hexInput, setHexInput] = useState(currentColor || '#ffffff')
+
+  // Sync hexInput when currentColor changes (e.g., opening menu on different workflow)
+  useEffect(() => {
+    setHexInput(currentColor || '#ffffff')
+  }, [currentColor])
+
+  const canSubmitHex = useMemo(() => {
+    if (!isValidHex(hexInput)) return false
+    const normalized = normalizeHex(hexInput)
+    if (currentColor && normalized.toLowerCase() === currentColor.toLowerCase()) return false
+    return true
+  }, [hexInput, currentColor])
+
+  const handleHexSubmit = useCallback(() => {
+    if (!canSubmitHex || !onColorChange) return
+
+    const normalized = normalizeHex(hexInput)
+    onColorChange(normalized)
+    setHexInput(normalized)
+  }, [hexInput, canSubmitHex, onColorChange])
+
+  const handleHexKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        handleHexSubmit()
+      }
+    },
+    [handleHexSubmit]
+  )
+
+  const handleHexChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.trim()
+    if (value && !value.startsWith('#')) {
+      value = `#${value}`
+    }
+    value = value.slice(0, 1) + value.slice(1).replace(/[^0-9a-fA-F]/g, '')
+    setHexInput(value.slice(0, 7))
+  }, [])
+
+  const handleHexFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select()
+  }, [])
+
   const hasNavigationSection = showOpenInNewTab && onOpenInNewTab
   const hasEditSection =
     (showRename && onRename) ||
@@ -268,23 +337,56 @@ export function ContextMenu({
             expandOnHover
             className={disableColorChange ? 'pointer-events-none opacity-50' : ''}
           >
-            <div className='grid grid-cols-6 gap-[4px] p-[2px]'>
-              {WORKFLOW_COLORS.map(({ color, name }) => (
+            <div className='flex w-[140px] flex-col gap-[8px] p-[2px]'>
+              {/* Preset colors */}
+              <div className='grid grid-cols-6 gap-[4px]'>
+                {WORKFLOW_COLORS.map(({ color, name }) => (
+                  <button
+                    key={color}
+                    type='button'
+                    title={name}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onColorChange(color)
+                    }}
+                    className={cn(
+                      'h-[20px] w-[20px] rounded-[4px]',
+                      currentColor?.toLowerCase() === color.toLowerCase() && 'ring-1 ring-white'
+                    )}
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </div>
+
+              {/* Hex input */}
+              <div className='flex items-center gap-[4px]'>
+                <div
+                  className='h-[20px] w-[20px] flex-shrink-0 rounded-[4px]'
+                  style={{
+                    backgroundColor: isValidHex(hexInput) ? normalizeHex(hexInput) : '#ffffff',
+                  }}
+                />
+                <input
+                  type='text'
+                  value={hexInput}
+                  onChange={handleHexChange}
+                  onKeyDown={handleHexKeyDown}
+                  onFocus={handleHexFocus}
+                  onClick={(e) => e.stopPropagation()}
+                  className='h-[20px] min-w-0 flex-1 rounded-[4px] bg-[#363636] px-[6px] text-[11px] text-white uppercase focus:outline-none'
+                />
                 <button
-                  key={color}
                   type='button'
-                  title={name}
+                  disabled={!canSubmitHex}
                   onClick={(e) => {
                     e.stopPropagation()
-                    onColorChange(color)
+                    handleHexSubmit()
                   }}
-                  className={cn(
-                    'h-[20px] w-[20px] rounded-[4px]',
-                    currentColor === color && 'ring-1 ring-white'
-                  )}
-                  style={{ backgroundColor: color }}
-                />
-              ))}
+                  className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--brand-tertiary-2)] text-white disabled:opacity-40'
+                >
+                  <Check className='h-[12px] w-[12px]' />
+                </button>
+              </div>
             </div>
           </PopoverFolder>
         )}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -160,16 +160,13 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
    * Captures selection state for context menu operations
    */
   const captureSelectionState = useCallback(() => {
-    // Check current selection state
     const { selectedWorkflows: currentSelection, selectOnly } = useFolderStore.getState()
     const isCurrentlySelected = currentSelection.has(workflow.id)
 
-    // If this workflow is not in the current selection, select only this workflow
     if (!isCurrentlySelected) {
       selectOnly(workflow.id)
     }
 
-    // Capture the selection state
     const finalSelection = useFolderStore.getState().selectedWorkflows
     const finalIsSelected = finalSelection.has(workflow.id)
 
@@ -180,13 +177,11 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
       .map((id) => workflows[id]?.name)
       .filter((name): name is string => !!name)
 
-    // Store in ref so it persists even if selection changes
     capturedSelectionRef.current = {
       workflowIds,
       workflowNames: workflowNames.length > 1 ? workflowNames : workflowNames[0],
     }
 
-    // Check if the captured selection can be deleted
     setCanDeleteCaptured(canDeleteWorkflows(workflowIds))
   }, [workflow.id, workflows, canDeleteWorkflows])
 

apps/sim/components/emcn/components/popover/popover.tsx

@@ -221,7 +221,6 @@ const Popover: React.FC<PopoverProps> = ({
   const [searchQuery, setSearchQuery] = React.useState<string>('')
   const [lastHoveredItem, setLastHoveredItem] = React.useState<string | null>(null)
 
-  // Reset folder state when popover closes
   React.useEffect(() => {
     if (open === false) {
       setCurrentFolder(null)