Started on grid layout

src-web/App.tsx

@@ -7,6 +7,9 @@ import { WindowDragRegion } from './components/WindowDragRegion';
 import { IconButton } from './components/IconButton';
 import { Sidebar } from './components/Sidebar';
 import { UrlBar } from './components/UrlBar';
+import { Input } from './components/Input';
+import { Button } from './components/Button';
+import { Grid } from './components/Grid';
 
 interface Response {
   url: string;
@@ -63,44 +66,49 @@ function App() {
             </DropdownMenuRadio>
           </HStack>
         </Sidebar>
-        <VStack className="w-full">
+        <Grid cols={2}>
-          <HStack as={WindowDragRegion} items="center" className="pl-4 pr-1">
+          <VStack className="w-full">
-            <h5 className="pointer-events-none text-gray-800">Send Request</h5>
+            <HStack as={WindowDragRegion} items="center" className="px-3">
-            <IconButton icon="gear" className="ml-auto" />
+              <UrlBar
-          </HStack>
+                method={method}
-          <VStack className="p-4 max-w-[50rem] mx-auto" space={3}>
+                url={url}
-            <UrlBar
+                onMethodChange={setMethod}
-              method={method}
+                onUrlChange={setUrl}
-              url={url}
+                sendRequest={sendRequest}
-              onMethodChange={setMethod}
+              />
-              onUrlChange={setUrl}
+            </HStack>
-              sendRequest={sendRequest}
-            />
-            {error && <div className="text-white bg-red-500 px-4 py-1 rounded">{error}</div>}
-            {response !== null && (
-              <>
-                <div className="my-1 italic text-gray-500 text-sm">
-                  {response?.method.toUpperCase()}
-                  &nbsp;&bull;&nbsp;
-                  {response?.status}
-                  &nbsp;&bull;&nbsp;
-                  {response?.elapsed}ms &nbsp;&bull;&nbsp;
-                  {response?.elapsed2}ms
-                </div>
-                {contentType.includes('html') ? (
-                  <iframe
-                    title="Response preview"
-                    srcDoc={response.body}
-                    sandbox="allow-scripts allow-same-origin"
-                    className="h-[70vh] w-full rounded-lg"
-                  />
-                ) : response?.body ? (
-                  <Editor value={response?.body} contentType={contentType} />
-                ) : null}
-              </>
-            )}
           </VStack>
-        </VStack>
+          <VStack className="w-full">
+            <HStack as={WindowDragRegion} items="center" className="pl-3 pr-1">
+              <div className="my-1 italic text-gray-500 text-sm w-full">
+                {response?.method.toUpperCase()}
+                &nbsp;&bull;&nbsp;
+                {response?.status}
+                &nbsp;&bull;&nbsp;
+                {response?.elapsed}ms &nbsp;&bull;&nbsp;
+                {response?.elapsed2}ms
+              </div>
+              <IconButton icon="gear" className="ml-auto" size="sm" />
+            </HStack>
+            <VStack className="px-3 py-3" space={3}>
+              {error && <div className="text-white bg-red-500 px-3 py-1 rounded">{error}</div>}
+              {response !== null && (
+                <>
+                  {contentType.includes('html') ? (
+                    <iframe
+                      title="Response preview"
+                      srcDoc={response.body}
+                      sandbox="allow-scripts allow-same-origin"
+                      className="h-full w-full rounded-lg"
+                    />
+                  ) : response?.body ? (
+                    <Editor value={response?.body} contentType={contentType} />
+                  ) : null}
+                </>
+              )}
+            </VStack>
+          </VStack>
+        </Grid>
       </div>
     </>
   );

src-web/components/Button.tsx

@@ -4,7 +4,7 @@ import { Icon } from './Icon';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   color?: 'primary' | 'secondary';
-  size?: 'sm' | 'md';
+  size?: 'xs' | 'sm' | 'md';
   justify?: 'start' | 'center';
   forDropdown?: boolean;
 };
@@ -31,6 +31,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
+        size === 'xs' && 'h-6 px-2 text-sm',
         color === undefined &&
           'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15] text-gray-800 hover:text-gray-900',
         color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80 text-white',

src-web/components/Editor/Editor.css

