[Beta Menu] Shows unsaved state on browser tab title (#860)

* [Beta Menu] Shows unsaved state on browser tab title

* Proper state management

* Add playwright test

* Fix browser tests

src/components/BrowserTabTitle.vue

@@ -11,6 +11,7 @@ import { useWorkflowStore } from '@/stores/workflowStore'
 import { useTitle } from '@vueuse/core'
 import { computed } from 'vue'
 
+const DEFAULT_TITLE = 'ComfyUI'
 const executionStore = useExecutionStore()
 const executionText = computed(() =>
   executionStore.isIdle ? '' : `[${executionStore.executionProgress}%]`
@@ -22,12 +23,18 @@ const betaMenuEnabled = computed(
 )
 
 const workflowStore = useWorkflowStore()
-const workflowNameText = computed(
-  () =>
-    (betaMenuEnabled.value ? workflowStore.activeWorkflow?.name : undefined) ??
-    'ComfyUI'
+const isUnsavedText = computed(() =>
+  workflowStore.previousWorkflowUnsaved ? ' *' : ''
 )
+const workflowNameText = computed(() => {
+  const workflowName = workflowStore.activeWorkflow?.name
+  return workflowName ? isUnsavedText.value + workflowName : DEFAULT_TITLE
+})
 
-const title = computed(() => executionText.value + workflowNameText.value)
+const title = computed(
+  () =>
+    executionText.value +
+    (betaMenuEnabled.value ? workflowNameText.value : DEFAULT_TITLE)
+)
 useTitle(title)
 </script>

src/scripts/ui/menu/workflows.ts

@@ -9,6 +9,7 @@ import { ComfyAsyncDialog } from '../components/asyncDialog'
 import { trimJsonExt } from '@/utils/formatUtil'
 import type { ComfyApp } from '@/scripts/app'
 import type { ComfyComponent } from '../components'
+import { useWorkflowStore } from '@/stores/workflowStore'
 
 export class ComfyWorkflowsMenu {
   #first = true
@@ -68,7 +69,11 @@ export class ComfyWorkflowsMenu {
     this.unsaved = prop(this, 'unsaved', classList.unsaved, (v) => {
       classList.unsaved = v
       this.button.classList = classList
-      setStorageValue('Comfy.PreviousWorkflowUnsaved', v)
+      setStorageValue('Comfy.PreviousWorkflowUnsaved', String(v))
+
+      if (this.app.vueAppReady) {
+        useWorkflowStore().previousWorkflowUnsaved = v
+      }
     })
   }
 

src/scripts/utils.ts

@@ -153,7 +153,7 @@ export function prop<T>(
   return defaultValue
 }
 
-export function getStorageValue(id) {
+export function getStorageValue(id: string) {
   const clientId = api.clientId ?? api.initialClientId
   return (
     (clientId && sessionStorage.getItem(`${id}:${clientId}`)) ??
@@ -161,7 +161,7 @@ export function getStorageValue(id) {
   )
 }
 
-export function setStorageValue(id, value) {
+export function setStorageValue(id: string, value: string) {
   const clientId = api.clientId ?? api.initialClientId
   if (clientId) {
     sessionStorage.setItem(`${id}:${clientId}`, value)

src/stores/workflowStore.ts

@@ -1,11 +1,16 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { ComfyWorkflow } from '@/scripts/workflows'
+import { getStorageValue } from '@/scripts/utils'
 
 export const useWorkflowStore = defineStore('workflow', () => {
   const activeWorkflow = ref<ComfyWorkflow | null>(null)
+  const previousWorkflowUnsaved = ref<boolean>(
+    Boolean(getStorageValue('Comfy.PreviousWorkflowUnsaved'))
+  )
 
   return {
-    activeWorkflow
+    activeWorkflow,
+    previousWorkflowUnsaved
   }
 })

src/utils/formatUtil.ts

@@ -30,8 +30,8 @@ export function appendJsonExt(path: string) {
   return path
 }
 
-export function trimJsonExt(path: string) {
-  return path.replace(/\.json$/, '')
+export function trimJsonExt(path?: string) {
+  return path?.replace(/\.json$/, '')
 }
 
 export function highlightQuery(text: string, query: string) {