Hotkey for keyboard shortcut help

src-web/components/App.tsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { MotionConfig } from 'framer-motion';
 import { Suspense } from 'react';
 import { DndProvider } from 'react-dnd';
@@ -26,7 +25,7 @@ export function App() {
           <DndProvider backend={HTML5Backend}>
             <Suspense>
               <AppRouter />
-              <ReactQueryDevtools initialIsOpen={false} />
+              {/*<ReactQueryDevtools initialIsOpen={false} />*/}
             </Suspense>
           </DndProvider>
         </HelmetProvider>

src-web/components/RequestResponse.tsx

@@ -5,8 +5,6 @@ import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
-import { useCreateRequest } from '../hooks/useCreateRequest';
-import { useRequests } from '../hooks/useRequests';
 import { clamp } from '../lib/clamp';
 import { HotKeyList } from './core/HotKeyList';
 import { RequestPane } from './RequestPane';
@@ -29,8 +27,6 @@ const STACK_VERTICAL_WIDTH = 600;
 export const RequestResponse = memo(function RequestResponse({ style }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const activeRequest = useActiveRequest();
-  const createRequest = useCreateRequest();
-  const requests = useRequests();
   const [vertical, setVertical] = useState<boolean>(false);
   const [widthRaw, setWidth] = useLocalStorage<number>(`body_width::${useActiveWorkspaceId()}`);
   const [heightRaw, setHeight] = useLocalStorage<number>(`body_height::${useActiveWorkspaceId()}`);
@@ -42,7 +38,8 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
   );
 
   useResizeObserver(containerRef, ({ contentRect }) => {
-    setVertical(contentRect.width < STACK_VERTICAL_WIDTH);
+    const doIt = contentRect.width < STACK_VERTICAL_WIDTH;
+    setVertical(doIt);
   });
 
   const styles = useMemo<CSSProperties>(

src-web/components/SettingsDropdown.tsx

@@ -2,6 +2,7 @@ import { invoke, shell } from '@tauri-apps/api';
 import { useRef } from 'react';
 import { useAppVersion } from '../hooks/useAppVersion';
 import { useExportData } from '../hooks/useExportData';
+import { useHotkey } from '../hooks/useHotkey';
 import { useImportData } from '../hooks/useImportData';
 import { useTheme } from '../hooks/useTheme';
 import { useUpdateMode } from '../hooks/useUpdateMode';
@@ -23,6 +24,17 @@ export function SettingsDropdown() {
   const dropdownRef = useRef<DropdownRef>(null);
   const dialog = useDialog();
 
+  const showHotkeyHelp = () => {
+    dialog.show({
+      id: 'hotkey-help',
+      title: 'Keyboard Shortcuts',
+      size: 'sm',
+      render: () => <KeyboardShortcutsDialog />,
+    });
+  };
+
+  useHotkey('hotkeys.showHelp', showHotkeyHelp);
+
   return (
     <Dropdown
       ref={dropdownRef}
@@ -70,12 +82,8 @@ export function SettingsDropdown() {
         {
           key: 'hotkeys',
           label: 'Keyboard shortcuts',
-          onSelect: () =>
+          hotkeyAction: 'hotkeys.showHelp',
-            dialog.show({
+          onSelect: showHotkeyHelp,
-              title: 'Keyboard Shortcuts',
-              size: 'dynamic',
-              render: () => <KeyboardShortcutsDialog />,
-            }),
           leftSlot: <Icon icon="keyboard" />,
         },
         { type: 'separator', label: `Yaak v${appVersion.data}` },

src-web/hooks/useHotkey.ts

@@ -10,7 +10,8 @@ export type HotkeyAction =
   | 'sidebar.toggle'
   | 'sidebar.focus'
   | 'urlBar.focus'
-  | 'environmentEditor.toggle';
+  | 'environmentEditor.toggle'
+  | 'hotkeys.showHelp';
 
 const hotkeys: Record<HotkeyAction, string[]> = {
   'request.send': ['CmdCtrl+Enter', 'CmdCtrl+r'],
@@ -20,6 +21,7 @@ const hotkeys: Record<HotkeyAction, string[]> = {
   'sidebar.focus': ['CmdCtrl+1'],
   'urlBar.focus': ['CmdCtrl+l'],
   'environmentEditor.toggle': ['CmdCtrl+e'],
+  'hotkeys.showHelp': ['CmdCtrl+/'],
 };
 
 export const hotkeyActions: HotkeyAction[] = Object.keys(hotkeys) as (keyof typeof hotkeys)[];