Focus request/folder after creation

src-web/hooks/useCreateDropdownItems.tsx

@@ -36,46 +36,68 @@ export function getCreateDropdownItems({
   folderId: folderIdOption,
   workspaceId,
   activeRequest,
+  onCreate,
 }: {
   hideFolder?: boolean;
   hideIcons?: boolean;
   folderId?: string | null | 'active-folder';
   workspaceId: string | null;
   activeRequest: HttpRequest | GrpcRequest | WebsocketRequest | null;
+  onCreate?: (
+    model: 'http_request' | 'grpc_request' | 'websocket_request' | 'folder',
+    id: string,
+  ) => void;
 }): DropdownItem[] {
   const folderId =
     (folderIdOption === 'active-folder' ? activeRequest?.folderId : folderIdOption) ?? null;
-  if (workspaceId == null) return [];
+
+  if (workspaceId == null) {
+    return [];
+  }
 
   return [
     {
       label: 'HTTP',
       leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-      onSelect: () => createRequestAndNavigate({ model: 'http_request', workspaceId, folderId }),
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({ model: 'http_request', workspaceId, folderId });
+        onCreate?.('http_request', id);
+      },
     },
     {
       label: 'GraphQL',
       leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-      onSelect: () =>
-        createRequestAndNavigate({
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({
           model: 'http_request',
           workspaceId,
           folderId,
           bodyType: BODY_TYPE_GRAPHQL,
           method: 'POST',
           headers: [{ name: 'Content-Type', value: 'application/json', id: generateId() }],
-        }),
+        });
+        onCreate?.('http_request', id);
+      },
     },
     {
       label: 'gRPC',
       leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-      onSelect: () => createRequestAndNavigate({ model: 'grpc_request', workspaceId, folderId }),
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({ model: 'grpc_request', workspaceId, folderId });
+        onCreate?.('grpc_request', id);
+      },
     },
     {
       label: 'WebSocket',
       leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-      onSelect: () =>
-        createRequestAndNavigate({ model: 'websocket_request', workspaceId, folderId }),
+      onSelect: async () => {
+        const id = await createRequestAndNavigate({
+          model: 'websocket_request',
+          workspaceId,
+          folderId,
+        });
+        onCreate?.('websocket_request', id);
+      },
     },
     ...((hideFolder
       ? []
@@ -84,7 +106,12 @@ export function getCreateDropdownItems({
           {
             label: 'Folder',
             leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
-            onSelect: () => createFolder.mutate({ folderId }),
+            onSelect: async () => {
+              const id = await createFolder.mutateAsync({ folderId });
+              if (id != null) {
+                onCreate?.('folder', id);
+              }
+            },
           },
         ]) as DropdownItem[]),
   ];

src-web/hooks/useListenToTauriEvent.ts

@@ -1,17 +1,21 @@
 import type { EventCallback, EventName } from '@tauri-apps/api/event';
 import { listen } from '@tauri-apps/api/event';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
-/**
- * React hook to listen to a Tauri event.
- */
 export function useListenToTauriEvent<T>(event: EventName, fn: EventCallback<T>) {
-  useEffect(() => listenToTauriEvent(event, fn), [event, fn]);
+  const handlerRef = useRef(fn);
+  useEffect(() => {
+    handlerRef.current = fn;
+  }, [fn]);
+
+  useEffect(() => {
+    return listenToTauriEvent<T>(event, (p) => handlerRef.current(p));
+  }, [event]);
 }
 
 export function listenToTauriEvent<T>(event: EventName, fn: EventCallback<T>) {
-  const unlisten = listen<T>(
+  const unsubPromise = listen<T>(
     event,
     fn,
     // Listen to `emit_all()` events or events specific to the current window
@@ -19,6 +23,6 @@ export function listenToTauriEvent<T>(event: EventName, fn: EventCallback<T>) {
   );
 
   return () => {
-    unlisten.then((fn) => fn());
+    unsubPromise.then((unsub) => unsub()).catch(console.error);
   };
 }

src-web/hooks/useRequestUpdateKey.ts

@@ -7,7 +7,9 @@ import { jotaiStore } from '../lib/jotai';
 const requestUpdateKeyAtom = atom<Record<string, string>>({});
 
 getCurrentWebviewWindow()
-  .listen<ModelPayload>('upserted_model', ({ payload }) => {
+  .listen<ModelPayload>('model_write', ({ payload }) => {
+    if (payload.change.type !== 'upsert') return;
+
     if (
       (payload.model.model === 'http_request' ||
         payload.model.model === 'grpc_request' ||