Add custom nodes manager UI (#2923)

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

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -0,0 +1,41 @@
+<template>
+  <img
+    :src="isImageError ? DEFAULT_ICON : imgSrc"
+    :alt="nodePack.name + ' icon'"
+    class="object-contain rounded-lg"
+    :style="{ width: cssWidth, height: cssHeight }"
+    @error="isImageError = true"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { components } from '@/types/comfyRegistryTypes'
+
+const DEFAULT_ICON = '/assets/images/fallback-gradient-avatar.svg'
+
+const {
+  nodePack,
+  width = '4.5rem',
+  height = '4.5rem'
+} = defineProps<{
+  nodePack: components['schemas']['Node']
+  width?: string
+  height?: string
+}>()
+
+const isImageError = ref(false)
+const shouldShowFallback = computed(
+  () => !nodePack.icon || nodePack.icon.trim() === '' || isImageError.value
+)
+const imgSrc = computed(() =>
+  shouldShowFallback.value ? DEFAULT_ICON : 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/packIcon/PackIconStacked.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="relative w-24 h-24">
+    <div
+      v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
+      :key="pack.id"
+      class="absolute"
+      :style="{
+        bottom: `${index * offset}px`,
+        right: `${index * offset}px`,
+        zIndex: maxVisible - index
+      }"
+    >
+      <div
+        class="border border-surface-border bg-surface-card rounded-lg p-0.5"
+      >
+        <PackIcon :node-pack="pack" width="4.5rem" height="4.5rem" />
+      </div>
+    </div>
+    <div
+      v-if="nodePacks.length > maxVisible"
+      class="absolute -top-2 -right-2 bg-primary rounded-full w-7 h-7 flex items-center justify-center text-xs font-bold shadow-md z-10"
+    >
+      +{{ nodePacks.length - maxVisible }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { components } from '@/types/comfyRegistryTypes'
+
+const {
+  nodePacks,
+  maxVisible = 3,
+  offset = 8
+} = defineProps<{
+  nodePacks: components['schemas']['Node'][]
+  maxVisible?: number
+  offset?: number
+}>()
+</script>