Try new layout and a bunch of editor fixes

src-web/components/HeaderEditor.tsx

@@ -1,5 +1,5 @@
 import type { FormEvent } from 'react';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { HttpHeader } from '../lib/models';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
@@ -7,82 +7,107 @@ import { HStack, VStack } from './Stacks';
 
 export function HeaderEditor() {
   const [headers, setHeaders] = useState<HttpHeader[]>([]);
-  const [newHeader, setNewHeader] = useState<HttpHeader>({ name: '', value: '' });
-  const handleSubmit = (e?: FormEvent) => {
-    console.log('SUBMIT');
-    e?.preventDefault();
-    setHeaders([...headers, newHeader]);
-    setNewHeader({ name: '', value: '' });
-  };
+  const [newHeaderName, setNewHeaderName] = useState<string>('');
+  const [newHeaderValue, setNewHeaderValue] = useState<string>('');
+  const handleSubmit = useCallback(
+    (e?: FormEvent) => {
+      e?.preventDefault();
+      setHeaders([...headers, { name: newHeaderName, value: newHeaderValue }]);
+      setNewHeaderName('');
+      setNewHeaderValue('');
+    },
+    [newHeaderName, newHeaderValue],
+  );
+
+  const handleChangeHeader = useCallback(
+    (header: Partial<HttpHeader>, index: number) => {
+      setHeaders((headers) =>
+        headers.map((h, i) => {
+          if (i === index) return h;
+          const newHeader: HttpHeader = { ...h, ...header };
+          console.log('NEW HEADER', newHeader);
+          return newHeader;
+        }),
+      );
+    },
+    [headers],
+  );
 
   const handleDelete = (index: number) => {
     setHeaders((headers) => headers.filter((_, i) => i !== index));
   };
 
-  const handleChangeHeader = (header: HttpHeader, index: number) => {
-    setHeaders((headers) => headers.map((h, i) => (i === index ? header : h)));
-  };
+  console.log('HEADERS', headers);
 
   return (
     <form onSubmit={handleSubmit}>
       <VStack space={2}>
         {headers.map((header, i) => (
           <FormRow
-            key={`${headers.length}:${i}`}
-            header={header}
-            onChange={(h) => handleChangeHeader(h, i)}
+            key={`${headers.length}-${i}`}
+            valueKey={`${headers.length}-${i}`}
+            name={header.name}
+            value={header.value}
+            onChangeName={(name) => handleChangeHeader({ name }, i)}
+            onChangeValue={(value) => handleChangeHeader({ value }, i)}
             onDelete={() => handleDelete(i)}
-            onSubmit={handleSubmit}
           />
         ))}
-        <FormRow addSubmit onChange={setNewHeader} header={newHeader} onSubmit={handleSubmit} />
+        <FormRow
+          autoFocus
+          addSubmit
+          valueKey={headers.length}
+          onChangeName={setNewHeaderName}
+          onChangeValue={setNewHeaderValue}
+          name={newHeaderName}
+          value={newHeaderValue}
+        />
       </VStack>
     </form>
   );
 }
 
 function FormRow({
-  header,
+  autoFocus,
+  valueKey,
+  name,
+  value,
   addSubmit,
-  onChange,
-  onSubmit,
+  onChangeName,
+  onChangeValue,
   onDelete,
 }: {
-  header: HttpHeader;
+  autoFocus?: boolean;
+  valueKey: string | number;
+  name: string;
+  value: string;
   addSubmit?: boolean;
   onSubmit?: () => void;
-  onChange: (header: HttpHeader) => void;
+  onChangeName: (name: string) => void;
+  onChangeValue: (value: string) => void;
   onDelete?: () => void;
 }) {
   return (
     <div>
       <HStack space={2}>
         <Input
-          autoFocus
-          useEditor
-          useTemplating
+          hideLabel
+          autoFocus={autoFocus}
+          useEditor={{ useTemplating: true, valueKey }}
           name="name"
           label="Name"
           placeholder="name"
-          onSubmit={onSubmit}
-          value={header.name}
-          hideLabel
-          onChange={(name) => {
-            onChange({ name, value: header.value });
-          }}
+          defaultValue={name}
+          onChange={onChangeName}
         />
         <Input
+          hideLabel
           name="value"
           label="Value"
-          useEditor
-          useTemplating
-          onSubmit={onSubmit}
+          useEditor={{ useTemplating: true, valueKey }}
           placeholder="value"
-          value={header.value}
-          hideLabel
-          onChange={(value) => {
-            onChange({ name: header.name, value });
-          }}
+          defaultValue={value}
+          onChange={onChangeValue}
         />
         {onDelete && <IconButton size="sm" icon="trash" onClick={onDelete} />}
       </HStack>