diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 2963e57..4f2b998 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -20,6 +20,26 @@ export let compactMode = false; export let setCompactMode = () => {}; + let searchInput; // Reference to the search input element + + onMount(() => { + // Add global keydown listener for the / hotkey + function handleKeydown(event) { + // Check if the / key is pressed and no input/textarea is focused + if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) { + event.preventDefault(); // Prevent the / character from being typed + searchInput?.focus(); // Focus the search input + } + } + + document.addEventListener('keydown', handleKeydown); + + // Cleanup listener on component destroy + return () => { + document.removeEventListener('keydown', handleKeydown); + }; + }); + function onInput(event) { searchQuery = event.target.value; setSearchQuery(searchQuery); @@ -131,6 +151,7 @@ type="text" placeholder="Search logos..." bind:value={searchQuery} + bind:this={searchInput} on:input={onInput} aria-label="Search logos" /> @@ -166,6 +187,9 @@ {/if} +