[Manager] Standardize Card Aspect Ratios & Enhance UI (#4271)

Co-authored-by: Claude <noreply@anthropic.com>

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -1,6 +1,5 @@
 import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
-import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -33,6 +32,12 @@ vi.mock('@/stores/comfyManagerStore', () => ({
   }))
 }))
 
+vi.mock('@/composables/nodePack/usePackUpdateStatus', () => ({
+  usePackUpdateStatus: vi.fn(() => ({
+    isUpdateAvailable: false
+  }))
+}))
+
 const mockToggle = vi.fn()
 const mockHide = vi.fn()
 const PopoverStub = {
@@ -78,9 +83,9 @@ describe('PackVersionBadge', () => {
   it('renders with installed version from store', () => {
     const wrapper = mountComponent()
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe('1.5.0') // From mockInstalledPacks
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe('1.5.0') // From mockInstalledPacks
   })
 
   it('falls back to latest_version when not installed', () => {
@@ -97,9 +102,9 @@ describe('PackVersionBadge', () => {
       props: { nodePack: uninstalledPack }
     })
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe('3.0.0') // From latest_version
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe('3.0.0') // From latest_version
   })
 
   it('falls back to NIGHTLY when no latest_version and not installed', () => {
@@ -113,9 +118,9 @@ describe('PackVersionBadge', () => {
       props: { nodePack: noVersionPack }
     })
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe(SelectedVersion.NIGHTLY)
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
   })
 
   it('falls back to NIGHTLY when nodePack.id is missing', () => {
@@ -127,16 +132,16 @@ describe('PackVersionBadge', () => {
       props: { nodePack: invalidPack }
     })
 
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.props('label')).toBe(SelectedVersion.NIGHTLY)
+    const badge = wrapper.find('[role="button"]')
+    expect(badge.exists()).toBe(true)
+    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
   })
 
   it('toggles the popover when button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Click the button
-    await wrapper.findComponent(Button).trigger('click')
+    // Click the badge
+    await wrapper.find('[role="button"]').trigger('click')
 
     // Verify that the toggle method was called
     expect(mockToggle).toHaveBeenCalled()

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -1,18 +1,23 @@
 <template>
-  <div class="relative">
-    <Button
-      :label="installedVersion"
-      severity="secondary"
-      icon="pi pi-chevron-right"
-      icon-pos="right"
-      class="rounded-xl text-xs tracking-tighter p-0"
-      :pt="{
-        label: { class: 'pl-2 pr-0 py-0.5' },
-        icon: { class: 'text-xs pl-0 pr-2 py-0.5' }
-      }"
+  <div>
+    <div
+      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer px-2 py-1"
+      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700': fill }"
       aria-haspopup="true"
+      role="button"
+      tabindex="0"
       @click="toggleVersionSelector"
-    />
+      @keydown.enter="toggleVersionSelector"
+      @keydown.space="toggleVersionSelector"
+    >
+      <i
+        v-if="isUpdateAvailable"
+        class="pi pi-arrow-circle-up text-blue-600"
+        style="font-size: 8px"
+      />
+      <span>{{ installedVersion }}</span>
+      <i class="pi pi-chevron-right" style="font-size: 8px" />
+    </div>
 
     <Popover
       ref="popoverRef"
@@ -31,11 +36,11 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, ref, watch } from 'vue'
 
 import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { SelectedVersion } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
@@ -43,11 +48,17 @@ import { isSemVer } from '@/utils/formatUtil'
 
 const TRUNCATED_HASH_LENGTH = 7
 
-const { nodePack, isSelected } = defineProps<{
+const {
+  nodePack,
+  isSelected,
+  fill = true
+} = defineProps<{
   nodePack: components['schemas']['Node']
   isSelected: boolean
+  fill?: boolean
 }>()
 
+const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
 const popoverRef = ref()
 
 const managerStore = useComfyManagerStore()

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -1,7 +1,7 @@
 <template>
   <Button
     outlined
-    class="!m-0 p-0 rounded-lg"
+    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
     :class="[
       variant === 'black'
         ? 'bg-neutral-900 text-white border-neutral-900'
@@ -12,7 +12,7 @@
     v-bind="$attrs"
     @click="onClick"
   >
-    <span class="py-2.5 px-3 whitespace-nowrap">
+    <span class="py-2 px-3 whitespace-nowrap">
       <template v-if="loading">
         {{ loadingMessage ?? $t('g.loading') }}
       </template>

src/components/dialog/content/manager/packBanner/PackBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ width: cssWidth, height: cssHeight }" class="overflow-hidden">
+  <div class="w-full aspect-[7/3] overflow-hidden">
     <!-- default banner show -->
     <div v-if="showDefaultBanner" class="w-full h-full">
       <img
@@ -41,24 +41,12 @@ import { components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 
-const {
-  nodePack,
-  width = '100%',
-  height = '12rem'
-} = defineProps<{
+const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
-  width?: string
-  height?: string
 }>()
 
 const isImageError = ref(false)
 
 const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
 const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
-
-const convertToCssValue = (value: string | number) =>
-  typeof value === 'number' ? `${value}rem` : value
-
-const cssWidth = computed(() => convertToCssValue(width))
-const cssHeight = computed(() => convertToCssValue(height))
 </script>

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -9,7 +9,12 @@
       body: { class: 'p-0 flex flex-col w-full h-full rounded-lg gap-0' },
       content: { class: 'flex-1 flex flex-col rounded-lg min-h-0' },
       title: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
-      footer: { class: 'p-0 m-0' }
+      footer: {
+        class: 'p-0 m-0 flex flex-col gap-0',
+        style: {
+          borderTop: isLightTheme ? '1px solid #f4f4f4' : '1px solid #2C2C2C'
+        }
+      }
     }"
   >
     <template #title>
@@ -29,75 +34,50 @@
         </div>
       </template>
       <template v-else>
-        <div
-          class="self-stretch inline-flex flex-col justify-start items-start"
-        >
-          <div
-            class="px-4 py-3 inline-flex justify-start items-start cursor-pointer w-full"
-          >
-            <div
-              class="inline-flex flex-col justify-start items-start overflow-hidden gap-y-3 w-full"
+        <div class="pt-4 px-4 pb-3 w-full h-full">
+          <div class="flex flex-col gap-y-1 w-full h-full">
+            <span
+              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
             >
-              <span
-                class="text-base font-bold truncate overflow-hidden text-ellipsis"
-              >
-                {{ nodePack.name }}
-              </span>
-              <p
-                v-if="nodePack.description"
-                class="flex-1 justify-start text-muted text-sm font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-5"
-              >
-                {{ nodePack.description }}
-              </p>
-              <div class="flex flex-col gap-y-2">
+              {{ nodePack.name }}
+            </span>
+            <p
+              v-if="nodePack.description"
+              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
+            >
+              {{ nodePack.description }}
+            </p>
+            <div class="flex flex-col gap-y-2">
+              <div class="flex-1 flex items-center gap-2">
+                <div v-if="nodesCount" class="p-2 pl-0 text-xs">
+                  {{ nodesCount }} {{ $t('g.nodes') }}
+                </div>
+                <PackVersionBadge
+                  :node-pack="nodePack"
+                  :is-selected="isSelected"
+                  :fill="false"
+                />
                 <div
-                  class="self-stretch inline-flex justify-start items-center gap-1"
+                  v-if="formattedLatestVersionDate"
+                  class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
                 >
-                  <div
-                    v-if="nodesCount"
-                    class="pr-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"
-                      :is-selected="isSelected"
-                    />
-                  </div>
-                  <div
-                    v-if="formattedLatestVersionDate"
-                    class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
-                  >
-                    {{ formattedLatestVersionDate }}
-                  </div>
-                </div>
-                <div class="flex">
-                  <span
-                    v-if="publisherName"
-                    class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
-                  >
-                    {{ publisherName }}
-                  </span>
+                  {{ formattedLatestVersionDate }}
                 </div>
               </div>
+              <div class="flex">
+                <span
+                  v-if="publisherName"
+                  class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
+                >
+                  {{ publisherName }}
+                </span>
+              </div>
             </div>
           </div>
         </div>
       </template>
     </template>
     <template #footer>
-      <ContentDivider :width="0.1" />
       <PackCardFooter :node-pack="nodePack" />
     </template>
   </Card>
@@ -110,12 +90,11 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
 import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
-import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import {
   IsInstallingKey,
   type MergedNodePack,
@@ -130,11 +109,15 @@ const { nodePack, isSelected = false } = defineProps<{
 
 const { d } = useI18n()
 
+const colorPaletteStore = useColorPaletteStore()
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 
 const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
-const { isUpdateAvailable } = usePackUpdateStatus(nodePack)
 
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 const isDisabled = computed(
@@ -167,14 +150,14 @@ const formattedLatestVersionDate = computed(() => {
   position: relative;
 }
 
-.selected-card::before {
+.selected-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  border: 3px solid var(--p-primary-color);
+  border: 4px solid var(--p-primary-color);
   border-radius: 0.5rem;
   pointer-events: none;
   z-index: 100;

src/components/dialog/content/manager/packCard/PackCardFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
+    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
   >
     <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
       <i class="pi pi-download text-muted"></i>