Upgrade to Tauri 2.0 (#23)

src-web/components/BinaryFileEditor.tsx

@@ -1,4 +1,4 @@
-import { open } from '@tauri-apps/api/dialog';
+import { open } from '@tauri-apps/plugin-dialog';
 import mime from 'mime';
 import { useKeyValue } from '../hooks/useKeyValue';
 import type { HttpRequest } from '../lib/models';

src-web/components/ExportDataDialog.tsx

@@ -1,5 +1,5 @@
-import { invoke } from '@tauri-apps/api';
-import { save } from '@tauri-apps/api/dialog';
+import { invoke } from '@tauri-apps/api/core';
+import { save } from '@tauri-apps/plugin-dialog';
 import { useState } from 'react';
 import slugify from 'slugify';
 import type { Workspace } from '../lib/models';

src-web/components/GlobalHooks.tsx

@@ -1,9 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { appWindow } from '@tauri-apps/api/window';
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCommandPalette } from '../hooks/useCommandPalette';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
+import { foldersQueryKey } from '../hooks/useFolders';
 import { useGlobalCommands } from '../hooks/useGlobalCommands';
 import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
 import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
@@ -47,93 +48,110 @@ export function GlobalHooks() {
     setPathname(location.pathname).catch(console.error);
   }, [location.pathname]);
 
