diff --git a/src-web/components/App.tsx b/src-web/components/App.tsx
index f826e4ba..86678b48 100644
--- a/src-web/components/App.tsx
+++ b/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() {
-
+ {/**/}
diff --git a/src-web/components/RequestResponse.tsx b/src-web/components/RequestResponse.tsx
index d68cc068..cb7a8894 100644
--- a/src-web/components/RequestResponse.tsx
+++ b/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(null);
const activeRequest = useActiveRequest();
- const createRequest = useCreateRequest();
- const requests = useRequests();
const [vertical, setVertical] = useState(false);
const [widthRaw, setWidth] = useLocalStorage(`body_width::${useActiveWorkspaceId()}`);
const [heightRaw, setHeight] = useLocalStorage(`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(
diff --git a/src-web/components/SettingsDropdown.tsx b/src-web/components/SettingsDropdown.tsx
index 8d42d033..5bc8ca2e 100644
--- a/src-web/components/SettingsDropdown.tsx
+++ b/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(null);
const dialog = useDialog();
+ const showHotkeyHelp = () => {
+ dialog.show({
+ id: 'hotkey-help',
+ title: 'Keyboard Shortcuts',
+ size: 'sm',
+ render: () => ,
+ });
+ };
+
+ useHotkey('hotkeys.showHelp', showHotkeyHelp);
+
return (
- dialog.show({
- title: 'Keyboard Shortcuts',
- size: 'dynamic',
- render: () => ,
- }),
+ hotkeyAction: 'hotkeys.showHelp',
+ onSelect: showHotkeyHelp,
leftSlot: ,
},
{ type: 'separator', label: `Yaak v${appVersion.data}` },
diff --git a/src-web/hooks/useHotkey.ts b/src-web/hooks/useHotkey.ts
index a840a54f..257d69ab 100644
--- a/src-web/hooks/useHotkey.ts
+++ b/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 = {
'request.send': ['CmdCtrl+Enter', 'CmdCtrl+r'],
@@ -20,6 +21,7 @@ const hotkeys: Record = {
'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)[];