Cleaner URL bar and some improvements

2026-03-11 21:11:48 +01:00 · 2023-02-22 15:58:04 -08:00
parent 784cb53ec6
commit a4dbfed712
8 changed files with 191 additions and 77 deletions
--- a/src-web/App.tsx
+++ b/src-web/App.tsx
@@ -1,12 +1,12 @@
-import { FormEvent, useState } from 'react';
+import { useState } from 'react';
 import { invoke } from '@tauri-apps/api/tauri';
 import Editor from './components/Editor/Editor';
-import { Input } from './components/Input';
 import { HStack, VStack } from './components/Stacks';
-import { Button } from './components/Button';
 import { DropdownMenuRadio } from './components/Dropdown';
 import { WindowDragRegion } from './components/WindowDragRegion';
 import { IconButton } from './components/IconButton';
+import { Sidebar } from './components/Sidebar';
+import { UrlBar } from './components/UrlBar';

 interface Response {
  url: string;
@@ -21,24 +21,22 @@ interface Response {
 function App() {
  const [error, setError] = useState<string | null>(null);
  const [response, setResponse] = useState<Response | null>(null);
-  const [url, setUrl] = useState('https://go-server.schier.dev/debug');
-  const [loading, setLoading] = useState(false);
-  const [method, setMethod] = useState<string>('get');
+  const [url, setUrl] = useState<string>('https://go-server.schier.dev/debug');
+  const [method, setMethod] = useState<{ label: string; value: string }>({
+    label: 'GET',
+    value: 'GET',
+  });

-  async function sendRequest(e: FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setLoading(true);
+  async function sendRequest() {
    setError(null);

    try {
-      const resp = (await invoke('send_request', { method, url })) as Response;
+      const resp = (await invoke('send_request', { method: method.value, url })) as Response;
      if (resp.body.includes('<head>')) {
        resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
      }
-      setLoading(false);
      setResponse(resp);
    } catch (err) {
-      setLoading(false);
      setError(`${err}`);
    }
  }
@@ -48,9 +46,9 @@ function App() {
  return (
    <>
      <div className="grid grid-cols-[auto_1fr] h-full">
-        <nav className="w-52 bg-gray-50 h-full border-r border-gray-500/10">
+        <Sidebar>
          <HStack as={WindowDragRegion} className="pl-24 px-1" items="center" justify="end">
-            <IconButton icon="archive" size="sm" />
+            <IconButton icon="archive" />
            <DropdownMenuRadio
              onValueChange={null}
              value={'get'}
@@ -60,51 +58,23 @@ function App() {
                { label: 'This one is just alright', value: 'post' },
              ]}
            >
-              <IconButton icon="camera" size="sm" />
+              <IconButton icon="camera" />
            </DropdownMenuRadio>
          </HStack>
-        </nav>
+        </Sidebar>
        <VStack className="w-full">
          <HStack as={WindowDragRegion} items="center" className="pl-4 pr-1">
            <h5 className="pointer-events-none text-gray-800">Send Request</h5>
-            <IconButton icon="gear" className="ml-auto" size="sm" />
+            <IconButton icon="gear" className="ml-auto" />
          </HStack>
-          <VStack className="p-4 max-w-[35rem] mx-auto" space={3}>
-            <HStack as="form" className="items-end" onSubmit={sendRequest} space={2}>
-              <DropdownMenuRadio
-                onValueChange={setMethod}
-                value={method}
-                label="HTTP 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..."
-                />
-                <Button
-                  className="mr-1 rounded-l-none -ml-3"
-                  color="primary"
-                  type="submit"
-                  disabled={loading}
-                >
-                  {loading ? 'Sending...' : 'Send'}
-                </Button>
-              </HStack>
-            </HStack>
+          <VStack className="p-4 max-w-[50rem] mx-auto" space={3}>
+            <UrlBar
+              method={method}
+              url={url}
+              onMethodChange={setMethod}
+              onUrlChange={setUrl}
+              sendRequest={sendRequest}
+            />
            {error && <div className="text-white bg-red-500 px-4 py-1 rounded">{error}</div>}
            {response !== null && (
              <>
--- a/src-web/components/Button.tsx
+++ b/src-web/components/Button.tsx
@@ -5,11 +5,20 @@ import { Icon } from './Icon';
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  color?: 'primary' | 'secondary';
  size?: 'sm' | 'md';
+  justify?: 'start' | 'center';
  forDropdown?: boolean;
 };

 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { className, children, size = 'md', forDropdown, color, ...props }: ButtonProps,
+  {
+    className,
+    justify = 'center',
+    children,
+    size = 'md',
+    forDropdown,
+    color,
+    ...props
+  }: ButtonProps,
  ref,
 ) {
  return (
@@ -17,12 +26,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
      ref={ref}
      className={classnames(
        className,
-        'rounded-md text-white flex items-center',
+        'rounded-md flex items-center',
+        justify === 'start' && 'justify-start',
+        justify === 'center' && 'justify-center',
        size === 'md' && 'h-10 px-4',
-        size === 'sm' && 'h-8 px-3',
-        color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]',
-        color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80',
-        color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80',
+        size === 'sm' && 'h-8 px-3 text-sm',
+        color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15] text-gray-700',
+        color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80 text-white',
+        color === 'secondary' &&
+          'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80 text-white',
      )}
      {...props}
    >
--- 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) | null;
+  onValueChange: ((v: { label: string; value: string }) => void) | null;
  value: string;
  label?: string;
  items: {
@@ -30,13 +30,20 @@ export function DropdownMenuRadio({
  label,
  value,
 }: DropdownMenuRadioProps) {
+  const handleChange = (value: string) => {
+    const item = items.find((item) => item.value === value);
+    if (item && onValueChange) {
+      onValueChange(item);
+    }
+  };
+
  return (
    <DropdownMenu.Root>
      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
      <DropdownMenuPortal>
        <DropdownMenuContent>
          {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
-          <DropdownMenuRadioGroup onValueChange={onValueChange ?? undefined} value={value}>
+          <DropdownMenuRadioGroup onValueChange={handleChange} value={value}>
            {items.map((item) => (
              <DropdownMenuRadioItem key={item.value} value={item.value}>
                {item.label}
--- a/src-web/components/Icon.tsx
+++ b/src-web/components/Icon.tsx
@@ -1,34 +1,39 @@
-import { ComponentType } from 'react';
 import {
  ArchiveIcon,
  CameraIcon,
-  ChevronDownIcon,
  GearIcon,
  HomeIcon,
+  PaperPlaneIcon,
  TriangleDownIcon,
+  UpdateIcon,
 } from '@radix-ui/react-icons';
 import classnames from 'classnames';
+import { NamedExoticComponent } from 'react';

-type IconName = 'archive' | 'home' | 'camera' | 'gear' | 'triangle-down';
+type IconName = 'archive' | 'home' | 'camera' | 'gear' | 'triangle-down' | 'paper-plane' | 'update';

-const icons: Record<IconName, ComponentType> = {
+const icons: Record<IconName, NamedExoticComponent<{ className: string }>> = {
+  'paper-plane': PaperPlaneIcon,
+  'triangle-down': TriangleDownIcon,
  archive: ArchiveIcon,
-  home: HomeIcon,
  camera: CameraIcon,
  gear: GearIcon,
-  'triangle-down': TriangleDownIcon,
+  home: HomeIcon,
+  update: UpdateIcon,
 };

 export interface IconProps {
  icon: IconName;
  className?: string;
+  size?: 'md';
+  spin?: boolean;
 }

-export function Icon({ icon, className }: IconProps) {
+export function Icon({ icon, spin, size = 'md', className }: IconProps) {
  const Component = icons[icon];
  return (
-    <div className={classnames(className, 'flex items-center')}>
-      <Component />
-    </div>
+    <Component
+      className={classnames(className, size === 'md' && 'h-4 w-4', spin && 'animate-spin')}
+    />
  );
 }
--- a/src-web/components/IconButton.tsx
+++ b/src-web/components/IconButton.tsx
@@ -2,15 +2,15 @@ import { forwardRef } from 'react';
 import { Icon, IconProps } from './Icon';
 import { Button, ButtonProps } from './Button';

-type Props = ButtonProps & IconProps;
+type Props = Omit<IconProps, 'size'> & ButtonProps;

 export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
-  { icon, ...props }: Props,
+  { icon, spin, ...props }: Props,
  ref,
 ) {
  return (
    <Button ref={ref} className="group" {...props}>
-      <Icon icon={icon} className="text-gray-700 group-hover:text-gray-900" />
+      <Icon icon={icon} spin={spin} className="text-gray-700 group-hover:text-gray-900" />
    </Button>
  );
 });
--- a/src-web/components/Input.tsx
+++ b/src-web/components/Input.tsx
@@ -7,12 +7,21 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
  label: string;
  hideLabel?: boolean;
  labelClassName?: string;
+  containerClassName?: string;
 }

-export function Input({ label, labelClassName, hideLabel, className, name, ...props }: Props) {
+export function Input({
+  label,
+  containerClassName,
+  labelClassName,
+  hideLabel,
+  className,
+  name,
+  ...props
+}: Props) {
  const id = `input-${name}`;
  return (
-    <VStack className="w-full">
+    <VStack className={classnames(containerClassName, 'w-full')}>
      <label
        htmlFor={name}
        className={classnames(
@@ -27,7 +36,7 @@ export function Input({ label, labelClassName, hideLabel, className, name, ...pr
        id={id}
        className={classnames(
          className,
-          'w-0 min-w-[100%] border-2 border-gray-100 bg-gray-50 h-10 pl-3 pr-2 rounded-md text-sm focus:outline-none',
+          'w-0 min-w-[100%] bg-gray-50 h-10 pl-3 pr-2 rounded-md text-sm focus:outline-none',
        )}
        {...props}
      />
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { HStack } from './Stacks';
+import { WindowDragRegion } from './WindowDragRegion';
+import { IconButton } from './IconButton';
+import { DropdownMenuRadio } from './Dropdown';
+import { Button } from './Button';
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+export function Sidebar({ className, ...props }: Props) {
+  return (
+    <div
+      className={classnames(className, 'w-52 bg-gray-50 h-full border-r border-gray-500/10')}
+      {...props}
+    >
+      <HStack as={WindowDragRegion} className="pl-24 px-1" items="center" justify="end">
+        <IconButton icon="archive" />
+        <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" />
+        </DropdownMenuRadio>
+      </HStack>
+      <ul className="mx-2 py-2">
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
+          <li key={i}>
+            <Button className="w-full" size="sm" justify="start">
+              Hello {i}
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
--- a/src-web/components/UrlBar.tsx
+++ b/src-web/components/UrlBar.tsx
@@ -0,0 +1,69 @@
+import { HStack } from './Stacks';
+import { DropdownMenuRadio } from './Dropdown';
+import { Button } from './Button';
+import { Input } from './Input';
+import { FormEvent, useState } from 'react';
+import { IconButton } from './IconButton';
+
+interface Props {
+  sendRequest: () => Promise<void>;
+  method: { label: string; value: string };
+  url: string;
+  onMethodChange: (method: { label: string; value: string }) => void;
+  onUrlChange: (url: string) => void;
+}
+
+export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }: Props) {
+  const [loading, setLoading] = useState(false);
+
+  const handleSendRequest = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (loading) return;
+    setLoading(true);
+    try {
+      await sendRequest();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <HStack as="form" className="items-end" onSubmit={handleSendRequest} space={2}>
+      <div className="w-full relative">
+        <div className="flex items-center absolute left-0 top-0 bottom-0">
+          <DropdownMenuRadio
+            onValueChange={onMethodChange}
+            value={method.value}
+            items={[
+              { label: 'GET', value: 'GET' },
+              { label: 'PUT', value: 'PUT' },
+              { label: 'PST', value: 'POST' },
+            ]}
+          >
+            <Button disabled={loading} forDropdown size="sm" className="ml-1 w-22" justify="start">
+              {method.label}
+            </Button>
+          </DropdownMenuRadio>
+        </div>
+        <Input
+          hideLabel
+          name="url"
+          label="Enter URL"
+          className="font-mono pr-12 !pl-20"
+          onChange={(e) => onUrlChange(e.currentTarget.value)}
+          value={url}
+          placeholder="Enter a URL..."
+        />
+        <div className="flex items-center absolute right-0 top-0 bottom-0">
+          <IconButton
+            icon={loading ? 'update' : 'paper-plane'}
+            spin={loading}
+            disabled={loading}
+            size="sm"
+            className="w-10 mr-1"
+          />
+        </div>
+      </div>
+    </HStack>
+  );
+}