Focus request/folder after creation

src-web/commands/commands.tsx

@@ -13,7 +13,7 @@ import { showPrompt } from '../lib/prompt';
 import { resolvedModelNameWithFolders } from '../lib/resolvedModelName';
 
 export const createFolder = createFastMutation<
-  void,
+  string | null,
   void,
   Partial<Pick<Folder, 'name' | 'sortPriority' | 'folderId'>>
 >({
@@ -34,13 +34,14 @@ export const createFolder = createFastMutation<
         confirmText: 'Create',
         placeholder: 'Name',
       });
-      if (name == null) return;
+      if (name == null) return null;
 
       patch.name = name;
     }
 
     patch.sortPriority = patch.sortPriority || -Date.now();
-    await createWorkspaceModel({ model: 'folder', workspaceId, ...patch });
+    const id = await createWorkspaceModel({ model: 'folder', workspaceId, ...patch });
+    return id;
   },
 });
 

src-web/components/Sidebar.tsx

@@ -2,9 +2,11 @@ import type { Extension } from '@codemirror/state';
 import { Compartment } from '@codemirror/state';
 import { debounce } from '@yaakapp-internal/lib';
 import type {
+  AnyModel,
   Folder,
   GrpcRequest,
   HttpRequest,
+  ModelPayload,
   WebsocketRequest,
   Workspace,
 } from '@yaakapp-internal/models';
@@ -34,6 +36,7 @@ import { getCreateDropdownItems } from '../hooks/useCreateDropdownItems';
 import { getGrpcRequestActions } from '../hooks/useGrpcRequestActions';
 import { useHotKey } from '../hooks/useHotKey';
 import { getHttpRequestActions } from '../hooks/useHttpRequestActions';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { sendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { deepEqualAtom } from '../lib/atoms';
@@ -64,6 +67,15 @@ import type { TreeItemProps } from './core/tree/TreeItem';
 import { GitDropdown } from './GitDropdown';
 
 type SidebarModel = Workspace | Folder | HttpRequest | GrpcRequest | WebsocketRequest;
+function isSidebarLeafModel(m: AnyModel): boolean {
+  const modelMap: Record<Exclude<SidebarModel['model'], 'workspace'>, null> = {
+    http_request: null,
+    grpc_request: null,
+    websocket_request: null,
+    folder: null,
+  };
+  return m.model in modelMap;
+}
 
 const OPACITY_SUBTLE = 'opacity-80';
 
@@ -91,6 +103,13 @@ function Sidebar({ className }: { className?: string }) {
     if (!didFocus) filterRef.current?.focus();
   }, []);
 
