Better mutation errors and fix workspace creation

src-web/commands/openWorkspaceFromSyncDir.tsx

@@ -4,7 +4,7 @@ import { createFastMutation } from '../hooks/useFastMutation';
 import { showSimpleAlert } from '../lib/alert';
 import { router } from '../lib/router';
 
-export const openWorkspaceFromSyncDir = createFastMutation({
+export const openWorkspaceFromSyncDir = createFastMutation<void>({
   mutationKey: [],
   mutationFn: async () => {
     const dir = await open({

src-web/commands/switchWorkspace.tsx

@@ -5,15 +5,16 @@ import { getRecentRequests } from '../hooks/useRecentRequests';
 import { router } from '../lib/router';
 import { invokeCmd } from '../lib/tauri';
 
-export const switchWorkspace = createFastMutation({
-  mutationKey: ['open_workspace'],
-  mutationFn: async ({
-    workspaceId,
-    inNewWindow,
-  }: {
+export const switchWorkspace = createFastMutation<
+  void,
+  unknown,
+  {
     workspaceId: string;
     inNewWindow: boolean;
-  }) => {
+  }
+>({
+  mutationKey: ['open_workspace'],
+  mutationFn: async ({ workspaceId, inNewWindow }) => {
     const environmentId = (await getRecentEnvironments(workspaceId))[0] ?? undefined;
     const requestId = (await getRecentRequests(workspaceId))[0] ?? undefined;
     const cookieJarId = (await getRecentCookieJars(workspaceId))[0] ?? undefined;

src-web/components/CreateWorkspaceDialog.tsx

@@ -24,7 +24,6 @@ export function CreateWorkspaceDialog({ hide }: Props) {
       className="pb-3 max-h-[50vh]"
       onSubmit={async (e) => {
         e.preventDefault();
-        if (!settingSyncDir) return;
         const workspace = await upsertWorkspace.mutateAsync({ name });
         if (workspace == null) return;
 

src-web/components/Toasts.tsx

@@ -16,7 +16,7 @@ export const Toasts = () => {
   const toasts = useAtomValue(toastsAtom);
   return (
     <Portal name="toasts">
-      <div className="absolute right-0 bottom-0 z-20">
+      <div className="absolute right-0 bottom-0 z-50">
         <AnimatePresence>
           {toasts.map(({ message, ...props }: ToastInstance) => (
             <Toast

src-web/hooks/useFastMutation.ts

@@ -1,5 +1,7 @@
 import type { MutationKey } from '@tanstack/react-query';
 import { useMemo } from 'react';
+import { showToast } from '../lib/toast';
+import { trackEvent } from '../lib/analytics';
 
 interface MutationOptions<TData, TError, TVariables> {
   mutationKey: MutationKey;
@@ -7,6 +9,7 @@ interface MutationOptions<TData, TError, TVariables> {
   onSettled?: () => void;
   onError?: (err: TError) => void;
   onSuccess?: (data: TData) => void;
+  disableToastError?: boolean;
 }
 
 type CallbackMutationOptions<TData, TError, TVariables> = Omit<
@@ -21,7 +24,7 @@ export function createFastMutation<TData = unknown, TError = unknown, TVariables
     variables: TVariables,
     args?: CallbackMutationOptions<TData, TError, TVariables>,
   ) => {
-    const { mutationKey, mutationFn, onSuccess, onError, onSettled } = {
+    const { mutationKey, mutationFn, onSuccess, onError, onSettled, disableToastError } = {
       ...defaultArgs,
       ...args,
     };
@@ -30,8 +33,18 @@ export function createFastMutation<TData = unknown, TError = unknown, TVariables
       onSuccess?.(data);
       return data;
     } catch (err: unknown) {
+      const stringKey = mutationKey.join('.');
       const e = err as TError;
-      console.log('Fast mutation error', mutationKey, e);
+      console.log('mutation error', stringKey, e);
+      trackEvent('mutation', 'error', { key: stringKey });
+      if (!disableToastError) {
+        showToast({
+          id: stringKey,
+          message: `${err}`,
+          color: 'danger',
+          timeout: 5000,
+        });
+      }
       onError?.(e);
     } finally {
       onSettled?.();