Feat: Add Badges for Vue Nodes (#6243)

## Summary

Adds the badges to the header for Vue nodes.


## Review Focus

Design, mostly. Any structures here I'm not handling but should be?

## Screenshots
<img width="1514" height="642" alt="image"
src="https://github.com/user-attachments/assets/387fd2f6-bb4b-4fee-b273-6166a52a3552"
/>

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6243-Feat-Add-Badges-for-Vue-Nodes-2956d73d36508184a250d67b127ed4b1)
by [Unito](https://www.unito.io)

---------

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

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -34,8 +34,8 @@
       {
         transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
         zIndex: zIndex,
-        backgroundColor: nodeBodyBackgroundColor,
-        opacity: nodeOpacity
+        opacity: nodeOpacity,
+        '--node-component-surface': nodeBodyBackgroundColor
       },
       dragStyle
     ]"

src/renderer/extensions/vueNodes/components/NodeBadge.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    v-if="badge.icon || badge.text"
+    class="flex flex-auto items-center rounded-sm bg-node-component-surface px-1 py-0.5"
+    :style="{
+      color: badge.fgColor,
+      backgroundColor: badge.bgColor
+    }"
+  >
+    {{ badge.text }}
+  </div>
+</template>
+<script setup lang="ts">
+import type { LGraphBadge } from '@/lib/litegraph/src/LGraphBadge'
+
+const { badge } = defineProps<{
+  badge: LGraphBadge
+}>()
+</script>

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -38,6 +38,8 @@
         </div>
 
         <div v-if="isSubgraphNode" class="icon-[comfy--workflow] size-4" />
+        <div v-if="isApiNode" class="icon-[lucide--dollar-sign] size-4" />
+
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
@@ -60,7 +62,8 @@
         <LODFallback />
       </div>
 
-      <div class="lod-toggle flex shrink-0 items-center">
+      <div class="lod-toggle flex shrink-0 items-center justify-between gap-2">
+        <NodeBadge v-for="badge of nodeBadges" :key="badge.text" :badge />
         <IconButton
           v-if="isSubgraphNode"
           v-tooltip.top="enterSubgraphTooltipConfig"
@@ -80,14 +83,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { computed, onErrorCaptured, ref, toValue, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
+import type { LGraphBadge } from '@/lib/litegraph/src/LGraphBadge'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import NodeBadge from '@/renderer/extensions/vueNodes/components/NodeBadge.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
@@ -183,8 +188,11 @@ watch(
   }
 )
 
+const nodeBadges = computed<LGraphBadge[]>(() =>
+  (nodeData?.badges ?? []).map(toValue)
+)
 const isPinned = computed(() => Boolean(nodeData?.flags?.pinned))
-
+const isApiNode = computed(() => Boolean(nodeData?.apiNode))
 // Subgraph detection
 const isSubgraphNode = computed(() => {
   if (!nodeData?.id) return false