Fix Codemirror performance!!

src-web/components/RequestPane.tsx

@@ -1,10 +1,9 @@
 import classnames from 'classnames';
 import { useRequestUpdate, useSendRequest } from '../hooks/useRequest';
 import type { HttpRequest } from '../lib/models';
-import { Button } from './Button';
 import { Editor } from './Editor/Editor';
-import { ScrollArea } from './ScrollArea';
-import { HStack } from './Stacks';
+import { HeaderEditor } from './HeaderEditor';
+import { TabContent, Tabs } from './Tabs';
 import { UrlBar } from './UrlBar';
 
 interface Props {
@@ -17,9 +16,7 @@ export function RequestPane({ fullHeight, request, className }: Props) {
   const updateRequest = useRequestUpdate(request ?? null);
   const sendRequest = useSendRequest(request ?? null);
   return (
-    <div
-      className={classnames(className, 'py-2 grid grid-rows-[auto_auto_minmax(0,1fr)] grid-cols-1')}
-    >
+    <div className={classnames(className, 'py-2 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
       <div className="pl-2">
         <UrlBar
           key={request.id}
@@ -33,29 +30,33 @@ export function RequestPane({ fullHeight, request, className }: Props) {
         {/*<Divider />*/}
       </div>
       {/*<Divider className="mb-2" />*/}
-      <ScrollArea className="max-w-full pb-2 mx-2">
-        <HStack className="mt-2 hide-scrollbar" space={1}>
-          {['JSON', 'Params', 'Headers', 'Auth'].map((label, i) => (
-            <Button
-              key={label}
-              size="sm"
-              color={i === 0 ? 'gray' : undefined}
-              className={i !== 0 ? 'opacity-80 hover:opacity-100' : undefined}
-            >
-              {label}
-            </Button>
-          ))}
-        </HStack>
-      </ScrollArea>
-      <Editor
-        className="mt-1 !bg-gray-50"
-        heightMode={fullHeight ? 'full' : 'auto'}
-        valueKey={request.id}
-        useTemplating
-        defaultValue={request.body ?? ''}
-        contentType="application/json"
-        onChange={(body) => updateRequest.mutate({ body })}
-      />
+      <Tabs
+        tabs={[
+          { value: 'body', label: 'JSON' },
+          { value: 'params', label: 'Params' },
+          { value: 'headers', label: 'Headers' },
+          { value: 'auth', label: 'Auth' },
+        ]}
+        className="mt-2"
+        tabListClassName="px-2"
+        defaultValue="body"
+        label="Request body"
+      >
+        <TabContent value="body">
+          <Editor
+            key={request.id}
+            className="!bg-gray-50"
+            heightMode={fullHeight ? 'full' : 'auto'}
+            useTemplating
+            defaultValue={request.body ?? ''}
+            contentType="application/json"
+            onChange={(body) => updateRequest.mutate({ body })}
+          />
+        </TabContent>
+        <TabContent value="headers" className="pl-2">
+          <HeaderEditor />
+        </TabContent>
+      </Tabs>
     </div>
   );
 }