diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx index f271ff718..910f5df92 100644 --- a/src/components/CommandMenu/CommandMenu.tsx +++ b/src/components/CommandMenu/CommandMenu.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from 'preact/hooks'; +import { useEffect, useRef, useState } from 'preact/hooks'; import { httpGet } from '../../lib/http'; +import { useKeydown } from '../../hooks/use-keydown'; type PageType = { url: string; @@ -9,7 +10,7 @@ type PageType = { const defaultPages: PageType[] = [ { url: '/', title: 'Home', group: 'Pages' }, - { url: '/profile', title: 'Account', group: 'Pages' }, + { url: '/settings/update-profile', title: 'Account', group: 'Pages' }, { url: '/roadmaps', title: 'Roadmaps', group: 'Pages' }, { url: '/best-practices', title: 'Best Practices', group: 'Pages' }, { url: '/guides', title: 'Guides', group: 'Pages' }, @@ -17,12 +18,25 @@ const defaultPages: PageType[] = [ ]; export function CommandMenu() { - const [isActive, setIsActive] = useState(true); + const inputRef = useRef(null); + const [isActive, setIsActive] = useState(false); const [allPages, setAllPages] = useState([]); const [searchResults, setSearchResults] = useState(defaultPages); const [searchedText, setSearchedText] = useState(''); const [activeCounter, setActiveCounter] = useState(0); + useKeydown('mod_k', () => { + setIsActive(true); + }); + + useEffect(() => { + if (!isActive || !inputRef.current) { + return; + } + + inputRef.current.focus(); + }, [isActive]); + async function getAllPages() { if (allPages.length > 0) { return allPages; @@ -68,6 +82,7 @@ export function CommandMenu() {
{ const listener = (event: any) => { - if (event.key.toLowerCase() === keyName.toLowerCase()) { + if ( + !keyName.startsWith('mod_') && + event.key.toLowerCase() === keyName.toLowerCase() + ) { + callback(); + } else if ( + keyName.startsWith('mod_') && + event.metaKey && + event.key.toLowerCase() === keyName.replace('mod_', '').toLowerCase() + ) { callback(); } };