Click env var to edit AND improve input/editor ref handling

src-web/lib/dialog.ts

@@ -4,14 +4,17 @@ import { jotaiStore } from './jotai';
 
 export const dialogsAtom = atom<DialogInstance[]>([]);
 
-export function showDialog({ id, ...props }: DialogInstance) {
-  jotaiStore.set(dialogsAtom, (a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
-}
-
 export function toggleDialog({ id, ...props }: DialogInstance) {
   const dialogs = jotaiStore.get(dialogsAtom);
-  if (dialogs.some((d) => d.id === id)) hideDialog(id);
-  else showDialog({ id, ...props });
+  if (dialogs.some((d) => d.id === id)) {
+    hideDialog(id);
+  } else {
+    showDialog({ id, ...props });
+  }
+}
+
+export function showDialog({ id, ...props }: DialogInstance) {
+  jotaiStore.set(dialogsAtom, (a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
 }
 
 export function hideDialog(id: string) {

src-web/lib/editEnvironment.tsx

@@ -1,9 +1,13 @@
-import type { Environment } from '@yaakapp-internal/models';
+import type { Environment, EnvironmentVariable } from '@yaakapp-internal/models';
 import { openFolderSettings } from '../commands/openFolderSettings';
 import { EnvironmentEditDialog } from '../components/EnvironmentEditDialog';
 import { toggleDialog } from './dialog';
 
-export function editEnvironment(environment: Environment | null) {
+interface Options {
+  addOrFocusVariable?: EnvironmentVariable;
+}
+
+export function editEnvironment(environment: Environment | null, options: Options = {}) {
   if (environment?.parentModel === 'folder' && environment.parentId != null) {
     openFolderSettings(environment.parentId, 'variables');
   } else {
@@ -12,7 +16,12 @@ export function editEnvironment(environment: Environment | null) {
       noPadding: true,
       size: 'lg',
       className: 'h-[80vh]',
-      render: () => <EnvironmentEditDialog initialEnvironment={environment} />,
+      render: () => (
+        <EnvironmentEditDialog
+          initialEnvironmentId={environment?.id ?? null}
+          addOrFocusVariable={options.addOrFocusVariable}
+        />
+      ),
     });
   }
 }