Enable New UI by default (#1515)

nit

Add playwright test

nit

nit

nit

browser_tests/fixtures/ComfyPage.ts

@@ -778,6 +778,7 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
     comfyPage.userIds[parallelIndex] = userId
 
     await comfyPage.setupSettings({
+      'Comfy.UseNewMenu': 'Disabled',
       // Hide canvas menu/info by default.
       'Comfy.Graph.CanvasInfo': false,
       'Comfy.Graph.CanvasMenu': false,

src/components/dialog/content/SettingDialogContent.vue

@@ -19,6 +19,7 @@
     <Divider layout="vertical" class="mx-1 2xl:mx-4" />
     <ScrollPanel class="settings-content flex-grow">
       <Tabs :value="tabValue">
+        <FirstTimeUIMessage v-if="tabValue === 'Comfy'" />
         <TabPanels class="settings-tab-panels">
           <TabPanel key="search-results" value="Search Results">
             <div v-if="searchResults.length > 0">
@@ -91,6 +92,7 @@ import SearchBox from '@/components/common/SearchBox.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import AboutPanel from './setting/AboutPanel.vue'
+import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
 
 const KeybindingPanel = defineAsyncComponent(
   () => import('./setting/KeybindingPanel.vue')

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

@@ -0,0 +1,25 @@
+<template>
+  <Message
+    v-if="show"
+    class="first-time-ui-message m-2"
+    severity="info"
+    :closable="true"
+    @close="handleClose"
+  >
+    {{ $t('firstTimeUIMessage') }}
+  </Message>
+</template>
+
+<script setup lang="ts">
+import { useSettingStore } from '@/stores/settingStore'
+import Message from 'primevue/message'
+import { computed } from 'vue'
+
+const settingStore = useSettingStore()
+const show = computed(() => !settingStore.exists('Comfy.UseNewMenu'))
+const handleClose = () => {
+  // Explicitly write the current value to the store.
+  const currentValue = settingStore.get('Comfy.UseNewMenu')
+  settingStore.set('Comfy.UseNewMenu', currentValue)
+}
+</script>

src/i18n.ts

@@ -51,6 +51,8 @@ const messages = {
         }
       }
     },
+    firstTimeUIMessage:
+      'This is the first time you use the new UI. Choose "Menu > Use New Menu > Disabled" to restore the old UI.',
     download: 'Download',
     loadAllFolders: 'Load All Folders',
     refresh: 'Refresh',
@@ -174,6 +176,8 @@ const messages = {
     }
   },
   zh: {
+    firstTimeUIMessage:
+      '这是您第一次使用新界面。选择“Menu > Use New Menu > Disabled”以恢复旧界面。',
     download: '下载',
     loadAllFolders: '加载所有文件夹',
     refresh: '刷新',

src/stores/coreSettings.ts

@@ -373,9 +373,8 @@ export const CORE_SETTINGS: SettingParams[] = [
   {
     id: 'Comfy.UseNewMenu',
     category: ['Comfy', 'Menu', 'UseNewMenu'],
-    defaultValue: 'Disabled',
-    name: 'Use new menu and workflow management.',
-    experimental: true,
+    defaultValue: 'Top',
+    name: 'Use new menu',
     type: 'combo',
     options: ['Disabled', 'Top', 'Bottom'],
     migrateDeprecatedValue: (value: string) => {

src/stores/settingStore.ts

@@ -66,6 +66,10 @@ export const useSettingStore = defineStore('setting', () => {
     })
   }
 
+  function exists(key: string) {
+    return settingValues.value[key] !== undefined
+  }
+
   async function set<K extends keyof Settings>(key: K, value: Settings[K]) {
     settingValues.value[key] = value
     await app.ui.settings.setSettingValueAsync(key, value)
@@ -84,6 +88,7 @@ export const useSettingStore = defineStore('setting', () => {
     addSettings,
     loadExtensionSettings,
     set,
-    get
+    get,
+    exists
   }
 })