diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index 3fb88d35..fdf979e0 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -90,17 +90,13 @@ export function Sidebar({ className }: Props) { namespace: NAMESPACE_NO_SYNC, }); - useHotKey( - 'http_request.duplicate', - async () => { - if (activeRequest?.model === 'http_request') { - await duplicateHttpRequest.mutateAsync(); - } else { - await duplicateGrpcRequest.mutateAsync(); - } - }, - { enable: !hidden }, - ); + useHotKey('http_request.duplicate', async () => { + if (activeRequest?.model === 'http_request') { + await duplicateHttpRequest.mutateAsync(); + } else { + await duplicateGrpcRequest.mutateAsync(); + } + }); const isCollapsed = useCallback( (id: string) => collapsed.value?.[id] ?? false, @@ -178,13 +174,14 @@ export function Sidebar({ className }: Props) { const children = tree?.children ?? []; const id = forced?.id ?? children.find((m) => m.item.id === activeRequest?.id)?.item.id ?? null; + + setHasFocus(true); + setSelectedId(id); + setSelectedTree(tree); + if (id == null) { return; } - - setSelectedId(id); - setSelectedTree(tree); - setHasFocus(true); if (!noFocusSidebar) { sidebarRef.current?.focus(); } @@ -246,29 +243,26 @@ export function Sidebar({ className }: Props) { useKeyPressEvent('Backspace', handleDeleteKey); useKeyPressEvent('Delete', handleDeleteKey); - useHotKey( - 'sidebar.focus', - async () => { - // Hide the sidebar if it's already focused - if (!hidden && hasFocus) { - await hide(); - return; - } + useHotKey('sidebar.focus', async () => { + console.log('sidebar.focus', { hidden, hasFocus }); + // Hide the sidebar if it's already focused + if (!hidden && hasFocus) { + await hide(); + return; + } - // Show the sidebar if it's hidden - if (hidden) { - await show(); - } + // Show the sidebar if it's hidden + if (hidden) { + await show(); + } - // Select 0 index on focus if none selected - focusActiveRequest( - selectedTree != null && selectedId != null - ? { forced: { id: selectedId, tree: selectedTree } } - : undefined, - ); - }, - { enable: !hidden }, - ); + // 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; diff --git a/src-web/hooks/useHotKey.ts b/src-web/hooks/useHotKey.ts index 2aadc9d0..d42a7c1e 100644 --- a/src-web/hooks/useHotKey.ts +++ b/src-web/hooks/useHotKey.ts @@ -83,8 +83,7 @@ export function useHotKey( } const key = normalizeKey(e.key, os); - - currentKeys.current.add(normalizeKey(key, os)); + currentKeys.current.add(key); for (const [hkAction, hkKeys] of Object.entries(hotkeys) as [HotkeyAction, string[]][]) { for (const hkKey of hkKeys) { @@ -108,7 +107,7 @@ export function useHotKey( return; } const key = normalizeKey(e.key, os); - currentKeys.current.delete(normalizeKey(key, os)); + currentKeys.current.delete(key); // Clear all keys if no longer holding modifier // HACK: This is to get around the case of DOWN SHIFT -> DOWN : -> UP SHIFT -> UP ;