[feat] Add red styling to Remove Slot context menu option (#4918)

Co-authored-by: Claude <noreply@anthropic.com>

src/lib/litegraph/public/css/litegraph.css

@@ -495,6 +495,16 @@
   padding-left: 12px;
 }
 
+.graphmenu-entry.danger,
+.litemenu-entry.danger {
+  color: var(--error-text) !important;
+}
+
+.litegraph .litemenu-entry.danger:hover:not(.disabled) {
+  color: var(--error-text) !important;
+  opacity: 0.8;
+}
+
 .graphmenu-entry.disabled {
   opacity: 0.3;
 }

src/lib/litegraph/src/LGraphCanvas.ts

@@ -8244,7 +8244,9 @@ export class LGraphCanvas
           if (_slot.removable) {
             menu_info.push(null)
             menu_info.push(
-              _slot.locked ? 'Cannot remove' : { content: 'Remove Slot', slot }
+              _slot.locked
+                ? 'Cannot remove'
+                : { content: 'Remove Slot', slot, className: 'danger' }
             )
           }
 

src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts

@@ -191,7 +191,7 @@ export abstract class SubgraphIONodeBase<
    * @param event The event that triggered the context menu.
    */
   protected showSlotContextMenu(slot: TSlot, event: CanvasPointerEvent): void {
-    const options: IContextMenuValue[] = this.#getSlotMenuOptions(slot)
+    const options: (IContextMenuValue | null)[] = this.#getSlotMenuOptions(slot)
     if (!(options.length > 0)) return
 
     new LiteGraph.ContextMenu(options, {
@@ -208,20 +208,26 @@ export abstract class SubgraphIONodeBase<
    * @param slot The slot to get the context menu options for.
    * @returns The context menu options.
    */
-  #getSlotMenuOptions(slot: TSlot): IContextMenuValue[] {
-    const options: IContextMenuValue[] = []
+  #getSlotMenuOptions(slot: TSlot): (IContextMenuValue | null)[] {
+    const options: (IContextMenuValue | null)[] = []
 
     // Disconnect option if slot has connections
     if (slot !== this.emptySlot && slot.linkIds.length > 0) {
       options.push({ content: 'Disconnect Links', value: 'disconnect' })
     }
 
-    // Remove / rename slot option (except for the empty slot)
+    // Rename slot option (except for the empty slot)
     if (slot !== this.emptySlot) {
-      options.push(
-        { content: 'Remove Slot', value: 'remove' },
-        { content: 'Rename Slot', value: 'rename' }
-      )
+      options.push({ content: 'Rename Slot', value: 'rename' })
+    }
+
+    if (slot !== this.emptySlot) {
+      options.push(null) // separator
+      options.push({
+        content: 'Remove Slot',
+        value: 'remove',
+        className: 'danger'
+      })
     }
 
     return options