Cleanup (#148)

src-web/hooks/useActiveCookieJar.ts

@@ -1,6 +1,5 @@
-import { useSearch } from '@tanstack/react-router';
+import { getRouteApi, useSearch } from '@tanstack/react-router';
 import { useCallback, useEffect, useMemo } from 'react';
-import { Route } from '../routes/workspaces/$workspaceId';
 import { useCookieJars } from './useCookieJars';
 
 export const QUERY_COOKIE_JAR_ID = 'cookie_jar_id';
@@ -39,13 +38,18 @@ export function useEnsureActiveCookieJar() {
   }, [activeCookieJarId, cookieJars, setActiveCookieJarId]);
 }
 
+const routeApi = getRouteApi('/workspaces/$workspaceId/');
+
 function useActiveCookieJarId() {
   // NOTE: This query param is accessed from Rust side, so do not change
-  const navigate = Route.useNavigate();
   const { cookieJarId: id } = useSearch({ strict: false });
+  const navigate = routeApi.useNavigate();
 
   const setId = useCallback(
-    (id: string) => navigate({ search: (prev) => ({ ...prev, cookieJarId: id }) }),
+    (id: string) =>
+      navigate({
+        search: (prev) => ({ ...prev, cookieJarId: id }),
+      }),
     [navigate],
   );
 

src-web/hooks/useActiveEnvironment.ts

@@ -1,6 +1,5 @@
-import { useSearch } from '@tanstack/react-router';
+import { getRouteApi, useSearch } from '@tanstack/react-router';
 import { useCallback, useMemo } from 'react';
-import { Route } from '../routes/workspaces/$workspaceId';
 import { useEnvironments } from './useEnvironments';
 
 export function useActiveEnvironment() {
@@ -15,14 +14,18 @@ export function useActiveEnvironment() {
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
 
+const routeApi = getRouteApi('/workspaces/$workspaceId/');
+
 function useActiveEnvironmentId() {
   // NOTE: This query param is accessed from Rust side, so do not change
-  const navigate = Route.useNavigate();
   const { environmentId: id } = useSearch({ strict: false });
+  const navigate = routeApi.useNavigate();
 
   const setId = useCallback(
     (environment_id: string | null) =>
-      navigate({ search: (prev) => ({ ...prev, environment_id: environment_id ?? undefined }) }),
+      navigate({
+        search: (prev) => ({ ...prev, environment_id: environment_id ?? undefined }),
+      }),
     [navigate],
   );
 

src-web/hooks/useActiveRequest.ts

@@ -1,6 +1,6 @@
 import type { GrpcRequest, HttpRequest } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai';
-import { jotaiStore } from '../routes/__root';
+import {jotaiStore} from "../lib/jotai";
 import { activeRequestIdAtom } from './useActiveRequestId';
 import { grpcRequestsAtom } from './useGrpcRequests';
 import { httpRequestsAtom } from './useHttpRequests';

src-web/hooks/useActiveRequestId.ts

@@ -1,7 +1,7 @@
 import { useParams } from '@tanstack/react-router';
 import { atom, useAtomValue } from 'jotai';
 import { useEffect } from 'react';
-import { jotaiStore } from '../routes/__root';
+import {jotaiStore} from "../lib/jotai";
 
 export const activeRequestIdAtom = atom<string>();
 

src-web/hooks/useActiveWorkspace.ts

@@ -2,7 +2,7 @@ import { useParams } from '@tanstack/react-router';
 import type { Workspace } from '@yaakapp-internal/models';
 import { atom, useAtomValue } from 'jotai/index';
 import { useEffect } from 'react';
-import { jotaiStore } from '../routes/__root';
+import { jotaiStore } from '../lib/jotai';
 import { useWorkspaces } from './useWorkspaces';
 
 export const activeWorkspaceIdAtom = atom<string>();
@@ -17,6 +17,10 @@ function useActiveWorkspaceId(): string | null {
   return useAtomValue(activeWorkspaceIdAtom) ?? null;
 }
 
+export function getActiveWorkspaceId() {
+  return jotaiStore.get(activeWorkspaceIdAtom);
+}
+
 export function useSubscribeActiveWorkspaceId() {
   const { workspaceId } = useParams({ strict: false });
   useEffect(() => {

src-web/hooks/useActiveWorkspaceChangedToast.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { InlineCode } from '../components/core/InlineCode';
-import { useToast } from '../components/ToastContext';
 import { useActiveWorkspace } from './useActiveWorkspace';
+import { useToast } from './useToast';
 
 export function useActiveWorkspaceChangedToast() {
   const toast = useToast();

src-web/hooks/useAlert.ts

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import type { DialogProps } from '../components/core/Dialog';
-import { useDialog } from '../components/DialogContext';
 import type { AlertProps } from './Alert';
 import { Alert } from './Alert';
+import {useDialog} from "./useDialog";
 
 interface AlertArg {
   id: string;

src-web/hooks/useCheckForUpdates.tsx

@@ -8,6 +8,7 @@ import { useAppInfo } from './useAppInfo';
 export function useCheckForUpdates() {
   const alert = useAlert();
   const appInfo = useAppInfo();
+
   return useMutation({
     mutationKey: ['check_for_updates'],
     mutationFn: async () => {

src-web/hooks/useConfirm.ts

@@ -1,7 +1,7 @@
 import type { DialogProps } from '../components/core/Dialog';
-import { useDialog } from '../components/DialogContext';
 import type { ConfirmProps } from './Confirm';
 import { Confirm } from './Confirm';
+import { useDialog } from './useDialog';
 
 export function useConfirm() {
   const dialog = useDialog();

src-web/hooks/useCopy.ts

@@ -1,6 +1,6 @@
 import { clear, writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { useCallback } from 'react';
-import { useToast } from '../components/ToastContext';
+import { useToast } from './useToast';
 
 export function useCopy({ disableToast }: { disableToast?: boolean } = {}) {
   const toast = useToast();

src-web/hooks/useCreateGrpcRequest.ts

@@ -1,18 +1,18 @@
-import { useFastMutation } from './useFastMutation';
+import { useNavigate } from '@tanstack/react-router';
 import type { GrpcRequest } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
-import { router } from '../main';
-import { Route } from '../routes/workspaces/$workspaceId/requests/$requestId';
 import { getActiveRequest } from './useActiveRequest';
 import { useActiveWorkspace } from './useActiveWorkspace';
+import { useFastMutation } from './useFastMutation';
 import { grpcRequestsAtom } from './useGrpcRequests';
 import { updateModelList } from './useSyncModelStores';
 
 export function useCreateGrpcRequest() {
   const workspace = useActiveWorkspace();
   const setGrpcRequests = useSetAtom(grpcRequestsAtom);
+  const navigate = useNavigate();
 
   return useFastMutation<
     GrpcRequest,
@@ -46,8 +46,8 @@ export function useCreateGrpcRequest() {
       // Optimistic update
       setGrpcRequests(updateModelList(request));
 
-      router.navigate({
-        to: Route.fullPath,
+      navigate({
+        to: '/workspaces/$workspaceId/requests/$requestId',
         params: {
           workspaceId: request.workspaceId,
           requestId: request.id,

src-web/hooks/useCreateHttpRequest.ts

@@ -1,18 +1,18 @@
-import { useFastMutation } from './useFastMutation';
 import type { HttpRequest } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai/index';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
-import { router } from '../main';
-import { Route } from '../routes/workspaces/$workspaceId/requests/$requestId';
 import { getActiveRequest } from './useActiveRequest';
 import { useActiveWorkspace } from './useActiveWorkspace';
+import { useFastMutation } from './useFastMutation';
 import { httpRequestsAtom } from './useHttpRequests';
 import { updateModelList } from './useSyncModelStores';
+import { useNavigate } from '@tanstack/react-router';
 
 export function useCreateHttpRequest() {
   const activeWorkspace = useActiveWorkspace();
   const setHttpRequests = useSetAtom(httpRequestsAtom);
+  const navigate = useNavigate();
 
   return useFastMutation<HttpRequest, unknown, Partial<HttpRequest>>({
     mutationKey: ['create_http_request'],
@@ -40,8 +40,8 @@ export function useCreateHttpRequest() {
       // Optimistic update
       setHttpRequests(updateModelList(request));
 
-      await router.navigate({
-        to: Route.fullPath,
+      await navigate({
+        to: '/workspaces/$workspaceId/requests/$requestId',
         params: { workspaceId: request.workspaceId, requestId: request.id },
         search: (prev) => ({ ...prev }),
       });

src-web/hooks/useCreateWorkspace.ts

@@ -1,9 +1,8 @@
-import { useFastMutation } from './useFastMutation';
+import { useNavigate } from '@tanstack/react-router';
 import type { Workspace } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai/index';
 import { invokeCmd } from '../lib/tauri';
-import { router } from '../main';
-import { Route } from '../routes/workspaces/$workspaceId';
+import { useFastMutation } from './useFastMutation';
 import { usePrompt } from './usePrompt';
 import { updateModelList } from './useSyncModelStores';
 import { workspacesAtom } from './useWorkspaces';
@@ -11,6 +10,7 @@ import { workspacesAtom } from './useWorkspaces';
 export function useCreateWorkspace() {
   const prompt = usePrompt();
   const setWorkspaces = useSetAtom(workspacesAtom);
+  const navigate = useNavigate();
 
   return useFastMutation<Workspace | null, void, void>({
     mutationKey: ['create_workspace'],
@@ -34,8 +34,8 @@ export function useCreateWorkspace() {
       // Optimistic update
       setWorkspaces(updateModelList(workspace));
 
-      router.navigate({
-        to: Route.fullPath,
+      navigate({
+        to: '/workspaces/$workspaceId',
         params: { workspaceId: workspace.id },
       });
     },

src-web/hooks/useDeleteWorkspace.tsx

@@ -1,13 +1,12 @@
-import { useFastMutation } from './useFastMutation';
+import { useNavigate } from '@tanstack/react-router';
 import type { Workspace } from '@yaakapp-internal/models';
 import { useSetAtom } from 'jotai';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
-import { router } from '../main';
-import { Route } from '../routes/workspaces';
 import { useActiveWorkspace } from './useActiveWorkspace';
 import { useConfirm } from './useConfirm';
+import { useFastMutation } from './useFastMutation';
 import { removeModelById } from './useSyncModelStores';
 import { workspacesAtom } from './useWorkspaces';
 
@@ -15,6 +14,7 @@ export function useDeleteWorkspace(workspace: Workspace | null) {
   const activeWorkspace = useActiveWorkspace();
   const confirm = useConfirm();
   const setWorkspaces = useSetAtom(workspacesAtom);
+  const navigate = useNavigate();
 
   return useFastMutation<Workspace | null, string>({
     mutationKey: ['delete_workspace', workspace?.id],
@@ -41,7 +41,7 @@ export function useDeleteWorkspace(workspace: Workspace | null) {
 
       const { id: workspaceId } = workspace;
       if (workspaceId === activeWorkspace?.id) {
-        router.navigate({ to: Route.fullPath });
+        navigate({ to: '/workspaces' });
       }
     },
   });

src-web/hooks/useDialog.ts

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

src-web/hooks/useDuplicateGrpcRequest.ts

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

src-web/hooks/useDuplicateHttpRequest.ts

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

src-web/hooks/useExportData.tsx

@@ -1,10 +1,10 @@
+import {useDialog} from "./useDialog";
 import { useFastMutation } from './useFastMutation';
-import { useDialog } from '../components/DialogContext';
 import { ExportDataDialog } from '../components/ExportDataDialog';
 import { useActiveWorkspace } from './useActiveWorkspace';
 import { useAlert } from './useAlert';
 import { useWorkspaces } from './useWorkspaces';
-import { useToast } from '../components/ToastContext';
+import { useToast } from './useToast';
 
 export function useExportData() {
   const workspaces = useWorkspaces();

src-web/hooks/useFormatText.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import type { EditorProps } from '../components/core/Editor';
 import { tryFormatJson, tryFormatXml } from '../lib/formatters';
+import type { EditorProps } from '../components/core/Editor/Editor';
 
 export function useFormatText({
   text,

src-web/hooks/useImportCurl.ts

@@ -1,6 +1,6 @@
 import { useFastMutation } from './useFastMutation';
 import type { HttpRequest } from '@yaakapp-internal/models';
-import { useToast } from '../components/ToastContext';
+import { useToast } from './useToast';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveWorkspace } from './useActiveWorkspace';
 import { useCreateHttpRequest } from './useCreateHttpRequest';

src-web/hooks/useImportData.tsx

@@ -1,4 +1,4 @@
-import { useFastMutation } from './useFastMutation';
+import { useNavigate } from '@tanstack/react-router';
 import type {
   Environment,
   Folder,
@@ -9,19 +9,19 @@ import type {
 import { Button } from '../components/core/Button';
 import { FormattedError } from '../components/core/FormattedError';
 import { VStack } from '../components/core/Stacks';
-import { useDialog } from '../components/DialogContext';
 import { ImportDataDialog } from '../components/ImportDataDialog';
 import { count } from '../lib/pluralize';
 import { invokeCmd } from '../lib/tauri';
-import { Route } from '../routes/workspaces/$workspaceId';
 import { useActiveWorkspace } from './useActiveWorkspace';
 import { useAlert } from './useAlert';
-import { router } from '../main';
+import { useDialog } from './useDialog';
+import { useFastMutation } from './useFastMutation';
 
 export function useImportData() {
   const dialog = useDialog();
   const alert = useAlert();
   const activeWorkspace = useActiveWorkspace();
+  const navigate = useNavigate();
 
   const importData = async (filePath: string): Promise<boolean> => {
     const imported: {
@@ -65,8 +65,8 @@ export function useImportData() {
 
     if (importedWorkspace != null) {
       const environmentId = imported.environments[0]?.id ?? null;
-      router.navigate({
-        to: Route.fullPath,
+      await navigate({
+        to: '/workspaces/$workspaceId',
         params: { workspaceId: importedWorkspace.id },
         search: { environmentId },
       });

src-web/hooks/useImportQuerystring.ts

@@ -1,6 +1,6 @@
 import { useFastMutation } from './useFastMutation';
 import type { HttpUrlParameter } from '@yaakapp-internal/models';
-import { useToast } from '../components/ToastContext';
+import { useToast } from './useToast';
 import { pluralize } from '../lib/pluralize';
 import { getHttpRequest } from '../lib/store';
 import { useRequestEditor } from './useRequestEditor';

src-web/hooks/useIntrospectGraphQL.ts

@@ -1,7 +1,6 @@
 import type { HttpRequest } from '@yaakapp-internal/models';
-import type { IntrospectionQuery } from 'graphql';
+import { buildClientSchema, getIntrospectionQuery, type IntrospectionQuery } from 'graphql';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { buildClientSchema, getIntrospectionQuery } from '../components/core/Editor';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
 import { getResponseBodyText } from '../lib/responseBody';
 import { sendEphemeralRequest } from '../lib/sendEphemeralRequest';

src-web/hooks/useMoveToWorkspace.tsx

@@ -1,6 +1,6 @@
+import {useDialog} from "./useDialog";
 import { useFastMutation } from './useFastMutation';
 import React from 'react';
-import { useDialog } from '../components/DialogContext';
 import { MoveToWorkspaceDialog } from '../components/MoveToWorkspaceDialog';
 import { useActiveWorkspace } from './useActiveWorkspace';
 import { useRequests } from './useRequests';

src-web/hooks/useNotificationToast.tsx

@@ -1,6 +1,6 @@
 import { open } from '@tauri-apps/plugin-shell';
 import { Button } from '../components/core/Button';
-import { useToast } from '../components/ToastContext';
+import { useToast } from './useToast';
 import { invokeCmd } from '../lib/tauri';
 import { useListenToTauriEvent } from './useListenToTauriEvent';
 

src-web/hooks/useOpenSettings.tsx

@@ -1,27 +1,26 @@
-import { useFastMutation } from './useFastMutation';
-import { SettingsTab } from '../components/Settings/Settings';
+import { useRouter } from '@tanstack/react-router';
+import { SettingsTab } from '../components/Settings/SettingsTab';
 import { trackEvent } from '../lib/analytics';
 import { invokeCmd } from '../lib/tauri';
-import { router } from '../main';
-import { Route as SettingsRoute } from '../routes/workspaces/settings';
-import { useActiveWorkspace } from './useActiveWorkspace';
+import { getActiveWorkspaceId } from './useActiveWorkspace';
+import { useFastMutation } from './useFastMutation';
 
 export function useOpenSettings(tab = SettingsTab.General) {
-  const workspace = useActiveWorkspace();
-
+  const router = useRouter();
   return useFastMutation({
     mutationKey: ['open_settings'],
     mutationFn: async () => {
-      if (workspace == null) return;
+      const workspaceId = getActiveWorkspaceId();
+      if (workspaceId == null) return;
 
       trackEvent('dialog', 'show', { id: 'settings', tab: `${tab}` });
       const location = router.buildLocation({
-        to: SettingsRoute.fullPath,
-        params: { workspaceId: workspace.id },
+        to: '/workspaces/$workspaceId/settings',
+        params: { workspaceId },
         search: { tab },
       });
       await invokeCmd('cmd_new_child_window', {
-        url: location,
+        url: location.href,
         label: 'settings',
         title: 'Yaak Settings',
         innerSize: [600, 550],

src-web/hooks/useOpenWorkspace.ts

@@ -1,13 +1,14 @@
-import { useFastMutation } from './useFastMutation';
+import { useNavigate, useRouter } from '@tanstack/react-router';
 import { invokeCmd } from '../lib/tauri';
-import { router } from '../main';
-import { Route as WorkspaceRoute } from '../routes/workspaces/$workspaceId';
-import { Route as RequestRoute } from '../routes/workspaces/$workspaceId/requests/$requestId';
+import { useFastMutation } from './useFastMutation';
 import { getRecentCookieJars } from './useRecentCookieJars';
 import { getRecentEnvironments } from './useRecentEnvironments';
 import { getRecentRequests } from './useRecentRequests';
 
 export function useOpenWorkspace() {
+  const router = useRouter();
+  const navigate = useNavigate();
+
   return useFastMutation({
     mutationKey: ['open_workspace'],
     mutationFn: async ({
@@ -24,18 +25,22 @@ export function useOpenWorkspace() {
 
       if (inNewWindow) {
         const location = router.buildLocation({
-          to: WorkspaceRoute.fullPath,
+          to: '/workspaces/$workspaceId',
           params: { workspaceId },
           search,
         });
-        await invokeCmd('cmd_new_main_window', { url: location });
+        await invokeCmd('cmd_new_main_window', { url: location.href });
         return;
       }
 
       if (requestId != null) {
-        router.navigate({ to: RequestRoute.fullPath, params: { workspaceId, requestId }, search });
+        await navigate({
+          to: '/workspaces/$workspaceId/requests/$requestId',
+          params: { workspaceId, requestId },
+          search,
+        });
       } else {
-        router.navigate({ to: WorkspaceRoute.fullPath, params: { workspaceId }, search });
+        await navigate({ to: '/workspaces/$workspaceId', params: { workspaceId }, search });
       }
     },
   });

src-web/hooks/usePrompt.ts

@@ -1,7 +1,7 @@
 import type { DialogProps } from '../components/core/Dialog';
-import { useDialog } from '../components/DialogContext';
 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 };

src-web/hooks/useSaveResponse.tsx

@@ -3,7 +3,7 @@ import { save } from '@tauri-apps/plugin-dialog';
 import mime from 'mime';
 import slugify from 'slugify';
 import { InlineCode } from '../components/core/InlineCode';
-import { useToast } from '../components/ToastContext';
+import { useToast } from './useToast';
 import type { HttpResponse } from '@yaakapp-internal/models';
 import { getContentTypeHeader } from '../lib/model_util';
 import { getHttpRequest } from '../lib/store';

src-web/hooks/useSyncModelStores.ts

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import type { AnyModel } from '@yaakapp-internal/models';
-import { useSetAtom } from 'jotai/index';
+import { jotaiStore } from '../lib/jotai';
 import { extractKeyValue } from '../lib/keyValueStore';
 import { modelsEq } from '../lib/model_util';
 import { useActiveWorkspace } from './useActiveWorkspace';
@@ -30,17 +30,6 @@ export function useSyncModelStores() {
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);
 
-  const setSettings = useSetAtom(settingsAtom);
-  const setWorkspaces = useSetAtom(workspacesAtom);
-  const setCookieJars = useSetAtom(cookieJarsAtom);
-  const setFolders = useSetAtom(foldersAtom);
-  const setPlugins = useSetAtom(pluginsAtom);
-  const setHttpRequests = useSetAtom(httpRequestsAtom);
-  const setHttpResponses = useSetAtom(httpResponsesAtom);
-  const setGrpcConnections = useSetAtom(grpcConnectionsAtom);
-  const setGrpcRequests = useSetAtom(grpcRequestsAtom);
-  const setEnvironments = useSetAtom(environmentsAtom);
-
   useListenToTauriEvent<ModelPayload>('upserted_model', ({ payload }) => {
     const { model, windowLabel } = payload;
     const queryKey =
@@ -63,25 +52,25 @@ export function useSyncModelStores() {
     if (shouldIgnoreModel(model, windowLabel)) return;
 
     if (model.model === 'workspace') {
-      setWorkspaces(updateModelList(model));
+      jotaiStore.set(workspacesAtom, updateModelList(model));
     } else if (model.model === 'plugin') {
-      setPlugins(updateModelList(model));
+      jotaiStore.set(pluginsAtom, updateModelList(model));
     } else if (model.model === 'http_request') {
-      setHttpRequests(updateModelList(model));
+      jotaiStore.set(httpRequestsAtom, updateModelList(model));
     } else if (model.model === 'folder') {
-      setFolders(updateModelList(model));
+      jotaiStore.set(foldersAtom, updateModelList(model));
     } else if (model.model === 'http_response') {
-      setHttpResponses(updateModelList(model));
+      jotaiStore.set(httpResponsesAtom, updateModelList(model));
     } else if (model.model === 'grpc_request') {
-      setGrpcRequests(updateModelList(model));
+      jotaiStore.set(grpcRequestsAtom, updateModelList(model));
     } else if (model.model === 'grpc_connection') {
-      setGrpcConnections(updateModelList(model));
+      jotaiStore.set(grpcConnectionsAtom, updateModelList(model));
     } else if (model.model === 'environment') {
-      setEnvironments(updateModelList(model));
+      jotaiStore.set(environmentsAtom, updateModelList(model));
     } else if (model.model === 'cookie_jar') {
-      setCookieJars(updateModelList(model));
+      jotaiStore.set(cookieJarsAtom, updateModelList(model));
     } else if (model.model === 'settings') {
-      setSettings(model);
+      jotaiStore.set(settingsAtom, model);
     } else if (queryKey != null) {
       // TODO: Convert all models to use Jotai
       queryClient.setQueryData(queryKey, (current: unknown) => {
@@ -104,27 +93,27 @@ export function useSyncModelStores() {
     console.log('Delete model', payload);
 
     if (model.model === 'workspace') {
-      setWorkspaces(removeModelById(model));
+      jotaiStore.set(workspacesAtom, removeModelById(model));
     } else if (model.model === 'plugin') {
-      setPlugins(removeModelById(model));
+      jotaiStore.set(pluginsAtom, removeModelById(model));
     } else if (model.model === 'http_request') {
-      setHttpRequests(removeModelById(model));
+      jotaiStore.set(httpRequestsAtom, removeModelById(model));
     } else if (model.model === 'http_response') {
-      setHttpResponses(removeModelById(model));
+      jotaiStore.set(httpResponsesAtom, removeModelById(model));
     } else if (model.model === 'folder') {
-      setFolders(removeModelById(model));
+      jotaiStore.set(foldersAtom, removeModelById(model));
     } else if (model.model === 'environment') {
-      setEnvironments(removeModelById(model));
+      jotaiStore.set(environmentsAtom, removeModelById(model));
     } else if (model.model === 'grpc_request') {
-      setGrpcRequests(removeModelById(model));
+      jotaiStore.set(grpcRequestsAtom, removeModelById(model));
     } else if (model.model === 'grpc_connection') {
-      setGrpcConnections(removeModelById(model));
+      jotaiStore.set(grpcConnectionsAtom, removeModelById(model));
     } else if (model.model === 'grpc_event') {
       queryClient.setQueryData(grpcEventsQueryKey(model), removeModelById(model));
     } else if (model.model === 'key_value') {
       queryClient.setQueryData(keyValueQueryKey(model), undefined);
     } else if (model.model === 'cookie_jar') {
-      setCookieJars(removeModelById(model));
+      jotaiStore.set(cookieJarsAtom, removeModelById(model));
     }
   });
 }

src-web/hooks/useToast.ts

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

src-web/hooks/useToggleCommandPalette.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { CommandPalette } from '../components/CommandPalette';
-import { useDialog } from '../components/DialogContext';
+import { useDialog } from './useDialog';
 
 export function useToggleCommandPalette() {
   const dialog = useDialog();