From 3fe4b4b856c882adf33fc7b2aedc46ce8c618aa7 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 17 Sep 2024 10:31:29 +0900
Subject: [PATCH] Add generation progress to browser tab title (#855)

---
 src/App.vue                                    |  2 ++
 src/components/BrowserTabTitle.vue             | 18 ++++++++++++++++++
 .../dialog/UnloadWindowConfirmDialog.vue       |  8 ++++++++
 src/stores/executionStore.ts                   |  3 +++
 4 files changed, 31 insertions(+)
 create mode 100644 src/components/BrowserTabTitle.vue

diff --git a/src/App.vue b/src/App.vue
index b0f8755fb..044a44459 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@
   <GlobalDialog />
   <GlobalToast />
   <UnloadWindowConfirmDialog />
+  <BrowserTabTitle />
 </template>
 
 <script setup lang="ts">
@@ -27,6 +28,7 @@ import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarT
 import GlobalDialog from './components/dialog/GlobalDialog.vue'
 import GlobalToast from './components/toast/GlobalToast.vue'
 import UnloadWindowConfirmDialog from './components/dialog/UnloadWindowConfirmDialog.vue'
+import BrowserTabTitle from './components/BrowserTabTitle.vue'
 import { api } from './scripts/api'
 import { StatusWsMessageStatus } from './types/apiTypes'
 import { useQueuePendingTaskCountStore } from './stores/queueStore'
diff --git a/src/components/BrowserTabTitle.vue b/src/components/BrowserTabTitle.vue
new file mode 100644
index 000000000..05958a915
--- /dev/null
+++ b/src/components/BrowserTabTitle.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <!-- This component does not render anything visible. -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useExecutionStore } from '@/stores/executionStore'
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
+
+const executionStore = useExecutionStore()
+const executionText = computed(() =>
+  executionStore.isIdle ? '' : `[${executionStore.executionProgress}%]`
+)
+const title = computed(() => executionText.value + 'ComfyUI')
+useTitle(title)
+</script>
diff --git a/src/components/dialog/UnloadWindowConfirmDialog.vue b/src/components/dialog/UnloadWindowConfirmDialog.vue
index 851111349..6fb8393cd 100644
--- a/src/components/dialog/UnloadWindowConfirmDialog.vue
+++ b/src/components/dialog/UnloadWindowConfirmDialog.vue
@@ -1,3 +1,11 @@
+<template>
+  <div>
+    <!-- This component does not render anything visible. It is used to confirm
+    the user wants to close the window, and if they do, it will call the
+    beforeunload event. -->
+  </div>
+</template>
+
 <script setup lang="ts">
 import { useSettingStore } from '@/stores/settingStore'
 import { onMounted, onUnmounted } from 'vue'
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 4c158e8d7..55f94cb0a 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -19,6 +19,8 @@ export const useExecutionStore = defineStore('execution', () => {
     return Object.values(activePrompt.value.nodes).length
   })
 
+  const isIdle = computed(() => !activePromptId.value)
+
   const nodesExecuted = computed(() => {
     if (!activePrompt.value) return 0
     return Object.values(activePrompt.value.nodes).filter(Boolean).length
@@ -102,6 +104,7 @@ export const useExecutionStore = defineStore('execution', () => {
   }
 
   return {
+    isIdle,
     activePromptId,
     queuedPrompts,
     executingNodeId,