Add node pack actions: install, uninstall, enable, disable, change version (#3016)

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

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

@@ -1,10 +1,7 @@
 <template>
   <div class="flex flex-col h-full z-40 hidden-scrollbar w-80">
     <div class="p-6 flex-1 overflow-hidden text-sm">
-      <PackCardHeader
-        :node-pack="nodePack"
-        :install-button-full-width="false"
-      />
+      <InfoPanelHeader :node-packs="[nodePack]" />
       <div class="mb-6">
         <MetadataRow
           v-for="item in infoItems"
@@ -21,11 +18,7 @@
           />
         </MetadataRow>
         <MetadataRow :label="t('manager.version')">
-          <PackVersionBadge
-            :node-pack="nodePack"
-            :version="selectedVersion"
-            @update:version="updateSelectedVersion"
-          />
+          <PackVersionBadge :node-pack="nodePack" />
         </MetadataRow>
       </div>
       <div class="mb-6 overflow-hidden">
@@ -36,17 +29,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
+import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
 import InfoTabs from '@/components/dialog/content/manager/infoPanel/InfoTabs.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
-import PackCardHeader from '@/components/dialog/content/manager/packCard/PackCardHeader.vue'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
-import { formatNumber } from '@/utils/formatUtil'
 
 interface InfoItem {
   key: string
@@ -58,31 +49,18 @@ const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
-const { t, d } = useI18n()
-
-const packCardHeaderRef = ref(null)
-
-const selectedVersion = ref<string>(
-  nodePack.latest_version?.version || SelectedVersion.NIGHTLY
-)
-const updateSelectedVersion = (version: string) => {
-  selectedVersion.value = version
-  if (packCardHeaderRef.value) {
-    packCardHeaderRef.value.updateVersion?.(version)
-  }
-}
+const { t, d, n } = useI18n()
 
 const infoItems = computed<InfoItem[]>(() => [
   {
     key: 'publisher',
     label: t('manager.createdBy'),
-    // TODO: handle all Comfy Registry publisher types dynamically (e.g., organizations, multiple authors)
-    value: nodePack.publisher?.name
+    value: nodePack.publisher?.name ?? nodePack.publisher?.id
   },
   {
     key: 'downloads',
     label: t('manager.downloads'),
-    value: nodePack.downloads ? formatNumber(nodePack.downloads) : undefined
+    value: nodePack.downloads ? n(nodePack.downloads) : undefined
   },
   {
     key: 'lastUpdated',

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

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
+    <slot name="thumbnail">
+      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
+    </slot>
+    <h2
+      class="text-2xl font-bold text-center mt-4 mb-2"
+      style="word-break: break-all"
+    >
+      <slot name="title">
+        {{ nodePacks[0].name }}
+      </slot>
+    </h2>
+    <div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
+      <slot name="install-button">
+        <PackUninstallButton
+          v-if="isAllInstalled"
+          v-bind="$attrs"
+          :node-packs="nodePacks"
+        />
+        <PackInstallButton v-else v-bind="$attrs" :node-packs="nodePacks" />
+      </slot>
+    </div>
+  </div>
+  <div v-else class="flex flex-col items-center mb-6">
+    <NoResultsPlaceholder
+      :message="$t('manager.status.unknown')"
+      :title="$t('manager.tryAgainLater')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
+import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { components } from '@/types/comfyRegistryTypes'
+
+const { nodePacks } = defineProps<{
+  nodePacks: components['schemas']['Node'][]
+}>()
+
+const managerStore = useComfyManagerStore()
+
+const isAllInstalled = computed(() =>
+  nodePacks.every((nodePack) => managerStore.isPackInstalled(nodePack.id))
+)
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-full">
     <div class="p-6 flex-1 overflow-auto">
-      <PackCardHeader>
+      <InfoPanelHeader :node-packs="nodePacks">
         <template #thumbnail>
           <PackIconStacked :node-packs="nodePacks" />
         </template>
@@ -10,9 +10,9 @@
           {{ $t('manager.packsSelected') }}
         </template>
         <template #install-button>
-          <PackInstallButton :full-width="true" :multi="true" />
+          <PackInstallButton :full-width="true" :node-packs="nodePacks" />
         </template>
-      </PackCardHeader>
+      </InfoPanelHeader>
       <div class="mb-6">
         <MetadataRow :label="$t('g.status')">
           <PackStatusMessage status-type="NodeVersionStatusActive" />
@@ -30,10 +30,10 @@
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
-import PackInstallButton from '@/components/dialog/content/manager/PackInstallButton.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 PackCardHeader from '@/components/dialog/content/manager/packCard/PackCardHeader.vue'
 import PackIconStacked from '@/components/dialog/content/manager/packIcon/PackIconStacked.vue'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { components } from '@/types/comfyRegistryTypes'
@@ -59,6 +59,7 @@ const { state: allNodeDefs } = useAsyncState(
     immediate: true
   }
 )
+
 const totalNodesCount = computed(() =>
   allNodeDefs.value.reduce(
     (total, nodeDefs) => total + (nodeDefs?.length || 0),