Started on general window layout

2026-03-20 16:43:53 +01:00 · 2023-02-19 23:11:59 -08:00
parent 0a0839cc3c
commit b95429dbeb
17 changed files with 337 additions and 99 deletions
--- a/src-web/App.tsx
+++ b/src-web/App.tsx
@@ -1,12 +1,12 @@
 import { FormEvent, useState } from 'react';
-import { Helmet } from 'react-helmet-async';
 import { invoke } from '@tauri-apps/api/tauri';
 import Editor from './components/Editor/Editor';
 import { Input } from './components/Input';
-import { Stacks } from './components/Stacks';
+import { HStack, VStack } from './components/Stacks';
 import { Button } from './components/Button';
-import { Grid } from './components/Grid';
 import { DropdownMenuRadio } from './components/Dropdown';
+import { WindowDragRegion } from './components/WindowDragRegion';
+import { IconButton } from './components/IconButton';

 interface Response {
  url: string;
@@ -19,6 +19,7 @@ interface Response {
 }

 function App() {
+  const [error, setError] = useState<string | null>(null);
  const [responseBody, setResponseBody] = useState<Response | null>(null);
  const [url, setUrl] = useState('https://go-server.schier.dev/debug');
  const [loading, setLoading] = useState(false);
@@ -27,74 +28,107 @@ function App() {
  async function sendRequest(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
-    const resp = (await invoke('send_request', { method, url })) as Response;
-    console.log('RESP', resp);
-    if (resp.body.includes('<head>')) {
-      resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
+    setError(null);
+
+    try {
+      const resp = (await invoke('send_request', { method, url })) as Response;
+      if (resp.body.includes('<head>')) {
+        resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
+      }
+      setLoading(false);
+      setResponseBody(resp);
+    } catch (err) {
+      setLoading(false);
+      setError(`${err}`);
    }
-    setLoading(false);
-    setResponseBody(resp);
  }

  const contentType = responseBody?.headers['content-type']?.split(';')[0] ?? 'text/plain';

  return (
    <>
-      <Helmet>
-        <body className="bg-background" />
-      </Helmet>
-      <div className="w-full h-7 bg-gray-50" data-tauri-drag-region="" />
-      <div className="p-12 h-full w-full overflow-auto">
-        <Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
-          <DropdownMenuRadio
-            onValueChange={setMethod}
-            value={method}
-            items={[
-              { label: 'GET', value: 'get' },
-              { label: 'PUT', value: 'put' },
-              { label: 'POST', value: 'post' },
-            ]}
-          >
-            <Button className="mr-1" disabled={loading} color="secondary">
-              {method.toUpperCase()}
-            </Button>
-          </DropdownMenuRadio>
-          <Input
-            hideLabel
-            name="url"
-            label="Enter URL"
-            className="mr-1 w-[20rem]"
-            onChange={(e) => setUrl(e.currentTarget.value)}
-            value={url}
-            placeholder="Enter a URL..."
-          />
-          <Button className="mr-1" type="submit" disabled={loading}>
-            {loading ? 'Sending...' : 'Send'}
-          </Button>
-        </Stacks>
-        {responseBody !== null && (
-          <>
-            <div className="pt-6">
-              {responseBody?.method.toUpperCase()}
-              &nbsp;&bull;&nbsp;
-              {responseBody?.status}
-              &nbsp;&bull;&nbsp;
-              {responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
-              {responseBody?.elapsed2}ms
-            </div>
-            <Grid cols={2} rows={2} gap={1}>
-              <Editor value={responseBody?.body} contentType={contentType} />
-              <div className="iframe-wrapper">
-                <iframe
-                  title="Response preview"
-                  srcDoc={responseBody.body}
-                  sandbox="allow-scripts allow-same-origin"
-                  className="h-full w-full rounded-lg"
+      <div className="grid grid-cols-[auto_1fr] h-full">
+        <nav className="w-52 bg-gray-50 h-full border-r border-gray-500/10">
+          <HStack as={WindowDragRegion} className="pl-24 px-1" items="center" justify="end">
+            <IconButton icon="archive" size="sm" />
+            <DropdownMenuRadio
+              onValueChange={null}
+              value={'get'}
+              items={[
+                { label: 'This is a cool one', value: 'get' },
+                { label: 'But this one is better', value: 'put' },
+                { label: 'This one is just alright', value: 'post' },
+              ]}
+            >
+              <IconButton icon="camera" size="sm" />
+            </DropdownMenuRadio>
+          </HStack>
+        </nav>
+        <div className="h-full w-full overflow-auto">
+          <HStack as={WindowDragRegion} items="center" className="pl-4 pr-1">
+            <h5>Hello, Friend!</h5>
+            <IconButton icon="gear" className="ml-auto" size="sm" />
+          </HStack>
+          <VStack className="p-4 max-w-[40rem] mx-auto" space={3}>
+            <HStack as="form" className="items-end" onSubmit={sendRequest} space={2}>
+              <DropdownMenuRadio
+                onValueChange={setMethod}
+                value={method}
+                items={[
+                  { label: 'GET', value: 'get' },
+                  { label: 'PUT', value: 'put' },
+                  { label: 'POST', value: 'post' },
+                ]}
+              >
+                <Button disabled={loading} color="secondary" forDropdown>
+                  {method.toUpperCase()}
+                </Button>
+              </DropdownMenuRadio>
+              <HStack>
+                <Input
+                  hideLabel
+                  name="url"
+                  label="Enter URL"
+                  className="rounded-r-none font-mono"
+                  onChange={(e) => setUrl(e.currentTarget.value)}
+                  value={url}
+                  placeholder="Enter a URL..."
                />
-              </div>
-            </Grid>
-          </>
-        )}
+                <Button
+                  className="mr-1 rounded-l-none -ml-3"
+                  color="primary"
+                  type="submit"
+                  disabled={loading}
+                >
+                  {loading ? 'Sending...' : 'Send'}
+                </Button>
+              </HStack>
+            </HStack>
+            {error && <div className="text-white bg-red-500 px-4 py-1 rounded">{error}</div>}
+            {responseBody !== null && (
+              <>
+                <div>
+                  {responseBody?.method.toUpperCase()}
+                  &nbsp;&bull;&nbsp;
+                  {responseBody?.status}
+                  &nbsp;&bull;&nbsp;
+                  {responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
+                  {responseBody?.elapsed2}ms
+                </div>
+                {contentType.includes('html') ? (
+                  <iframe
+                    title="Response preview"
+                    srcDoc={responseBody.body}
+                    sandbox="allow-scripts allow-same-origin"
+                    className="h-[70vh] w-full rounded-lg"
+                  />
+                ) : (
+                  <Editor value={responseBody?.body} contentType={contentType} />
+                )}
+              </>
+            )}
+          </VStack>
+        </div>
      </div>
    </>
  );
--- a/src-web/components/Button.tsx
+++ b/src-web/components/Button.tsx
@@ -1,12 +1,15 @@
 import classnames from 'classnames';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { Icon } from './Icon';

-type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  color?: 'primary' | 'secondary';
+  size?: 'sm' | 'md';
+  forDropdown?: boolean;
 };

-export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
-  { className, color = 'primary', ...props }: Props,
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, children, size = 'md', forDropdown, color, ...props }: ButtonProps,
  ref,
 ) {
  return (
@@ -14,11 +17,17 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
      ref={ref}
      className={classnames(
        className,
-        'h-10 px-5 rounded-lg text-white',
-        { 'bg-blue-500': color === 'primary' },
-        { 'bg-violet-500': color === 'secondary' },
+        'rounded-md text-white flex items-center',
+        { 'h-10 px-4': size === 'md' },
+        { 'h-8 px-3': size === 'sm' },
+        { 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]': color === undefined },
+        { 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80': color === 'primary' },
+        { 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80': color === 'secondary' },
      )}
      {...props}
-    />
+    >
+      {children}
+      {forDropdown && <Icon icon="triangle-down" className="ml-1 -mr-1" />}
+    </button>
  );
 });
--- a/src-web/components/Dropdown.tsx
+++ b/src-web/components/Dropdown.tsx
@@ -14,7 +14,7 @@ import { HotKey } from './HotKey';

 interface DropdownMenuRadioProps {
  children: ReactNode;
-  onValueChange: (value: string) => void;
+  onValueChange: ((value: string) => void) | null;
  value: string;
  items: {
    label: string;
@@ -33,7 +33,7 @@ export function DropdownMenuRadio({
      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
      <DropdownMenuPortal>
        <DropdownMenuContent>
-          <DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>
+          <DropdownMenuRadioGroup onValueChange={onValueChange ?? undefined} value={value}>
            {items.map((item) => (
              <DropdownMenuRadioItem key={item.value} value={item.value}>
                {item.label}
--- a/src-web/components/Editor/Editor.css
+++ b/src-web/components/Editor/Editor.css
@@ -1,6 +1,5 @@
 .cm-editor {
    width: 100%;
-    height: calc(100vh - 270px);
    overflow: hidden;
    border-radius: var(--border-radius-lg);
 }
@@ -11,20 +10,26 @@
 }

 .cm-editor .cm-line {
-    padding-left: 1.5em;
+    padding-left: 1em;
    padding-right: 1.5em;
    color: hsl(var(--color-gray-900));
 }

 .cm-editor .cm-gutters {
    background-color: transparent;
-    border-right: 1px solid hsl(var(--color-gray-100));
+    border-right: 0;
    color: hsl(var(--color-gray-300));
 }

+.cm-editor .cm-foldPlaceholder {
+    background-color: hsl(var(--color-gray-100));
+    border: 1px solid hsl(var(--color-gray-200));
+    padding: 0 0.3em;
+}
+
 .cm-editor .cm-activeLineGutter,
 .cm-editor .cm-activeLine {
-    background-color: hsl(var(--color-gray-100) / 0.5);
+    background-color: hsl(var(--color-gray-50));
 }

 .cm-editor * {
@@ -41,9 +46,9 @@
 }

 .cm-editor .cm-selectionBackground {
-    background-color: rgba(180, 180, 180, 0.3);
+    background-color: hsl(var(--color-gray-100));
 }

 .cm-editor.cm-focused .cm-selectionBackground {
-    background-color: rgba(180, 180, 180, 0.3);
+    background-color: hsl(var(--color-gray-100));
 }
--- a/src-web/components/Editor/Editor.tsx
+++ b/src-web/components/Editor/Editor.tsx
@@ -1,4 +1,4 @@
-import useCodeMirror, { EditorLanguage } from '../../hooks/useCodemirror';
+import useCodeMirror from '../../hooks/useCodemirror';
 import './Editor.css';

 interface Props {
--- a/src-web/components/Icon.tsx
+++ b/src-web/components/Icon.tsx
@@ -0,0 +1,34 @@
+import { ComponentType } from 'react';
+import {
+  ArchiveIcon,
+  CameraIcon,
+  ChevronDownIcon,
+  GearIcon,
+  HomeIcon,
+  TriangleDownIcon,
+} from '@radix-ui/react-icons';
+import classnames from 'classnames';
+
+type IconName = 'archive' | 'home' | 'camera' | 'gear' | 'triangle-down';
+
+const icons: Record<IconName, ComponentType> = {
+  archive: ArchiveIcon,
+  home: HomeIcon,
+  camera: CameraIcon,
+  gear: GearIcon,
+  'triangle-down': TriangleDownIcon,
+};
+
+export interface IconProps {
+  icon: IconName;
+  className?: string;
+}
+
+export function Icon({ icon, className }: IconProps) {
+  const Component = icons[icon];
+  return (
+    <div className={classnames(className, 'flex items-center')}>
+      <Component />
+    </div>
+  );
+}
--- a/src-web/components/IconButton.tsx
+++ b/src-web/components/IconButton.tsx
@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { Icon, IconProps } from './Icon';
+import { Button, ButtonProps } from './Button';
+
+type Props = ButtonProps & IconProps;
+
+export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+  { icon, ...props }: Props,
+  ref,
+) {
+  return (
+    <Button ref={ref} className="group" {...props}>
+      <Icon icon={icon} className="text-gray-700 group-hover:text-gray-900" />
+    </Button>
+  );
+});
--- a/src-web/components/Input.tsx
+++ b/src-web/components/Input.tsx
@@ -12,7 +12,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
 export function Input({ label, labelClassName, hideLabel, className, name, ...props }: Props) {
  const id = `input-${name}`;
  return (
-    <VStack>
+    <VStack className="w-full">
      <label
        htmlFor={name}
        className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
@@ -25,7 +25,7 @@ export function Input({ label, labelClassName, hideLabel, className, name, ...pr
        id={id}
        className={classnames(
          className,
-          'border-2 border-gray-100 bg-gray-50 h-10 pl-5 pr-2 rounded-lg text-sm focus:outline-none',
+          'border-2 border-gray-100 bg-gray-50 h-10 pl-3 pr-2 rounded-md text-sm focus:outline-none',
        )}
        {...props}
      />
--- a/src-web/components/Stacks.tsx
+++ b/src-web/components/Stacks.tsx
@@ -1,21 +1,30 @@
 import React, { Children, Fragment, HTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';

-const spaceClasses = {
-  '0': 'pt-0',
-  '1': 'pt-1',
+const spaceClassesX = {
+  0: 'pr-0',
+  1: 'pr-1',
+  2: 'pr-2',
+  3: 'pr-3',
+  4: 'pr-4',
 };

-type Space = keyof typeof spaceClasses;
+const spaceClassesY = {
+  0: 'pt-0',
+  1: 'pt-1',
+  2: 'pt-2',
+  3: 'pt-3',
+  4: 'pt-4',
+};

-interface HStackProps extends BoxProps {
-  space?: Space;
+interface HStackProps extends BaseStackProps {
+  space?: keyof typeof spaceClassesX;
  children: ReactNode;
 }

-export function Stacks({ className, space, children, ...props }: HStackProps) {
+export function HStack({ className, space, children, ...props }: HStackProps) {
  return (
-    <BaseStack className={classnames(className, 'flex-row')} {...props}>
+    <BaseStack className={classnames(className, 'w-full flex-row')} {...props}>
      {space
        ? Children.toArray(children)
            .filter(Boolean) // Remove null/false/undefined children
@@ -23,7 +32,7 @@ export function Stacks({ className, space, children, ...props }: HStackProps) {
              <Fragment key={i}>
                {i > 0 ? (
                  <div
-                    className={classnames(className, spaceClasses[space], 'pointer-events-none')}
+                    className={classnames(spaceClassesX[space], 'pointer-events-none')}
                    aria-hidden
                  />
                ) : null}
@@ -35,14 +44,14 @@ export function Stacks({ className, space, children, ...props }: HStackProps) {
  );
 }

-export interface VStackProps extends BoxProps {
-  space?: Space;
+export interface VStackProps extends BaseStackProps {
+  space?: keyof typeof spaceClassesY;
  children: ReactNode;
 }

 export function VStack({ className, space, children, ...props }: VStackProps) {
  return (
-    <BaseStack className={classnames(className, 'flex-col')} {...props}>
+    <BaseStack className={classnames(className, 'h-full flex-col')} {...props}>
      {space
        ? Children.toArray(children)
            .filter(Boolean) // Remove null/false/undefined children
@@ -50,7 +59,7 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
              <Fragment key={i}>
                {i > 0 ? (
                  <div
-                    className={classnames(spaceClasses[space], 'pointer-events-none')}
+                    className={classnames(spaceClassesY[space], 'pointer-events-none')}
                    aria-hidden
                  />
                ) : null}
@@ -62,11 +71,23 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
  );
 }

-interface BoxProps extends HTMLAttributes<HTMLElement> {
+interface BaseStackProps extends HTMLAttributes<HTMLElement> {
+  items?: 'start' | 'center';
+  justify?: 'start' | 'end';
  as?: React.ElementType;
 }

-function BaseStack({ className, as = 'div', ...props }: BoxProps) {
+function BaseStack({ className, items, justify, as = 'div', ...props }: BaseStackProps) {
  const Component = as;
-  return <Component className={classnames(className, 'flex flex-grow-0')} {...props} />;
+  return (
+    <Component
+      className={classnames(className, 'flex flex-grow-0', {
+        'items-center': items === 'center',
+        'items-start': items === 'start',
+        'justify-start': justify === 'start',
+        'justify-end': justify === 'end',
+      })}
+      {...props}
+    />
+  );
 }
--- a/src-web/components/WindowDragRegion.tsx
+++ b/src-web/components/WindowDragRegion.tsx
@@ -0,0 +1,14 @@
+import classnames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export function WindowDragRegion({ className, ...props }: Props) {
+  return (
+    <div
+      className={classnames(className, 'w-full h-11 border-b border-gray-500/10')}
+      data-tauri-drag-region=""
+      {...props}
+    />
+  );
+}
--- a/src-web/main.css
+++ b/src-web/main.css
@@ -14,6 +14,13 @@
    cursor: default;
 }

+html, body, #root {
+    width: 100%;
+    height: 100%;
+    background-color: hsl(var(--color-background));
+    overflow: hidden;
+}
+
@layer base {
    :root {
        /* Colors */
@@ -42,6 +49,17 @@
        --color-violet-800: 258 90% 20%;
        --color-violet-900: 258 90% 10%;

+        --color-red-50: 0 84% 95%;
+        --color-red-100: 0 84% 88%;
+        --color-red-200: 0 84% 76%;
+        --color-red-300: 0 84% 70%;
+        --color-red-400: 0 84% 65%;
+        --color-red-500: 0 84% 58%;
+        --color-red-600: 0 84% 43%;
+        --color-red-700: 0 84% 30%;
+        --color-red-800: 0 84% 20%;
+        --color-red-900: 0 84% 10%;
+
        --color-gray-50: 217 21% 95%;
        --color-gray-100: 217 21% 88%;
        --color-gray-200: 217 21% 76%;