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;