Remove response body and basic hotkeys

src-web/components/GlobalHooks.tsx

@@ -92,9 +92,11 @@ export function GlobalHooks() {
     }
 
     if (!shouldIgnoreModel(payload)) {
+      console.time('set query date');
       queryClient.setQueryData<Model[]>(queryKey, (values) =>
         values?.map((v) => (modelsEq(v, payload) ? payload : v)),
       );
+      console.timeEnd('set query date');
     }
   });
 

src-web/components/RequestPane.tsx

@@ -1,12 +1,8 @@
-import { invoke } from '@tauri-apps/api';
-import { appWindow } from '@tauri-apps/api/window';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
-import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { tryFormatJson } from '../lib/formatters';
@@ -47,7 +43,6 @@ const useActiveTab = createGlobalState<string>('body');
 export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
   const activeRequest = useActiveRequest();
   const activeRequestId = activeRequest?.id ?? null;
-  const activeEnvironmentId = useActiveEnvironmentId();
   const updateRequest = useUpdateRequest(activeRequestId);
   const [activeTab, setActiveTab] = useActiveTab();
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
@@ -183,18 +178,6 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     [updateRequest],
   );
 
-  useListenToTauriEvent(
-    'send_request',
-    async ({ windowLabel }) => {
-      if (windowLabel !== appWindow.label) return;
-      await invoke('send_request', {
-        requestId: activeRequestId,
-        environmentId: activeEnvironmentId,
-      });
-    },
-    [activeRequestId, activeEnvironmentId],
-  );
-
   return (
     <div
       style={style}

src-web/components/ResponsePane.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import { useCallback, memo, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
 import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useLatestResponse } from '../hooks/useLatestResponse';
@@ -18,12 +18,12 @@ import { StatusTag } from './core/StatusTag';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
+import { RecentResponsesDropdown } from './RecentResponsesDropdown';
 import { ResponseHeaders } from './ResponseHeaders';
 import { CsvViewer } from './responseViewers/CsvViewer';
 import { ImageViewer } from './responseViewers/ImageViewer';
 import { TextViewer } from './responseViewers/TextViewer';
 import { WebPageViewer } from './responseViewers/WebPageViewer';
-import { RecentResponsesDropdown } from './RecentResponsesDropdown';
 
 interface Props {
   style?: CSSProperties;
@@ -48,11 +48,14 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
 
   const contentType = useResponseContentType(activeResponse);
 
-  const handlePinnedResponse = useCallback((r: HttpResponse) => {
-    setPinnedResponseId(r.id);
-  }, [setPinnedResponseId])
+  const handlePinnedResponse = useCallback(
+    (r: HttpResponse) => {
+      setPinnedResponseId(r.id);
+    },
+    [setPinnedResponseId],
+  );
 
-  const tabs: TabItem[] = useMemo(
+  const tabs = useMemo<TabItem[]>(
     () => [
       {
         value: 'body',
@@ -62,7 +65,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
           onChange: setViewMode,
           items: [
             { label: 'Pretty', value: 'pretty' },
-            { label: 'Raw', value: 'raw' },
+            ...(contentType?.startsWith('image') ? [] : [{ label: 'Raw', value: 'raw' }]),
           ],
         },
       },
@@ -78,7 +81,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
         value: 'headers',
       },
     ],
-    [activeResponse?.headers, setViewMode, viewMode],
+    [activeResponse?.headers, contentType, setViewMode, viewMode],
   );
 
   return (
@@ -145,10 +148,14 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
             <TabContent value="body">
               {!activeResponse.contentLength ? (
                 <EmptyStateText>Empty Body</EmptyStateText>
-              ) : viewMode === 'pretty' && contentType?.includes('html') ? (
-                <WebPageViewer response={activeResponse} />
               ) : contentType?.startsWith('image') ? (
                 <ImageViewer className="pb-2" response={activeResponse} />
+              ) : activeResponse.contentLength > 2 * 1000 * 1000 ? (
+                <div className="text-sm italic text-gray-500">
+                  Cannot preview text responses larger than 2MB
+                </div>
+              ) : viewMode === 'pretty' && contentType?.includes('html') ? (
+                <WebPageViewer response={activeResponse} />
               ) : contentType?.match(/csv|tab-separated/) ? (
                 <CsvViewer className="pb-2" response={activeResponse} />
               ) : (

src-web/components/Sidebar.tsx

@@ -14,9 +14,9 @@ import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useDeleteAnyRequest } from '../hooks/useDeleteAnyRequest';
 import { useDeleteFolder } from '../hooks/useDeleteFolder';
 import { useFolders } from '../hooks/useFolders';
+import { useHotkey } from '../hooks/useHotkey';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { useLatestResponse } from '../hooks/useLatestResponse';
-import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { usePrompt } from '../hooks/usePrompt';
 import { useRequests } from '../hooks/useRequests';
 import { useSendManyRequests } from '../hooks/useSendFolder';
@@ -52,7 +52,6 @@ interface TreeNode {
 
 export function Sidebar({ className }: Props) {
   const { hidden } = useSidebarHidden();
-  const createRequest = useCreateRequest();
   const sidebarRef = useRef<HTMLLIElement>(null);
   const activeRequestId = useActiveRequestId();
   const activeEnvironmentId = useActiveEnvironmentId();
@@ -116,9 +115,6 @@ export function Sidebar({ className }: Props) {
     return { tree, treeParentMap, selectableRequests };
   }, [activeWorkspace, requests, folders]);
 
-  // TODO: Move these listeners to a central place
-  useListenToTauriEvent('new_request', async () => createRequest.mutate({}));
-
   const focusActiveRequest = useCallback(
     (args: { forced?: { id: string; tree: TreeNode }; noFocusSidebar?: boolean } = {}) => {
       const { forced, noFocusSidebar } = args;
@@ -193,19 +189,15 @@ export function Sidebar({ className }: Props) {
   useKeyPressEvent('Backspace', handleDeleteKey);
   useKeyPressEvent('Delete', handleDeleteKey);
 
-  useListenToTauriEvent(
-    'focus_sidebar',
-    () => {
-      if (hidden || hasFocus) return;
-      // Select 0 index on focus if none selected
-      focusActiveRequest(
-        selectedTree != null && selectedId != null
-          ? { forced: { id: selectedId, tree: selectedTree } }
-          : undefined,
-      );
-    },
-    [focusActiveRequest, hidden, activeRequestId],
-  );
+  useHotkey('sidebar.focus', () => {
+    if (hidden || hasFocus) return;
+    // Select 0 index on focus if none selected
+    focusActiveRequest(
+      selectedTree != null && selectedId != null
+        ? { forced: { id: selectedId, tree: selectedTree } }
+        : undefined,
+    );
+  });
 
   useKeyPressEvent('Enter', (e) => {
     if (!hasFocus) return;

src-web/components/SidebarActions.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { useCreateFolder } from '../hooks/useCreateFolder';
 import { useCreateRequest } from '../hooks/useCreateRequest';
+import { useHotkey } from '../hooks/useHotkey';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
@@ -12,6 +13,8 @@ export const SidebarActions = memo(function SidebarActions() {
   const createFolder = useCreateFolder();
   const { hidden, toggle } = useSidebarHidden();
 
+  useHotkey('request.create', () => createRequest.mutate({}));
+
   return (
     <HStack>
       <IconButton

src-web/components/UrlBar.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import type { EditorView } from 'codemirror';
 import type { FormEvent } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
+import { useHotkey } from '../hooks/useHotkey';
 import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
-import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -40,9 +40,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
     [sendRequest],
   );
 
-  useListenToTauriEvent('focus_url', () => {
-    inputRef.current?.focus();
-  });
+  useHotkey('url.focus', () => inputRef.current?.focus());
 
   return (
     <form onSubmit={handleSubmit} className={classNames('url-bar', className)}>
@@ -79,6 +77,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
             className="!h-auto w-8 mr-0.5 my-0.5"
             icon={loading ? 'update' : 'paperPlane'}
             spin={loading}
+            hotkeyAction="request.send"
           />
         }
       />

src-web/components/Workspace.tsx

@@ -8,6 +8,7 @@ import type {
 } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowSize } from 'react-use';
+import { useHotkey } from '../hooks/useHotkey';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
@@ -39,7 +40,7 @@ export default function Workspace() {
     null,
   );
 
-  useListenToTauriEvent('toggle_sidebar', toggle);
+  useHotkey('sidebar.toggle', toggle);
 
   // float/un-float sidebar on window resize
   useEffect(() => {

src-web/components/core/Button.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
 import type { HTMLAttributes, ReactNode } from 'react';
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import type { HotkeyAction } from '../../hooks/useHotkey';
+import { useHotkey } from '../../hooks/useHotkey';
 import { Icon } from './Icon';
 
 const colorStyles = {
@@ -26,6 +28,7 @@ export type ButtonProps = HTMLAttributes<HTMLButtonElement> & {
   title?: string;
   leftSlot?: ReactNode;
   rightSlot?: ReactNode;
+  hotkeyAction?: HotkeyAction;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,6 +46,8 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     leftSlot,
     rightSlot,
     disabled,
+    hotkeyAction,
+    onClick,
     ...props
   }: ButtonProps,
   ref,
@@ -66,8 +71,25 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     [className, disabled, color, justify, size],
   );
 
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    ref,
+    () => buttonRef.current,
+  );
+
+  useHotkey(hotkeyAction ?? null, () => {
+    buttonRef.current?.click();
+  });
+
   return (
-    <button ref={ref} type={type} className={classes} disabled={disabled} {...props}>
+    <button
+      ref={buttonRef}
+      type={type}
+      className={classes}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
       {isLoading ? (
         <Icon icon="update" size={size} className="animate-spin mr-1" />
       ) : leftSlot ? (

src-web/components/core/Editor/index.tsx

@@ -5,12 +5,6 @@ export type { EditorProps } from './Editor';
 //   showing any content
 // const editor = await import('./Editor');
 
-document.addEventListener('keydown', (e) => {
-  console.log('E', e.key);
-  e.preventDefault();
-  e.stopPropagation();
-});
-
 export const Editor = editor.Editor;
 export const graphql = editor.graphql;
 export const getIntrospectionQuery = editor.getIntrospectionQuery;

src-web/components/responseViewers/WebPageViewer.tsx

@@ -20,6 +20,7 @@ export function WebPageViewer({ response }: Props) {
   return (
     <div className="h-full pb-3">
       <iframe
+        key={body ? 'has-body' : 'no-body'}
         title="Response preview"
         srcDoc={contentForIframe}
         sandbox="allow-scripts allow-same-origin"