diff --git a/frontend/src/lib/components/common/contextmenu/ContextMenu.svelte b/frontend/src/lib/components/common/contextmenu/ContextMenu.svelte
index 86a2dc7ccb..ccab6ef3f0 100644
--- a/frontend/src/lib/components/common/contextmenu/ContextMenu.svelte
+++ b/frontend/src/lib/components/common/contextmenu/ContextMenu.svelte
@@ -8,6 +8,7 @@
getContextMenuContainerClass,
CONTEXT_MENU_ITEM_BASE_CLASS,
CONTEXT_MENU_ITEM_HOVER_MELT_CLASS,
+ CONTEXT_MENU_ITEM_DELETE_CLASS,
CONTEXT_MENU_ITEM_DISABLED_CLASS,
CONTEXT_MENU_DIVIDER_CLASS,
CONTEXT_MENU_ANIMATION_CLASSES
@@ -20,6 +21,8 @@
disabled?: boolean
onClick?: () => void
divider?: boolean
+ type?: 'action' | 'delete'
+ shortcut?: string
}
interface Props {
@@ -111,18 +114,23 @@
CONTEXT_MENU_ITEM_BASE_CLASS,
menuItem.disabled
? CONTEXT_MENU_ITEM_DISABLED_CLASS
- : CONTEXT_MENU_ITEM_HOVER_MELT_CLASS
+ : menuItem.type === 'delete'
+ ? CONTEXT_MENU_ITEM_DELETE_CLASS
+ : CONTEXT_MENU_ITEM_HOVER_MELT_CLASS
)}
use:melt={$item}
onclick={() => handleItemClick(menuItem)}
>
{#if menuItem.icon}
-
+
{/if}
{#if menu}
{@render menu({ item: menuItem })}
{:else}
- {menuItem.label}
+ {menuItem.label}
+ {/if}
+ {#if menuItem.shortcut}
+ {menuItem.shortcut}
{/if}
{/if}
diff --git a/frontend/src/lib/components/common/contextmenu/contextMenuStyles.ts b/frontend/src/lib/components/common/contextmenu/contextMenuStyles.ts
index ecbe6c6f87..16844dc3d9 100644
--- a/frontend/src/lib/components/common/contextmenu/contextMenuStyles.ts
+++ b/frontend/src/lib/components/common/contextmenu/contextMenuStyles.ts
@@ -27,6 +27,12 @@ export const CONTEXT_MENU_ITEM_HOVER_CLASS = 'hover:bg-surface-hover'
*/
export const CONTEXT_MENU_ITEM_HOVER_MELT_CLASS = 'data-[highlighted]:bg-surface-hover'
+/**
+ * Delete action styles for context menu items
+ */
+export const CONTEXT_MENU_ITEM_DELETE_CLASS =
+ 'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300'
+
/**
* Disabled state styles for context menu items
*/
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 0a0fe310f0..28c66c05ca 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -535,7 +535,7 @@
{/if}
- {#if !isMultiSelected && id !== 'preprocessor' && menuItems && menuItems.length > 0}
+ {#if !isMultiSelected && menuItems && menuItems.length > 0}
data.eventHandlers.move({ id: data.id })
- },
- {
- displayName: 'Duplicate',
- icon: Copy,
- action: () => data.eventHandlers.duplicate({ id: data.id })
- },
+ ...(isPreprocessor
+ ? []
+ : [
+ {
+ displayName: 'Move',
+ icon: Move,
+ action: () => data.eventHandlers.move({ id: data.id })
+ },
+ {
+ displayName: 'Duplicate',
+ icon: Copy,
+ action: () => data.eventHandlers.duplicate({ id: data.id })
+ }
+ ]),
{
displayName: 'Delete',
icon: Trash2,
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte b/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
index 0563a32636..97c9429a63 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NodeWrapper.svelte
@@ -29,13 +29,18 @@
let resolvedContextMenuItems: ContextMenuItem[] | undefined = $derived(
contextMenuItems ??
- menuItems?.map((item) => ({
- id: item.displayName,
- label: item.displayName,
- icon: item.icon,
- disabled: item.disabled,
- onClick: item.action as (() => void) | undefined
- }))
+ menuItems?.flatMap((item) => [
+ ...(item.separatorTop ? [{ id: `${item.displayName}-divider`, label: '', divider: true }] : []),
+ {
+ id: item.displayName,
+ label: item.displayName,
+ icon: item.icon,
+ disabled: item.disabled,
+ type: item.type,
+ shortcut: item.shortcut,
+ onClick: item.action as (() => void) | undefined
+ }
+ ])
)
const { moveManager } = getGraphContext()