Merge branch 'main' into glm/fix-flow-layout

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}
-						<menuItem.icon size={14} class="mr-2" />
+						<menuItem.icon size={14} class="mr-2 shrink-0" />
 					{/if}
 					{#if menu}
 						{@render menu({ item: menuItem })}
 					{:else}
-						<span>{menuItem.label}</span>
+						<span class="grow">{menuItem.label}</span>
+					{/if}
+					{#if menuItem.shortcut}
+						<span class="ml-auto pl-4 text-2xs text-secondary shrink-0">{menuItem.shortcut}</span>
 					{/if}
 				</div>
 			{/if}

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
  */

frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte

@@ -535,7 +535,7 @@
 				</div>
 			{/if}
 
-			{#if !isMultiSelected && id !== 'preprocessor' && menuItems && menuItems.length > 0}
+			{#if !isMultiSelected && menuItems && menuItems.length > 0}
 				<div
 					class="absolute -translate-y-[100%] top-2 -right-2 h-7 p-1 min-w-7"
 					style="will-change: transform;"

frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte

@@ -47,19 +47,25 @@
 		(noteEditorContext?.noteEditor?.isNodeOnlyMemberOfGroupNote(data.id) ?? false)
 	)
 
+	let isPreprocessor = $derived(data.id === 'preprocessor')
+
 	const menuItems: Item[] = $derived(
 		data.editMode
 			? [
-					{
-						displayName: 'Move',
-						icon: Move,
-						action: () => 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,

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()