diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 9366a588..a65a57e2 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -7,11 +7,10 @@ import { faChevronCircleLeft, faChevronCircleRight, - faMagnifyingGlass, faPlus, faWarning } from '@fortawesome/free-solid-svg-icons'; - import { onMount } from 'svelte'; + import { onDestroy, onMount } from 'svelte'; import Fa from 'svelte-fa'; import toast from 'svelte-french-toast'; @@ -21,9 +20,12 @@ let orderExpanded = false; let orderByGroups = true; let searchQuery = ''; + let searchInput: HTMLInputElement; + let isMac = false; const gridClass = 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4'; + onMount(() => {}); const filteredDevices = () => devices.filter( (dev) => @@ -55,7 +57,17 @@ .finally(() => (loading = false)); } + function handleShortcut(event: KeyboardEvent) { + if ((event.ctrlKey || event.metaKey) && event.key === 'k') { + event.preventDefault(); + searchInput.focus(); + } + } + onMount(() => { + isMac = /Mac|iPhone|iPad/.test(navigator.userAgent); + document.addEventListener('keydown', handleShortcut); + orderBy = (localStorage.getItem('orderBy') as 'name' | 'ip') || 'name'; orderByGroups = localStorage.getItem('orderByGroups') !== 'false'; getAllDevices(); @@ -63,6 +75,10 @@ $pocketbase.collection(collection).subscribe('*', getAllDevices) ); }); + + onDestroy(() => { + document.removeEventListener('keydown', handleShortcut); + }); {#if loading} @@ -70,8 +86,25 @@ {:else if devices.length > 0}