From 8ad301a666500a626ea78b8efed58c444f6745a0 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 4 Mar 2023 22:26:00 -0800
Subject: [PATCH] More layout fiddling and error page

---
 src-tauri/src/window_ext.rs             |  2 +-
 src-web/App.tsx                         | 19 ++++++++++++++----
 src-web/components/Button.tsx           |  2 +-
 src-web/components/Editor/Editor.css    |  7 +++----
 src-web/components/Heading.tsx          | 12 ++++++++++++
 src-web/components/ResponsePane.tsx     | 15 ++++++++------
 src-web/components/RouterError.tsx      | 24 +++++++++++++++++++++++
 src-web/components/Sidebar.tsx          | 12 +++++-------
 src-web/components/Stacks.tsx           |  4 ++++
 src-web/components/WindowDragRegion.tsx |  4 ++--
 src-web/main.tsx                        | 26 +++++++++++++------------
 src-web/pages/Workspaces.tsx            |  9 ++++++---
 12 files changed, 96 insertions(+), 40 deletions(-)
 create mode 100644 src-web/components/Heading.tsx
 create mode 100644 src-web/components/RouterError.tsx

diff --git a/src-tauri/src/window_ext.rs b/src-tauri/src/window_ext.rs
index c04a030a..5cad9bff 100644
--- a/src-tauri/src/window_ext.rs
+++ b/src-tauri/src/window_ext.rs
@@ -1,7 +1,7 @@
 use tauri::{Runtime, Window};
 
 const TRAFFIC_LIGHT_OFFSET_X: f64 = 15.0;
-const TRAFFIC_LIGHT_OFFSET_Y: f64 = 26.0;
+const TRAFFIC_LIGHT_OFFSET_Y: f64 = 20.0;
 
 pub trait WindowExt {
     #[cfg(target_os = "macos")]
diff --git a/src-web/App.tsx b/src-web/App.tsx
index 6f69c89c..661f539e 100644
--- a/src-web/App.tsx
+++ b/src-web/App.tsx
@@ -1,13 +1,15 @@
 import classnames from 'classnames';
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Button } from './components/Button';
 import { Divider } from './components/Divider';
 import { Grid } from './components/Grid';
+import { IconButton } from './components/IconButton';
 import { RequestPane } from './components/RequestPane';
 import { ResponsePane } from './components/ResponsePane';
 import { Sidebar } from './components/Sidebar';
 import { HStack } from './components/Stacks';
+import { WindowDragRegion } from './components/WindowDragRegion';
 import {
   useDeleteRequest,
   useRequests,
@@ -24,6 +26,7 @@ function App() {
   const p = useParams<Params>();
   const workspaceId = p.workspaceId ?? '';
   const { data: requests } = useRequests(workspaceId);
+  const navigate = useNavigate();
   const request = requests?.find((r) => r.id === p.requestId);
 
   const [screenWidth, setScreenWidth] = useState(window.innerWidth);
@@ -39,12 +42,20 @@ function App() {
         <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"
+              as={WindowDragRegion}
+              className="pl-1 pr-3 bg-gray-50 text-sm"
               justify="center"
               items="center"
             >
-              {request.name}
+              <div className="mr-auto">
+                <IconButton
+                  size="xs"
+                  icon="x"
+                  onClick={() => navigate(`/workspaces/${workspaceId}`)}
+                />
+              </div>
+              <div>{request.name}</div>
+              <div className="ml-auto"></div>
             </HStack>
             <div
               className={classnames(
diff --git a/src-web/components/Button.tsx b/src-web/components/Button.tsx
index 1ff46405..a9328d6e 100644
--- a/src-web/components/Button.tsx
+++ b/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',
diff --git a/src-web/components/Editor/Editor.css b/src-web/components/Editor/Editor.css
index 018f301c..ebdccbea 100644
--- a/src-web/components/Editor/Editor.css
+++ b/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 {
diff --git a/src-web/components/Heading.tsx b/src-web/components/Heading.tsx
new file mode 100644
index 00000000..4e93baef
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index 5679b785..0560dd98 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/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}`}
diff --git a/src-web/components/RouterError.tsx b/src-web/components/RouterError.tsx
new file mode 100644
index 00000000..2a8b59be
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 1fc96724..70408a23 100644
--- a/src-web/components/Sidebar.tsx
+++ b/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}
diff --git a/src-web/components/Stacks.tsx b/src-web/components/Stacks.tsx
index 866867d1..8d691657 100644
--- a/src-web/components/Stacks.tsx
+++ b/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 {
diff --git a/src-web/components/WindowDragRegion.tsx b/src-web/components/WindowDragRegion.tsx
index 1909a8f9..1986ad23 100644
--- a/src-web/components/WindowDragRegion.tsx
+++ b/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}
     />
   );
diff --git a/src-web/main.tsx b/src-web/main.tsx
index b9c146b5..449cd508 100644
--- a/src-web/main.tsx
+++ b/src-web/main.tsx
@@ -1,20 +1,21 @@
-import React from 'react';
-import init, { greet } from 'hello';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { HelmetProvider } from 'react-helmet-async';
-import { MotionConfig } from 'framer-motion';
-import { listen } from '@tauri-apps/api/event';
-import { responsesQueryKey } from './hooks/useResponses';
-import { setTheme } from './lib/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { listen } from '@tauri-apps/api/event';
+import { MotionConfig } from 'framer-motion';
+import init, { greet } from 'hello';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import App from './App';
 import { Layout } from './components/Layout';
-import { Workspaces } from './pages/Workspaces';
-import './main.css';
+import { RouterError } from './components/RouterError';
+import { requestsQueryKey } from './hooks/useRequest';
+import { responsesQueryKey } from './hooks/useResponses';
 import type { HttpRequest, HttpResponse } from './lib/models';
 import { convertDates } from './lib/models';
-import { requestsQueryKey } from './hooks/useRequest';
+import { setTheme } from './lib/theme';
+import './main.css';
+import { Workspaces } from './pages/Workspaces';
 
 setTheme();
 
@@ -78,6 +79,7 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <Layout />,
+    errorElement: <RouterError />,
     children: [
       {
         path: '/',
diff --git a/src-web/pages/Workspaces.tsx b/src-web/pages/Workspaces.tsx
index 1b7d72c6..12db1c41 100644
--- a/src-web/pages/Workspaces.tsx
+++ b/src-web/pages/Workspaces.tsx
@@ -1,15 +1,18 @@
+import { Heading } from '../components/Heading';
+import { VStack } from '../components/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import { ButtonLink } from '../components/ButtonLink';
 
 export function Workspaces() {
   const workspaces = useWorkspaces();
   return (
-    <ul className="p-12">
+    <VStack as="ul" className="p-12">
+      <Heading>Workspaces</Heading>
       {workspaces.data?.map((w) => (
-        <ButtonLink key={w.id} to={`/workspaces/${w.id}`}>
+        <ButtonLink key={w.id} color="gray" to={`/workspaces/${w.id}`}>
           {w.name}
         </ButtonLink>
       ))}
-    </ul>
+    </VStack>
   );
 }