Fix sidebar focus

This commit is contained in:
Gregory Schier
2024-02-27 10:33:20 -08:00
parent f9cd8d24a1
commit fd77437f59
2 changed files with 32 additions and 39 deletions

View File

@@ -90,17 +90,13 @@ export function Sidebar({ className }: Props) {
namespace: NAMESPACE_NO_SYNC, namespace: NAMESPACE_NO_SYNC,
}); });
useHotKey( useHotKey('http_request.duplicate', async () => {
'http_request.duplicate', if (activeRequest?.model === 'http_request') {
async () => { await duplicateHttpRequest.mutateAsync();
if (activeRequest?.model === 'http_request') { } else {
await duplicateHttpRequest.mutateAsync(); await duplicateGrpcRequest.mutateAsync();
} else { }
await duplicateGrpcRequest.mutateAsync(); });
}
},
{ enable: !hidden },
);
const isCollapsed = useCallback( const isCollapsed = useCallback(
(id: string) => collapsed.value?.[id] ?? false, (id: string) => collapsed.value?.[id] ?? false,
@@ -178,13 +174,14 @@ export function Sidebar({ className }: Props) {
const children = tree?.children ?? []; const children = tree?.children ?? [];
const id = const id =
forced?.id ?? children.find((m) => m.item.id === activeRequest?.id)?.item.id ?? null; forced?.id ?? children.find((m) => m.item.id === activeRequest?.id)?.item.id ?? null;
setHasFocus(true);
setSelectedId(id);
setSelectedTree(tree);
if (id == null) { if (id == null) {
return; return;
} }
setSelectedId(id);
setSelectedTree(tree);
setHasFocus(true);
if (!noFocusSidebar) { if (!noFocusSidebar) {
sidebarRef.current?.focus(); sidebarRef.current?.focus();
} }
@@ -246,29 +243,26 @@ export function Sidebar({ className }: Props) {
useKeyPressEvent('Backspace', handleDeleteKey); useKeyPressEvent('Backspace', handleDeleteKey);
useKeyPressEvent('Delete', handleDeleteKey); useKeyPressEvent('Delete', handleDeleteKey);
useHotKey( useHotKey('sidebar.focus', async () => {
'sidebar.focus', console.log('sidebar.focus', { hidden, hasFocus });
async () => { // Hide the sidebar if it's already focused
// Hide the sidebar if it's already focused if (!hidden && hasFocus) {
if (!hidden && hasFocus) { await hide();
await hide(); return;
return; }
}
// Show the sidebar if it's hidden // Show the sidebar if it's hidden
if (hidden) { if (hidden) {
await show(); await show();
} }
// Select 0 index on focus if none selected // Select 0 index on focus if none selected
focusActiveRequest( focusActiveRequest(
selectedTree != null && selectedId != null selectedTree != null && selectedId != null
? { forced: { id: selectedId, tree: selectedTree } } ? { forced: { id: selectedId, tree: selectedTree } }
: undefined, : undefined,
); );
}, });
{ enable: !hidden },
);
useKeyPressEvent('Enter', (e) => { useKeyPressEvent('Enter', (e) => {
if (!hasFocus) return; if (!hasFocus) return;

View File

@@ -83,8 +83,7 @@ export function useHotKey(
} }
const key = normalizeKey(e.key, os); const key = normalizeKey(e.key, os);
currentKeys.current.add(key);
currentKeys.current.add(normalizeKey(key, os));
for (const [hkAction, hkKeys] of Object.entries(hotkeys) as [HotkeyAction, string[]][]) { for (const [hkAction, hkKeys] of Object.entries(hotkeys) as [HotkeyAction, string[]][]) {
for (const hkKey of hkKeys) { for (const hkKey of hkKeys) {
@@ -108,7 +107,7 @@ export function useHotKey(
return; return;
} }
const key = normalizeKey(e.key, os); const key = normalizeKey(e.key, os);
currentKeys.current.delete(normalizeKey(key, os)); currentKeys.current.delete(key);
// Clear all keys if no longer holding modifier // Clear all keys if no longer holding modifier
// HACK: This is to get around the case of DOWN SHIFT -> DOWN : -> UP SHIFT -> UP ; // HACK: This is to get around the case of DOWN SHIFT -> DOWN : -> UP SHIFT -> UP ;