Fix var complete and env dialog actions

src-web/components/EnvironmentEditDialog.tsx

@@ -13,6 +13,11 @@ import { HStack, VStack } from './core/Stacks';
 import { IconButton } from './core/IconButton';
 import { useDeleteEnvironment } from '../hooks/useDeleteEnvironment';
 import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
+import type { DropdownItem } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+import { Icon } from './core/Icon';
+import { usePrompt } from '../hooks/usePrompt';
+import { InlineCode } from './core/InlineCode';
 
 export const EnvironmentEditDialog = function () {
   const routes = useAppRoutes();
@@ -21,33 +26,35 @@ export const EnvironmentEditDialog = function () {
   const activeEnvironment = useActiveEnvironment();
 
   return (
-    <div className="h-full grid gap-3 grid-cols-[auto_minmax(0,1fr)]">
-      <VStack space={0.5} className="relative h-full min-w-[200px] pr-3 border-r border-gray-100">
-        {environments.map((e) => (
-          <Button
-            size="xs"
-            className={classNames(
-              'w-full',
-              activeEnvironment?.id === e.id && 'bg-gray-100 text-gray-1000',
-            )}
-            justify="start"
-            key={e.id}
-            onClick={() => {
-              routes.setEnvironment(e);
-            }}
-          >
-            {e.name}
-          </Button>
-        ))}
+    <div className="h-full grid gap-x-8 grid-rows-[minmax(0,1fr)] grid-cols-[auto_minmax(0,1fr)]">
+      <div className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full min-w-[200px] pr-4 border-r border-gray-100">
+        <div className="h-full overflow-y-scroll">
+          {environments.map((e) => (
+            <Button
+              size="xs"
+              className={classNames(
+                'w-full',
+                activeEnvironment?.id === e.id && 'bg-gray-100 text-gray-1000',
+              )}
+              justify="start"
+              key={e.id}
+              onClick={() => {
+                routes.setEnvironment(e);
+              }}
+            >
+              {e.name}
+            </Button>
+          ))}
+        </div>
         <Button
           size="sm"
-          className="mr-5 absolute bottom-0 left-0 right-0"
+          className="w-full"
           color="gray"
           onClick={() => createEnvironment.mutate()}
         >
           New Environment
         </Button>
-      </VStack>
+      </div>
       {activeEnvironment != null && <EnvironmentEditor environment={activeEnvironment} />}
     </div>
   );
@@ -65,24 +72,54 @@ const EnvironmentEditor = function ({ environment }: { environment: Environment
   );
 
   const nameAutocomplete = useMemo<GenericCompletionConfig>(() => {
-    const otherVariableNames = environments.flatMap((e) => e.variables.map((v) => v.name));
-    const variableNames = otherVariableNames.filter(
-      (name) => !environment.variables.some((v) => v.name === name),
+    const allVariableNames = environments.flatMap((e) => e.variables.map((v) => v.name));
+    // Filter out empty strings and variables that already exist in the active environment
+    const variableNames = allVariableNames.filter(
+      (name) => name != '' && !environment.variables.find((v) => v.name === name),
     );
     return { options: variableNames.map((name) => ({ label: name, type: 'constant' })) };
   }, [environments, environment.variables]);
 
+  const prompt = usePrompt();
+  const items = useMemo<DropdownItem[]>(
+    () => [
+      {
+        key: 'rename',
+        label: 'Rename',
+        leftSlot: <Icon icon="pencil" size="sm" />,
+        onSelect: async () => {
+          const name = await prompt({
+            title: 'Rename Environment',
+            description: (
+              <>
+                Enter a new name for <InlineCode>{environment.name}</InlineCode>
+              </>
+            ),
+            name: 'name',
+            label: 'Name',
+            defaultValue: environment.name,
+          });
+          updateEnvironment.mutate({ name });
+        },
+      },
+      {
+        key: 'delete',
+        variant: 'danger',
+        label: 'Delete',
+        leftSlot: <Icon icon="trash" size="sm" />,
+        onSelect: () => deleteEnvironment.mutate(),
+      },
+    ],
+    [deleteEnvironment, updateEnvironment, environment.name, prompt],
+  );
+
   return (
     <VStack space={2}>
       <HStack space={2} className="justify-between">
         <h1 className="text-xl">{environment.name}</h1>
-        <IconButton
-          icon="trash"
-          title="Delete Environment"
-          size="sm"
-          className="!h-auto w-8"
-          onClick={() => deleteEnvironment.mutate()}
-        />
+        <Dropdown items={items}>
+          <IconButton icon="gear" title="Environment Actions" size="sm" className="!h-auto w-8" />
+        </Dropdown>
       </HStack>
       <PairEditor
         nameAutocomplete={nameAutocomplete}

src-web/components/GraphQLEditor.tsx

@@ -127,6 +127,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
         onChange={handleChangeVariables}
         placeholder="{}"
         useTemplating
+        autocompleteVariables
         {...extraEditorProps}
       />
     </div>

src-web/components/RequestPane.tsx

@@ -204,6 +204,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 <Editor
                   forceUpdateKey={forceUpdateKey}
                   useTemplating
+                  autocompleteVariables
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
@@ -216,6 +217,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 <Editor
                   forceUpdateKey={forceUpdateKey}
                   useTemplating
+                  autocompleteVariables
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}

src-web/components/core/Dropdown.tsx

@@ -270,7 +270,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
     <Portal name="dropdown">
       <FocusTrap>
         <div>
-          <div tabIndex={-1} aria-hidden className="fixed inset-0" onClick={onClose} />
+          <div tabIndex={-1} aria-hidden className="fixed inset-0 z-50" onClick={onClose} />
           <motion.div
             tabIndex={0}
             onKeyDown={handleMenuKeyDown}

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

@@ -197,7 +197,7 @@
     }
 
     .cm-completionIcon {
-      @apply text-sm flex items-center pb-0.5 flex-shrink-0;
+      @apply text-sm flex items-center pb-0.5 mr-2 flex-shrink-0;
     }
 
     .cm-completionLabel {