Env dialog hotkey

src-web/components/DialogContext.tsx

@@ -16,6 +16,7 @@ interface State {
 
 interface Actions {
   show: (d: DialogEntryOptionalId) => void;
+  toggle: (d: DialogEntry) => void;
   hide: (id: string) => void;
 }
 
@@ -26,15 +27,20 @@ export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
   const [dialogs, setDialogs] = useState<State['dialogs']>([]);
   const actions = useMemo<Actions>(
     () => ({
-      show: ({ id: oid, ...props }: DialogEntryOptionalId) => {
+      show({ id: oid, ...props }: DialogEntryOptionalId) {
         const id = oid ?? Math.random().toString(36).slice(2);
         setDialogs((a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
       },
+      toggle({ id: oid, ...props }: DialogEntryOptionalId) {
+        const id = oid ?? Math.random().toString(36).slice(2);
+        if (dialogs.some((d) => d.id === id)) this.hide(id);
+        else this.show({ id, ...props });
+      },
       hide: (id: string) => {
         setDialogs((a) => a.filter((d) => d.id !== id));
       },
     }),
-    [],
+    [dialogs],
   );
 
   const state: State = {

src-web/components/EnvironmentActionsDropdown.tsx

@@ -3,6 +3,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useEnvironments } from '../hooks/useEnvironments';
+import { useHotkey } from '../hooks/useHotkey';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
@@ -25,12 +26,15 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
   const routes = useAppRoutes();
 
   const showEnvironmentDialog = useCallback(() => {
-    dialog.show({
+    dialog.toggle({
+      id: 'environment-editor',
       title: 'Manage Environments',
       render: () => <EnvironmentEditDialog initialEnvironment={activeEnvironment} />,
     });
   }, [dialog, activeEnvironment]);
 
+  useHotkey('environmentEditor.show', showEnvironmentDialog);
+
   const items: DropdownItem[] = useMemo(
     () => [
       ...environments.map(

src-web/components/UrlBar.tsx

@@ -40,7 +40,13 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
     [sendRequest],
   );
 
-  useHotkey('url.focus', () => inputRef.current?.focus());
+  useHotkey('urlBar.focus', () => {
+    const head = inputRef.current?.state.doc.length ?? 0;
+    inputRef.current?.dispatch({
+      selection: { anchor: 0, head },
+    });
+    inputRef.current?.focus();
+  });
 
   return (
     <form onSubmit={handleSubmit} className={classNames('url-bar', className)}>

src-web/components/responseViewers/ImageViewer.tsx

@@ -1,5 +1,6 @@
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import classNames from 'classnames';
+import { useState } from 'react';
 import type { HttpResponse } from '../../lib/models';
 
 interface Props {
@@ -8,11 +9,31 @@ interface Props {
 }
 
 export function ImageViewer({ response, className }: Props) {
+  const bytes = response.contentLength ?? 0;
+  const [show, setShow] = useState(bytes < 3 * 1000 * 1000);
+
   if (response.bodyPath === null) {
     return <div>Empty response body</div>;
   }
 
   const src = convertFileSrc(response.bodyPath);
+  if (!show) {
+    return (
+      <>
+        <div className="text-sm italic text-gray-500">
+          Response body is too large to preview.{' '}
+          <button
+            className="cursor-pointer underline hover:text-gray-800"
+            color="gray"
+            onClick={() => setShow(true)}
+          >
+            Show anyway
+          </button>
+        </div>
+      </>
+    );
+  }
+
   return (
     <img
       src={src}