A bunch of improvements to chaining

src-web/components/App.tsx

@@ -7,6 +7,8 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { HelmetProvider } from 'react-helmet-async';
 import { AppRouter } from './AppRouter';
 
+const ENABLE_REACT_QUERY_DEVTOOLS = false;
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -20,7 +22,7 @@ const queryClient = new QueryClient({
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools buttonPosition="bottom-left" />
+      {ENABLE_REACT_QUERY_DEVTOOLS && <ReactQueryDevtools buttonPosition="bottom-left" />}
       <MotionConfig transition={{ duration: 0.1 }}>
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>

src-web/components/GlobalHooks.tsx

@@ -23,7 +23,7 @@ import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { settingsQueryKey, useSettings } from '../hooks/useSettings';
+import { settingsAtom, useSettings } from '../hooks/useSettings';
 import { useSyncThemeToDocument } from '../hooks/useSyncThemeToDocument';
 import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
 import { workspacesAtom } from '../hooks/useWorkspaces';
@@ -65,6 +65,7 @@ export function GlobalHooks() {
     windowLabel: string;
   }
 
+  const setSettings = useSetAtom(settingsAtom);
   const setWorkspaces = useSetAtom(workspacesAtom);
   const setHttpRequests = useSetAtom(httpRequestsAtom);
   const setGrpcRequests = useSetAtom(grpcRequestsAtom);
@@ -85,8 +86,6 @@ export function GlobalHooks() {
         ? keyValueQueryKey(model)
         : model.model === 'cookie_jar'
         ? cookieJarsQueryKey(model)
-        : model.model === 'settings'
-        ? settingsQueryKey()
         : null;
 
     if (model.model === 'http_request' && windowLabel !== getCurrentWebviewWindow().label) {
@@ -107,6 +106,8 @@ export function GlobalHooks() {
       setGrpcRequests(updateModelList(model, pushToFront));
     } else if (model.model === 'environment') {
       setEnvironments(updateModelList(model, pushToFront));
+    } else if (model.model === 'settings') {
+      setSettings(model);
     } else if (queryKey != null) {
       // TODO: Convert all models to use Jotai
       queryClient.setQueryData(queryKey, (current: unknown) => {
@@ -146,8 +147,6 @@ export function GlobalHooks() {
       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);
     }
   });
 

src-web/components/RecentResponsesDropdown.tsx

@@ -57,7 +57,7 @@ export const RecentResponsesDropdown = function ResponsePane({
           key: 'clear-all',
           label: `Delete ${responses.length} ${pluralize('Response', responses.length)}`,
           onSelect: deleteAllResponses.mutate,
-          hidden: responses.length <= 1,
+          hidden: responses.length === 0,
           disabled: responses.length === 0,
         },
         { type: 'separator' },

src-web/components/TemplateFunctionDialog.tsx

@@ -1,15 +1,16 @@
-import { useCallback, useMemo, useState } from 'react';
-import type { FnArg } from '../gen/FnArg';
-import type { Tokens } from '../gen/Tokens';
-import { useHttpRequests } from '../hooks/useHttpRequests';
-import { useRenderTemplate } from '../hooks/useRenderTemplate';
 import type {
   TemplateFunction,
   TemplateFunctionArg,
   TemplateFunctionHttpRequestArg,
   TemplateFunctionSelectArg,
   TemplateFunctionTextArg,
-} from '../hooks/useTemplateFunctions';
+} from '@yaakapp/api';
+import { useCallback, useMemo, useState } from 'react';
+import type { FnArg } from '../gen/FnArg';
+import type { Tokens } from '../gen/Tokens';
+import { useDebouncedValue } from '../hooks/useDebouncedValue';
+import { useHttpRequests } from '../hooks/useHttpRequests';
+import { useRenderTemplate } from '../hooks/useRenderTemplate';
 import { useTemplateTokensToString } from '../hooks/useTemplateTokensToString';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { Button } from './core/Button';
@@ -86,7 +87,8 @@ export function TemplateFunctionDialog({ templateFunction, hide, initialTokens,
     hide();
   };
 
-  const rendered = useRenderTemplate(tagText.data ?? '');
+  const debouncedTagText = useDebouncedValue(tagText.data ?? '', 200);
+  const rendered = useRenderTemplate(debouncedTagText);
 
   return (
     <VStack className="pb-3" space={4}>

src-web/components/core/Editor/twig/templateTags.ts

@@ -59,7 +59,7 @@ class TemplateTagWidget extends WidgetType {
 
 export function templateTags(options: TwigCompletionOption[]) {
   const templateTagMatcher = new BetterMatchDecorator({
-    regexp: /\$\{\[\s*([^\]]+)\s*]}/g,
+    regexp: /\$\{\[\s*(.+)(?!]})\s*]}/g,
     decoration(match, view, matchStartPos) {
       const matchEndPos = matchStartPos + match[0].length - 1;
 

src-web/hooks/useDebouncedValue.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useDebouncedState } from './useDebouncedState';
 
-export function useDebouncedValue<T>(value: T, delay?: number) {
+export function useDebouncedValue<T>(value: T, delay = 500) {
   const [state, setState] = useDebouncedState<T>(value, delay);
   useEffect(() => setState(value), [setState, value]);
   return state;

src-web/hooks/useSettings.ts

@@ -1,19 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
+import { useAtomValue } from 'jotai';
+import { atom } from 'jotai/index';
 import type { Settings } from '../lib/models/Settings';
-import { invokeCmd } from '../lib/tauri';
+import { getSettings } from '../lib/store';
 
-export function settingsQueryKey() {
-  return ['settings'];
-}
+const settings = await getSettings();
+export const settingsAtom = atom<Settings>(settings);
 
 export function useSettings() {
-  return (
-    useQuery({
-      queryKey: settingsQueryKey(),
-      queryFn: async () => {
-        const settings = (await invokeCmd('cmd_get_settings')) as Settings;
-        return [settings];
-      },
-    }).data?.[0] ?? undefined
-  );
+  return useAtomValue(settingsAtom);
 }

src-web/hooks/useUpdateSettings.ts

@@ -1,15 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
 import type { Settings } from '../lib/models';
+import { getSettings } from '../lib/store';
 import { invokeCmd } from '../lib/tauri';
-import { useSettings } from './useSettings';
 
 export function useUpdateSettings() {
-  const settings = useSettings();
-
   return useMutation<void, unknown, Partial<Settings>>({
     mutationKey: ['update_settings'],
     mutationFn: async (patch) => {
-      if (settings == null) return;
+      const settings = await getSettings();
       const newSettings: Settings = { ...settings, ...patch };
       await invokeCmd('cmd_update_settings', { settings: newSettings });
     },