From 891e18af8eb90f697918dbc68a39b9d94fe9a35e Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Mon, 17 Mar 2025 09:15:34 -0700
Subject: [PATCH] [Manager] Improve node pack card header style (#3098)

---
 .../content/manager/ManagerDialogContent.vue  |  2 +-
 .../content/manager/packCard/PackCard.vue     | 36 +++------------
 .../manager/packCard/PackCardFooter.vue       |  2 +-
 .../manager/packCard/PackCardHeader.vue       | 46 +++++++++++++++++++
 4 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 src/components/dialog/content/manager/packCard/PackCardHeader.vue

diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/components/dialog/content/manager/ManagerDialogContent.vue
index 05fa6830c..daf890a50 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -124,7 +124,7 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
 
-const DEFAULT_CARD_SIZE = 512
+const DEFAULT_CARD_SIZE = 349
 
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/components/dialog/content/manager/packCard/PackCard.vue
index 0903b5a59..a1b291d5b 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/components/dialog/content/manager/packCard/PackCard.vue
@@ -5,39 +5,17 @@
       'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
     }"
     :pt="{
-      body: { class: 'p-0 flex flex-col h-full rounded-2xl' },
+      body: { class: 'p-0 flex flex-col h-full rounded-2xl gap-0' },
       content: { class: 'flex-1 flex flex-col rounded-2xl' },
-      title: { class: 'p-0 m-0' },
+      title: {
+        class:
+          'self-stretch px-4 py-3 inline-flex justify-start items-center gap-6'
+      },
       footer: { class: 'p-0 m-0' }
     }"
   >
     <template #title>
-      <div class="flex justify-between p-5 pb-1 align-middle text-sm">
-        <span class="flex items-start mt-2">
-          <i
-            class="pi pi-box text-muted text-2xl ml-1 mr-5"
-            style="opacity: 0.5"
-          />
-          <span class="text-lg relative top-[.25rem]">{{
-            $t('manager.nodePack')
-          }}</span>
-        </span>
-        <div class="flex items-center gap-2.5">
-          <div
-            v-if="nodePack.downloads"
-            class="flex items-center text-sm text-muted tracking-tighter"
-          >
-            <i class="pi pi-download mr-2" />
-            {{ $n(nodePack.downloads) }}
-          </div>
-          <template v-if="isPackInstalled">
-            <PackEnableToggle :node-pack="nodePack" />
-          </template>
-          <template v-else>
-            <PackInstallButton :node-packs="[nodePack]" />
-          </template>
-        </div>
-      </div>
+      <PackCardHeader :node-pack="nodePack" />
     </template>
     <template #content>
       <ContentDivider />
@@ -102,8 +80,6 @@ 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'
diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
index b88b46d38..dcfadf9c8 100644
--- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue
+++ b/src/components/dialog/content/manager/packCard/PackCardFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex justify-between p-5 text-xs text-muted font-medium leading-3"
+    class="flex justify-between px-5 py-4 text-xs text-muted font-medium leading-3"
   >
     <div class="flex items-center gap-2 cursor-pointer">
       <span v-if="publisherName" class="max-w-40 truncate">
diff --git a/src/components/dialog/content/manager/packCard/PackCardHeader.vue b/src/components/dialog/content/manager/packCard/PackCardHeader.vue
new file mode 100644
index 000000000..77049e571
--- /dev/null
+++ b/src/components/dialog/content/manager/packCard/PackCardHeader.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="w-[100%] flex justify-between items-center">
+    <div class="flex justify-start items-center">
+      <div class="w-1 h-6 rounded-md" />
+      <div class="w-6 h-6 relative overflow-hidden">
+        <i class="pi pi-box text-xl text-muted" style="opacity: 0.6" />
+      </div>
+      <div class="px-3 py-2 rounded-md flex justify-start items-start gap-2.5">
+        <div class="text-right justify-start text-sm font-bold leading-none">
+          {{ $t('manager.nodePack') }}
+        </div>
+      </div>
+    </div>
+    <div class="inline-flex justify-start items-center gap-3">
+      <div
+        v-if="nodePack.downloads"
+        class="flex items-center text-sm text-muted tracking-tighter"
+      >
+        <i class="pi pi-download mr-2" />
+        {{ $n(nodePack.downloads) }}
+      </div>
+      <template v-if="isInstalled">
+        <PackEnableToggle :node-pack="nodePack" />
+      </template>
+      <template v-else>
+        <PackInstallButton :node-packs="[nodePack]" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.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>