From 86466e2cd63da375238a1de9fc72f4b2a4aa7ec4 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Wed, 10 Sep 2025 02:45:23 +0100
Subject: [PATCH] refactor: update icon class in BypassButton and streamline
 computeSelectionStatesFromNodes function

---
 .../graph/selectionToolbox/BypassButton.vue   |  2 +-
 src/composables/graph/useSelectionState.ts    | 36 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 8742eebc6..68a54708f 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -16,7 +16,7 @@
     @click="toggleBypass"
   >
     <template #icon>
-      <i-lucide:ban class="w-4 h-4" />
+      <i-lucide:ban class="size-4" />
     </template>
   </Button>
 </template>
diff --git a/src/composables/graph/useSelectionState.ts b/src/composables/graph/useSelectionState.ts
index f51e9dcb2..39a36d96e 100644
--- a/src/composables/graph/useSelectionState.ts
+++ b/src/composables/graph/useSelectionState.ts
@@ -1,7 +1,11 @@
 import { computed } from 'vue'
 
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
-import { LGraphEventMode, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphEventMode,
+  LGraphNode,
+  Positionable
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
@@ -14,8 +18,17 @@ interface NodeSelectionState {
   pinned: boolean
   bypassed: boolean
 }
-interface RemovableItem {
-  removable?: boolean
+
+// Helper function to compute selection flags (reused by both computed and function)
+const computeSelectionStatesFromNodes = (
+  nodes: LGraphNode[]
+): NodeSelectionState => {
+  if (!nodes.length) return { collapsed: false, pinned: false, bypassed: false }
+  return {
+    collapsed: nodes.some((n) => n.flags?.collapsed),
+    pinned: nodes.some((n) => n.pinned),
+    bypassed: nodes.some((n) => n.mode === LGraphEventMode.BYPASS)
+  }
 }
 
 /**
@@ -66,19 +79,6 @@ export function useSelectionState() {
     () => filterOutputNodes(selectedNodes.value).length > 0
   )
 
-  // Helper function to compute selection flags (reused by both computed and function)
-  const computeSelectionStatesFromNodes = (
-    nodes: LGraphNode[]
-  ): NodeSelectionState => {
-    if (!nodes.length)
-      return { collapsed: false, pinned: false, bypassed: false }
-    return {
-      collapsed: nodes.some((n) => n.flags?.collapsed),
-      pinned: nodes.some((n) => n.pinned),
-      bypassed: nodes.some((n) => n.mode === LGraphEventMode.BYPASS)
-    }
-  }
-
   const selectedNodesStates = computed<NodeSelectionState>(() =>
     computeSelectionStatesFromNodes(selectedNodes.value)
   )
@@ -111,8 +111,8 @@ export function useSelectionState() {
     nodeHelpStore.openHelp(def)
   }
 
-  const isRemovableItem = (item: unknown): item is RemovableItem =>
-    item != null && typeof item === 'object' && ('removable' in item || true)
+  const isRemovableItem = (item: unknown): item is Positionable =>
+    item != null && typeof item === 'object' && 'removable' in item
 
   const isDeletable = computed(() =>
     selectedItems.value