Experimental settings BETA tag (#509)

* Add BETA tag for experimental setting

* Mark node searchbox impl as experimental

* nit

Author: huchenlei

src/components/dialog/content/setting/SettingGroup.vue

@@ -8,8 +8,9 @@
       class="setting-item"
     >
       <div class="setting-label">
-        <span
-          >{{ setting.name }}
+        <span>
+          <Tag v-if="setting.experimental" :value="$t('experimental')" />
+          {{ setting.name }}
           <i
             v-if="setting.tooltip"
             class="pi pi-info-circle info-chip"
@@ -38,6 +39,7 @@ import InputNumber from 'primevue/inputnumber'
 import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
 import Divider from 'primevue/divider'
+import Tag from 'primevue/tag'
 import CustomSettingValue from '@/components/dialog/content/setting/CustomSettingValue.vue'
 import InputSlider from '@/components/dialog/content/setting/InputSlider.vue'
 import { formatCamelCase } from '@/utils/formatUtil'

src/i18n.ts

@@ -3,6 +3,7 @@ import { createI18n } from 'vue-i18n'
 const messages = {
   en: {
     delete: 'Delete',
+    experimental: 'BETA',
     loadWorkflow: 'Load Workflow',
     settings: 'Settings',
     searchSettings: 'Search Settings',

src/scripts/ui/menu/index.ts

@@ -160,7 +160,8 @@ export class ComfyAppMenu {
       id: 'Comfy.UseNewMenu',
       category: ['Comfy', 'Menu', 'UseNewMenu'],
       defaultValue: 'Disabled',
-      name: '[Beta] Use new menu and workflow management.',
+      name: 'Use new menu and workflow management.',
+      experimental: true,
       tooltip: 'On small screens the menu will always be at the top.',
       type: 'combo',
       options: ['Disabled', 'Top', 'Bottom'],

src/stores/settingStore.ts

@@ -69,7 +69,8 @@ export const useSettingStore = defineStore('setting', {
       app.ui.settings.addSetting({
         id: 'Comfy.NodeSearchBoxImpl',
         category: ['Comfy', 'Node Search Box', 'Implementation'],
-        name: 'Node Search box implementation',
+        experimental: true,
+        name: 'Node search box implementation',
         type: 'combo',
         options: ['default', 'litegraph (legacy)'],
         defaultValue: 'default'
@@ -88,7 +89,7 @@ export const useSettingStore = defineStore('setting', {
       app.ui.settings.addSetting({
         id: 'Comfy.NodeSearchBoxImpl.NodePreview',
         category: ['Comfy', 'Node Search Box', 'NodePreview'],
-        name: 'Node Preview',
+        name: 'Node preview',
         tooltip: 'Only applies to the default implementation',
         type: 'boolean',
         defaultValue: true

src/types/settingTypes.ts

@@ -43,4 +43,5 @@ export interface SettingParams {
   // default category from id.
   // Note: Like id, category value need to be unique.
   category?: string[]
+  experimental?: boolean
 }