More work on the layout

src-web/App.tsx

@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { Button } from './components/Button';
+import { Divider } from './components/Divider';
 import { Grid } from './components/Grid';
 import { RequestPane } from './components/RequestPane';
 import { ResponsePane } from './components/ResponsePane';
@@ -34,10 +36,34 @@ function App() {
     <div className="grid grid-cols-[auto_1fr] h-full text-gray-900">
       <Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={request?.id} />
       {request && (
-        <Grid cols={isH ? 2 : 1} rows={isH ? 1 : 2} gap={2}>
-          <RequestPane request={request} className={classnames(isH ? 'pr-0' : 'pb-0')} />
-          <ResponsePane requestId={request.id} className={classnames(isH ? 'pl-0' : 'pt-0')} />
-        </Grid>
+        <div className="p-2 h-full">
+          <div className="grid grid-rows-[auto_1fr] rounded-md h-full overflow-hidden">
+            <HStack
+              data-tauri-drag-region
+              className="h-10 px-3 bg-gray-50"
+              justify="center"
+              items="center"
+            >
+              {request.name}
+            </HStack>
+            <div
+              className={classnames(
+                'py-2 px-1 bg-gray-25 grid overflow-auto',
+                isH ? 'grid-cols-[1fr_1fr]' : 'grid-rows-[minmax(0,auto)_minmax(0,100%)]',
+              )}
+            >
+              <RequestPane
+                fullHeight={isH}
+                request={request}
+                className={classnames(
+                  'border-gray-100/50',
+                  isH ? 'pr-0 border-r' : 'pb-3 mb-1 border-b',
+                )}
+              />
+              <ResponsePane requestId={request.id} />
+            </div>
+          </div>
+        </div>
       )}
     </div>
   );

src-web/components/Editor/Editor.css

@@ -1,17 +1,18 @@
 .cm-wrapper {
-    height: 100%;
-    width: 100%;
-    position: relative;
-}
+    @apply h-full;
 
