A bunch of fixes

src-web/hooks/useRecentEnvironments.ts

@@ -1,7 +1,8 @@
 import { useEffect, useMemo } from 'react';
-import { getKeyValue } from '../lib/keyValueStore';
-import { useActiveEnvironment } from './useActiveEnvironment';
-import { useActiveWorkspace } from './useActiveWorkspace';
+import { jotaiStore } from '../lib/jotai';
+import { getKeyValue, setKeyValue } from '../lib/keyValueStore';
+import { activeEnvironmentIdAtom } from './useActiveEnvironment';
+import { activeWorkspaceIdAtom, useActiveWorkspace } from './useActiveWorkspace';
 import { useEnvironments } from './useEnvironments';
 import { useKeyValue } from './useKeyValue';
 
@@ -12,23 +13,12 @@ const fallback: string[] = [];
 export function useRecentEnvironments() {
   const { subEnvironments } = useEnvironments();
   const activeWorkspace = useActiveWorkspace();
-  const [activeEnvironment] = useActiveEnvironment();
   const kv = useKeyValue<string[]>({
     key: kvKey(activeWorkspace?.id ?? 'n/a'),
     namespace,
     fallback,
   });
 
-  // Set history when active request changes
-  useEffect(() => {
-    kv.set((currentHistory: string[]) => {
-      if (activeEnvironment === null) return currentHistory;
-      const withoutCurrentEnvironment = currentHistory.filter((id) => id !== activeEnvironment.id);
-      return [activeEnvironment.id, ...withoutCurrentEnvironment];
-    }).catch(console.error);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeEnvironment?.id]);
-
   const onlyValidIds = useMemo(
     () => kv.value?.filter((id) => subEnvironments.some((e) => e.id === id)) ?? [],
     [kv.value, subEnvironments],
@@ -37,6 +27,26 @@ export function useRecentEnvironments() {
   return onlyValidIds;
 }
 
+export function useSubscribeRecentEnvironments() {
+  useEffect(() => {
+    return jotaiStore.sub(activeEnvironmentIdAtom, async () => {
+      const activeWorkspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+      const activeEnvironmentId = jotaiStore.get(activeEnvironmentIdAtom);
+      if (activeWorkspaceId == null) return;
+      if (activeEnvironmentId == null) return;
+
+      const key = kvKey(activeWorkspaceId);
+
+      const recentIds = await getKeyValue<string[]>({ namespace, key, fallback });
+      if (recentIds[0] === activeEnvironmentId) return; // Short-circuit
+
+      const withoutActiveId = recentIds.filter((id) => id !== activeEnvironmentId);
+      const value = [activeEnvironmentId, ...withoutActiveId];
+      await setKeyValue({ namespace, key, value });
+    });
+  }, []);
+}
+
 export async function getRecentEnvironments(workspaceId: string) {
   return getKeyValue<string[]>({
     namespace,