Remove useNavigate everywhere, and make request a query param. And convert dialog to Jotai

src-web/components/core/Dropdown.tsx

@@ -57,7 +57,7 @@ export type DropdownItem = DropdownItemDefault | DropdownItemSeparator;
 
 export interface DropdownProps {
   children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
-  items: DropdownItem[] | (() => DropdownItem[]);
+  items: DropdownItem[];
   onOpen?: () => void;
   onClose?: () => void;
   fullWidth?: boolean;
@@ -75,7 +75,7 @@ export interface DropdownRef {
 }
 
 export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown(
-  { children, items: itemsGetter, onOpen, onClose, hotKeyAction, fullWidth }: DropdownProps,
+  { children, items, onOpen, onClose, hotKeyAction, fullWidth }: DropdownProps,
   ref,
 ) {
   const [isOpen, _setIsOpen] = useState<boolean>(false);
@@ -83,8 +83,6 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
   const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<Omit<DropdownRef, 'open'>>(null);
 
-  const [items, setItems] = useState<DropdownItem[]>([]);
-
   const setIsOpen = useCallback(
     (o: SetStateAction<boolean>) => {
       _setIsOpen(o);
@@ -103,8 +101,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
 
   const openDropdown = useCallback(() => {
     setIsOpen((o) => !o);
-    setItems(typeof itemsGetter === 'function' ? itemsGetter() : itemsGetter);
-  }, [itemsGetter, setIsOpen]);
+  }, [setIsOpen]);
 
   useImperativeHandle(
     ref,
@@ -205,7 +202,7 @@ export const ContextMenu = forwardRef<DropdownRef, ContextMenuProps>(function Co
       isOpen={true} // Always open because we return null if not
       className={className}
       ref={ref}
-      items={typeof items === 'function' ? items() : items}
+      items={items}
       onClose={onClose}
       triggerShape={triggerShape}
     />
@@ -417,11 +414,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       [filteredItems, setSelectedIndex],
     );
 
-    if (items.length === 0) return null;
-
     return (
       <>
-        {filteredItems.map(
+        {items.map(
           (item) =>
             item.type !== 'separator' &&
             !item.hotKeyLabelOnly && (

src-web/components/core/Editor/Editor.tsx

@@ -20,7 +20,6 @@ import {
   useRef,
 } from 'react';
 import { useActiveEnvironmentVariables } from '../../../hooks/useActiveEnvironmentVariables';
-import { useDialog } from '../../../hooks/useDialog';
 import { parseTemplate } from '../../../hooks/useParseTemplate';
 import { useRequestEditor } from '../../../hooks/useRequestEditor';
 import { useSettings } from '../../../hooks/useSettings';
@@ -28,6 +27,7 @@ import {
   useTemplateFunctions,
   useTwigCompletionOptions,
 } from '../../../hooks/useTemplateFunctions';
+import { showDialog } from '../../../lib/dialog';
 import { TemplateFunctionDialog } from '../../TemplateFunctionDialog';
 import { TemplateVariableDialog } from '../../TemplateVariableDialog';
 import { IconButton } from '../IconButton';
@@ -195,11 +195,10 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     [wrapLines],
   );
 
-  const dialog = useDialog();
   const onClickFunction = useCallback(
     async (fn: TemplateFunction, tagValue: string, startPos: number) => {
       const initialTokens = await parseTemplate(tagValue);
-      dialog.show({
+      showDialog({
         id: 'template-function',
         size: 'sm',
         title: 'Configure Function',
@@ -218,13 +217,13 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         ),
       });
     },
-    [dialog],
+    [],
   );
 
   const onClickVariable = useCallback(
     async (_v: EnvironmentVariable, tagValue: string, startPos: number) => {
       const initialTokens = await parseTemplate(tagValue);
-      dialog.show({
+      showDialog({
         size: 'dynamic',
         id: 'template-variable',
         title: 'Change Variable',
@@ -241,13 +240,13 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         ),
       });
     },
-    [dialog],
+    [],
   );
 
   const onClickMissingVariable = useCallback(
     async (_name: string, tagValue: string, startPos: number) => {
       const initialTokens = await parseTemplate(tagValue);
-      dialog.show({
+      showDialog({
         size: 'dynamic',
         id: 'template-variable',
         title: 'Configure Variable',
@@ -264,7 +263,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         ),
       });
     },
-    [dialog],
+    [],
   );
 
   const [, { focusParamValue }] = useRequestEditor();

src-web/components/core/PairEditor.tsx

@@ -338,7 +338,7 @@ function PairEditorRow({
   const handleFocus = useCallback(() => onFocus?.(pair), [onFocus, pair]);
   const handleDelete = useCallback(() => onDelete?.(pair, false), [onDelete, pair]);
 
-  const getDeleteItems = useCallback(
+  const deleteItems = useMemo(
     (): DropdownItem[] => [
       {
         key: 'delete',
@@ -525,7 +525,7 @@ function PairEditorRow({
           onDelete={handleDelete}
         />
       ) : (
-        <Dropdown items={getDeleteItems}>
+        <Dropdown items={deleteItems}>
           <IconButton
             iconSize="sm"
             size="xs"