-.cm-wrapper .cm-editor {
-    @apply inset-0;
-    position: absolute !important;
-    font-size: 0.85em;
+    &.cm-full-height {
+        @apply relative;
+
+        .cm-editor {
+            @apply inset-0;
+            position: absolute !important;
+        }
+    }
 }
 
 .cm-editor {
-    @apply w-full block;
+    @apply w-full block text-[0.85rem];
 
     &.cm-focused {
         outline: none !important;

src-web/components/Editor/Editor.tsx

@@ -11,6 +11,7 @@ import { baseExtensions, getLanguageExtension, multiLineExtensions } from './ext
 import { singleLineExt } from './singleLine';
 
 export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  height?: 'auto' | 'full';
   contentType?: string;
   autoFocus?: boolean;
   valueKey?: string | number;
@@ -23,6 +24,7 @@ export interface EditorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
 }
 
 export default function Editor({
+  height,
   contentType,
   autoFocus,
   placeholder,
@@ -95,6 +97,7 @@ export default function Editor({
       className={classnames(
         className,
         'cm-wrapper text-base',
+        height === 'auto' ? 'cm-auto-height' : 'cm-full-height',
         singleLine ? 'cm-singleline' : 'cm-multiline',
       )}
       {...props}

src-web/components/LayoutPane.tsx

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import type { ReactNode } from 'react';
 
 export interface LayoutPaneProps {
@@ -7,9 +6,10 @@ export interface LayoutPaneProps {
 }
 
 export function LayoutPane({ className, children }: LayoutPaneProps) {
-  return (
-    <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
-      <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
-    </div>
-  );
+  return <div className={className}>{children}</div>;
+  // return (
+  //   <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
+  //     <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
+  //   </div>
+  // );
 }

src-web/components/RequestPane.tsx

@@ -1,69 +1,64 @@
 import classnames from 'classnames';
-import { useDeleteRequest, useRequestUpdate, useSendRequest } from '../hooks/useRequest';
+import { useRequestUpdate, useSendRequest } from '../hooks/useRequest';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './Button';
 import { Divider } from './Divider';
 import Editor from './Editor/Editor';
-import type { LayoutPaneProps } from './LayoutPane';
-import { LayoutPane } from './LayoutPane';
 import { ScrollArea } from './ScrollArea';
 import { HStack } from './Stacks';
 import { UrlBar } from './UrlBar';
 
-interface Props extends LayoutPaneProps {
+interface Props {
   request: HttpRequest;
+  fullHeight: boolean;
+  className?: string;
 }
 
-export function RequestPane({ request, ...props }: Props) {
+export function RequestPane({ fullHeight, request, className }: Props) {
   const updateRequest = useRequestUpdate(request ?? null);
   const sendRequest = useSendRequest(request ?? null);
   return (
-    <LayoutPane {...props}>
-      <div className="h-full grid grid-rows-[auto_auto_minmax(0,1fr)] grid-cols-1 pt-1 pb-2">
-        {/*<HStack as={WindowDragRegion} items="center" className="pl-3 pr-1.5">*/}
-        {/*  Test Request*/}
-        {/*  <IconButton size="sm" icon="trash" onClick={() => deleteRequest.mutate()} />*/}
-        {/*</HStack>*/}
-        <div>
-          <UrlBar
-            className="bg-transparent border-0 mb-1"
-            key={request.id}
-            method={request.method}
-            url={request.url}
-            loading={sendRequest.isLoading}
-            onMethodChange={(method) => updateRequest.mutate({ method })}
-            onUrlChange={(url) => updateRequest.mutate({ url })}
-            sendRequest={sendRequest.mutate}
-          />
-          <div className="mx-2">
-            <Divider />
-          </div>
-        </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', 'Docs'].map((label, i) => (
-              <Button
-                key={label}
-                size="xs"
-                color={i === 0 && 'gray'}
-                className={i !== 0 && 'opacity-50 hover:opacity-60'}
-              >
-                {label}
-              </Button>
-            ))}
-          </HStack>
-        </ScrollArea>
-        <div className="px-0">
-          <Editor
-            valueKey={request.id}
-            useTemplating
-            defaultValue={request.body ?? ''}
-            contentType="application/json"
-            onChange={(body) => updateRequest.mutate({ body })}
-          />
+    <div className={classnames(className, 'grid grid-rows-[auto_auto_minmax(0,1fr)] grid-cols-1')}>
+      <div>
+        <UrlBar
+          className="bg-transparent border-0 mb-1"
+          key={request.id}
+          method={request.method}
+          url={request.url}
+          loading={sendRequest.isLoading}
+          onMethodChange={(method) => updateRequest.mutate({ method })}
+          onUrlChange={(url) => updateRequest.mutate({ url })}
+          sendRequest={sendRequest.mutate}
+        />
+        <div className="mx-2">
+          <Divider />
         </div>
       </div>
-    </LayoutPane>
+      {/*<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', 'Docs'].map((label, i) => (
+            <Button
+              key={label}
+              size="xs"
+              color={i === 0 && 'gray'}
+              className={i !== 0 && 'opacity-50 hover:opacity-60'}
+            >
+              {label}
+            </Button>
+          ))}
+        </HStack>
+      </ScrollArea>
+      <div className="px-0">
+        <Editor
+          height={fullHeight ? 'full' : 'auto'}
+          valueKey={request.id}
+          useTemplating
+          defaultValue={request.body ?? ''}
+          contentType="application/json"
+          onChange={(body) => updateRequest.mutate({ body })}
+        />
+      </div>
+    </div>
   );
 }

src-web/components/ResponsePane.tsx

@@ -1,20 +1,21 @@
 import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
+import { Button } from './Button';
 import { Divider } from './Divider';
 import { Dropdown } from './Dropdown';
 import Editor from './Editor/Editor';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
-import type { LayoutPaneProps } from './LayoutPane';
-import { LayoutPane } from './LayoutPane';
+import { ScrollArea } from './ScrollArea';
 import { HStack } from './Stacks';
 
-interface Props extends LayoutPaneProps {
+interface Props {
   requestId: string;
+  className?: string;
 }
 
-export function ResponsePane({ requestId, className, ...props }: Props) {
+export function ResponsePane({ requestId, className }: Props) {
   const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty');
   const responses = useResponses(requestId);
@@ -44,81 +45,99 @@ export function ResponsePane({ requestId, className, ...props }: Props) {
   }, [response?.body, contentType]);
 
   return (
-    <LayoutPane className={classnames(className)} {...props}>
-      <div className="max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 py-1 px-2">
-        {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
-        {/*</HStack>*/}
-        {response?.error && (
-          <div className="text-white bg-red-500 px-2 py-1 rounded">{response.error}</div>
-        )}
-        {response && (
-          <>
-            <div className="mb-2">
-              <HStack
-                data-tauri-drag-region
-                items="center"
-                className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0"
-              >
-                <div data-tauri-drag-region className="whitespace-nowrap">
-                  {response.status}
-                  {response.statusReason && ` ${response.statusReason}`}
-                  &nbsp;&bull;&nbsp;
-                  {response.elapsed}ms &nbsp;&bull;&nbsp;
-                  {Math.round(response.body.length / 1000)} KB
-                </div>
+    <div
+      className={classnames(
+        className,
+        'max-h-full h-full grid grid-rows-[auto_auto_minmax(0,1fr)] grid-cols-1',
+      )}
+    >
+      {/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
+      {/*</HStack>*/}
+      {response?.error && (
+        <div className="text-white bg-red-500 px-2 py-1 rounded">{response.error}</div>
+      )}
+      {response && (
+        <>
+          <div>
+            <HStack
+              items="center"
+              className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0 pl-2"
+            >
+              <div className="whitespace-nowrap">
+                {response.status}
+                {response.statusReason && ` ${response.statusReason}`}
+                &nbsp;&bull;&nbsp;
+                {response.elapsed}ms &nbsp;&bull;&nbsp;
+                {Math.round(response.body.length / 1000)} KB
+              </div>
 
-                <HStack items="center" className="ml-auto">
-                  {contentType.includes('html') && (
-                    <IconButton
-                      icon={viewMode === 'pretty' ? 'eye' : 'code'}
-                      size="sm"
-                      className="ml-1"
-                      onClick={() => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))}
-                    />
-                  )}
-                  <Dropdown
-                    items={[
-                      {
-                        label: 'Clear Response',
-                        onSelect: deleteResponse.mutate,
-                        disabled: responses.data.length === 0,
-                      },
-                      {
-                        label: 'Clear All Responses',
-                        onSelect: deleteAllResponses.mutate,
-                        disabled: responses.data.length === 0,
-                      },
-                      '-----',
-                      ...responses.data.slice(0, 10).map((r) => ({
-                        label: r.status + ' - ' + r.elapsed + ' ms',
-                        leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
-                        onSelect: () => setActiveResponseId(r.id),
-                      })),
-                    ]}
-                  >
-                    <IconButton icon="gear" className="ml-auto" size="sm" />
-                  </Dropdown>
-                </HStack>
+              <HStack items="center" className="ml-auto">
+                {contentType.includes('html') && (
+                  <IconButton
+                    icon={viewMode === 'pretty' ? 'eye' : 'code'}
+                    size="sm"
+                    className="ml-1"
+                    onClick={() => setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))}
+                  />
+                )}
+                <Dropdown
+                  items={[
+                    {
+                      label: 'Clear Response',
+                      onSelect: deleteResponse.mutate,
+                      disabled: responses.data.length === 0,
+                    },
+                    {
+                      label: 'Clear All Responses',
+                      onSelect: deleteAllResponses.mutate,
+                      disabled: responses.data.length === 0,
+                    },
+                    '-----',
+                    ...responses.data.slice(0, 10).map((r) => ({
+                      label: r.status + ' - ' + r.elapsed + ' ms',
+                      leftSlot: response?.id === r.id ? <Icon icon="check" /> : <></>,
+                      onSelect: () => setActiveResponseId(r.id),
+                    })),
+                  ]}
+                >
+                  <IconButton icon="gear" className="ml-auto" size="sm" />
+                </Dropdown>
               </HStack>
+            </HStack>
+            <div className="px-2">
               <Divider />
             </div>
-            {viewMode === 'pretty' && contentForIframe !== null ? (
-              <iframe
-                title="Response preview"
-                srcDoc={contentForIframe}
-                sandbox="allow-scripts allow-same-origin"
-                className="h-full w-full rounded-lg"
-              />
-            ) : response?.body ? (
-              <Editor
-                valueKey={`${contentType}:${response.body}`}
-                defaultValue={response?.body}
-                contentType={contentType}
-              />
-            ) : null}
-          </>
-        )}
-      </div>
-    </LayoutPane>
+          </div>
+          <ScrollArea className="max-w-full pb-2 mx-2">
+            <HStack className="mt-2 hide-scrollbar" space={1}>
+              {['Preview', 'Headers', 'Cookies', 'Timing'].map((label, i) => (
+                <Button
+                  key={label}
+                  size="xs"
+                  color={i === 0 && 'gray'}
+                  className={i !== 0 && 'opacity-50 hover:opacity-60'}
+                >
+                  {label}
+                </Button>
+              ))}
+            </HStack>
+          </ScrollArea>
+          {viewMode === 'pretty' && contentForIframe !== null ? (
+            <iframe
+              title="Response preview"
+              srcDoc={contentForIframe}
+              sandbox="allow-scripts allow-same-origin"
+              className="h-full w-full rounded-lg"
+            />
+          ) : response?.body ? (
+            <Editor
+              valueKey={`${contentType}:${response.body}`}
+              defaultValue={response?.body}
+              contentType={contentType}
+            />
+          ) : null}
+        </>
+      )}
+    </div>
   );
 }

src-web/components/Stacks.tsx

@@ -76,7 +76,7 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
 
 interface BaseStackProps extends HTMLAttributes<HTMLElement> {
   items?: 'start' | 'center';
-  justify?: 'start' | 'end';
+  justify?: 'start' | 'center' | 'end';
   as?: React.ElementType;
 }
 
@@ -90,6 +90,7 @@ function BaseStack({ className, items, justify, as = 'div', ...props }: BaseStac
         items === 'center' && 'items-center',
         items === 'start' && 'items-start',
         justify === 'start' && 'justify-start',
+        justify === 'center' && 'justify-center',
         justify === 'end' && 'justify-end',
       )}
       {...props}

src-web/main.css

@@ -125,6 +125,7 @@ html, body, #root {
         --color-yellow-800: 45 93% 20%;
         --color-yellow-900: 45 93% 10%;
 
+        --color-gray-25: 217 21% 98%;
         --color-gray-50: 217 21% 95%;
         --color-gray-100: 217 21% 88%;
         --color-gray-200: 217 21% 76%;
@@ -234,5 +235,6 @@ html, body, #root {
         --color-gray-200: 217 21% 30%;
         --color-gray-100: 217 21% 25%;
         --color-gray-50: 217 21% 15%;
+        --color-gray-25: 217 21% 10%;
     }
 }

tailwind.config.cjs

@@ -34,7 +34,7 @@ module.exports = {
 }
 
 function color(name) {
-    return {
+    const map = {
         50: `hsl(var(--color-${name}-50) / <alpha-value>)`,
         100: `hsl(var(--color-${name}-100) / <alpha-value>)`,
         200: `hsl(var(--color-${name}-200) / <alpha-value>)`,
@@ -46,4 +46,8 @@ function color(name) {
         800: `hsl(var(--color-${name}-800) / <alpha-value>)`,
         900: `hsl(var(--color-${name}-900) / <alpha-value>)`,
     }
+    if (name === 'gray') {
+        map[25] = `hsl(var(--color-${name}-25) / <alpha-value>)`;
+    }
+    return map;
 }