@@ -1,12 +1,28 @@
-.cm-editor {
+.cm-wrapper {
+    height: 100%;
     width: 100%;
-    overflow: hidden;
+    position: relative;
+}
+
+.cm-editor {
+    position: absolute !important;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     border-radius: var(--border-radius-lg);
+    border: 1px solid hsl(var(--color-gray-50));
+    font-size: 0.9rem;
+}
+
+.cm-editor.cm-focused {
+    outline: none !important;
+    border-color: hsl(var(--color-gray-100));
 }
 
 .cm-editor .cm-scroller {
     border-radius: var(--border-radius-lg);
-    background-color: hsl(var(--color-gray-50) / 0.5);
+    background-color: hsl(var(--color-gray-50));
 }
 
 .cm-editor .cm-line {
@@ -16,7 +32,7 @@
 }
 
 .cm-editor .cm-gutters {
-    background-color: transparent;
+    background-color: hsl(var(--color-gray-50));
     border-right: 0;
     color: hsl(var(--color-gray-300));
 }

src-web/components/Editor/Editor.tsx

@@ -8,5 +8,5 @@ interface Props {
 
 export default function Editor(props: Props) {
   const { ref } = useCodeMirror({ value: props.value, contentType: props.contentType });
-  return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
+  return <div ref={ref} className="cm-wrapper" />;
 }

src-web/components/Grid.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import {HTMLAttributes} from 'react';
+import { HTMLAttributes } from 'react';
 
 const colsClasses = {
   none: 'grid-cols-none',
@@ -28,7 +28,12 @@ type Props = HTMLAttributes<HTMLElement> & {
 export function Grid({ className, cols, gap, ...props }: Props) {
   return (
     <div
-      className={classnames(className, 'grid', cols && colsClasses[cols], gap && gapClasses[gap])}
+      className={classnames(
+        className,
+        'grid w-full',
+        cols && colsClasses[cols],
+        gap && gapClasses[gap],
+      )}
       {...props}
     />
   );

src-web/components/Input.tsx

@@ -2,20 +2,24 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';
 import { HStack, VStack } from './Stacks';
 
-interface Props extends InputHTMLAttributes<HTMLInputElement> {
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   name: string;
   label: string;
   hideLabel?: boolean;
   labelClassName?: string;
+  containerClassName?: string;
   leftSlot?: ReactNode;
   rightSlot?: ReactNode;
+  size?: 'sm' | 'md';
 }
 
 export function Input({
   label,
-  labelClassName,
   hideLabel,
   className,
+  containerClassName,
+  labelClassName,
+  size = 'md',
   name,
   leftSlot,
   rightSlot,
@@ -23,15 +27,12 @@ export function Input({
 }: Props) {
   const id = `input-${name}`;
   return (
-    <HStack items="center" className="w-full bg-gray-50 h-10 rounded-md text-sm ">
+    <HStack
+      items="center"
+      className={classnames(containerClassName, 'w-full bg-gray-50 rounded-md text-sm')}
+    >
       {leftSlot}
-      <VStack
+      <VStack className={classnames('w-full border-gray-100/50')}>
-        className={classnames(
-          'w-full border-gray-100/50',
-          leftSlot && 'border-l ml-0.5',
-          rightSlot && 'border-r mr-0.5',
-        )}
-      >
         <label
           htmlFor={name}
           className={classnames(
@@ -46,7 +47,11 @@ export function Input({
           id={id}
           className={classnames(
             className,
-            'bg-transparent min-w-0 pl-3 pr-2 w-full h-full focus:outline-none',
+            'bg-transparent min-w-0 pl-3 pr-2 w-full focus:outline-none',
+            leftSlot && 'pl-1',
+            rightSlot && 'pr-1',
+            size === 'md' && 'h-10',
+            size === 'sm' && 'h-8',
           )}
           {...props}
         />

src-web/components/UrlBar.tsx

@@ -28,12 +28,13 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
   };
 
   return (
-    <HStack as="form" className="items-end" onSubmit={handleSendRequest} space={2}>
+    <form onSubmit={handleSendRequest} className="w-full flex items-center">
       <Input
         hideLabel
+        size="sm"
         name="url"
         label="Enter URL"
-        className="font-mono pr-12"
+        className="font-mono"
         onChange={(e) => onUrlChange(e.currentTarget.value)}
         value={url}
         placeholder="Enter a URL..."
@@ -47,7 +48,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
               { label: 'POST', value: 'POST' },
             ]}
           >
-            <Button disabled={loading} forDropdown size="sm" className="ml-1 w-22" justify="start">
+            <Button disabled={loading} size="xs" className="ml-1" justify="start">
               {method.label}
             </Button>
           </DropdownMenuRadio>
@@ -57,11 +58,11 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
             icon={loading ? 'update' : 'paper-plane'}
             spin={loading}
             disabled={loading}
-            size="sm"
+            size="xs"
-            className="w-10 mr-1"
+            className="mr-1"
           />
         }
       />
-    </HStack>
+    </form>
   );
 }