Migrate node library sidebar to use unique name instead of display name (#702)

* Migrate node library sidebar to use unique name instead of display name

* Break word

src/components/common/TreeExplorerTreeNode.vue

@@ -141,4 +141,7 @@ onUnmounted(() => {
 .leaf-label {
   margin-left: 0.5rem;
 }
+:deep(.editable-text span) {
+  word-break: break-all;
+}
 </style>

src/components/graph/GraphCanvas.vue

@@ -35,6 +35,7 @@ import {
   ContextMenu
 } from '@comfyorg/litegraph'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -145,6 +146,9 @@ onMounted(async () => {
       }
     }
   })
+
+  // Migrate legacy bookmarks
+  useNodeBookmarkStore().migrateLegacyBookmarks()
   emit('ready')
 })
 

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -60,7 +60,7 @@ import {
   ComfyNodeDefImpl,
   useNodeDefStore
 } from '@/stores/nodeDefStore'
-import { computed, nextTick, ref, Ref } from 'vue'
+import { computed, nextTick, onMounted, ref, Ref } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import Popover from 'primevue/popover'
 import Divider from 'primevue/divider'

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -65,9 +65,7 @@ const bookmarkedRoot = computed<TreeNode>(() => {
   const filterTree = (node: TreeNode): TreeNode | null => {
     if (node.leaf) {
       // Check if the node's display_name is in the filteredNodeDefs list
-      return props.filteredNodeDefs.some(
-        (def) => def.display_name === node.data.display_name
-      )
+      return props.filteredNodeDefs.some((def) => def.name === node.data.name)
         ? node
         : null
     }
@@ -145,8 +143,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
             nodeBookmarkStore.toggleBookmark(nodeDefToAdd)
           }
           const folderNodeDef = node.data as ComfyNodeDefImpl
-          const nodePath =
-            folderNodeDef.category + '/' + nodeDefToAdd.display_name
+          const nodePath = folderNodeDef.category + '/' + nodeDefToAdd.name
           nodeBookmarkStore.addBookmark(nodePath)
         },
         ...(node.leaf

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import Galleria from 'primevue/galleria'
 import { ResultItemImpl } from '@/stores/queueStore'
 import ComfyImage from '@/components/common/ComfyImage.vue'