Enable New UI by default (#1460)

* Enable New UI by default

* nit

* Add playwright test

* nit

* nit

* nit

src/components/dialog/content/SettingDialogContent.vue

@@ -19,6 +19,7 @@
     <Divider layout="vertical" />
     <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>