Environment dropdown and actions

src-web/hooks/useActiveEnvironment.ts

@@ -0,0 +1,19 @@
+import { useCallback, useMemo } from 'react';
+import type { Environment } from '../lib/models';
+import { useActiveEnvironmentId } from './useActiveEnvironmentId';
+import { useEnvironments } from './useEnvironments';
+
+export function useActiveEnvironment(): [Environment | null, (environment: Environment) => void] {
+  const [id, setId] = useActiveEnvironmentId();
+  const environments = useEnvironments();
+  const environment = useMemo(
+    () => environments.find((w) => w.id === id) ?? null,
+    [environments, id],
+  );
+
+  const setActiveEnvironment = useCallback((e: Environment) => {
+    setId(e.id)
+  }, [setId]);
+
+  return [environment, setActiveEnvironment];
+}

src-web/hooks/useActiveEnvironmentId.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export function useActiveEnvironmentId(): [string | null, (id: string) => void] {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const id = searchParams.get('environmentId') ?? null;
+
+  const setId = useCallback((id: string) => {
+    searchParams.set('environmentId', id)
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams])
+
+  return [id, setId];
+}

src-web/hooks/useCreateEnvironment.ts

@@ -3,20 +3,23 @@ import { invoke } from '@tauri-apps/api';
 import type { Environment } from '../lib/models';
 import { environmentsQueryKey } from './useEnvironments';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 
 export function useCreateEnvironment() {
   const workspaceId = useActiveWorkspaceId();
   const queryClient = useQueryClient();
+  const [, setActiveEnvironmentId ] = useActiveEnvironmentId();
   return useMutation<Environment, unknown, Pick<Environment, 'name'>>({
     mutationFn: (patch) => {
       return invoke('create_environment', { ...patch, workspaceId });
     },
     onSuccess: async (environment) => {
       if (workspaceId == null) return;
-      queryClient.setQueryData<Environment[]>(environmentsQueryKey({ workspaceId }), (environments) => [
-        ...(environments ?? []),
-        environment,
-      ]);
+      setActiveEnvironmentId(environment.id);
+      queryClient.setQueryData<Environment[]>(
+        environmentsQueryKey({ workspaceId }),
+        (environments) => [...(environments ?? []), environment],
+      );
     },
   });
 }