Add experimental/deprecated tags to search result / node library (#564)

Author: huchenlei

src/components/searchbox/NodeSearchBox.vue

@@ -36,10 +36,22 @@
               {{ option.category.replaceAll('/', ' > ') }}
             </div>
           </div>
-          <NodeSourceChip
-            v-if="option.python_module !== undefined"
-            :python_module="option.python_module"
-          />
+          <div class="option-badges">
+            <Tag
+              v-if="option.experimental"
+              :value="$t('experimental')"
+              severity="primary"
+            />
+            <Tag
+              v-if="option.deprecated"
+              :value="$t('deprecated')"
+              severity="danger"
+            />
+            <NodeSourceChip
+              v-if="option.python_module !== undefined"
+              :python_module="option.python_module"
+            />
+          </div>
         </div>
       </template>
       <!-- FilterAndValue -->
@@ -60,6 +72,7 @@ import { computed, onMounted, ref } from 'vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import Chip from 'primevue/chip'
 import Badge from 'primevue/badge'
+import Tag from 'primevue/tag'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSourceChip from '@/components/node/NodeSourceChip.vue'
 import { type FilterAndValue } from '@/services/nodeSearchService'

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -63,6 +63,16 @@
           ></Badge>
         </template>
         <template #node="{ node }">
+          <Tag
+            v-if="node.data.experimental"
+            :value="$t('experimental')"
+            severity="primary"
+          />
+          <Tag
+            v-if="node.data.deprecated"
+            :value="$t('deprecated')"
+            severity="danger"
+          />
           <span class="node-label">{{ node.label }}</span>
         </template>
       </TreePlus>
@@ -83,6 +93,7 @@
 
 <script setup lang="ts">
 import Badge from 'primevue/badge'
+import Tag from 'primevue/tag'
 import ToggleButton from 'primevue/togglebutton'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { computed, ref, nextTick } from 'vue'

src/i18n.ts

@@ -7,6 +7,7 @@ const messages = {
     reconnected: 'Reconnected',
     delete: 'Delete',
     experimental: 'BETA',
+    deprecated: 'DEPR',
     loadWorkflow: 'Load Workflow',
     settings: 'Settings',
     searchSettings: 'Search Settings',