From 58be9ad4c3e75c6d125bdf8e0c7fb48df6f9336b Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Thu, 13 Mar 2025 16:45:09 -0700
Subject: [PATCH] [Manager] Refactor node pack card footer to separate
 component (#3028)

---
 .../content/manager/packCard/PackCard.vue     | 25 +-----------
 .../manager/packCard/PackCardFooter.vue       | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 src/components/dialog/content/manager/packCard/PackCardFooter.vue

diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 1648c5106..04f655da7 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -66,28 +66,7 @@
     </template>
     <template #footer>
       <ContentDivider :width="0.1" />
-      <div class="flex justify-between p-5 text-xs text-muted">
-        <div class="flex items-center gap-2 cursor-pointer">
-          <span v-if="nodePack.publisher?.name">
-            {{ nodePack.publisher.name }}
-          </span>
-          <PackVersionBadge v-if="isPackInstalled" :node-pack="nodePack" />
-          <span v-else-if="nodePack.latest_version">
-            {{ nodePack.latest_version.version }}
-          </span>
-        </div>
-        <div
-          v-if="nodePack.latest_version?.createdAt"
-          class="flex items-center gap-2 truncate"
-        >
-          {{ $t('g.updated') }}
-          {{
-            $d(new Date(nodePack.latest_version.createdAt), {
-              dateStyle: 'medium'
-            })
-          }}
-        </div>
-      </div>
+      <PackCardFooter :node-pack="nodePack" />
     </template>
   </Card>
 </template>
@@ -97,9 +76,9 @@ import Card from 'primevue/card'
 import { computed } from 'vue'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
-import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.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 type { components } from '@/types/comfyRegistryTypes'
diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
new file mode 100644
index 000000000..a36230d20
--- /dev/null
+++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex justify-between p-5 text-xs text-muted">
+    <div class="flex items-center gap-2 cursor-pointer">
+      <span v-if="nodePack.publisher?.name">
+        {{ nodePack.publisher.name }}
+      </span>
+      <PackVersionBadge v-if="isInstalled" :node-pack="nodePack" />
+      <span v-else-if="nodePack.latest_version">
+        {{ nodePack.latest_version.version }}
+      </span>
+    </div>
+    <div
+      v-if="nodePack.latest_version?.createdAt"
+      class="flex items-center gap-2 truncate"
+    >
+      {{ $t('g.updated') }}
+      {{
+        $d(new Date(nodePack.latest_version.createdAt), {
+          dateStyle: 'medium'
+        })
+      }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+const { nodePack } = defineProps<{
+  nodePack: components['schemas']['Node']
+}>()
+
+const { isPackInstalled } = useComfyManagerStore()
+const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+</script>