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

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx

@@ -163,7 +163,7 @@ function AddMembersModal({
                           className='flex items-center gap-[10px] rounded-[4px] px-[8px] py-[6px] hover:bg-[var(--surface-2)]'
                         >
                           <Checkbox checked={isSelected} />
-                          <Avatar size='xs'>
+                          <Avatar size='sm'>
                             {member.user?.image && (
                               <AvatarImage src={member.user.image} alt={name} />
                             )}
@@ -663,7 +663,7 @@ export function AccessControl() {
                     return (
                       <div key={member.id} className='flex items-center justify-between'>
                         <div className='flex flex-1 items-center gap-[12px]'>
-                          <Avatar size='sm'>
+                          <Avatar size='md'>
                             {member.userImage && <AvatarImage src={member.userImage} alt={name} />}
                             <AvatarFallback
                               style={{

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/credential-sets/credential-sets.tsx

@@ -434,12 +434,10 @@ export function CredentialSets() {
     filteredOwnedSets.length === 0 &&
     !hasNoContent
 
-  // Early returns AFTER all hooks
   if (membershipsLoading || invitationsLoading) {
     return <CredentialSetsSkeleton />
   }
 
-  // Detail view for a polling group
   if (viewingSet) {
     const activeMembers = members.filter((m) => m.status === 'active')
     const totalCount = activeMembers.length + pendingInvitations.length
@@ -529,7 +527,7 @@ export function CredentialSets() {
                       return (
                         <div key={member.id} className='flex items-center justify-between'>
                           <div className='flex flex-1 items-center gap-[12px]'>
-                            <Avatar size='sm'>
+                            <Avatar size='md'>
                               {member.userImage && (
                                 <AvatarImage src={member.userImage} alt={name} />
                               )}
@@ -583,7 +581,7 @@ export function CredentialSets() {
                       return (
                         <div key={invitation.id} className='flex items-center justify-between'>
                           <div className='flex flex-1 items-center gap-[12px]'>
-                            <Avatar size='sm'>
+                            <Avatar size='md'>
                               <AvatarFallback
                                 style={{ background: getUserColor(email) }}
                                 className='border-0 text-white'

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

@@ -3,10 +3,14 @@
 import {
   Popover,
   PopoverAnchor,
+  PopoverBackButton,
   PopoverContent,
   PopoverDivider,
+  PopoverFolder,
   PopoverItem,
 } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { WORKFLOW_COLORS } from '@/lib/workflows/colors'
 
 interface ContextMenuProps {
   /**
@@ -53,6 +57,14 @@ interface ContextMenuProps {
    * Callback when delete is clicked
    */
   onDelete: () => void
+  /**
+   * Callback when color is changed
+   */
+  onColorChange?: (color: string) => void
+  /**
+   * Current workflow color (for showing selected state)
+   */
+  currentColor?: string
   /**
    * Whether to show the open in new tab option (default: false)
    * Set to true for items that can be opened in a new tab
@@ -83,11 +95,21 @@ interface ContextMenuProps {
    * Set to true for items that can be exported (like workspaces)
    */
   showExport?: boolean
+  /**
+   * Whether to show the change color option (default: false)
+   * Set to true for workflows to allow color customization
+   */
+  showColorChange?: boolean
   /**
    * Whether the export option is disabled (default: false)
    * Set to true when user lacks permissions
    */
   disableExport?: boolean
+  /**
+   * Whether the change color option is disabled (default: false)
+   * Set to true when user lacks permissions
+   */
+  disableColorChange?: boolean
   /**
    * Whether the rename option is disabled (default: false)
    * Set to true when user lacks permissions
@@ -134,13 +156,17 @@ export function ContextMenu({
   onDuplicate,
   onExport,
   onDelete,
+  onColorChange,
+  currentColor,
   showOpenInNewTab = false,
   showRename = true,
   showCreate = false,
   showCreateFolder = false,
   showDuplicate = true,
   showExport = false,
+  showColorChange = false,
   disableExport = false,
+  disableColorChange = false,
   disableRename = false,
   disableDuplicate = false,
   disableDelete = false,
@@ -150,7 +176,10 @@ export function ContextMenu({
   // Section visibility for divider logic
   const hasNavigationSection = showOpenInNewTab && onOpenInNewTab
   const hasEditSection =
-    (showRename && onRename) || (showCreate && onCreate) || (showCreateFolder && onCreateFolder)
+    (showRename && onRename) ||
+    (showCreate && onCreate) ||
+    (showCreateFolder && onCreateFolder) ||
+    (showColorChange && onColorChange)
   const hasCopySection = (showDuplicate && onDuplicate) || (showExport && onExport)
 
   return (
@@ -170,10 +199,21 @@ export function ContextMenu({
           height: '1px',
         }}
       />
-      <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+      <PopoverContent
+        ref={menuRef}
+        align='start'
+        side='bottom'
+        sideOffset={4}
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onInteractOutside={(e) => e.preventDefault()}
+      >
+        {/* Back button - shown only when in a folder */}
+        <PopoverBackButton />
+
         {/* Navigation actions */}
         {showOpenInNewTab && onOpenInNewTab && (
           <PopoverItem
+            rootOnly
             onClick={() => {
               onOpenInNewTab()
               onClose()
@@ -182,11 +222,12 @@ export function ContextMenu({
             Open in new tab
           </PopoverItem>
         )}
-        {hasNavigationSection && (hasEditSection || hasCopySection) && <PopoverDivider />}
+        {hasNavigationSection && (hasEditSection || hasCopySection) && <PopoverDivider rootOnly />}
 
         {/* Edit and create actions */}
         {showRename && onRename && (
           <PopoverItem
+            rootOnly
             disabled={disableRename}
             onClick={() => {
               onRename()
@@ -198,6 +239,7 @@ export function ContextMenu({
         )}
         {showCreate && onCreate && (
           <PopoverItem
+            rootOnly
             disabled={disableCreate}
             onClick={() => {
               onCreate()
@@ -209,6 +251,7 @@ export function ContextMenu({
         )}
         {showCreateFolder && onCreateFolder && (
           <PopoverItem
+            rootOnly
             disabled={disableCreateFolder}
             onClick={() => {
               onCreateFolder()
@@ -218,11 +261,39 @@ export function ContextMenu({
             Create folder
           </PopoverItem>
         )}
+        {showColorChange && onColorChange && (
+          <PopoverFolder
+            id='color-picker'
+            title='Change color'
+            expandOnHover
+            className={disableColorChange ? 'pointer-events-none opacity-50' : ''}
+          >
+            <div className='grid grid-cols-6 gap-[4px] p-[2px]'>
+              {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 === color && 'ring-1 ring-white'
+                  )}
+                  style={{ backgroundColor: color }}
+                />
+              ))}
+            </div>
+          </PopoverFolder>
+        )}
 
         {/* Copy and export actions */}
-        {hasEditSection && hasCopySection && <PopoverDivider />}
+        {hasEditSection && hasCopySection && <PopoverDivider rootOnly />}
         {showDuplicate && onDuplicate && (
           <PopoverItem
+            rootOnly
             disabled={disableDuplicate}
             onClick={() => {
               onDuplicate()
@@ -234,6 +305,7 @@ export function ContextMenu({
         )}
         {showExport && onExport && (
           <PopoverItem
+            rootOnly
             disabled={disableExport}
             onClick={() => {
               onExport()
@@ -245,8 +317,9 @@ export function ContextMenu({
         )}
 
         {/* Destructive action */}
-        {(hasNavigationSection || hasEditSection || hasCopySection) && <PopoverDivider />}
+        {(hasNavigationSection || hasEditSection || hasCopySection) && <PopoverDivider rootOnly />}
         <PopoverItem
+          rootOnly
           disabled={disableDelete}
           onClick={() => {
             onDelete()

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

@@ -3,8 +3,9 @@
 import { useCallback, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { ChevronRight, Folder, FolderOpen } from 'lucide-react'
+import { ChevronRight, Folder, FolderOpen, MoreHorizontal } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
@@ -23,10 +24,7 @@ import {
 import { useCreateFolder, useUpdateFolder } from '@/hooks/queries/folders'
 import { useCreateWorkflow } from '@/hooks/queries/workflows'
 import type { FolderTreeNode } from '@/stores/folders/types'
-import {
-  generateCreativeWorkflowName,
-  getNextWorkflowColor,
-} from '@/stores/workflows/registry/utils'
+import { generateCreativeWorkflowName } from '@/stores/workflows/registry/utils'
 
 const logger = createLogger('FolderItem')
 
@@ -173,6 +171,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     menuRef,
     handleContextMenu,
     closeMenu,
+    preventDismiss,
   } = useContextMenu()
 
   // Rename hook
@@ -242,6 +241,40 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
     [isEditing, handleRenameKeyDown, handleExpandKeyDown]
   )
 
+  /**
+   * Handle more button pointerdown - prevents click-outside dismissal when toggling
+   */
+  const handleMorePointerDown = useCallback(() => {
+    if (isContextMenuOpen) {
+      preventDismiss()
+    }
+  }, [isContextMenuOpen, preventDismiss])
+
+  /**
+   * Handle more button click - toggles context menu at button position
+   */
+  const handleMoreClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      // Toggle: close if open, open if closed
+      if (isContextMenuOpen) {
+        closeMenu()
+        return
+      }
+
+      const rect = e.currentTarget.getBoundingClientRect()
+      handleContextMenu({
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        clientX: rect.right,
+        clientY: rect.top,
+      } as React.MouseEvent)
+    },
+    [isContextMenuOpen, closeMenu, handleContextMenu]
+  )
+
   return (
     <>
       <div
@@ -303,12 +336,22 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
             spellCheck='false'
           />
         ) : (
-          <span
-            className='truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-            onDoubleClick={handleDoubleClick}
-          >
-            {folder.name}
-          </span>
+          <>
+            <span
+              className='min-w-0 flex-1 truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+              onDoubleClick={handleDoubleClick}
+            >
+              {folder.name}
+            </span>
+            <button
+              type='button'
+              onPointerDown={handleMorePointerDown}
+              onClick={handleMoreClick}
+              className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)] group-hover:opacity-100'
+            >
+              <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
+            </button>
+          </>
         )}
       </div>