Better active workspace change notification

index.html

@@ -4,20 +4,20 @@
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Yaak App</title>
-  <!-- <script src="http://localhost:8097"></script>-->
+  <script src="http://localhost:8097"></script>
 
   <!-- Certain elements like webview (and maybe <select>?) will use background
   color depending on document background color-->
   <style>
-      html, body {
-          background-color: white;
-      }
+    html, body {
+      background-color: white;
+    }
 
-      @media (prefers-color-scheme: dark) {
-          html, body {
-              background-color: #1b1a29;
-          }
+    @media (prefers-color-scheme: dark) {
+      html, body {
+        background-color: #1b1a29;
       }
+    }
   </style>
 </head>
 

src-web/components/GlobalHooks.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import { useEffect } from 'react';
-import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useAtiveWorkspaceChangedToast } from '../hooks/useAtiveWorkspaceChangedToast';
 import { useClipboardText } from '../hooks/useClipboardText';
 import { useCommandPalette } from '../hooks/useCommandPalette';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
@@ -33,12 +33,8 @@ import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
 import { rosePineDefault } from '../lib/theme/themes/rose-pine';
 import { yaakDark } from '../lib/theme/themes/yaak';
 import { getThemeCSS } from '../lib/theme/window';
-import { InlineCode } from './core/InlineCode';
-import { useToast } from './ToastContext';
 
 export function GlobalHooks() {
-  const toast = useToast();
-
   // Include here so they always update, even if no component references them
   useRecentWorkspaces();
   useRecentEnvironments();
@@ -48,21 +44,7 @@ export function GlobalHooks() {
   useSyncThemeToDocument();
   useCommandPalette();
   useNotificationToast();
-
-  const activeWorkspace = useActiveWorkspace();
-
-  useEffect(() => {
-    if (activeWorkspace == null) return;
-    toast.show({
-      id: 'workspace-changed',
-      timeout: 3000,
-      message: (
-        <>
-          Switched workspace to <InlineCode>{activeWorkspace.name}</InlineCode>
-        </>
-      ),
-    });
-  }, [activeWorkspace, toast]);
+  useAtiveWorkspaceChangedToast();
 
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);

src-web/hooks/useAtiveWorkspaceChangedToast.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { InlineCode } from '../components/core/InlineCode';
+import { useToast } from '../components/ToastContext';
+import { useActiveWorkspace } from './useActiveWorkspace';
+
+export function useAtiveWorkspaceChangedToast() {
+  const toast = useToast();
+  const activeWorkspace = useActiveWorkspace();
+  const [id, setId] = useState<string | null>(activeWorkspace?.id ?? null);
+
+  useEffect(() => {
+    // Early return if same or invalid active workspace
+    if (id === activeWorkspace?.id || activeWorkspace == null) return;
+
+    setId(activeWorkspace?.id ?? null);
+
+    // Don't notify on first load
+    if (id === null) return;
+
+    toast.show({
+      id: 'workspace-changed',
+      timeout: 3000,
+      message: (
+        <>
+          Switched workspace to <InlineCode>{activeWorkspace.name}</InlineCode>
+        </>
+      ),
+    });
+  }, [activeWorkspace, id, toast]);
+}