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}>
+        <div className="p-2 h-full">
-          <RequestPane request={request} className={classnames(isH ? 'pr-0' : 'pb-0')} />
+          <div className="grid grid-rows-[auto_1fr] rounded-md h-full overflow-hidden">
-          <ResponsePane requestId={request.id} className={classnames(isH ? 'pl-0' : 'pt-0')} />
+            <HStack
-        </Grid>
+              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%;
+    @apply h-full;
-    width: 100%;
-    position: relative;
-}
 
-.cm-wrapper .cm-editor {
+    &.cm-full-height {
+        @apply relative;
+
+        .cm-editor {
             @apply inset-0;
             position: absolute !important;
-    font-size: 0.85em;
+        }
+    }
 }
 
 .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 (
+  return <div className={className}>{children}</div>;
-    <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
+  // return (
-      <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
+  //   <div className={classnames(className, 'w-full h-full p-2')} data-tauri-drag-region>
-    </div>
+  //     <div className={classnames('w-full h-full bg-gray-50/50 rounded-lg')}>{children}</div>
-  );
+  //   </div>
+  // );
 }

src-web/components/RequestPane.tsx

@@ -1,29 +1,24 @@
 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={classnames(className, 'grid grid-rows-[auto_auto_minmax(0,1fr)] grid-cols-1')}>
-      <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"
@@ -56,6 +51,7 @@ export function RequestPane({ request, ...props }: Props) {
       </ScrollArea>
       <div className="px-0">
         <Editor
+          height={fullHeight ? 'full' : 'auto'}
           valueKey={request.id}
           useTemplating
           defaultValue={request.body ?? ''}
@@ -64,6 +60,5 @@ export function RequestPane({ request, ...props }: Props) {
         />
       </div>
     </div>
-    </LayoutPane>
   );
 }

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 { ScrollArea } from './ScrollArea';
-import { LayoutPane } from './LayoutPane';
 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,8 +45,12 @@ export function ResponsePane({ requestId, className, ...props }: Props) {
   }, [response?.body, contentType]);
 
   return (
-    <LayoutPane className={classnames(className)} {...props}>
+    <div
-      <div className="max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 py-1 px-2">
+      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 && (
@@ -53,13 +58,12 @@ export function ResponsePane({ requestId, className, ...props }: Props) {
       )}
       {response && (
         <>
-            <div className="mb-2">
+          <div>
             <HStack
-                data-tauri-drag-region
               items="center"
-                className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0"
+              className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0 pl-2"
             >
-                <div data-tauri-drag-region className="whitespace-nowrap">
+              <div className="whitespace-nowrap">
                 {response.status}
                 {response.statusReason && ` ${response.statusReason}`}
                 &nbsp;&bull;&nbsp;
@@ -100,8 +104,24 @@ export function ResponsePane({ requestId, className, ...props }: Props) {
                 </Dropdown>
               </HStack>
             </HStack>
+            <div className="px-2">
               <Divider />
             </div>
+          </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"
@@ -119,6 +139,5 @@ export function ResponsePane({ requestId, className, ...props }: Props) {
         </>
       )}
     </div>
-    </LayoutPane>
   );
 }

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;
 }