+  // Focus any new sidebar models when created
+  useListenToTauriEvent<ModelPayload>('model_write', ({ payload }) => {
+    if (!isSidebarLeafModel(payload.model)) return;
+    if (!(payload.change.type === 'upsert' && payload.change.created)) return;
+    treeRef.current?.selectItem(payload.model.id, true);
+  });
+
   useHotKey(
     'sidebar.filter',
     () => {

src-web/components/core/tree/Tree.tsx

@@ -11,16 +11,7 @@ import {
 import { type } from '@tauri-apps/plugin-os';
 import classNames from 'classnames';
 import type { ComponentType, MouseEvent, ReactElement, Ref, RefAttributes } from 'react';
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { useKey, useKeyPressEvent } from 'react-use';
 import type { HotkeyAction, HotKeyOptions } from '../../../hooks/useHotKey';
 import { useHotKey } from '../../../hooks/useHotKey';
@@ -72,7 +63,7 @@ export interface TreeHandle {
   treeId: string;
   focus: () => boolean;
   hasFocus: () => boolean;
-  selectItem: (id: string) => void;
+  selectItem: (id: string, focus?: boolean) => void;
   renameItem: (id: string) => void;
   showContextMenu: () => void;
 }
@@ -181,11 +172,16 @@ function TreeInner<T extends { id: string }>(
     requestAnimationFrame(ensureTabbableItem);
   });
 
+  const hasFocus = useCallback(() => {
+    return treeRef.current?.contains(document.activeElement) ?? false;
+  }, []);
+
   const setSelected = useCallback(
-    function setSelected(ids: string[], focus: boolean) {
+    (ids: string[], focus: boolean) => {
       jotaiStore.set(selectedIdsFamily(treeId), ids);
       // TODO: Figure out a better way than timeout
-      if (focus) setTimeout(tryFocus, 50);
+      if (!focus) return;
+      setTimeout(tryFocus, 50);
     },
     [treeId, tryFocus],
   );
@@ -194,15 +190,15 @@ function TreeInner<T extends { id: string }>(
     () => ({
       treeId,
       focus: tryFocus,
-      hasFocus: () => treeRef.current?.contains(document.activeElement) ?? false,
+      hasFocus: hasFocus,
       renameItem: (id) => treeItemRefs.current[id]?.rename(),
-      selectItem: (id) => {
+      selectItem: (id, focus) => {
         if (jotaiStore.get(selectedIdsFamily(treeId)).includes(id)) {
           // Already selected
           return;
         }
-        setSelected([id], false);
         jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
+        setSelected([id], focus === true);
       },
       showContextMenu: async () => {
         if (getContextMenu == null) return;
@@ -214,7 +210,7 @@ function TreeInner<T extends { id: string }>(
         setShowContextMenu({ items: menuItems, x: rect.x, y: rect.y });
       },
     }),
-    [getContextMenu, selectableItems, setSelected, treeId, tryFocus],
+    [getContextMenu, hasFocus, selectableItems, setSelected, treeId, tryFocus],
   );
 
   useImperativeHandle(ref, (): TreeHandle => treeHandle, [treeHandle]);
@@ -248,7 +244,9 @@ function TreeInner<T extends { id: string }>(
 
       if (shiftKey) {
         const validSelectableItems = getValidSelectableItems(treeId, selectableItems);
-        const anchorIndex = validSelectableItems.findIndex((i) => i.node.item.id === anchorSelectedId);
+        const anchorIndex = validSelectableItems.findIndex(
+          (i) => i.node.item.id === anchorSelectedId,
+        );
         const currIndex = validSelectableItems.findIndex((v) => v.node.item.id === item.id);
 
         // Nothing was selected yet, so just select this item

src-web/font-size.ts

@@ -7,7 +7,8 @@ function setFontSizeOnDocument(fontSize: number) {
   document.documentElement.style.fontSize = `${fontSize}px`;
 }
 
-listen<ModelPayload>('upserted_model', async (event) => {
+listen<ModelPayload>('model_write', async (event) => {
+  if (event.payload.change.type !== 'upsert') return;
   if (event.payload.model.model !== 'settings') return;
   setFontSizeOnDocument(event.payload.model.interfaceFontSize);
 }).catch(console.error);

src-web/font.ts

@@ -11,7 +11,8 @@ function setFonts(settings: Settings) {
   );
 }
 
-listen<ModelPayload>('upserted_model', async (event) => {
+listen<ModelPayload>('model_write', async (event) => {
+  if (event.payload.change.type !== 'upsert') return;
   if (event.payload.model.model !== 'settings') return;
   setFonts(event.payload.model);
 }).catch(console.error);

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' ||

src-web/init/sync.ts

@@ -34,10 +34,7 @@ const debouncedSync = debounce(async () => {
  * simply add long-lived subscribers for the lifetime of the app.
  */
 function initModelListeners() {
-  listenToTauriEvent<ModelPayload>('upserted_model', (p) => {
-    if (isModelRelevant(p.payload.model)) debouncedSync();
-  });
-  listenToTauriEvent<ModelPayload>('deleted_model', (p) => {
+  listenToTauriEvent<ModelPayload>('model_write', (p) => {
     if (isModelRelevant(p.payload.model)) debouncedSync();
   });
 }

src-web/lib/createRequestAndNavigate.tsx

@@ -11,8 +11,8 @@ export async function createRequestAndNavigate<
 
   if (patch.sortPriority === undefined) {
     if (activeRequest != null) {
-      // Place above currently active request
-      patch.sortPriority = activeRequest.sortPriority - 0.0001;
+      // Place below the currently active request
+      patch.sortPriority = activeRequest.sortPriority;
     } else {
       // Place at the very top
       patch.sortPriority = -Date.now();
@@ -27,4 +27,5 @@ export async function createRequestAndNavigate<
     params: { workspaceId: patch.workspaceId },
     search: (prev) => ({ ...prev, request_id: newId }),
   });
+  return newId;
 }

src-web/lib/duplicateRequestOrFolderAndNavigate.tsx

@@ -13,7 +13,7 @@ export async function duplicateRequestOrFolderAndNavigate(
 
   const newId = await duplicateModel(model);
   const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
-  if (workspaceId == null) return;
+  if (workspaceId == null || model.model === 'folder') return;
 
   navigateToRequestOrFolderOrWorkspace(newId, model.model);
 }

src-web/lib/setWorkspaceSearchParams.ts

@@ -19,7 +19,7 @@ export function setWorkspaceSearchParams(
   (router as any).navigate({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     search: (prev: any) => {
-      console.log('Navigating to', { prev, search });
+      // console.log('Navigating to', { prev, search });
       return { ...prev, ...search };
     },
   });

src-web/theme.ts

@@ -26,7 +26,9 @@ configureTheme().then(
 );
 
 // Listen for settings changes, the re-compute theme
-listen<ModelPayload>('upserted_model', async (event) => {
+listen<ModelPayload>('model_write', async (event) => {
+  if (event.payload.change.type !== 'upsert') return;
+
   const model = event.payload.model.model;
   if (model !== 'settings' && model !== 'plugin') return;
   await configureTheme();