From cd6d8ae9ccdf982ff9813ca0ce41b4da9074e8b6 Mon Sep 17 00:00:00 2001
From: Daniel Abrao <danielpaladar@gmail.com>
Date: Sun, 14 Apr 2024 11:22:58 -0300
Subject: [PATCH] Add a hook as a singleton to update favicon and title upon
 queueSize change

---
 .../web/src/app/hooks/useSyncQueueStatus.ts   | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 invokeai/frontend/web/src/app/hooks/useSyncQueueStatus.ts

diff --git a/invokeai/frontend/web/src/app/hooks/useSyncQueueStatus.ts b/invokeai/frontend/web/src/app/hooks/useSyncQueueStatus.ts
new file mode 100644
index 0000000000..d6874c3bb5
--- /dev/null
+++ b/invokeai/frontend/web/src/app/hooks/useSyncQueueStatus.ts
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
+
+const baseTitle = document.title;
+const invokeLogoSVG = 'assets/images/invoke-favicon.svg';
+const invokeAlertLogoSVG = 'assets/images/invoke-alert-favicon.svg';
+
+/**
+ * This hook synchronizes the queue status with the page's title and favicon.
+ * It should be considered a singleton and only used once in the component tree.
+ */
+export const useSyncQueueStatus = () => {
+  const { queueSize } = useGetQueueStatusQuery(undefined, {
+    selectFromResult: (res) => ({
+      queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,
+    }),
+  });
+  useEffect(() => {
+    document.title = queueSize > 0 ? `(${queueSize}) ${baseTitle}` : baseTitle;
+    const faviconEl = document.getElementById('invoke-favicon');
+    if (faviconEl instanceof HTMLLinkElement) {
+      faviconEl.href = queueSize > 0 ? invokeAlertLogoSVG : invokeLogoSVG;
+    }
+  }, [queueSize]);
+};