From 19681fd43d9dbfceaa6ad606ece389725ce661a8 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sun, 18 Aug 2024 13:04:37 -0400
Subject: [PATCH] Experimental settings BETA tag (#509)

* Add BETA tag for experimental setting

* Mark node searchbox impl as experimental

* nit
---
 src/components/dialog/content/setting/SettingGroup.vue | 6 ++++--
 src/i18n.ts                                            | 1 +
 src/scripts/ui/menu/index.ts                           | 3 ++-
 src/stores/settingStore.ts                             | 5 +++--
 src/types/settingTypes.ts                              | 1 +
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/dialog/content/setting/SettingGroup.vue b/src/components/dialog/content/setting/SettingGroup.vue
index 35f4b4aa9..1b693b33e 100644
--- a/src/components/dialog/content/setting/SettingGroup.vue
+++ b/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'
diff --git a/src/i18n.ts b/src/i18n.ts
index 74200c5cf..e00ac6d1e 100644
--- a/src/i18n.ts
+++ b/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',
diff --git a/src/scripts/ui/menu/index.ts b/src/scripts/ui/menu/index.ts
index 5c113e9b8..ebc66666a 100644
--- a/src/scripts/ui/menu/index.ts
+++ b/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'],
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index d0c4b1647..ba921c2d9 100644
--- a/src/stores/settingStore.ts
+++ b/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
diff --git a/src/types/settingTypes.ts b/src/types/settingTypes.ts
index 45e829d0a..77c3c59c2 100644
--- a/src/types/settingTypes.ts
+++ b/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
 }