[Manager] Preview the individual nodes for packs on the registry (#3408)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -31,28 +31,29 @@
 
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, onUnmounted } from 'vue'
 
 import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
 import PackIconStacked from '@/components/dialog/content/manager/packIcon/PackIconStacked.vue'
-import { useComfyRegistryService } from '@/services/comfyRegistryService'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { components } from '@/types/comfyRegistryTypes'
 
 const { nodePacks } = defineProps<{
   nodePacks: components['schemas']['Node'][]
 }>()
 
-const comfyRegistryService = useComfyRegistryService()
+const { getNodeDefs } = useComfyRegistryStore()
 
 const getPackNodes = async (pack: components['schemas']['Node']) => {
-  if (!comfyRegistryService.packNodesAvailable(pack)) return []
-  return comfyRegistryService.getNodeDefs({
+  if (!pack.latest_version?.version) return []
+  const nodeDefs = await getNodeDefs.call({
     packId: pack.id,
-    versionId: pack.latest_version?.id
+    version: pack.latest_version?.version
   })
+  return nodeDefs?.comfy_nodes ?? []
 }
 
 const { state: allNodeDefs } = useAsyncState(
@@ -69,4 +70,8 @@ const totalNodesCount = computed(() =>
     0
   )
 )
+
+onUnmounted(() => {
+  getNodeDefs.cancel()
+})
 </script>