From 1a120adaea1c9d85621d577b1868e772e7345089 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Mon, 17 Mar 2025 17:17:36 -0700
Subject: [PATCH] [Manager] Adjust node pack card style according to installing
 or disabled state (#3103)

---
 .../manager/button/PackInstallButton.vue      |   7 ++
 .../content/manager/packCard/PackCard.vue     | 102 +++++++++++-------
 src/types/comfyManagerTypes.ts                |   5 +
 3 files changed, 77 insertions(+), 37 deletions(-)

diff --git a/src/components/dialog/content/manager/button/PackInstallButton.vue b/src/components/dialog/content/manager/button/PackInstallButton.vue
index 2d86e43871..16c03ff457 100644
--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/components/dialog/content/manager/button/PackInstallButton.vue
@@ -11,9 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import { inject, ref } from 'vue'
+
 import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import {
+  IsInstallingKey,
   ManagerChannel,
   ManagerDatabaseSource,
   SelectedVersion
@@ -26,6 +29,8 @@ const { nodePacks } = defineProps<{
   nodePacks: NodePack[]
 }>()
 
+const isInstalling = inject(IsInstallingKey, ref(false))
+
 const managerStore = useComfyManagerStore()
 
 const createPayload = (installItem: NodePack) => {
@@ -50,6 +55,8 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
   if (!nodePacks?.length) return
 
+  isInstalling.value = true
+
   const uninstalledPacks = nodePacks.filter(
     (pack) => !managerStore.isPackInstalled(pack.id)
   )
diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 7f6ef90354..afe1a06955 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -2,7 +2,8 @@
   <Card
     class="w-full h-full inline-flex flex-col justify-between items-start overflow-hidden rounded-2xl shadow-elevation-3 dark-theme:bg-dark-elevation-2 transition-all duration-200"
     :class="{
-      'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
+      'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected,
+      'opacity-60': isDisabled
     }"
     :pt="{
       body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
@@ -19,53 +20,67 @@
     </template>
     <template #content>
       <ContentDivider />
-      <div
-        class="self-stretch px-4 py-3 inline-flex justify-start items-start cursor-pointer"
-      >
-        <PackIcon :node-pack="nodePack" />
+      <template v-if="isInstalling">
         <div
-          class="px-4 inline-flex flex-col justify-start items-start overflow-hidden"
+          class="self-stretch inline-flex flex-col justify-center items-center gap-2 h-full"
         >
-          <span
-            class="text-sm font-bold truncate overflow-hidden text-ellipsis"
-            :title="nodePack.name"
-          >
-            {{ nodePack.name }}
-          </span>
+          <ProgressSpinner />
           <div
-            class="self-stretch inline-flex justify-center items-center gap-2.5"
+            class="self-stretch text-center justify-start text-sm font-medium leading-none"
           >
-            <p
-              v-if="nodePack.description"
-              class="flex-1 justify-start text-muted text-sm font-medium leading-3 break-words overflow-hidden min-h-12 line-clamp-3"
-              :title="nodePack.description"
-            >
-              {{ nodePack.description }}
-            </p>
+            {{ $t('g.installing') }}...
           </div>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          class="self-stretch px-4 py-3 inline-flex justify-start items-start cursor-pointer"
+        >
+          <PackIcon :node-pack="nodePack" />
           <div
-            class="self-stretch inline-flex justify-start items-center gap-2"
+            class="px-4 inline-flex flex-col justify-start items-start overflow-hidden"
           >
-            <div
-              v-if="nodesCount"
-              class="px-2 py-1 flex justify-center text-sm items-center gap-1"
+            <span
+              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
+              :title="nodePack.name"
             >
-              <div class="text-center justify-center font-medium leading-3">
-                {{ nodesCount }} {{ $t('g.nodes') }}
-              </div>
-            </div>
-            <div class="px-2 py-1 flex justify-center items-center gap-1">
-              <div
-                v-if="isUpdateAvailable"
-                class="w-4 h-4 relative overflow-hidden"
+              {{ nodePack.name }}
+            </span>
+            <div
+              class="self-stretch inline-flex justify-center items-center gap-2.5"
+            >
+              <p
+                v-if="nodePack.description"
+                class="flex-1 justify-start text-muted text-sm font-medium leading-3 break-words overflow-hidden min-h-12 line-clamp-3"
+                :title="nodePack.description"
               >
-                <i class="pi pi-arrow-circle-up text-blue-600" />
+                {{ nodePack.description }}
+              </p>
+            </div>
+            <div
+              class="self-stretch inline-flex justify-start items-center gap-2"
+            >
+              <div
+                v-if="nodesCount"
+                class="px-2 py-1 flex justify-center text-sm items-center gap-1"
+              >
+                <div class="text-center justify-center font-medium leading-3">
+                  {{ nodesCount }} {{ $t('g.nodes') }}
+                </div>
+              </div>
+              <div class="px-2 py-1 flex justify-center items-center gap-1">
+                <div
+                  v-if="isUpdateAvailable"
+                  class="w-4 h-4 relative overflow-hidden"
+                >
+                  <i class="pi pi-arrow-circle-up text-blue-600" />
+                </div>
+                <PackVersionBadge :node-pack="nodePack" />
               </div>
-              <PackVersionBadge :node-pack="nodePack" />
             </div>
           </div>
         </div>
-      </div>
+      </template>
     </template>
     <template #footer>
       <ContentDivider :width="0.1" />
@@ -75,14 +90,17 @@
 </template>
 
 <script setup lang="ts">
+import { whenever } from '@vueuse/core'
 import Card from 'primevue/card'
-import { computed } from 'vue'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed, provide, ref } from 'vue'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
@@ -91,9 +109,19 @@ const { nodePack, isSelected = false } = defineProps<{
   isSelected?: boolean
 }>()
 
-const { isPackInstalled, getInstalledPackVersion } = useComfyManagerStore()
+const isInstalling = ref(false)
+provide(IsInstallingKey, isInstalling)
+
+const { isPackInstalled, isPackEnabled, getInstalledPackVersion } =
+  useComfyManagerStore()
 
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+const isDisabled = computed(
+  () => isInstalled.value && !isPackEnabled(nodePack?.id)
+)
+
+whenever(isInstalled, () => (isInstalling.value = false))
+
 const isUpdateAvailable = computed(() => {
   if (!isInstalled.value) return false
 
diff --git a/src/types/comfyManagerTypes.ts b/src/types/comfyManagerTypes.ts
index 2fcb252d4a..5337e29600 100644
--- a/src/types/comfyManagerTypes.ts
+++ b/src/types/comfyManagerTypes.ts
@@ -1,3 +1,5 @@
+import type { InjectionKey, Ref } from 'vue'
+
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import type { components } from '@/types/comfyRegistryTypes'
 
@@ -5,6 +7,9 @@ type RegistryPack = components['schemas']['Node']
 type WorkflowNodeProperties = ComfyWorkflowJSON['nodes'][0]['properties']
 export type PackField = keyof RegistryPack | null
 
+export const IsInstallingKey: InjectionKey<Ref<boolean>> =
+  Symbol('isInstalling')
+
 export interface TabItem {
   id: string
   label: string