Modify title and favicon when item in progress (issue #2392)

invokeai/frontend/web/index.html

@@ -8,7 +8,7 @@
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
   <title>Invoke - Community Edition</title>
-  <link rel="icon" type="icon" href="assets/images/invoke-favicon.svg" />
+  <link id="invoke-favicon" rel="icon" type="icon" href="assets/images/invoke-favicon.svg" />
   <style>
     html,
     body {
@@ -23,4 +23,4 @@
   <script type="module" src="/src/main.tsx"></script>
 </body>
 
-</html>
+</html>

invokeai/frontend/web/src/app/components/App.tsx

@@ -1,5 +1,6 @@
 import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library';
 import { useSocketIO } from 'app/hooks/useSocketIO';
+import { useSyncQueueStatus } from 'app/hooks/useSyncQueueStatus';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -70,6 +71,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
   }, [dispatch]);
 
   useStarterModelsToast();
+  useSyncQueueStatus();
 
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>

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]);
+};