Optimize sidebar collapsing

src-web/hooks/useActiveEnvironment.ts

@@ -1,28 +1,41 @@
 import { useNavigate, useSearch } from '@tanstack/react-router';
-import { useCallback } from 'react';
-import { useEnvironments } from './useEnvironments';
-
-export function useActiveEnvironment() {
-  const [id, setId] = useActiveEnvironmentId();
-  const { subEnvironments } = useEnvironments();
-  const environment = subEnvironments.find((w) => w.id === id) ?? null;
-  return [environment, setId] as const;
-}
+import type { Environment } from '@yaakapp-internal/models';
+import { useAtomValue } from 'jotai';
+import { atom } from 'jotai/index';
+import { useCallback, useEffect } from 'react';
+import { jotaiStore } from '../lib/jotai';
+import { environmentsAtom } from './useEnvironments';
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
 
-function useActiveEnvironmentId() {
-  // NOTE: This query param is accessed from Rust side, so do not change
-  const { environment_id: id} = useSearch({ strict: false });
-  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
+export const activeEnvironmentIdAtom = atom<string>();
 
+export const activeEnvironmentAtom = atom<Environment | null>((get) => {
+  const activeEnvironmentId = get(activeEnvironmentIdAtom);
+  return get(environmentsAtom).find((e) => e.id === activeEnvironmentId) ?? null;
+});
+
+export function useActiveEnvironment() {
+  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
   const setId = useCallback(
-    (environmentId: string | null) =>
+    (id: string | null) =>
       navigate({
-        search: (prev) => ({ ...prev, environment_id: environmentId ?? undefined }),
+        search: (prev) => ({ ...prev, environment_id: id }),
       }),
     [navigate],
   );
-
-  return [id, setId] as const;
+  const environment = useAtomValue(activeEnvironmentAtom);
+  return [environment, setId] as const;
+}
+
+export function getActiveEnvironment() {
+  return jotaiStore.get(activeEnvironmentAtom);
+}
+
+export function useSubscribeActiveEnvironmentId() {
+  const { environment_id } = useSearch({ strict: false });
+  useEffect(
+    () => jotaiStore.set(activeEnvironmentIdAtom, environment_id ?? undefined),
+    [environment_id],
+  );
 }