Strict mode and tweak layout padding

src-web/components/App.tsx

@@ -2,12 +2,12 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { listen } from '@tauri-apps/api/event';
 import { MotionConfig } from 'framer-motion';
 import { HelmetProvider } from 'react-helmet-async';
-import { AppRouter } from './AppRouter';
 import { requestsQueryKey } from '../hooks/useRequests';
 import { responsesQueryKey } from '../hooks/useResponses';
 import { DEFAULT_FONT_SIZE } from '../lib/constants';
 import type { HttpRequest, HttpResponse } from '../lib/models';
 import { convertDates } from '../lib/models';
+import { AppRouter } from './AppRouter';
 
 const queryClient = new QueryClient();
 

src-web/components/RequestPane.tsx

@@ -21,18 +21,16 @@ export function RequestPane({ fullHeight, className }: Props) {
   if (activeRequest === null) return null;
 
   return (
-    <div className={classnames(className, 'py-2 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
+    <div className={classnames(className, 'p-2 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
-      <div className="pl-2">
+      <UrlBar
-        <UrlBar
+        key={activeRequest.id}
-          key={activeRequest.id}
+        method={activeRequest.method}
-          method={activeRequest.method}
+        url={activeRequest.url}
-          url={activeRequest.url}
+        loading={sendRequest.isLoading}
-          loading={sendRequest.isLoading}
+        onMethodChange={(method) => updateRequest.mutate({ method })}
-          onMethodChange={(method) => updateRequest.mutate({ method })}
+        onUrlChange={(url) => updateRequest.mutate({ url })}
-          onUrlChange={(url) => updateRequest.mutate({ url })}
+        sendRequest={sendRequest.mutate}
-          sendRequest={sendRequest.mutate}
+      />
-        />
-      </div>
       <Tabs
         tabs={[
           {
@@ -53,7 +51,6 @@ export function RequestPane({ fullHeight, className }: Props) {
           { value: 'auth', label: 'Auth' },
         ]}
         className="mt-2"
-        tabListClassName="px-2"
         defaultValue="body"
         label="Request body"
       >
@@ -66,6 +63,7 @@ export function RequestPane({ fullHeight, className }: Props) {
               key={activeRequest.id}
               useTemplating
               className="!bg-gray-50"
+              heightMode={fullHeight ? 'full' : 'auto'}
               defaultValue={activeRequest.body ?? ''}
               contentType="application/json"
               onChange={(body) => updateRequest.mutate({ body })}

src-web/components/ResponsePane.tsx

@@ -43,10 +43,9 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
   }
 
   return (
-    <div className="p-2">
+    <div className={classnames(className, 'p-2')}>
       <div
         className={classnames(
-          className,
           'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
           'dark:bg-gray-100 rounded-md overflow-hidden border border-gray-200',
           'shadow shadow-gray-100 dark:shadow-gray-0',

src-web/components/Workspace.tsx

@@ -31,8 +31,11 @@ export default function Workspace() {
               : 'grid-cols-1 grid-rows-[minmax(0,auto)_minmax(0,100%)]',
           )}
         >
-          <RequestPane fullHeight={isSideBySide} className={classnames(!isSideBySide && 'pr-2')} />
+          <RequestPane
-          <ResponsePane />
+            fullHeight={isSideBySide}
+            className={classnames(isSideBySide ? 'pr-1' : 'pr-2')}
+          />
+          <ResponsePane className={classnames(isSideBySide && 'pl-1')} />
         </div>
       </div>
     </div>

src-web/components/Workspaces.tsx

@@ -1,4 +1,5 @@
 import { Button } from './core/Button';
+import { Editor } from './core/Editor';
 import { Heading } from './core/Heading';
 import { VStack } from './core/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
@@ -13,6 +14,7 @@ export default function Workspaces() {
           {w.name}
         </Button>
       ))}
+      <Editor defaultValue="hello world" />
     </VStack>
   );
 }

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

@@ -30,7 +30,7 @@
 
         /* Style gutters */
         .cm-gutters {
-            @apply border-0 text-gray-500/60;
+            @apply border-0 text-gray-500/60 opacity-95;
 
             .cm-gutterElement {
                 @apply cursor-default;

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

@@ -40,6 +40,7 @@ export function _Editor({
   singleLine,
 }: _EditorProps) {
   const cm = useRef<{ view: EditorView; langHolder: Compartment } | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
 
   // Unmount the editor
   useUnmount(() => {
@@ -67,10 +68,9 @@ export function _Editor({
     view.dispatch({ effects: langHolder.reconfigure(ext) });
   }, [contentType]);
 
-  // Initialize the editor
+  // Initialize the editor when ref mounts
-  const initDivRef = (el: HTMLDivElement | null) => {
+  useEffect(() => {
-    if (el === null || cm.current !== null) return;
+    if (wrapperRef.current === null || cm.current !== null) return;
-
     try {
       const langHolder = new Compartment();
       const langExt = getLanguageExtension({ contentType, useTemplating });
@@ -79,7 +79,7 @@ export function _Editor({
         extensions: [
           langHolder.of(langExt),
           ...getExtensions({
-            container: el,
+            container: wrapperRef.current,
             onChange: handleChange,
             onFocus: handleFocus,
             readOnly,
@@ -90,18 +90,22 @@ export function _Editor({
           }),
         ],
       });
-      const view = new EditorView({ state, parent: el });
+      const view = new EditorView({ state, parent: wrapperRef.current });
       cm.current = { view, langHolder };
-      syncGutterBg({ parent: el, className });
       if (autoFocus) view.focus();
     } catch (e) {
       console.log('Failed to initialize Codemirror', e);
     }
-  };
+  }, [wrapperRef.current]);
+
+  useEffect(() => {
+    if (wrapperRef.current === null) return;
+    syncGutterBg({ parent: wrapperRef.current, className });
+  }, [className]);
 
   return (
     <div
-      ref={initDivRef}
+      ref={wrapperRef}
       dangerouslySetInnerHTML={{ __html: '' }}
       className={classnames(
         className,

src-web/components/editors/GraphQLEditor.tsx

@@ -48,10 +48,8 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P
         contentType="application/graphql"
         {...extraEditorProps}
       />
-      <div className="pl-2">
+      <Divider />
-        <Divider />
+      <p className="pt-1 text-gray-500 text-sm">Variables</p>
-      </div>
-      <p className="pl-2 pt-1 text-gray-500 text-sm">Variables</p>
       <Editor
         heightMode="auto"
         defaultValue={JSON.stringify(variables, null, 2)}

src-web/main.tsx

@@ -1,3 +1,4 @@
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './components/App';
 import { setAppearance } from './lib/theme/window';
@@ -6,4 +7,8 @@ import './main.css';
 setAppearance();
 
 // root holds our app's root DOM Element:
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);