More layout fiddling and error page

src-web/components/Button.tsx

@@ -10,7 +10,7 @@ import { Icon } from './Icon';
 
 const colorStyles = {
   default: 'hover:bg-gray-500/10 text-gray-600',
-  gray: 'bg-gray-50 text-gray-800 hover:bg-gray-500/10',
+  gray: 'text-gray-800 bg-gray-50 hover:bg-gray-500/20',
   primary: 'bg-blue-400',
   secondary: 'bg-violet-400',
   warning: 'bg-orange-400',

src-web/components/Editor/Editor.css

@@ -12,7 +12,7 @@
 }
 
 .cm-editor {
-    @apply w-full block text-[0.85rem];
+    @apply w-full block text-[0.85rem] bg-gray-25;
 
     &.cm-focused {
         outline: none !important;
@@ -27,7 +27,7 @@
     }
 
     .placeholder-widget {
-        @apply text-xs text-white/90 bg-blue-400/80 py-[1px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-400 hover:text-white;
+        @apply text-xs text-white/90 bg-blue-400/80 py-[0.5px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-400 hover:text-white;
         text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
     }
 }
@@ -70,8 +70,7 @@
 }
 
 .cm-editor .cm-gutters {
-    /*@apply bg-gray-50 border-r-0 text-gray-200;*/
-    @apply bg-transparent border-0 text-gray-200;
+    @apply bg-gray-25 border-0 text-gray-200;
 }
 
 .cm-editor .cm-gutterElement {

src-web/components/Heading.tsx

@@ -0,0 +1,12 @@
+import classnames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+type Props = HTMLAttributes<HTMLHeadingElement>;
+
+export function Heading({ className, children, ...props }: Props) {
+  return (
+    <h1 className={classnames(className, 'text-2xl font-semibold text-gray-900 mb-3')} {...props}>
+      {children}
+    </h1>
+  );
+}

src-web/components/ResponsePane.tsx

@@ -122,13 +122,16 @@ export function ResponsePane({ requestId, className }: Props) {
               ))}
             </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"
-            />
+            <div className="pl-2">
+              <iframe
+                title="Response preview"
+                srcDoc={contentForIframe}
+                sandbox="allow-scripts allow-same-origin"
+                className="h-full w-full rounded-lg"
+              />
+            </div>
           ) : response?.body ? (
             <Editor
               valueKey={`${contentType}:${response.body}`}

src-web/components/RouterError.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link, useRouteError } from 'react-router-dom';
+import { Button } from './Button';
+import { ButtonLink } from './ButtonLink';
+import { Heading } from './Heading';
+import { VStack } from './Stacks';
+
+export function RouterError() {
+  const error = useRouteError();
+  console.log('Router Error', error);
+  return (
+    <div className="flex items-center justify-center h-full">
+      <VStack space={5} className="w-auto h-auto">
+        <Heading>Route Error 🔥</Heading>
+        <pre className="text-sm select-auto cursor-text bg-gray-50 p-3 rounded">
+          {JSON.stringify(error, null, 2)}
+        </pre>
+        <ButtonLink to="/" color="primary">
+          Go Home
+        </ButtonLink>
+      </VStack>
+    </div>
+  );
+}

src-web/components/Sidebar.tsx

@@ -7,10 +7,8 @@ import useTheme from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
 import { Button } from './Button';
 import { Dialog } from './Dialog';
-import { DropdownMenuRadio } from './Dropdown';
 import { HeaderEditor } from './HeaderEditor';
 import { IconButton } from './IconButton';
-import { Input } from './Input';
 import { HStack, VStack } from './Stacks';
 import { WindowDragRegion } from './WindowDragRegion';
 
@@ -25,8 +23,8 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
   const { toggleTheme } = useTheme();
   const [open, setOpen] = useState<boolean>(false);
   return (
-    <div className={classnames(className, 'w-52 bg-gray-50 h-full')} {...props}>
-      <HStack as={WindowDragRegion} items="center" className="pr-1" justify="end">
+    <div className={classnames(className, 'w-52 bg-gray-50 h-full px-2')} {...props}>
+      <HStack as={WindowDragRegion} items="center" className="py-2" justify="end">
         <Dialog wide open={open} onOpenChange={setOpen} title="Edit Headers">
           <HeaderEditor />
           <Button className="ml-auto mt-5" color="primary" onClick={() => setOpen(false)}>
@@ -60,12 +58,12 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
 
 function SidebarItem({ request, active }: { request: HttpRequest; active: boolean }) {
   return (
-    <li key={request.id} className="mx-3">
+    <li key={request.id}>
       <Button
         as={Link}
         to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
-        className={classnames('w-full', active && 'bg-gray-500/[0.1]')}
-        size="xs"
+        className={classnames('w-full', active && 'bg-gray-500/[0.1] text-gray-900')}
+        size="sm"
         justify="start"
       >
         {request.name}

src-web/components/Stacks.tsx

@@ -8,6 +8,8 @@ const spaceClassesX = {
   2: 'pr-2',
   3: 'pr-3',
   4: 'pr-4',
+  5: 'pr-5',
+  6: 'pr-6',
 };
 
 const spaceClassesY = {
@@ -16,6 +18,8 @@ const spaceClassesY = {
   2: 'pt-2',
   3: 'pt-3',
   4: 'pt-4',
+  5: 'pt-5',
+  6: 'pt-6',
 };
 
 interface HStackProps extends BaseStackProps {

src-web/components/WindowDragRegion.tsx

@@ -6,8 +6,8 @@ type Props = HTMLAttributes<HTMLDivElement>;
 export function WindowDragRegion({ className, ...props }: Props) {
   return (
     <div
-      className={classnames(className, 'w-full h-14 flex-shrink-0')}
-      data-tauri-drag-region=""
+      data-tauri-drag-region
+      className={classnames(className, 'w-full h-8 flex-shrink-0 box-content')}
       {...props}
     />
   );