Remove useNavigate everywhere, and make request a query param. And convert dialog to Jotai

src-web/hooks/useActiveCookieJar.ts

@@ -1,8 +1,9 @@
-import { useNavigate, useSearch } from '@tanstack/react-router';
+import { useSearch } from '@tanstack/react-router';
 import type { CookieJar } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai/index';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { jotaiStore } from '../lib/jotai';
+import { router } from '../lib/router';
 import { cookieJarsAtom, useCookieJars } from './useCookieJars';
 
 export const QUERY_COOKIE_JAR_ID = 'cookie_jar_id';
@@ -14,33 +15,15 @@ export const activeCookieJarAtom = atom<CookieJar | null>((get) => {
   return get(cookieJarsAtom)?.find((e) => e.id === activeId) ?? null;
 });
 
-export function useActiveCookieJar() {
-  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
-  const setId = useCallback(
-    (id: string) =>
-      navigate({
-        search: (prev) => ({ ...prev, cookie_jar_id: id }),
-      }),
-    [navigate],
-  );
-  const cookieJar = useAtomValue(activeCookieJarAtom);
-  return [cookieJar, setId] as const;
+export function setActiveCookieJar(cookieJar: CookieJar) {
+  router.navigate({
+    from: '/workspaces/$workspaceId',
+    search: (prev) => ({ ...prev, cookie_jar_id: cookieJar.id }),
+  });
 }
 
-function useActiveCookieJarId() {
-  // NOTE: This query param is accessed from Rust side, so do not change
-  const { cookie_jar_id: id } = useSearch({ strict: false });
-  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
-
-  const setId = useCallback(
-    (id: string) =>
-      navigate({
-        search: (prev) => ({ ...prev, cookie_jar_id: id }),
-      }),
-    [navigate],
-  );
-
-  return [id, setId] as const;
+export function useActiveCookieJar() {
+  return useAtomValue(activeCookieJarAtom);
 }
 
 export function useSubscribeActiveCookieJarId() {
@@ -56,12 +39,12 @@ export function getActiveCookieJar() {
 
 export function useEnsureActiveCookieJar() {
   const cookieJars = useCookieJars();
-  const [activeCookieJarId, setActiveCookieJarId] = useActiveCookieJarId();
+  const activeCookieJar = useActiveCookieJar();
 
   // Set the active cookie jar to the first one, if none set
   useEffect(() => {
     if (cookieJars == null) return; // Hasn't loaded yet
-    if (cookieJars.find((j) => j.id === activeCookieJarId)) {
+    if (cookieJars.find((j) => j.id === activeCookieJar?.id)) {
       return; // There's an active jar
     }
 
@@ -73,6 +56,6 @@ export function useEnsureActiveCookieJar() {
 
     // There's no active jar, so set it to the first one
     console.log('Setting active cookie jar to', firstJar.id);
-    setActiveCookieJarId(firstJar.id).catch(console.error);
-  }, [activeCookieJarId, cookieJars, setActiveCookieJarId]);
+    setActiveCookieJar(firstJar);
+  }, [activeCookieJar?.id, cookieJars]);
 }

src-web/hooks/useActiveEnvironment.ts

@@ -1,9 +1,10 @@
-import { useNavigate, useSearch } from '@tanstack/react-router';
+import { useSearch } from '@tanstack/react-router';
 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 { router } from '../lib/router';
 import { environmentsAtom } from './useEnvironments';
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
@@ -16,13 +17,13 @@ export const activeEnvironmentAtom = atom<Environment | null>((get) => {
 });
 
 export function useActiveEnvironment() {
-  const navigate = useNavigate({ from: '/workspaces/$workspaceId' });
   const setId = useCallback(
     (id: string | null) =>
-      navigate({
+      router.navigate({
+        from: '/workspaces/$workspaceId',
         search: (prev) => ({ ...prev, environment_id: id }),
       }),
-    [navigate],
+    [],
   );
   const environment = useAtomValue(activeEnvironmentAtom);
   return [environment, setId] as const;

src-web/hooks/useActiveRequestId.ts

@@ -1,15 +1,15 @@
-import { useParams } from '@tanstack/react-router';
+import { useSearch } from '@tanstack/react-router';
 import { atom, useAtomValue } from 'jotai';
 import { useEffect } from 'react';
 import { jotaiStore } from '../lib/jotai';
 
-export const activeRequestIdAtom = atom<string>();
+export const activeRequestIdAtom = atom<string | null>(null);
 
 export function useActiveRequestId(): string | null {
-  return useAtomValue(activeRequestIdAtom) ?? null;
+  return useAtomValue(activeRequestIdAtom);
 }
 
 export function useSubscribeActiveRequestId() {
-  const { requestId } = useParams({ strict: false });
-  useEffect(() => jotaiStore.set(activeRequestIdAtom, requestId), [requestId]);
+  const { request_id } = useSearch({ strict: false });
+  useEffect(() => jotaiStore.set(activeRequestIdAtom, request_id ?? null), [request_id]);
 }

src-web/hooks/useAlert.ts

@@ -1,28 +0,0 @@
-import { useCallback } from 'react';
-import type { DialogProps } from '../components/core/Dialog';
-import type { AlertProps } from './Alert';
-import { Alert } from './Alert';
-import {useDialog} from "./useDialog";
-
-interface AlertArg {
-  id: string;
-  title: DialogProps['title'];
-  body: AlertProps['body'];
-  size?: DialogProps['size'];
-}
-
-export function useAlert() {
-  const dialog = useDialog();
-  return useCallback<(a: AlertArg) => void>(
-    ({ id, title, body, size = 'sm' }: AlertArg) =>
-      dialog.show({
-        id,
-        title,
-        hideX: true,
-        size,
-        render: ({ hide }) => Alert({ onHide: hide, body }),
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-}

src-web/hooks/useCheckForUpdates.tsx

@@ -1,12 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 import { InlineCode } from '../components/core/InlineCode';
+import { showAlert } from '../lib/alert';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
 import { invokeCmd } from '../lib/tauri';
-import { useAlert } from './useAlert';
 import { useAppInfo } from './useAppInfo';
 
 export function useCheckForUpdates() {
-  const alert = useAlert();
   const appInfo = useAppInfo();
 
   return useMutation({
@@ -14,7 +13,7 @@ export function useCheckForUpdates() {
     mutationFn: async () => {
       const hasUpdate: boolean = await minPromiseMillis(invokeCmd('cmd_check_for_updates'), 500);
       if (!hasUpdate) {
-        alert({
+        showAlert({
           id: 'no-updates',
           title: 'No Update Available',
           body: (

src-web/hooks/useCommands.ts

@@ -1,25 +1,19 @@
-import { useNavigate } from '@tanstack/react-router';
 import type { Folder, Workspace } from '@yaakapp-internal/models';
 import { useMemo } from 'react';
 import { trackEvent } from '../lib/analytics';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { createFastMutation } from './useFastMutation';
 import { usePrompt } from './usePrompt';
 
-function makeCommands({
-  navigate,
-  prompt,
-}: {
-  navigate: ReturnType<typeof useNavigate>;
-  prompt: ReturnType<typeof usePrompt>;
-}) {
+function makeCommands({ prompt }: { prompt: ReturnType<typeof usePrompt> }) {
   return {
     createWorkspace: createFastMutation<Workspace, void, Partial<Workspace>>({
       mutationKey: ['create_workspace'],
       mutationFn: (patch) => invokeCmd<Workspace>('cmd_update_workspace', { workspace: patch }),
       onSuccess: async (workspace) => {
-        await navigate({
+        await router.navigate({
           to: '/workspaces/$workspaceId',
           params: { workspaceId: workspace.id },
         });
@@ -62,7 +56,6 @@ function makeCommands({
 }
 
 export function useCommands() {
-  const navigate = useNavigate();
   const prompt = usePrompt();
-  return useMemo(() => makeCommands({ navigate, prompt }), [navigate, prompt]);
+  return useMemo(() => makeCommands({ prompt }), [prompt]);
 }

src-web/hooks/useConfirm.ts

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 import type { DialogProps } from '../components/core/Dialog';
+import { showDialog } from '../lib/dialog';
 import type { ConfirmProps } from './Confirm';
 import { Confirm } from './Confirm';
-import { useDialog } from './useDialog';
 
 export function useConfirm() {
-  const dialog = useDialog();
   return useCallback(
     ({
       id,
@@ -21,7 +20,7 @@ export function useConfirm() {
       confirmText?: ConfirmProps['confirmText'];
     }) =>
       new Promise((onResult: ConfirmProps['onResult']) => {
-        dialog.show({
+        showDialog({
           id,
           title,
           description,
@@ -30,6 +29,6 @@ export function useConfirm() {
           render: ({ hide }) => Confirm({ onHide: hide, variant, onResult, confirmText }),
         });
       }),
-    [dialog],
+    [],
   );
 }

src-web/hooks/useCreateDropdownItems.tsx

@@ -1,10 +1,10 @@
-import { useCallback } from 'react';
+import { useMemo } from 'react';
 import type { DropdownItem } from '../components/core/Dropdown';
 import { Icon } from '../components/core/Icon';
 import { generateId } from '../lib/generateId';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';
 import { getActiveRequest } from './useActiveRequest';
-import {useCommands} from "./useCommands";
+import { useCommands } from './useCommands';
 import { useCreateGrpcRequest } from './useCreateGrpcRequest';
 import { useCreateHttpRequest } from './useCreateHttpRequest';
 
@@ -16,12 +16,12 @@ export function useCreateDropdownItems({
   hideFolder?: boolean;
   hideIcons?: boolean;
   folderId?: string | null | 'active-folder';
-} = {}): () => DropdownItem[] {
+} = {}): DropdownItem[] {
   const { mutate: createHttpRequest } = useCreateHttpRequest();
   const { mutate: createGrpcRequest } = useCreateGrpcRequest();
   const { createFolder } = useCommands();
 
-  return useCallback((): DropdownItem[] => {
+  return useMemo((): DropdownItem[] => {
     const folderId =
       folderIdOption === 'active-folder' ? getActiveRequest()?.folderId : folderIdOption;
 

src-web/hooks/useCreateGrpcRequest.ts

@@ -1,4 +1,3 @@
-import { useNavigate } from '@tanstack/react-router';
 import type { GrpcRequest } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
 import { jotaiStore } from '../lib/jotai';
@@ -6,10 +5,9 @@ import { invokeCmd } from '../lib/tauri';
 import { getActiveRequest } from './useActiveRequest';
 import { activeWorkspaceAtom } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
+import { router } from '../lib/router';
 
 export function useCreateGrpcRequest() {
-  const navigate = useNavigate();
-
   return useFastMutation<
     GrpcRequest,
     unknown,
@@ -40,13 +38,10 @@ export function useCreateGrpcRequest() {
     },
     onSettled: () => trackEvent('grpc_request', 'create'),
     onSuccess: async (request) => {
-      await navigate({
-        to: '/workspaces/$workspaceId/requests/$requestId',
-        params: {
-          workspaceId: request.workspaceId,
-          requestId: request.id,
-        },
-        search: (prev) => ({ ...prev }),
+      await router.navigate({
+        to: '/workspaces/$workspaceId',
+        params: { workspaceId: request.workspaceId },
+        search: (prev) => ({ ...prev, request_id: request.id }),
       });
     },
   });

src-web/hooks/useCreateHttpRequest.ts

@@ -1,14 +1,12 @@
-import { useNavigate } from '@tanstack/react-router';
 import type { HttpRequest } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveRequest } from './useActiveRequest';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
 import { useFastMutation } from './useFastMutation';
 
 export function useCreateHttpRequest() {
-  const navigate = useNavigate();
-
   return useFastMutation<HttpRequest, unknown, Partial<HttpRequest>>({
     mutationKey: ['create_http_request'],
     mutationFn: async (patch = {}) => {
@@ -34,10 +32,10 @@ export function useCreateHttpRequest() {
     },
     onSettled: () => trackEvent('http_request', 'create'),
     onSuccess: async (request) => {
-      await navigate({
-        to: '/workspaces/$workspaceId/requests/$requestId',
-        params: { workspaceId: request.workspaceId, requestId: request.id },
-        search: (prev) => ({ ...prev }),
+      await router.navigate({
+        to: '/workspaces/$workspaceId',
+        params: { workspaceId: request.workspaceId },
+        search: (prev) => ({ ...prev, request_id: request.id }),
       });
     },
   });

src-web/hooks/useCreateWorkspace.tsx

@@ -1,16 +1,14 @@
 import { useCallback } from 'react';
 import { CreateWorkspaceDialog } from '../components/CreateWorkspaceDialog';
-import { useDialog } from './useDialog';
+import { showDialog } from '../lib/dialog';
 
 export function useCreateWorkspace() {
-  const dialog = useDialog();
-
   return useCallback(() => {
-    dialog.show({
+    showDialog({
       id: 'create-workspace',
       title: 'Create Workspace',
       size: 'md',
       render: ({ hide }) => <CreateWorkspaceDialog hide={hide} />,
     });
-  }, [dialog]);
+  }, []);
 }

src-web/hooks/useDeleteActiveWorkspace.tsx

@@ -1,7 +1,7 @@
-import { useNavigate } from '@tanstack/react-router';
 import type { Workspace } from '@yaakapp-internal/models';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspace } from './useActiveWorkspace';
 import { useConfirm } from './useConfirm';
@@ -9,7 +9,6 @@ import { useFastMutation } from './useFastMutation';
 
 export function useDeleteActiveWorkspace() {
   const confirm = useConfirm();
-  const navigate = useNavigate();
 
   return useFastMutation<Workspace | null, string>({
     mutationKey: ['delete_workspace'],
@@ -31,7 +30,7 @@ export function useDeleteActiveWorkspace() {
     onSettled: () => trackEvent('workspace', 'delete'),
     onSuccess: async (workspace) => {
       if (workspace === null) return;
-      await navigate({ to: '/workspaces' });
+      await router.navigate({ to: '/workspaces' });
     },
   });
 }

src-web/hooks/useDeleteSendHistory.tsx

@@ -1,8 +1,8 @@
 import { useSetAtom } from 'jotai/index';
+import { showAlert } from '../lib/alert';
 import { pluralizeCount } from '../lib/pluralize';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
-import { useAlert } from './useAlert';
 import { useConfirm } from './useConfirm';
 import { useFastMutation } from './useFastMutation';
 import { useGrpcConnections } from './useGrpcConnections';
@@ -10,7 +10,6 @@ import { httpResponsesAtom, useHttpResponses } from './useHttpResponses';
 
 export function useDeleteSendHistory() {
   const confirm = useConfirm();
-  const alert = useAlert();
   const setHttpResponses = useSetAtom(httpResponsesAtom);
   const httpResponses = useHttpResponses();
   const grpcConnections = useGrpcConnections();
@@ -23,7 +22,7 @@ export function useDeleteSendHistory() {
     mutationKey: ['delete_send_history'],
     mutationFn: async () => {
       if (labels.length === 0) {
-        alert({
+        showAlert({
           id: 'no-responses',
           title: 'Nothing to Delete',
           body: 'There are no Http Response or Grpc Connections to delete',

src-web/hooks/useDialog.ts

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import { DialogContext } from '../components/DialogContext';
-
-export function useDialog() {
-  return useContext(DialogContext).actions;
-}

src-web/hooks/useDuplicateGrpcRequest.ts

@@ -1,6 +1,6 @@
-import { useNavigate } from '@tanstack/react-router';
 import type { GrpcRequest } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { useFastMutation } from './useFastMutation';
 import { getGrpcProtoFiles, setGrpcProtoFiles } from './useGrpcProtoFiles';
@@ -12,7 +12,6 @@ export function useDuplicateGrpcRequest({
   id: string | null;
   navigateAfter: boolean;
 }) {
-  const navigate = useNavigate();
   return useFastMutation<GrpcRequest, string>({
     mutationKey: ['duplicate_grpc_request', id],
     mutationFn: async () => {
@@ -28,10 +27,10 @@ export function useDuplicateGrpcRequest({
       await setGrpcProtoFiles(request.id, protoFiles);
 
       if (navigateAfter) {
-        await navigate({
-          to: '/workspaces/$workspaceId/requests/$requestId',
-          params: { workspaceId: request.workspaceId, requestId: request.id },
-          search: (prev) => ({ ...prev }),
+        await router.navigate({
+          to: '/workspaces/$workspaceId',
+          params: { workspaceId: request.workspaceId },
+          search: (prev) => ({ ...prev, request_id: request.id }),
         });
       }
     },

src-web/hooks/useDuplicateHttpRequest.ts

@@ -1,6 +1,6 @@
-import { useNavigate } from '@tanstack/react-router';
 import type { HttpRequest } from '@yaakapp-internal/models';
 import { trackEvent } from '../lib/analytics';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { useFastMutation } from './useFastMutation';
 
@@ -11,7 +11,6 @@ export function useDuplicateHttpRequest({
   id: string | null;
   navigateAfter: boolean;
 }) {
-  const navigate = useNavigate();
   return useFastMutation<HttpRequest, string>({
     mutationKey: ['duplicate_http_request', id],
     mutationFn: async () => {
@@ -21,13 +20,10 @@ export function useDuplicateHttpRequest({
     onSettled: () => trackEvent('http_request', 'duplicate'),
     onSuccess: async (request) => {
       if (navigateAfter) {
-        await navigate({
-          to: '/workspaces/$workspaceId/requests/$requestId',
-          params: {
-            workspaceId: request.workspaceId,
-            requestId: request.id,
-          },
-          search: (prev) => ({ ...prev }),
+        await router.navigate({
+          to: '/workspaces/$workspaceId',
+          params: { workspaceId: request.workspaceId },
+          search: (prev) => ({ ...prev, request_id: request.id }),
         });
       }
     },

src-web/hooks/useExportData.tsx

@@ -1,20 +1,17 @@
 import { ExportDataDialog } from '../components/ExportDataDialog';
+import { showAlert } from '../lib/alert';
+import { showDialog } from '../lib/dialog';
 import { jotaiStore } from '../lib/jotai';
-import { getActiveWorkspace } from './useActiveWorkspace';
-import { useAlert } from './useAlert';
-import { useDialog } from './useDialog';
-import { useFastMutation } from './useFastMutation';
 import { showToast } from '../lib/toast';
+import { getActiveWorkspace } from './useActiveWorkspace';
+import { useFastMutation } from './useFastMutation';
 import { workspacesAtom } from './useWorkspaces';
 
 export function useExportData() {
-  const alert = useAlert();
-  const dialog = useDialog();
-
   return useFastMutation({
     mutationKey: ['export_data'],
     onError: (err: string) => {
-      alert({ id: 'export-failed', title: 'Export Failed', body: err });
+      showAlert({ id: 'export-failed', title: 'Export Failed', body: err });
     },
     mutationFn: async () => {
       const activeWorkspace = getActiveWorkspace();
@@ -22,7 +19,7 @@ export function useExportData() {
 
       if (activeWorkspace == null || workspaces.length === 0) return;
 
-      dialog.show({
+      showDialog({
         id: 'export-data',
         title: 'Export App Data',
         size: 'md',

src-web/hooks/useImportData.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from '@tanstack/react-router';
 import type {
   Environment,
   Folder,
@@ -10,18 +9,15 @@ import { Button } from '../components/core/Button';
 import { FormattedError } from '../components/core/FormattedError';
 import { VStack } from '../components/core/Stacks';
 import { ImportDataDialog } from '../components/ImportDataDialog';
+import { showAlert } from '../lib/alert';
+import { showDialog } from '../lib/dialog';
 import { pluralizeCount } from '../lib/pluralize';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveWorkspace } from './useActiveWorkspace';
-import { useAlert } from './useAlert';
-import { useDialog } from './useDialog';
 import { useFastMutation } from './useFastMutation';
 
 export function useImportData() {
-  const dialog = useDialog();
-  const alert = useAlert();
-  const navigate = useNavigate();
-
   const importData = async (filePath: string): Promise<boolean> => {
     const activeWorkspace = getActiveWorkspace();
     const imported: {
@@ -37,7 +33,7 @@ export function useImportData() {
 
     const importedWorkspace = imported.workspaces[0];
 
-    dialog.show({
+    showDialog({
       id: 'import-complete',
       title: 'Import Complete',
       size: 'sm',
@@ -65,7 +61,7 @@ export function useImportData() {
 
     if (importedWorkspace != null) {
       const environmentId = imported.environments[0]?.id ?? null;
-      await navigate({
+      await router.navigate({
         to: '/workspaces/$workspaceId',
         params: { workspaceId: importedWorkspace.id },
         search: { environment_id: environmentId },
@@ -78,7 +74,7 @@ export function useImportData() {
   return useFastMutation({
     mutationKey: ['import_data'],
     onError: (err: string) => {
-      alert({
+      showAlert({
         id: 'import-failed',
         title: 'Import Failed',
         size: 'md',
@@ -87,7 +83,7 @@ export function useImportData() {
     },
     mutationFn: async () => {
       return new Promise<void>((resolve, reject) => {
-        dialog.show({
+        showDialog({
           id: 'import',
           title: 'Import Data',
           size: 'sm',

src-web/hooks/useMoveToWorkspace.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
 import { MoveToWorkspaceDialog } from '../components/MoveToWorkspaceDialog';
+import { showDialog } from '../lib/dialog';
 import { getActiveWorkspaceId } from './useActiveWorkspace';
-import { useDialog } from './useDialog';
 import { useFastMutation } from './useFastMutation';
-import { useRequests } from './useRequests';
+import { getRequests } from './useRequests';
 
 export function useMoveToWorkspace(id: string) {
-  const dialog = useDialog();
-  const requests = useRequests();
-  const request = requests.find((r) => r.id === id);
-
   return useFastMutation<void, unknown>({
     mutationKey: ['move_workspace', id],
     mutationFn: async () => {
       const activeWorkspaceId = getActiveWorkspaceId();
-      if (request == null || activeWorkspaceId == null) return;
+      if (activeWorkspaceId == null) return;
 
-      dialog.show({
+      const request = getRequests().find((r) => r.id === id);
+      if (request == null) return;
+
+      showDialog({
         id: 'change-workspace',
         title: 'Move Workspace',
         size: 'sm',

src-web/hooks/useOpenWorkspace.ts

@@ -1,4 +1,4 @@
-import { useNavigate, useRouter } from '@tanstack/react-router';
+import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 import { useFastMutation } from './useFastMutation';
 import { getRecentCookieJars } from './useRecentCookieJars';
@@ -6,9 +6,6 @@ import { getRecentEnvironments } from './useRecentEnvironments';
 import { getRecentRequests } from './useRecentRequests';
 
 export function useOpenWorkspace() {
-  const router = useRouter();
-  const navigate = useNavigate();
-
   return useFastMutation({
     mutationKey: ['open_workspace'],
     mutationFn: async ({
@@ -21,7 +18,11 @@ export function useOpenWorkspace() {
       const environmentId = (await getRecentEnvironments(workspaceId))[0] ?? undefined;
       const requestId = (await getRecentRequests(workspaceId))[0] ?? undefined;
       const cookieJarId = (await getRecentCookieJars(workspaceId))[0] ?? undefined;
-      const search = { environment_id: environmentId, cookie_jar_id: cookieJarId };
+      const search = {
+        environment_id: environmentId,
+        cookie_jar_id: cookieJarId,
+        request_id: requestId,
+      };
 
       if (inNewWindow) {
         const location = router.buildLocation({
@@ -33,15 +34,11 @@ export function useOpenWorkspace() {
         return;
       }
 
-      if (requestId != null) {
-        await navigate({
-          to: '/workspaces/$workspaceId/requests/$requestId',
-          params: { workspaceId, requestId },
-          search,
-        });
-      } else {
-        await navigate({ to: '/workspaces/$workspaceId', params: { workspaceId }, search });
-      }
+      await router.navigate({
+        to: '/workspaces/$workspaceId',
+        params: { workspaceId },
+        search,
+      });
     },
   });
 }

src-web/hooks/usePrompt.ts

@@ -1,16 +1,15 @@
 import type { DialogProps } from '../components/core/Dialog';
+import { showDialog } from '../lib/dialog';
 import type { PromptProps } from './Prompt';
 import { Prompt } from './Prompt';
-import {useDialog} from "./useDialog";
 
 type Props = Pick<DialogProps, 'title' | 'description'> &
   Omit<PromptProps, 'onClose' | 'onCancel' | 'onResult'> & { id: string };
 
 export function usePrompt() {
-  const dialog = useDialog();
   return ({ id, title, description, ...props }: Props) =>
     new Promise((resolve: PromptProps['onResult']) => {
-      dialog.show({
+      showDialog({
         id,
         title,
         description,

src-web/hooks/useRequests.ts

@@ -1,9 +1,14 @@
-import { useMemo } from 'react';
-import { useGrpcRequests } from './useGrpcRequests';
-import { useHttpRequests } from './useHttpRequests';
+import { atom, useAtomValue } from 'jotai';
+import {jotaiStore} from "../lib/jotai";
+import { grpcRequestsAtom } from './useGrpcRequests';
+import { httpRequestsAtom } from './useHttpRequests';
+
+const requestsAtom = atom((get) => [...get(httpRequestsAtom), ...get(grpcRequestsAtom)]);
 
 export function useRequests() {
-  const httpRequests = useHttpRequests();
-  const grpcRequests = useGrpcRequests();
-  return useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
+  return useAtomValue(requestsAtom);
+}
+
+export function getRequests() {
+  return jotaiStore.get(requestsAtom);
 }

src-web/hooks/useSendAnyHttpRequest.ts

@@ -1,14 +1,13 @@
 import type { HttpResponse } from '@yaakapp-internal/models';
+import { showAlert } from '../lib/alert';
 import { trackEvent } from '../lib/analytics';
 import { getHttpRequest } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
 import { getActiveCookieJar } from './useActiveCookieJar';
 import { getActiveEnvironment } from './useActiveEnvironment';
-import { useAlert } from './useAlert';
 import { useFastMutation } from './useFastMutation';
 
 export function useSendAnyHttpRequest() {
-  const alert = useAlert();
   return useFastMutation<HttpResponse | null, string, string | null>({
     mutationKey: ['send_any_request'],
     mutationFn: async (id) => {
@@ -24,6 +23,6 @@ export function useSendAnyHttpRequest() {
       });
     },
     onSettled: () => trackEvent('http_request', 'send'),
-    onError: (err) => alert({ id: 'send-failed', title: 'Send Failed', body: err }),
+    onError: (err) => showAlert({ id: 'send-failed', title: 'Send Failed', body: err }),
   });
 }

src-web/hooks/useToggleCommandPalette.tsx

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 import { CommandPaletteDialog } from '../components/CommandPaletteDialog';
-import { useDialog } from './useDialog';
+import { toggleDialog } from '../lib/dialog';
 
 export function useToggleCommandPalette() {
-  const dialog = useDialog();
   const togglePalette = useCallback(() => {
-    dialog.toggle({
+    toggleDialog({
       id: 'command_palette',
       size: 'dynamic',
       hideX: true,
@@ -15,7 +14,7 @@ export function useToggleCommandPalette() {
       noScroll: true,
       render: ({ hide }) => <CommandPaletteDialog onClose={hide} />,
     });
-  }, [dialog]);
+  }, []);
 
   return togglePalette;
 }