Dedicated event for model creation

src-tauri/src/main.rs

@@ -241,7 +241,7 @@ async fn send_request(
         .await
         .expect("Failed to create response");
     window
-        .emit_all("updated_model", &response)
+        .emit_all("created_model", &response)
         .expect("Failed to emit updated_model");
 
     actually_send_ephemeral_request(req, response, window, pool).await?;
@@ -302,7 +302,9 @@ async fn create_workspace(
         .await
         .expect("Failed to create workspace");
 
-    emit_all_others(&window, "updated_model", &created_workspace);
+    window
+        .emit_all("created_model", &created_workspace)
+        .expect("Failed to emit event");
 
     Ok(created_workspace.id)
 }
@@ -334,7 +336,9 @@ async fn create_request(
     .await
     .expect("Failed to create request");
 
-    emit_all_others(&window, "updated_model", &created_request);
+    window
+        .emit_all("created_model", &created_request)
+        .expect("Failed to emit event");
 
     Ok(created_request.id)
 }

src-web/components/SidebarDisplayToggle.tsx

@@ -1,16 +1,32 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
+import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
 import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
 
 export const SidebarDisplayToggle = memo(function SidebarDisplayToggle() {
   const sidebarDisplay = useSidebarDisplay();
+  const createRequest = useCreateRequest({ navigateAfter: true });
+  const handleCreateRequest = useCallback(() => {
+    createRequest.mutate({ name: 'New Request' });
+  }, []);
+
   return (
-    <IconButton
-      onClick={sidebarDisplay.toggle}
-      className="pointer-events-auto"
-      size="sm"
-      title="Show sidebar"
-      icon={sidebarDisplay.hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
-    />
+    <HStack space={1}>
+      <IconButton
+        onClick={sidebarDisplay.toggle}
+        className="pointer-events-auto"
+        size="sm"
+        title="Show sidebar"
+        icon={sidebarDisplay.hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
+      />
+      <IconButton
+        onClick={handleCreateRequest}
+        className="pointer-events-auto"
+        size="sm"
+        title="Show sidebar"
+        icon="plusCircle"
+      />
+    </HStack>
   );
 });

src-web/hooks/useCreateRequest.ts

@@ -2,18 +2,21 @@ import { useMutation } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest } from '../lib/models';
 import { useActiveWorkspace } from './useActiveWorkspace';
+import { useRequests } from './useRequests';
 import { useRoutes } from './useRoutes';
 
 export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean }) {
   const workspace = useActiveWorkspace();
   const routes = useRoutes();
+  const requests = useRequests();
 
-  return useMutation<string, unknown, Pick<HttpRequest, 'name' | 'sortPriority'>>({
+  return useMutation<string, unknown, Partial<Pick<HttpRequest, 'name' | 'sortPriority'>>>({
     mutationFn: (patch) => {
       if (workspace === null) {
         throw new Error("Cannot create request when there's no active workspace");
       }
-      return invoke('create_request', { ...patch, workspaceId: workspace.id });
+      const sortPriority = maxSortPriority(requests) + 1000;
+      return invoke('create_request', { sortPriority, workspaceId: workspace.id, ...patch });
     },
     onSuccess: async (requestId) => {
       if (navigateAfter && workspace !== null) {
@@ -22,3 +25,8 @@ export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean })
     },
   });
 }
+
+function maxSortPriority(requests: HttpRequest[]) {
+  if (requests.length === 0) return 1000;
+  return Math.max(...requests.map((r) => r.sortPriority));
+}

src-web/hooks/useDeleteRequest.ts

@@ -8,7 +8,6 @@ export function useDeleteRequest(id: string | null) {
   const queryClient = useQueryClient();
   return useMutation<void, string>({
     mutationFn: async () => {
-      console.log('DELETE REQUEST2', id, workspaceId);
       if (id === null) return;
       await invoke('delete_request', { requestId: id });
     },

src-web/hooks/useTauriListeners.ts

@@ -49,7 +49,7 @@ export function useTauriListeners() {
       }
     });
 
-    listenDebounced('updated_model', ({ payload }: { payload: Model }) => {
+    listenDebounced('created_model', ({ payload }: { payload: Model }) => {
       const queryKey =
         payload.model === 'http_request'
           ? requestsQueryKey(payload)
@@ -63,7 +63,7 @@ export function useTauriListeners() {
 
       if (queryKey === null) {
         if (payload.model) {
-          console.log('Unrecognized updated model:', payload);
+          console.log('Unrecognized created model:', payload);
         }
         return;
       }
@@ -71,27 +71,33 @@ export function useTauriListeners() {
       const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC;
 
       if (!skipSync) {
-        queryClient.setQueryData(queryKey, (values: Model[] = []) => {
-          const newValues = [];
-          let found = false;
-          for (const v of values) {
-            if (modelsEq(v, payload)) {
-              found = true;
-              newValues.push(payload);
-            } else {
-              newValues.push(v);
-            }
-          }
+        queryClient.setQueryData(queryKey, (values: Model[] = []) => [...values, payload]);
+      }
+    });
 
-          // Doesn't exist already, so add it to the list
-          if (!found) newValues.push(payload);
+    listenDebounced('updated_model', ({ payload }: { payload: Model }) => {
+      const queryKey =
+        payload.model === 'http_request'
+          ? requestsQueryKey(payload)
+          : payload.model === 'http_response'
+          ? responsesQueryKey(payload)
+          : payload.model === 'workspace'
+          ? workspacesQueryKey(payload)
+          : payload.model === 'key_value'
+          ? keyValueQueryKey(payload)
+          : null;
 
-          if (payload.model === 'http_request') {
-            setTimeout(() => wasUpdatedExternally(payload.id), 50);
-          }
+      if (queryKey === null) {
+        console.log('Unrecognized updated model:', payload);
+        return;
+      }
 
-          return newValues;
-        });
+      const skipSync = payload.model === 'key_value' && payload.namespace === NAMESPACE_NO_SYNC;
+
+      if (!skipSync) {
+        queryClient.setQueryData(queryKey, (values: Model[] = []) =>
+          values.map((v) => (modelsEq(v, payload) ? payload : v)),
+        );
       }
     });