[Refactor] useBrowserTabTitle composable (#3881)

src/composables/useBrowserTabTitle.ts

@@ -0,0 +1,53 @@
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
+
+import { useExecutionStore } from '@/stores/executionStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
+
+const DEFAULT_TITLE = 'ComfyUI'
+const TITLE_SUFFIX = ' - ComfyUI'
+
+export const useBrowserTabTitle = () => {
+  const executionStore = useExecutionStore()
+  const settingStore = useSettingStore()
+  const workflowStore = useWorkflowStore()
+
+  const executionText = computed(() =>
+    executionStore.isIdle
+      ? ''
+      : `[${Math.round(executionStore.executionProgress * 100)}%]`
+  )
+
+  const newMenuEnabled = computed(
+    () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+  )
+
+  const isUnsavedText = computed(() =>
+    workflowStore.activeWorkflow?.isModified ||
+    !workflowStore.activeWorkflow?.isPersisted
+      ? ' *'
+      : ''
+  )
+  const workflowNameText = computed(() => {
+    const workflowName = workflowStore.activeWorkflow?.filename
+    return workflowName
+      ? isUnsavedText.value + workflowName + TITLE_SUFFIX
+      : DEFAULT_TITLE
+  })
+
+  const nodeExecutionTitle = computed(() =>
+    executionStore.executingNode && executionStore.executingNodeProgress
+      ? `${executionText.value}[${Math.round(executionStore.executingNodeProgress * 100)}%] ${executionStore.executingNode.type}`
+      : ''
+  )
+
+  const workflowTitle = computed(
+    () =>
+      executionText.value +
+      (newMenuEnabled.value ? workflowNameText.value : DEFAULT_TITLE)
+  )
+
+  const title = computed(() => nodeExecutionTitle.value || workflowTitle.value)
+  useTitle(title)
+}