Create new workspace, and more optimizations

index.html

@@ -5,7 +5,7 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Yaak App</title>
-  <!--    <script src="http://localhost:8097"></script>-->
+<!--  <script src="http://localhost:8097"></script>-->
   <style>
       body {
           background-color: white;

src-tauri/src/main.rs

@@ -226,6 +226,23 @@ async fn set_key_value(
     Ok(())
 }
 
+#[tauri::command]
+async fn create_workspace(
+    name: &str,
+    app_handle: AppHandle<Wry>,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<String, String> {
+    let pool = &*db_instance.lock().await;
+    let created_workspace =
+        models::create_workspace(name, "", pool).await.expect("Failed to create workspace");
+
+    app_handle
+        .emit_all("updated_workspace", &created_workspace)
+        .unwrap();
+
+    Ok(created_workspace.id)
+}
+
 #[tauri::command]
 async fn create_request(
     workspace_id: &str,
@@ -478,6 +495,7 @@ fn main() {
             requests,
             send_request,
             create_request,
+            create_workspace,
             update_request,
             delete_request,
             responses,

src-web/components/App.tsx

@@ -8,9 +8,10 @@ import { matchPath } from 'react-router-dom';
 import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { requestsQueryKey } from '../hooks/useRequests';
 import { responsesQueryKey } from '../hooks/useResponses';
+import { workspacesQueryKey } from '../hooks/useWorkspaces';
 import { DEFAULT_FONT_SIZE } from '../lib/constants';
 import { extractKeyValue } from '../lib/keyValueStore';
-import type { HttpRequest, HttpResponse, KeyValue } from '../lib/models';
+import type { HttpRequest, HttpResponse, KeyValue, Workspace } from '../lib/models';
 import { convertDates } from '../lib/models';
 import { AppRouter, WORKSPACE_REQUEST_PATH } from './AppRouter';
 
@@ -70,6 +71,25 @@ await listen('updated_response', ({ payload: response }: { payload: HttpResponse
   );
 });
 
+await listen('updated_workspace', ({ payload: workspace }: { payload: Workspace }) => {
+  queryClient.setQueryData(workspacesQueryKey(), (workspaces: Workspace[] = []) => {
+    const newWorkspaces = [];
+    let found = false;
+    for (const w of workspaces) {
+      if (w.id === workspace.id) {
+        found = true;
+        newWorkspaces.push(convertDates(workspace));
+      } else {
+        newWorkspaces.push(w);
+      }
+    }
+    if (!found) {
+      newWorkspaces.push(convertDates(workspace));
+    }
+    return newWorkspaces;
+  });
+});
+
 await listen('send_request', async () => {
   const params = matchPath(WORKSPACE_REQUEST_PATH, window.location.pathname);
   const requestId = params?.params.requestId;

src-web/components/RequestMethodDropdown.tsx

@@ -0,0 +1,35 @@
+import { memo, useCallback } from 'react';
+import { Button } from './core/Button';
+import type { DropdownMenuRadioItem } from './core/Dropdown';
+import { DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
+
+type Props = {
+  method: string;
+  onChange: (method: string) => void;
+};
+
+const items = [
+  { label: 'GET', value: 'GET' },
+  { label: 'PUT', value: 'PUT' },
+  { label: 'POST', value: 'POST' },
+  { label: 'PATCH', value: 'PATCH' },
+  { label: 'DELETE', value: 'DELETE' },
+  { label: 'OPTIONS', value: 'OPTIONS' },
+  { label: 'HEAD', value: 'HEAD' },
+];
+
+export const RequestMethodDropdown = memo(function RequestMethodDropdown({
+  method,
+  onChange,
+}: Props) {
+  const handleChange = useCallback((i: DropdownMenuRadioItem) => onChange(i.value), [onChange]);
+  return (
+    <DropdownMenuRadio onValueChange={handleChange} value={method.toUpperCase()} items={items}>
+      <DropdownMenuTrigger>
+        <Button type="button" size="sm" className="mx-0.5" justify="start">
+          {method.toUpperCase()}
+        </Button>
+      </DropdownMenuTrigger>
+    </DropdownMenuRadio>
+  );
+});

src-web/components/RequestPane.tsx

@@ -1,9 +1,7 @@
 import classnames from 'classnames';
 import { useCallback, useMemo } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
 import { useKeyValue } from '../hooks/useKeyValue';
-import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
 import type { HttpHeader } from '../lib/models';
@@ -23,8 +21,6 @@ export function RequestPane({ fullHeight, className }: Props) {
   const activeRequest = useActiveRequest();
   const activeRequestId = activeRequest?.id ?? null;
   const updateRequest = useUpdateRequest(activeRequestId);
-  const sendRequest = useSendRequest(activeRequestId);
-  const responseLoading = useIsResponseLoading();
   const activeTab = useKeyValue<string>({
     key: ['active_request_body_tab', activeRequestId ?? 'n/a'],
     initialValue: 'body',
@@ -49,11 +45,9 @@ export function RequestPane({ fullHeight, className }: Props) {
       { value: 'headers', label: 'Headers' },
       { value: 'auth', label: 'Auth' },
     ],
-    [],
+    [activeRequest?.bodyType],
   );
 
-  const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []);
-  const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []);
   const handleBodyChange = useCallback((body: string) => updateRequest.mutate({ body }), []);
   const handleHeadersChange = useCallback(
     (headers: HttpHeader[]) => updateRequest.mutate({ headers }),
@@ -64,15 +58,7 @@ export function RequestPane({ fullHeight, className }: Props) {
 
   return (
     <div className={classnames(className, 'p-2 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
-      <UrlBar
-        key={activeRequest.id}
-        method={activeRequest.method}
-        url={activeRequest.url}
-        onMethodChange={handleMethodChange}
-        onUrlChange={handleUrlChange}
-        sendRequest={sendRequest}
-        loading={responseLoading}
-      />
+      <UrlBar request={activeRequest} />
       <Tabs
         value={activeTab.value}
         onChangeValue={activeTab.set}

src-web/components/ResponsePane.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import { memo, useEffect, useMemo, useState } from 'react';
+import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useDeleteResponses } from '../hooks/useDeleteResponses';
 import { useDeleteResponse } from '../hooks/useResponseDelete';
 import { useResponses } from '../hooks/useResponses';
@@ -21,7 +22,8 @@ interface Props {
 
 export const ResponsePane = memo(function ResponsePane({ className }: Props) {
   const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
-  const responses = useResponses();
+  const activeRequestId = useActiveRequestId();
+  const responses = useResponses(activeRequestId);
   const activeResponse: HttpResponse | null = activeResponseId
     ? responses.find((r) => r.id === activeResponseId) ?? null
     : responses[responses.length - 1] ?? null;

src-web/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import type { MouseEvent as ReactMouseEvent } from 'react';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -7,7 +8,6 @@ import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { useRequests } from '../hooks/useRequests';
-import { useTheme } from '../hooks/useTheme';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { clamp } from '../lib/clamp';
 import type { HttpRequest } from '../lib/models';
@@ -17,6 +17,7 @@ import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { HStack, VStack } from './core/Stacks';
 import { WindowDragRegion } from './core/WindowDragRegion';
+import { ToggleThemeButton } from './ToggleThemeButton';
 
 interface Props {
   className?: string;
@@ -45,7 +46,6 @@ export function Container({ className }: Props) {
   const requests = useRequests();
   const activeRequest = useActiveRequest();
   const createRequest = useCreateRequest({ navigateAfter: true });
-  const { appearance, toggleAppearance } = useTheme();
 
   const moveState = useRef<{ move: (e: MouseEvent) => void; up: () => void } | null>(null);
   const unsub = () => {
@@ -59,7 +59,7 @@ export function Container({ className }: Props) {
     width.set(INITIAL_WIDTH);
   }, []);
 
-  const handleResizeStart = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+  const handleResizeStart = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
     unsub();
     const mouseStartX = e.clientX;
     const startWidth = width.value;
@@ -77,7 +77,9 @@ export function Container({ className }: Props) {
     document.documentElement.addEventListener('mouseup', moveState.current.up);
     setIsRisizing(true);
   }, []);
+
   const sidebarStyles = useMemo(() => ({ width: width.value }), [width.value]);
+  const sidebarWidth = width.value - 1; // Minus 1 for the border
 
   return (
     <div
@@ -115,17 +117,13 @@ export function Container({ className }: Props) {
       </HStack>
       <VStack as="ul" className="py-3 overflow-auto h-full" space={1}>
         <SidebarItems
-          sidebarWidth={sidebarRef.current?.clientWidth ?? 0}
+          sidebarWidth={sidebarWidth}
           activeRequestId={activeRequest?.id}
           requests={requests}
         />
       </VStack>
       <HStack className="mx-1 pb-1" alignItems="center" justifyContent="end">
-        <IconButton
-          title={appearance === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
-          icon={appearance === 'dark' ? 'moon' : 'sun'}
-          onClick={toggleAppearance}
-        />
+        <ToggleThemeButton />
       </HStack>
     </div>
   );

src-web/components/ToggleThemeButton.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTheme } from '../hooks/useTheme';
+import { toggleAppearance } from '../lib/theme/window';
+import { IconButton } from './core/IconButton';
+
+export function ToggleThemeButton() {
+  const { appearance, toggleAppearance } = useTheme();
+  return (
+    <IconButton
+      title={appearance === 'dark' ? 'Enable light mode' : 'Enable dark mode'}
+      icon={appearance === 'dark' ? 'moon' : 'sun'}
+      onClick={toggleAppearance}
+    />
+  );
+}

src-web/components/UrlBar.tsx

@@ -1,26 +1,22 @@
-import { useCallback } from 'react';
-import { Button } from './core/Button';
-import { DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
+import { memo, useCallback } from 'react';
+import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
+import { useSendRequest } from '../hooks/useSendRequest';
+import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import type { HttpRequest } from '../lib/models';
 import { IconButton } from './core/IconButton';
 import { Input } from './core/Input';
-import type { TabItem } from './core/Tabs/Tabs';
+import { RequestMethodDropdown } from './RequestMethodDropdown';
 
 interface Props {
-  sendRequest: () => void;
-  loading: boolean;
-  method: string;
-  url: string;
-  onMethodChange: (method: string) => void;
-  onUrlChange: (url: string) => void;
+  request: HttpRequest;
 }
 
-export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChange, url }: Props) {
-  const handleMethodChange = useCallback(
-    (v: TabItem) => {
-      onMethodChange(v.value);
-    },
-    [onMethodChange],
-  );
+export const UrlBar = memo(function UrlBar({ request }: Props) {
+  const sendRequest = useSendRequest(request.id);
+  const updateRequest = useUpdateRequest(request.id);
+  const handleMethodChange = useCallback((method: string) => updateRequest.mutate({ method }), []);
+  const handleUrlChange = useCallback((url: string) => updateRequest.mutate({ url }), []);
+  const loading = useIsResponseLoading(request.id);
   return (
     <form
       onSubmit={async (e) => {
@@ -40,30 +36,10 @@ export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChan
         name="url"
         label="Enter URL"
         containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
-        onChange={onUrlChange}
-        defaultValue={url}
+        onChange={handleUrlChange}
+        defaultValue={request.url}
         placeholder="Enter a URL..."
-        leftSlot={
-          <DropdownMenuRadio
-            onValueChange={handleMethodChange}
-            value={method.toUpperCase()}
-            items={[
-              { label: 'GET', value: 'GET' },
-              { label: 'PUT', value: 'PUT' },
-              { label: 'POST', value: 'POST' },
-              { label: 'PATCH', value: 'PATCH' },
-              { label: 'DELETE', value: 'DELETE' },
-              { label: 'OPTIONS', value: 'OPTIONS' },
-              { label: 'HEAD', value: 'HEAD' },
-            ]}
-          >
-            <DropdownMenuTrigger>
-              <Button type="button" disabled={loading} size="sm" className="mx-0.5" justify="start">
-                {method.toUpperCase()}
-              </Button>
-            </DropdownMenuTrigger>
-          </DropdownMenuRadio>
-        }
+        leftSlot={<RequestMethodDropdown method={request.method} onChange={handleMethodChange} />}
         rightSlot={
           <IconButton
             title="Send Request"
@@ -78,4 +54,4 @@ export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChan
       />
     </form>
   );
-}
+});

src-web/components/Workspace.tsx

@@ -1,3 +1,4 @@
+import { DropdownMenuSeparator } from '@radix-ui/react-dropdown-menu';
 import classnames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 import { useWindowSize } from 'react-use';
@@ -14,6 +15,7 @@ import { WindowDragRegion } from './core/WindowDragRegion';
 import { RequestPane } from './RequestPane';
 import { ResponsePane } from './ResponsePane';
 import { Sidebar } from './Sidebar';
+import { WorkspaceDropdown } from './WorkspaceDropdown';
 
 export default function Workspace() {
   const navigate = useNavigate();
@@ -38,19 +40,7 @@ export default function Workspace() {
           alignItems="center"
         >
           <div className="flex-1 -ml-2">
-            <DropdownMenuRadio
-              onValueChange={(v) => {
-                navigate(`/workspaces/${v.value}`);
-              }}
-              value={activeWorkspace?.id}
-              items={workspaces.map((w) => ({ label: w.name, value: w.id }))}
-            >
-              <DropdownMenuTrigger>
-                <Button size="sm" className="!px-2 truncate" forDropdown>
-                  {activeWorkspace?.name ?? 'Unknown'}
-                </Button>
-              </DropdownMenuTrigger>
-            </DropdownMenuRadio>
+            <WorkspaceDropdown />
           </div>
           <div className="flex-[2] text-center text-gray-700 text-sm truncate">
             {activeRequest?.name}

src-web/components/WorkspaceDropdown.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
+import { useWorkspaces } from '../hooks/useWorkspaces';
+import { Button } from './core/Button';
+import type { DropdownItem } from './core/Dropdown';
+import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
+import { Icon } from './core/Icon';
+
+export function WorkspaceDropdown() {
+  const navigate = useNavigate();
+  const workspaces = useWorkspaces();
+  const activeWorkspace = useActiveWorkspace();
+  const createWorkspace = useCreateWorkspace({ navigateAfter: true });
+
+  const items: DropdownItem[] = useMemo(() => {
+    const workspaceItems = workspaces.map((w) => ({
+      label: w.name,
+      value: w.id,
+      leftSlot: activeWorkspace?.id === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+      onSelect: () => navigate(`/workspaces/${w.id}`),
+    }));
+
+    return [
+      ...workspaceItems,
+      '-----',
+      {
+        label: 'New Workspace',
+        value: 'new',
+        leftSlot: <Icon icon="plus" />,
+        onSelect: () => createWorkspace.mutate({ name: 'New Workspace' }),
+      },
+    ];
+  }, [workspaces, activeWorkspace]);
+
+  return (
+    <Dropdown items={items}>
+      <DropdownMenuTrigger>
+        <Button size="sm" className="!px-2 truncate" forDropdown>
+          {activeWorkspace?.name ?? 'Unknown'}
+        </Button>
+      </DropdownMenuTrigger>
+    </Dropdown>
+  );
+}

src-web/components/core/Button.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, memo, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { Icon } from './Icon';
 
@@ -26,7 +26,7 @@ export type ButtonProps = HTMLAttributes<HTMLElement> & {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Button = forwardRef<any, ButtonProps>(function Button(
+const _Button = forwardRef<any, ButtonProps>(function Button(
   {
     to,
     className,
@@ -71,3 +71,5 @@ export const Button = forwardRef<any, ButtonProps>(function Button(
     );
   }
 });
+
+export const Button = memo(_Button);

src-web/components/core/Dropdown.tsx

@@ -9,6 +9,7 @@ import {
   useCallback,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useState,
 } from 'react';
 
@@ -61,17 +62,18 @@ export const DropdownMenuRadio = memo(function DropdownMenuRadio({
   );
 });
 
+export type DropdownItem =
+  | {
+      label: string;
+      onSelect?: () => void;
+      disabled?: boolean;
+      leftSlot?: ReactNode;
+    }
+  | '-----';
+
 export interface DropdownProps {
   children: ReactElement<typeof DropdownMenuTrigger>;
-  items: (
-    | {
-        label: string;
-        onSelect?: () => void;
-        disabled?: boolean;
-        leftSlot?: ReactNode;
-      }
-    | '-----'
-  )[];
+  items: DropdownItem[];
 }
 
 export const Dropdown = memo(function Dropdown({ children, items }: DropdownProps) {
@@ -106,19 +108,21 @@ interface DropdownMenuPortalProps {
   children: ReactNode;
 }
 
-function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
+const DropdownMenuPortal = memo(function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
   const container = document.querySelector<Element>('#radix-portal');
   if (container === null) return null;
+  const initial = useMemo(() => ({ opacity: 0 }), []);
+  const animate = useMemo(() => ({ opacity: 1 }), []);
   return (
     <D.Portal>
-      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+      <motion.div initial={initial} animate={animate}>
         {children}
       </motion.div>
     </D.Portal>
   );
-}
+});
 
-const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
+const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProps>(
   function DropdownMenuContent(
     { className, children, ...props }: D.DropdownMenuContentProps,
     ref: ForwardedRef<HTMLDivElement>,
@@ -127,33 +131,34 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
     const [divRef, setDivRef] = useState<HTMLDivElement | null>(null);
     useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => divRef);
 
-    const initDivRef = (ref: HTMLDivElement | null) => {
+    const initDivRef = useCallback((ref: HTMLDivElement | null) => {
       setDivRef(ref);
-    };
+    }, []);
 
     // Calculate the max height so we can scroll
     useLayoutEffect(() => {
       if (divRef === null) return;
       // Needs to be in a setTimeout because the ref is not positioned yet
       // TODO: Make this better?
-      setTimeout(() => {
+      const t = setTimeout(() => {
         const windowBox = document.documentElement.getBoundingClientRect();
         const menuBox = divRef.getBoundingClientRect();
         const styles = { maxHeight: windowBox.height - menuBox.top - 5 - 45 };
         setStyles(styles);
       });
+      return () => clearTimeout(t);
     }, [divRef]);
 
     return (
       <D.Content
         ref={initDivRef}
         align="start"
+        style={styles}
         className={classnames(
           className,
           'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200',
           'overflow-auto m-1',
         )}
-        style={styles}
         {...props}
       >
         {children}
@@ -161,10 +166,11 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
     );
   },
 );
+const DropdownMenuContent = memo(_DropdownMenuContent);
 
 type DropdownMenuItemProps = D.DropdownMenuItemProps & ItemInnerProps;
 
-function DropdownMenuItem({
+const DropdownMenuItem = memo(function DropdownMenuItem({
   leftSlot,
   rightSlot,
   className,
@@ -184,7 +190,7 @@ function DropdownMenuItem({
       </ItemInner>
     </D.Item>
   );
-}
+});
 
 // type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
 //
@@ -230,12 +236,12 @@ const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
   return (
     <D.RadioItem asChild {...props}>
       <ItemInner
+        rightSlot={rightSlot}
         leftSlot={
           <D.ItemIndicator>
             <CheckIcon />
           </D.ItemIndicator>
         }
-        rightSlot={rightSlot}
       >
         {children}
       </ItemInner>
@@ -260,7 +266,11 @@ const DropdownMenuRadioItem = memo(function DropdownMenuRadioItem({
 //   },
 // );
 
-function DropdownMenuLabel({ className, children, ...props }: D.DropdownMenuLabelProps) {
+const DropdownMenuLabel = memo(function DropdownMenuLabel({
+  className,
+  children,
+  ...props
+}: D.DropdownMenuLabelProps) {
   return (
     <D.Label asChild {...props}>
       <ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
@@ -268,16 +278,19 @@ function DropdownMenuLabel({ className, children, ...props }: D.DropdownMenuLabe
       </ItemInner>
     </D.Label>
   );
-}
+});
 
-function DropdownMenuSeparator({ className, ...props }: D.DropdownMenuSeparatorProps) {
+const DropdownMenuSeparator = memo(function DropdownMenuSeparator({
+  className,
+  ...props
+}: D.DropdownMenuSeparatorProps) {
   return (
     <D.Separator
       className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
       {...props}
     />
   );
-}
+});
 
 type DropdownMenuTriggerProps = D.DropdownMenuTriggerProps & {
   children: ReactNode;
@@ -304,7 +317,7 @@ interface ItemInnerProps {
   className?: string;
 }
 
-const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
+const _ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
   { leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
   ref,
 ) {
@@ -324,3 +337,5 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
     </div>
   );
 });
+
+const ItemInner = memo(_ItemInner);

src-web/components/core/IconButton.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
-import { forwardRef } from 'react';
+import type { MouseEvent } from 'react';
+import { forwardRef, memo, useCallback } from 'react';
 import { useTimedBoolean } from '../../hooks/useTimedBoolean';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
@@ -14,7 +15,7 @@ type Props = IconProps &
     title: string;
   };
 
-export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+const _IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
   {
     showConfirm,
     icon,
@@ -30,16 +31,20 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
   ref,
 ) {
   const [confirmed, setConfirmed] = useTimedBoolean();
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLElement>) => {
+      if (showConfirm) setConfirmed();
+      onClick?.(e);
+    },
+    [onClick],
+  );
   return (
     <Button
       ref={ref}
       aria-hidden={icon === 'empty'}
       disabled={icon === 'empty'}
       tabIndex={tabIndex ?? icon === 'empty' ? -1 : undefined}
-      onClick={(e) => {
-        if (showConfirm) setConfirmed();
-        onClick?.(e);
-      }}
+      onClick={handleClick}
       className={classnames(
         className,
         'text-gray-700 hover:text-gray-1000',
@@ -63,3 +68,5 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     </Button>
   );
 });
+
+export const IconButton = memo(_IconButton);

src-web/components/core/PairEditor.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import type { GenericCompletionOption } from './Editor/genericCompletion';
 import { IconButton } from './IconButton';
 import { Input } from './Input';
@@ -21,7 +21,11 @@ interface PairContainer {
   id: string;
 }
 
-export function PairEditor({ pairs: originalPairs, className, onChange }: Props) {
+export const PairEditor = memo(function PairEditor({
+  pairs: originalPairs,
+  className,
+  onChange,
+}: Props) {
   const newPairContainer = (): PairContainer => {
     return { pair: { name: '', value: '' }, id: Math.random().toString() };
   };
@@ -79,9 +83,9 @@ export function PairEditor({ pairs: originalPairs, className, onChange }: Props)
       </VStack>
     </div>
   );
-}
+});
 
-function FormRow({
+const FormRow = memo(function FormRow({
   pairContainer,
   onChange,
   onDelete,
@@ -146,4 +150,4 @@ function FormRow({
       )}
     </div>
   );
-}
+});

src-web/components/core/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 import * as T from '@radix-ui/react-tabs';
 import classnames from 'classnames';
+import { memo } from 'react';
 import type { ReactNode } from 'react';
 import { Button } from '../Button';
 import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
@@ -29,7 +30,7 @@ interface Props {
   children: ReactNode;
 }
 
-export function Tabs({
+export const Tabs = memo(function Tabs({
   value,
   onChangeValue,
   label,
@@ -115,7 +116,7 @@ export function Tabs({
       {children}
     </T.Root>
   );
-}
+});
 
 interface TabContentProps {
   value: string;
@@ -123,7 +124,11 @@ interface TabContentProps {
   className?: string;
 }
 
-export function TabContent({ value, children, className }: TabContentProps) {
+export const TabContent = memo(function TabContent({
+  value,
+  children,
+  className,
+}: TabContentProps) {
   return (
     <T.Content
       forceMount
@@ -133,4 +138,4 @@ export function TabContent({ value, children, className }: TabContentProps) {
       {children}
     </T.Content>
   );
-}
+});

src-web/hooks/useCreateWorkspace.ts

@@ -0,0 +1,18 @@
+import { useMutation } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import { useNavigate } from 'react-router-dom';
+import type { Workspace } from '../lib/models';
+
+export function useCreateWorkspace({ navigateAfter }: { navigateAfter: boolean }) {
+  const navigate = useNavigate();
+  return useMutation<string, unknown, Pick<Workspace, 'name'>>({
+    mutationFn: (patch) => {
+      return invoke('create_workspace', patch);
+    },
+    onSuccess: async (workspaceId) => {
+      if (navigateAfter) {
+        navigate(`/workspaces/${workspaceId}`);
+      }
+    },
+  });
+}

src-web/hooks/useIsResponseLoading.ts

@@ -1,7 +1,7 @@
 import { useResponses } from './useResponses';
 
-export function useIsResponseLoading(): boolean {
-  const responses = useResponses();
+export function useIsResponseLoading(requestId: string | null): boolean {
+  const responses = useResponses(requestId);
   const response = responses[responses.length - 1];
   if (!response) return false;
   return !(response.body || response.status || response.error);

src-web/hooks/useResponses.ts

@@ -2,22 +2,20 @@ import { useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { HttpResponse } from '../lib/models';
 import { convertDates } from '../lib/models';
-import { useActiveRequest } from './useActiveRequest';
 
 export function responsesQueryKey(requestId: string) {
   return ['http_responses', { requestId }];
 }
 
-export function useResponses() {
-  const activeRequest = useActiveRequest();
+export function useResponses(requestId: string | null) {
   return (
     useQuery<HttpResponse[]>({
-      enabled: activeRequest != null,
+      enabled: requestId !== null,
       initialData: [],
-      queryKey: responsesQueryKey(activeRequest?.id ?? 'n/a'),
+      queryKey: responsesQueryKey(requestId ?? 'n/a'),
       queryFn: async () => {
         const responses = (await invoke('responses', {
-          requestId: activeRequest?.id,
+          requestId,
         })) as HttpResponse[];
         return responses.map(convertDates);
       },

src-web/hooks/useWorkspaces.ts

@@ -3,9 +3,13 @@ import type { Workspace } from '../lib/models';
 import { convertDates } from '../lib/models';
 import { useQuery } from '@tanstack/react-query';
 
+export function workspacesQueryKey() {
+  return ['workspaces'];
+}
+
 export function useWorkspaces() {
   return (
-    useQuery(['workspaces'], async () => {
+    useQuery(workspacesQueryKey(), async () => {
       const workspaces = (await invoke('workspaces')) as Workspace[];
       return workspaces.map(convertDates);
     }).data ?? []