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)[];