Beginnings of Header Editor

.eslintrc.cjs

@@ -20,6 +20,7 @@ module.exports = {
         },
     },
     rules: {
+        "jsx-a11y/no-autofocus": "warn",
         "react/react-in-jsx-scope": "off",
         "@typescript-eslint/consistent-type-imports": ["error", {
             prefer: "type-imports",

src-web/components/Button.tsx

@@ -1,16 +1,16 @@
-import {
+import classnames from 'classnames';
+import type {
   ButtonHTMLAttributes,
   ComponentPropsWithoutRef,
   ElementType,
   ForwardedRef,
-  forwardRef,
 } from 'react';
-import classnames from 'classnames';
+import { forwardRef } from 'react';
 import { Icon } from './Icon';
 
 export interface ButtonProps<T extends ElementType>
   extends ButtonHTMLAttributes<HTMLButtonElement> {
-  color?: 'primary' | 'secondary';
+  color?: 'primary' | 'secondary' | 'warning' | 'danger';
   size?: 'xs' | 'sm' | 'md';
   justify?: 'start' | 'center';
   forDropdown?: boolean;
@@ -34,18 +34,21 @@ export const Button = forwardRef(function Button<T extends ElementType>(
   return (
     <Component
       ref={ref}
+      type="button"
       className={classnames(
         className,
-        'rounded-md flex items-center',
+        'rounded-md flex items-center bg-opacity-80 hover:bg-opacity-100 text-white',
         // 'active:translate-y-[0.5px] active:scale-[0.99]',
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
         size === 'xs' && 'h-7 px-3 text-sm',
-        color === undefined && 'hover:bg-gray-500/[0.1] text-gray-800 hover:text-gray-900',
+        color === undefined && 'hover:bg-gray-500/[0.1]',
-        color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 text-white',
+        color === 'primary' && 'bg-blue-400',
-        color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 text-white',
+        color === 'secondary' && 'bg-violet-400',
+        color === 'warning' && 'bg-orange-400',
+        color === 'danger' && 'bg-red-400',
       )}
       {...props}
     >

src-web/components/Dialog.tsx

@@ -1,5 +1,6 @@
 import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
+import { motion } from 'framer-motion';
 import React from 'react';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
@@ -10,30 +11,44 @@ interface Props {
   onOpenChange: (open: boolean) => void;
   title: string;
   description?: string;
+  className?: string;
+  wide?: boolean;
 }
 
-export function Dialog({ children, open, onOpenChange, title, description }: Props) {
+export function Dialog({
+  children,
+  className,
+  wide,
+  open,
+  onOpenChange,
+  title,
+  description,
+}: Props) {
   return (
     <D.Root open={open} onOpenChange={onOpenChange}>
       <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
-        <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80" />
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-        <D.Content
+          <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80 shadow-lg" />
-          className={classnames(
+          <D.Content
-            'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50 w-[20rem] max-h-[20rem]',
+            className={classnames(
-            'p-5 rounded-lg',
+              className,
-          )}
+              'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
-        >
+              'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
-          <D.Close asChild className="ml-auto absolute right-1 top-1">
+              wide && 'w-[80vw] max-w-[50rem]',
-            <IconButton aria-label="Close" icon="x" size="sm" />
+            )}
-          </D.Close>
+          >
-          <VStack space={3}>
+            <D.Close asChild className="ml-auto absolute right-1 top-1">
-            <HStack items="center" className="pb-3">
+              <IconButton aria-label="Close" icon="x" size="sm" />
-              <D.Title className="text-xl font-semibold">{title}</D.Title>
+            </D.Close>
-            </HStack>
+            <VStack space={3}>
-            {description && <D.Description>{description}</D.Description>}
+              <HStack items="center" className="pb-3">
-            <div>{children}</div>
+                <D.Title className="text-xl font-semibold">{title}</D.Title>
-          </VStack>
+              </HStack>
-        </D.Content>
+              {description && <D.Description>{description}</D.Description>}
+              <div>{children}</div>
+            </VStack>
+          </D.Content>
+        </motion.div>
       </D.Portal>
     </D.Root>
   );

src-web/components/Editor/Editor.css

@@ -25,7 +25,7 @@
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
 }
 
-.cm-editor .cm-scroller {
+.cm-multiline .cm-editor .cm-scroller {
     @apply rounded-lg bg-gray-50;
 }
 

src-web/components/HeaderEditor.tsx

@@ -0,0 +1,82 @@
+import type { FormEvent } from 'react';
+import React, { useState } from 'react';
+import type { HttpHeader } from '../lib/models';
+import { IconButton } from './IconButton';
+import { Input } from './Input';
+import { HStack, VStack } from './Stacks';
+
+export function HeaderEditor() {
+  const [headers, setHeaders] = useState<HttpHeader[]>([]);
+  const [newHeader, setNewHeader] = useState<HttpHeader>({ name: '', value: '' });
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    setHeaders([...headers, newHeader]);
+    setNewHeader({ name: '', value: '' });
+  };
+
+  const handleDelete = (index: number) => {
+    setHeaders((headers) => headers.filter((_, i) => i !== index));
+  };
+
+  const handleChangeHeader = (header: HttpHeader, index: number) => {
+    setHeaders((headers) => headers.map((h, i) => (i === index ? header : h)));
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <VStack space={2}>
+        {headers.map((header, i) => (
+          <FormRow
+            key={`${headers.length}:${i}`}
+            header={header}
+            onChange={(h) => handleChangeHeader(h, i)}
+            onDelete={() => handleDelete(i)}
+          />
+        ))}
+        <FormRow addSubmit onChange={setNewHeader} header={newHeader} />
+      </VStack>
+    </form>
+  );
+}
+
+function FormRow({
+  header,
+  addSubmit,
+  onChange,
+  onDelete,
+}: {
+  header: HttpHeader;
+  addSubmit?: boolean;
+  onChange: (header: HttpHeader) => void;
+  onDelete?: () => void;
+}) {
+  return (
+    <div>
+      <HStack space={2}>
+        <Input
+          autoFocus
+          name="name"
+          label="Name"
+          placeholder="name"
+          value={header.name}
+          hideLabel
+          onChange={(name) => {
+            onChange({ name, value: header.value });
+          }}
+        />
+        <Input
+          name="value"
+          label="Value"
+          placeholder="value"
+          value={header.value}
+          hideLabel
+          onChange={(value) => {
+            onChange({ name: header.name, value });
+          }}
+        />
+        {onDelete && <IconButton size="sm" icon="trash" onClick={onDelete} />}
+      </HStack>
+      {addSubmit && <input type="submit" value="Add" className="sr-only" />}
+    </div>
+  );
+}

src-web/components/Input.tsx

@@ -1,7 +1,7 @@
-import classnames from "classnames";
+import classnames from 'classnames';
-import type { InputHTMLAttributes, ReactNode } from "react";
+import type { InputHTMLAttributes, ReactNode } from 'react';
-import Editor from "./Editor/Editor";
+import Editor from './Editor/Editor';
-import { HStack, VStack } from "./Stacks";
+import { HStack, VStack } from './Stacks';
 
 interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
   name: string;
@@ -45,7 +45,7 @@ export function Input({
         htmlFor={id}
         className={classnames(
           labelClassName,
-          'font-semibold text-sm uppercase text-gray-700 absolute',
+          'font-semibold text-sm uppercase text-gray-700',
           hideLabel && 'sr-only',
         )}
       >
@@ -55,8 +55,8 @@ export function Input({
         items="center"
         className={classnames(
           containerClassName,
-          'relative w-full bg-gray-50 rounded-md overflow-hidden text-gray-900',
+          'relative w-full rounded-md overflow-hidden text-gray-900 bg-gray-200/10',
-          'border border-transparent focus-within:border-blue-400/40',
+          'border border-gray-500/10 focus-within:border-blue-400/40',
           size === 'md' && 'h-10',
           size === 'sm' && 'h-8',
         )}
@@ -72,12 +72,7 @@ export function Input({
             onChange={onChange}
             onSubmit={onSubmit}
             placeholder={placeholder}
-            className={classnames(
+            className={className}
-              className,
-              'bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
-              leftSlot && '!pl-1',
-              rightSlot && '!pr-1',
-            )}
           />
         ) : (
           <input
@@ -87,7 +82,7 @@ export function Input({
             defaultValue={defaultValue}
             className={classnames(
               className,
-              'bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
+              '!bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none placeholder:text-gray-500/40',
               leftSlot && '!pl-1',
               rightSlot && '!pr-1',
             )}

src-web/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import useTheme from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './Button';
 import { Dialog } from './Dialog';
+import { HeaderEditor } from './HeaderEditor';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
 import { HStack, VStack } from './Stacks';
@@ -28,9 +29,8 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
       {...props}
     >
       <HStack as={WindowDragRegion} items="center" className="pr-1" justify="end">
-        <Dialog open={open} onOpenChange={setOpen} title="This is the title">
+        <Dialog wide open={open} onOpenChange={setOpen} title="This is the title">
-          <p>This is the body</p>
+          <HeaderEditor />
-          <Input name="Name" label="This is the label" className="bg-gray-100" />
           <Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}>
             Save
           </Button>

src-web/main.css

@@ -4,7 +4,7 @@
 
 :root {
     color-scheme: light dark;
-    --transition-duration: 200ms ease-in-out;
+    --transition-duration: 100ms ease-in-out;
 }
 
 :not(input):not(textarea),

tailwind.config.cjs

@@ -21,6 +21,7 @@ module.exports = {
             black: 'hsl(var(--color-black) / <alpha-value>)',
             background: 'hsl(var(--color-background) / <alpha-value>)',
             gray: color('gray'),
+            orange: color('orange'),
             blue: color('blue'),
             green: color('green'),
             pink: color('pink'),