-  useListenToTauriEvent<Model>('upserted_model', ({ payload, windowLabel }) => {
+  interface ModelPayload {
+    model: Model;
+    windowLabel: string;
+  }
+
+  useListenToTauriEvent<ModelPayload>('upserted_model', ({ payload }) => {
+    const { model, windowLabel } = payload;
     const queryKey =
-      payload.model === 'http_request'
-        ? httpRequestsQueryKey(payload)
-        : payload.model === 'http_response'
-        ? httpResponsesQueryKey(payload)
-        : payload.model === 'grpc_connection'
-        ? grpcConnectionsQueryKey(payload)
-        : payload.model === 'grpc_event'
-        ? grpcEventsQueryKey(payload)
-        : payload.model === 'grpc_request'
-        ? grpcRequestsQueryKey(payload)
-        : payload.model === 'workspace'
-        ? workspacesQueryKey(payload)
-        : payload.model === 'key_value'
-        ? keyValueQueryKey(payload)
-        : payload.model === 'cookie_jar'
-        ? cookieJarsQueryKey(payload)
-        : payload.model === 'settings'
+      model.model === 'http_request'
+        ? httpRequestsQueryKey(model)
+        : model.model === 'http_response'
+        ? httpResponsesQueryKey(model)
+        : model.model === 'folder'
+        ? foldersQueryKey(model)
+        : model.model === 'grpc_connection'
+        ? grpcConnectionsQueryKey(model)
+        : model.model === 'grpc_event'
+        ? grpcEventsQueryKey(model)
+        : model.model === 'grpc_request'
+        ? grpcRequestsQueryKey(model)
+        : model.model === 'workspace'
+        ? workspacesQueryKey(model)
+        : model.model === 'key_value'
+        ? keyValueQueryKey(model)
+        : model.model === 'cookie_jar'
+        ? cookieJarsQueryKey(model)
+        : model.model === 'settings'
         ? settingsQueryKey()
         : null;
 
     if (queryKey === null) {
-      console.log('Unrecognized updated model:', payload);
+      console.log('Unrecognized updated model:', model);
       return;
     }
 
-    if (payload.model === 'http_request' && windowLabel !== appWindow.label) {
-      wasUpdatedExternally(payload.id);
+    if (model.model === 'http_request' && windowLabel !== getCurrent().label) {
+      wasUpdatedExternally(model.id);
     }
 
     const pushToFront = (['http_response', 'grpc_connection'] as Model['model'][]).includes(
-      payload.model,
+      model.model,
     );
 
-    if (shouldIgnoreModel(payload)) return;
+    if (shouldIgnoreModel(model)) return;
 
     queryClient.setQueryData<Model[]>(queryKey, (values = []) => {
-      const index = values.findIndex((v) => modelsEq(v, payload)) ?? -1;
+      const index = values.findIndex((v) => modelsEq(v, model)) ?? -1;
       if (index >= 0) {
         // console.log('UPDATED', payload);
-        return [...values.slice(0, index), payload, ...values.slice(index + 1)];
+        return [...values.slice(0, index), model, ...values.slice(index + 1)];
       } else {
         // console.log('CREATED', payload);
-        return pushToFront ? [payload, ...(values ?? [])] : [...(values ?? []), payload];
+        return pushToFront ? [model, ...(values ?? [])] : [...(values ?? []), model];
       }
     });
   });
 
-  useListenToTauriEvent<Model>('deleted_model', ({ payload }) => {
-    if (shouldIgnoreModel(payload)) return;
+  useListenToTauriEvent<ModelPayload>('deleted_model', ({ payload }) => {
+    const { model } = payload;
+    if (shouldIgnoreModel(model)) return;
 
-    if (payload.model === 'workspace') {
-      queryClient.setQueryData(workspacesQueryKey(), removeById(payload));
-    } else if (payload.model === 'http_request') {
-      queryClient.setQueryData(httpRequestsQueryKey(payload), removeById(payload));
-    } else if (payload.model === 'http_response') {
-      queryClient.setQueryData(httpResponsesQueryKey(payload), removeById(payload));
-    } else if (payload.model === 'grpc_request') {
-      queryClient.setQueryData(grpcRequestsQueryKey(payload), removeById(payload));
-    } else if (payload.model === 'grpc_connection') {
-      queryClient.setQueryData(grpcConnectionsQueryKey(payload), removeById(payload));
-    } else if (payload.model === 'grpc_event') {
-      queryClient.setQueryData(grpcEventsQueryKey(payload), removeById(payload));
-    } else if (payload.model === 'key_value') {
-      queryClient.setQueryData(keyValueQueryKey(payload), undefined);
-    } else if (payload.model === 'cookie_jar') {
-      queryClient.setQueryData(cookieJarsQueryKey(payload), undefined);
-    } else if (payload.model === 'settings') {
+    if (model.model === 'workspace') {
+      queryClient.setQueryData(workspacesQueryKey(), removeById(model));
+    } else if (model.model === 'http_request') {
+      queryClient.setQueryData(httpRequestsQueryKey(model), removeById(model));
+    } else if (model.model === 'http_response') {
+      queryClient.setQueryData(httpResponsesQueryKey(model), removeById(model));
+    } else if (model.model === 'folder') {
+      queryClient.setQueryData(foldersQueryKey(model), removeById(model));
+    } else if (model.model === 'grpc_request') {
+      queryClient.setQueryData(grpcRequestsQueryKey(model), removeById(model));
+    } else if (model.model === 'grpc_connection') {
+      queryClient.setQueryData(grpcConnectionsQueryKey(model), removeById(model));
+    } else if (model.model === 'grpc_event') {
+      queryClient.setQueryData(grpcEventsQueryKey(model), removeById(model));
+    } else if (model.model === 'key_value') {
+      queryClient.setQueryData(keyValueQueryKey(model), undefined);
+    } else if (model.model === 'cookie_jar') {
+      queryClient.setQueryData(cookieJarsQueryKey(model), undefined);
+    } else if (model.model === 'settings') {
       queryClient.setQueryData(settingsQueryKey(), undefined);
     }
   });
-  useListenToTauriEvent<number>('zoom', ({ payload: zoomDelta, windowLabel }) => {
-    if (windowLabel !== appWindow.label) return;
-    const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
 
-    let newFontSize;
-    if (zoomDelta === 0) {
-      newFontSize = DEFAULT_FONT_SIZE;
-    } else if (zoomDelta > 0) {
-      newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
-    } else if (zoomDelta < 0) {
-      newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
-    }
+  useListenToTauriEvent<number>(
+    'zoom',
+    ({ payload: zoomDelta }) => {
+      const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
 
-    document.documentElement.style.fontSize = `${newFontSize}px`;
-  });
+      let newFontSize;
+      if (zoomDelta === 0) {
+        newFontSize = DEFAULT_FONT_SIZE;
+      } else if (zoomDelta > 0) {
+        newFontSize = Math.min(fontSize * 1.1, DEFAULT_FONT_SIZE * 5);
+      } else if (zoomDelta < 0) {
+        newFontSize = Math.max(fontSize * 0.9, DEFAULT_FONT_SIZE * 0.4);
+      }
+
+      document.documentElement.style.fontSize = `${newFontSize}px`;
+    },
+    {
+      target: { kind: 'WebviewWindow', label: getCurrent().label },
+    },
+  );
 
   return null;
 }

src-web/components/GrpcProtoSelection.tsx

@@ -1,4 +1,4 @@
-import { open } from '@tauri-apps/api/dialog';
+import { open } from '@tauri-apps/plugin-dialog';
 import { useGrpc } from '../hooks/useGrpc';
 import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
 import { useGrpcRequest } from '../hooks/useGrpcRequest';
@@ -47,8 +47,10 @@ export function GrpcProtoSelection({ requestId }: Props) {
               multiple: true,
               filters: [{ name: 'Proto Files', extensions: ['proto'] }],
             });
-            if (files == null || typeof files === 'string') return;
-            const newFiles = files.filter((f) => !protoFiles.includes(f));
+            if (files == null) {
+              return;
+            }
+            const newFiles = files.map((f) => f.path).filter((p) => !protoFiles.includes(p));
             await protoFilesKv.set([...protoFiles, ...newFiles]);
             await grpc.reflect.refetch();
           }}

src-web/components/RequestMethodDropdown.tsx

@@ -19,6 +19,7 @@ const radioItems: RadioDropdownItem<string>[] = [
   'PATCH',
   'DELETE',
   'OPTIONS',
+  'QUERY',
   'HEAD',
 ].map((m) => ({
   value: m,
@@ -33,7 +34,6 @@ export const RequestMethodDropdown = memo(function RequestMethodDropdown({
   const prompt = usePrompt();
   const extraItems = useMemo<DropdownItem[]>(
     () => [
-      { type: 'separator' },
       {
         key: 'custom',
         label: 'CUSTOM',

src-web/components/ResponseHeaders.tsx

@@ -1,4 +1,4 @@
-import { shell } from '@tauri-apps/api';
+import { open } from '@tauri-apps/plugin-shell';
 import type { HttpResponse } from '../lib/models';
 import { IconButton } from './core/IconButton';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
@@ -28,7 +28,7 @@ export function ResponseHeaders({ response }: Props) {
                 iconSize="sm"
                 className="inline-block w-auto ml-1 !h-auto opacity-50 hover:opacity-100"
                 icon="externalLink"
-                onClick={() => shell.open(response.url)}
+                onClick={() => open(response.url)}
                 title="Open in browser"
               />
             </div>

src-web/components/SettingsDropdown.tsx

@@ -1,4 +1,4 @@
-import { shell } from '@tauri-apps/api';
+import { open } from '@tauri-apps/plugin-shell';
 import { useRef, useState } from 'react';
 import { useAppInfo } from '../hooks/useAppInfo';
 import { useCheckForUpdates } from '../hooks/useCheckForUpdates';
@@ -26,6 +26,17 @@ export function SettingsDropdown() {
     setShowChangelog(true);
   });
 
+  const showSettings = () => {
+    dialog.show({
+      id: 'settings',
+      size: 'md',
+      title: 'Settings',
+      render: () => <SettingsDialog />,
+    });
+  };
+
+  useListenToTauriEvent('settings', showSettings);
+
   return (
     <Dropdown
       ref={dropdownRef}
@@ -36,14 +47,7 @@ export function SettingsDropdown() {
           label: 'Settings',
           hotKeyAction: 'settings.show',
           leftSlot: <Icon icon="settings" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'settings',
-              size: 'md',
-              title: 'Settings',
-              render: () => <SettingsDialog />,
-            });
-          },
+          onSelect: showSettings,
         },
         {
           key: 'hotkeys',
@@ -83,7 +87,7 @@ export function SettingsDropdown() {
           label: 'Feedback',
           leftSlot: <Icon icon="chat" />,
           rightSlot: <Icon icon="externalLink" />,
-          onSelect: () => shell.open('https://yaak.canny.io'),
+          onSelect: () => open('https://yaak.canny.io'),
         },
         {
           key: 'changelog',
@@ -91,7 +95,7 @@ export function SettingsDropdown() {
           variant: showChangelog ? 'notify' : 'default',
           leftSlot: <Icon icon="cake" />,
           rightSlot: <Icon icon="externalLink" />,
-          onSelect: () => shell.open(`https://yaak.app/changelog/${appInfo.data?.version}`),
+          onSelect: () => open(`https://yaak.app/changelog/${appInfo.data?.version}`),
         },
       ]}
     >

src-web/components/Workspace.tsx

@@ -211,7 +211,7 @@ interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
 function HeaderSize({ className, style, ...props }: HeaderSizeProps) {
   const platform = useOsInfo();
   const fullscreen = useIsFullscreen();
-  const stoplightsVisible = platform?.osType === 'Darwin' && !fullscreen;
+  const stoplightsVisible = platform?.osType === 'macos' && !fullscreen;
   return (
     <div
       style={style}

src-web/components/WorkspaceActionsDropdown.tsx

@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import classNames from 'classnames';
 import { memo, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';

src-web/components/WorkspaceHeader.tsx

@@ -1,6 +1,9 @@
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import classNames from 'classnames';
 import React, { memo, useState } from 'react';
+import { useOsInfo } from '../hooks/useOsInfo';
 import { CookieDropdown } from './CookieDropdown';
+import { Button } from './core/Button';
 import { Icon } from './core/Icon';
 import { HStack } from './core/Stacks';
 import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
@@ -8,9 +11,6 @@ import { RecentRequestsDropdown } from './RecentRequestsDropdown';
 import { SettingsDropdown } from './SettingsDropdown';
 import { SidebarActions } from './SidebarActions';
 import { WorkspaceActionsDropdown } from './WorkspaceActionsDropdown';
-import { useOsInfo } from '../hooks/useOsInfo';
-import { Button } from './core/Button';
-import { appWindow } from '@tauri-apps/api/window';
 
 interface Props {
   className?: string;
@@ -40,11 +40,11 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
       </div>
       <div className="flex-1 flex items-center h-full justify-end pointer-events-none">
         <SettingsDropdown />
-        {(osInfo?.osType === 'Linux' || osInfo?.osType === 'Windows_NT') && (
+        {(osInfo?.osType === 'linux' || osInfo?.osType === 'windows') && (
           <HStack className="ml-4" alignItems="center">
             <Button
               className="px-4 !text-gray-600 rounded-none"
-              onClick={() => appWindow.minimize()}
+              onClick={() => getCurrent().minimize()}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                 <path fill="currentColor" d="M14 8v1H3V8z" />
@@ -53,8 +53,9 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
             <Button
               className="px-4 !text-gray-600 rounded-none"
               onClick={async () => {
-                await appWindow.toggleMaximize();
-                setMaximized(await appWindow.isMaximized());
+                const w = getCurrent();
+                await w.toggleMaximize();
+                setMaximized(await w.isMaximized());
               }}
             >
               {maximized ? (
@@ -73,7 +74,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
             <Button
               color="custom"
               className="px-4 text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
-              onClick={() => appWindow.close()}
+              onClick={() => getCurrent().close()}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                 <path

src-web/components/core/PairEditor.tsx

@@ -1,4 +1,4 @@
-import { open } from '@tauri-apps/api/dialog';
+import { open } from '@tauri-apps/plugin-dialog';
 import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';

src-web/components/responseViewers/ImageViewer.tsx

@@ -1,4 +1,4 @@
-import { convertFileSrc } from '@tauri-apps/api/tauri';
+import { convertFileSrc } from '@tauri-apps/api/core';
 import classNames from 'classnames';
 import { useState } from 'react';
 import type { HttpResponse } from '../../lib/models';

src-web/hooks/useAppInfo.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 
 export function useAppInfo() {
   return useQuery(['appInfo'], async () => {

src-web/hooks/useCheckForUpdates.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
 import { useAlert } from './useAlert';
 

src-web/hooks/useCookieJars.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { CookieJar } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 

src-web/hooks/useCreateCookieJar.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { CookieJar } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';

src-web/hooks/useCreateEnvironment.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { Environment } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';

src-web/hooks/useCreateFolder.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { Folder } from '../lib/models';
 import { useActiveRequest } from './useActiveRequest';

src-web/hooks/useCreateGrpcRequest.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { GrpcRequest } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';

src-web/hooks/useCreateHttpRequest.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { HttpRequest } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';

src-web/hooks/useDeleteAnyGrpcRequest.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { fallbackRequestName } from '../lib/fallbackRequestName';

src-web/hooks/useDeleteAnyHttpRequest.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import { fallbackRequestName } from '../lib/fallbackRequestName';

src-web/hooks/useDeleteCookieJar.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import type { CookieJar } from '../lib/models';

src-web/hooks/useDeleteEnvironment.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import type { Environment, Workspace } from '../lib/models';

src-web/hooks/useDeleteFolder.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import type { Folder } from '../lib/models';

src-web/hooks/useDeleteGrpcConnection.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { GrpcConnection } from '../lib/models';
 import { grpcConnectionsQueryKey } from './useGrpcConnections';

src-web/hooks/useDeleteGrpcConnections.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import { grpcConnectionsQueryKey } from './useGrpcConnections';
 

src-web/hooks/useDeleteHttpResponse.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { HttpResponse } from '../lib/models';
 import { httpResponsesQueryKey } from './useHttpResponses';

src-web/hooks/useDeleteHttpResponses.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import { httpResponsesQueryKey } from './useHttpResponses';
 

src-web/hooks/useDeleteWorkspace.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { InlineCode } from '../components/core/InlineCode';
 import { trackEvent } from '../lib/analytics';
 import type { Workspace } from '../lib/models';

src-web/hooks/useDuplicateGrpcRequest.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import { setKeyValue } from '../lib/keyValueStore';
 import type { GrpcRequest } from '../lib/models';

src-web/hooks/useDuplicateHttpRequest.ts

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { trackEvent } from '../lib/analytics';
 import type { HttpRequest } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';

src-web/hooks/useEnvironments.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Environment } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 

src-web/hooks/useFilterResponse.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 
 export function useFilterResponse({
   responseId,

src-web/hooks/useFolders.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Folder } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 

src-web/hooks/useGlobalCommands.ts

@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { useAppRoutes } from './useAppRoutes';
 import { useRegisterCommand } from './useCommands';
 import { usePrompt } from './usePrompt';

src-web/hooks/useGrpc.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import { emit } from '@tauri-apps/api/event';
 import { trackEvent } from '../lib/analytics';
 import { minPromiseMillis } from '../lib/minPromiseMillis';

src-web/hooks/useGrpcConnections.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { GrpcConnection } from '../lib/models';
 
 export function grpcConnectionsQueryKey({ requestId }: { requestId: string }) {

src-web/hooks/useGrpcEvents.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { GrpcEvent } from '../lib/models';
 
 export function grpcEventsQueryKey({ connectionId }: { connectionId: string }) {

src-web/hooks/useGrpcRequests.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { GrpcRequest } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 

src-web/hooks/useHotKey.ts

@@ -1,4 +1,4 @@
-import type { OsType } from '@tauri-apps/api/os';
+import type { OsType } from '@tauri-apps/plugin-os';
 import { useEffect, useRef } from 'react';
 import { capitalize } from '../lib/capitalize';
 import { debounce } from '../lib/debounce';
@@ -160,7 +160,7 @@ export function useFormattedHotkey(action: HotkeyAction | null): string[] | null
   const labelParts: string[] = [];
 
   for (const p of parts) {
-    if (os === 'Darwin') {
+    if (os === 'macos') {
       if (p === 'CmdCtrl') {
         labelParts.push('⌘');
       } else if (p === 'Shift') {
@@ -183,7 +183,7 @@ export function useFormattedHotkey(action: HotkeyAction | null): string[] | null
     }
   }
 
-  if (os === 'Darwin') {
+  if (os === 'macos') {
     return labelParts;
   } else {
     return [labelParts.join('+')];
@@ -191,7 +191,7 @@ export function useFormattedHotkey(action: HotkeyAction | null): string[] | null
 }
 
 const normalizeKey = (key: string, os: OsType | null) => {
-  if (key === 'Meta' && os === 'Darwin') return 'CmdCtrl';
-  else if (key === 'Control' && os !== 'Darwin') return 'CmdCtrl';
+  if (key === 'Meta' && os === 'macos') return 'CmdCtrl';
+  else if (key === 'Control' && os !== 'macos') return 'CmdCtrl';
   else return key;
 };

src-web/hooks/useHttpRequests.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { HttpRequest } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 

src-web/hooks/useHttpResponses.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { HttpResponse } from '../lib/models';
 
 export function httpResponsesQueryKey({ requestId }: { requestId: string }) {
@@ -13,7 +13,10 @@ export function useHttpResponses(requestId: string | null) {
       initialData: [],
       queryKey: httpResponsesQueryKey({ requestId: requestId ?? 'n/a' }),
       queryFn: async () => {
-        return (await invoke('cmd_list_http_responses', { requestId, limit: 200 })) as HttpResponse[];
+        return (await invoke('cmd_list_http_responses', {
+          requestId,
+          limit: 200,
+        })) as HttpResponse[];
       },
     }).data ?? []
   );

src-web/hooks/useImportData.tsx

@@ -1,7 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
-import type { OpenDialogOptions } from '@tauri-apps/api/dialog';
-import { open } from '@tauri-apps/api/dialog';
+import { invoke } from '@tauri-apps/api/core';
+import { open } from '@tauri-apps/plugin-dialog';
 import { Button } from '../components/core/Button';
 import { VStack } from '../components/core/Stacks';
 import { useDialog } from '../components/DialogContext';
@@ -11,11 +10,6 @@ import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useAlert } from './useAlert';
 import { useAppRoutes } from './useAppRoutes';
 
-const openArgs: OpenDialogOptions = {
-  filters: [{ name: 'Export File', extensions: ['json', 'yaml'] }],
-  multiple: false,
-};
-
 export function useImportData() {
   const routes = useAppRoutes();
   const dialog = useDialog();
@@ -23,8 +17,11 @@ export function useImportData() {
   const activeWorkspaceId = useActiveWorkspaceId();
 
   const importData = async () => {
-    const selected = await open(openArgs);
-    if (selected == null || selected.length === 0) {
+    const selected = await open({
+      filters: [{ name: 'Export File', extensions: ['json', 'yaml'] }],
+      multiple: false,
+    });
+    if (selected == null) {
       return;
     }
 
@@ -35,7 +32,7 @@ export function useImportData() {
       httpRequests: HttpRequest[];
       grpcRequests: GrpcRequest[];
     } = await invoke('cmd_import_data', {
-      filePath: Array.isArray(selected) ? selected[0] : selected,
+      filePath: selected.path,
       workspaceId: activeWorkspaceId,
     });
     const importedWorkspace = imported.workspaces[0];

src-web/hooks/useIntrospectGraphQL.ts

@@ -43,19 +43,19 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
         return Promise.reject(new Error(response.error));
       }
 
+      const bodyText = await getResponseBodyText(response);
       if (response.status < 200 || response.status >= 300) {
-        const text = await getResponseBodyText(response);
         return Promise.reject(
-          new Error(`Request failed with status ${response.status}.\n\n${text}`),
+          new Error(`Request failed with status ${response.status}.\n\n${bodyText}`),
         );
       }
 
-      const body = await getResponseBodyText(response);
-      if (body === null) {
+      if (bodyText === null) {
         return Promise.reject(new Error('Empty body returned in response'));
       }
 
-      const { data } = JSON.parse(body);
+      const { data } = JSON.parse(bodyText);
+      console.log('Introspection response', data);
       setIntrospection(data);
     };
 

src-web/hooks/useIsFullscreen.ts

@@ -1,4 +1,4 @@
-import { appWindow } from '@tauri-apps/api/window';
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import { useEffect, useState } from 'react';
 import { useWindowSize } from 'react-use';
 
@@ -13,7 +13,7 @@ export function useIsFullscreen() {
       // for this.
       for (let i = 0; i < 100; i++) {
         await new Promise((resolve) => setTimeout(resolve, 100));
-        const newIsFullscreen = await appWindow.isFullscreen();
+        const newIsFullscreen = await getCurrent().isFullscreen();
         if (newIsFullscreen !== isFullscreen) {
           setIsFullscreen(newIsFullscreen);
           break;

src-web/hooks/useListenToTauriEvent.ts

@@ -1,17 +1,22 @@
-import type { EventCallback } from '@tauri-apps/api/event';
-import { listen as tauriListen } from '@tauri-apps/api/event';
+import type { EventCallback, EventName, Options } from '@tauri-apps/api/event';
+import { listen } from '@tauri-apps/api/event';
 import type { DependencyList } from 'react';
 import { useEffect } from 'react';
 
 /**
-  * React hook to listen to a Tauri event.
-  */
-export function useListenToTauriEvent<T>(event: string, fn: EventCallback<T>, deps: DependencyList = []) {
+ * React hook to listen to a Tauri event.
+ */
+export function useListenToTauriEvent<T>(
+  event: EventName,
+  fn: EventCallback<T>,
+  options: Options | undefined = undefined,
+  deps: DependencyList = [],
+) {
   useEffect(() => {
     let unMounted = false;
     let unsubFn: (() => void) | undefined = undefined;
 
-    tauriListen(event, fn).then((unsub) => {
+    listen(event, fn, options).then((unsub) => {
       if (unMounted) unsub();
       else unsubFn = unsub;
     });

src-web/hooks/useOsInfo.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
-import type { OsType } from '@tauri-apps/api/os';
-import { type } from '@tauri-apps/api/os';
+import type { OsType } from '@tauri-apps/plugin-os';
+import { type } from '@tauri-apps/plugin-os';
 
 export function useOsInfo() {
   return useQuery<{ osType: OsType }>({

src-web/hooks/useSendAnyRequest.ts

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
-import { save } from '@tauri-apps/api/dialog';
+import { invoke } from '@tauri-apps/api/core';
+import { save } from '@tauri-apps/plugin-dialog';
 import slugify from 'slugify';
 import { trackEvent } from '../lib/analytics';
 import type { HttpResponse } from '../lib/models';

src-web/hooks/useSettings.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Settings } from '../lib/models';
 
 export function settingsQueryKey() {

src-web/hooks/useSyncWindowTitle.ts

@@ -18,6 +18,6 @@ export function useSyncWindowTitle() {
   //   }
   //
   //   // TODO: This resets the stoplight position so we can't use it yet
-  //   // appWindow.setTitle(newTitle).catch(console.error);
+  //   // getCurrent().setTitle(newTitle).catch(console.error);
   // }, [activeEnvironment, activeRequest, activeWorkspace]);
 }

src-web/hooks/useUpdateAnyFolder.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Folder } from '../lib/models';
 import { getFolder } from '../lib/store';
 import { foldersQueryKey } from './useFolders';

src-web/hooks/useUpdateAnyGrpcRequest.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { GrpcRequest } from '../lib/models';
 import { getGrpcRequest } from '../lib/store';
 import { grpcRequestsQueryKey } from './useGrpcRequests';

src-web/hooks/useUpdateAnyHttpRequest.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { HttpRequest } from '../lib/models';
 import { getHttpRequest } from '../lib/store';
 import { httpRequestsQueryKey } from './useHttpRequests';

src-web/hooks/useUpdateCookieJar.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { CookieJar } from '../lib/models';
 import { getCookieJar } from '../lib/store';
 import { cookieJarsQueryKey } from './useCookieJars';

src-web/hooks/useUpdateEnvironment.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Environment } from '../lib/models';
 import { getEnvironment } from '../lib/store';
 import { environmentsQueryKey } from './useEnvironments';

src-web/hooks/useUpdateSettings.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Settings } from '../lib/models';
 import { settingsQueryKey } from './useSettings';
 

src-web/hooks/useUpdateWorkspace.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Workspace } from '../lib/models';
 import { getWorkspace } from '../lib/store';
 import { workspacesQueryKey } from './useWorkspaces';

src-web/hooks/useVariables.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { EnvironmentVariable } from '../lib/models';
 
 export function variablesQueryKey({ environmentId }: { environmentId: string }) {

src-web/hooks/useWindowFocus.ts

@@ -1,4 +1,4 @@
-import { appWindow } from '@tauri-apps/api/window';
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import { useEffect, useState } from 'react';
 
 export function useWindowFocus() {
@@ -6,7 +6,7 @@ export function useWindowFocus() {
 
   useEffect(() => {
     let unsub: undefined | (() => void) = undefined;
-    appWindow
+    getCurrent()
       .onFocusChanged((e) => {
         setVisible(e.payload);
       })

src-web/hooks/useWorkspaces.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { Workspace } from '../lib/models';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-types

src-web/lib/analytics.ts

@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 
 export type TrackResource =
   | 'app'

src-web/lib/keyValueStore.ts

@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { KeyValue } from './models';
 
 export async function setKeyValue<T>({

src-web/lib/models.ts

@@ -14,6 +14,7 @@ export const AUTH_TYPE_BEARER = 'bearer';
 export type Model =
   | Settings
   | Workspace
+  | Folder
   | GrpcConnection
   | GrpcRequest
   | GrpcEvent

src-web/lib/persistPathname.ts

@@ -1,7 +1,7 @@
-import { appWindow } from '@tauri-apps/api/window';
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
 import { getKeyValue, setKeyValue } from './keyValueStore';
 
-const key = ['window_pathname', appWindow.label];
+const key = ['window_pathname', getCurrent().label];
 const namespace = 'no_sync';
 const fallback = undefined;
 

src-web/lib/responseBody.ts

@@ -1,4 +1,4 @@
-import { readBinaryFile, readTextFile } from '@tauri-apps/api/fs';
+import { readFile, readTextFile } from '@tauri-apps/plugin-fs';
 import type { HttpResponse } from './models';
 
 export async function getResponseBodyText(response: HttpResponse): Promise<string | null> {
@@ -10,7 +10,7 @@ export async function getResponseBodyText(response: HttpResponse): Promise<strin
 
 export async function getResponseBodyBlob(response: HttpResponse): Promise<Uint8Array | null> {
   if (response.bodyPath) {
-    return readBinaryFile(response.bodyPath);
+    return readFile(response.bodyPath);
   }
   return null;
 }

src-web/lib/sendEphemeralRequest.ts

@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type { HttpRequest, HttpResponse } from './models';
 
 export async function sendEphemeralRequest(

src-web/lib/store.ts

@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api';
+import { invoke } from '@tauri-apps/api/core';
 import type {
   CookieJar,
   Environment,

src-web/main.tsx

@@ -1,5 +1,5 @@
-import { type } from '@tauri-apps/api/os';
-import { appWindow } from '@tauri-apps/api/window';
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
+import { type } from '@tauri-apps/plugin-os';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './components/App';
@@ -10,8 +10,8 @@ import { setAppearanceOnDocument } from './lib/theme/window';
 
 // Hide decorations here because it doesn't work in Rust for some reason (bug?)
 const osType = await type();
-if (osType !== 'Darwin') {
-  await appWindow.setDecorations(false);
+if (osType !== 'macos') {
+  await getCurrent().setDecorations(false);
 }
 
 // await attachConsole();