Merge pull request #191 from WardPearce/update/keyboard-shortcuts

Added search shortcut

materialious/package-lock.json

@@ -13,6 +13,7 @@
 				"human-number": "^2.0.4",
 				"material-dynamic-colors": "^1.1.0",
 				"media-icons": "^0.10.0",
+				"mousetrap": "^1.6.5",
 				"peerjs": "^1.5.2",
 				"sponsorblock-api": "^0.2.4",
 				"svelte-i18n": "^4.0.0",
@@ -28,6 +29,7 @@
 				"@types/eslint": "^8.56.7",
 				"@types/event-source-polyfill": "^1.0.5",
 				"@types/human-number": "^1.0.2",
+				"@types/mousetrap": "^1.6.15",
 				"@typescript-eslint/eslint-plugin": "^7.8.0",
 				"@typescript-eslint/parser": "^7.7.1",
 				"@vite-pwa/sveltekit": "^0.4.0",
@@ -3062,6 +3064,12 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/mousetrap": {
+			"version": "1.6.15",
+			"resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.15.tgz",
+			"integrity": "sha512-qL0hyIMNPow317QWW/63RvL1x5MVMV+Ru3NaY9f/CuEpCqrmb7WeuK2071ZY5hczOnm38qExWM2i2WtkXLSqFw==",
+			"dev": true
+		},
 		"node_modules/@types/node": {
 			"version": "20.12.2",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
@@ -6414,6 +6422,11 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/mousetrap": {
+			"version": "1.6.5",
+			"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+			"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

materialious/package.json

@@ -19,6 +19,7 @@
 		"@types/eslint": "^8.56.7",
 		"@types/event-source-polyfill": "^1.0.5",
 		"@types/human-number": "^1.0.2",
+		"@types/mousetrap": "^1.6.15",
 		"@typescript-eslint/eslint-plugin": "^7.8.0",
 		"@typescript-eslint/parser": "^7.7.1",
 		"@vite-pwa/sveltekit": "^0.4.0",
@@ -40,6 +41,7 @@
 		"human-number": "^2.0.4",
 		"material-dynamic-colors": "^1.1.0",
 		"media-icons": "^0.10.0",
+		"mousetrap": "^1.6.5",
 		"peerjs": "^1.5.2",
 		"sponsorblock-api": "^0.2.4",
 		"svelte-i18n": "^4.0.0",

materialious/src/lib/Search.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { createEventDispatcher } from 'svelte';
+	import Mousetrap from 'mousetrap';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { interfaceSearchSuggestionsStore } from '../store';
 	import { getSearchSuggestions } from './Api';
@@ -37,28 +38,52 @@
 	}
 
 	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'ArrowUp') {
+		if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
 			event.preventDefault();
-			selectedSuggestionIndex = Math.max(selectedSuggestionIndex - 1, -1);
-		} else if (event.key === 'ArrowDown') {
-			event.preventDefault();
-			selectedSuggestionIndex = Math.min(
-				selectedSuggestionIndex + 1,
-				suggestionsForSearch.length - 1
-			);
+			const direction = event.key === 'ArrowUp' ? -1 : 1;
+			const container = document.querySelector('.suggestions-container');
+			if (container) {
+				const children = Array.from(container.children);
+				const currentIndex = selectedSuggestionIndex !== -1 ? selectedSuggestionIndex : 0;
+				const newIndex = Math.min(Math.max(currentIndex + direction, 0), children.length - 1);
+				const selectedItem = children[newIndex];
+				if (selectedItem) {
+					selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+					selectedSuggestionIndex = newIndex;
+				}
+			}
 		} else if (event.key === 'Enter' && selectedSuggestionIndex !== -1) {
 			search = suggestionsForSearch[selectedSuggestionIndex];
 			handleSubmit();
+		} else if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+			resetSearch();
+			event.preventDefault();
 		}
 	}
+
+	function resetSearch() {
+		search = '';
+		suggestionsForSearch = [];
+		selectedSuggestionIndex = -1;
+		showSearchBox = false;
+	}
+
+	onMount(() => {
+		Mousetrap.bind(['ctrl+k', 'command+k'], () => {
+			document.getElementById('search-box')?.focus();
+			showSearchBox = !showSearchBox;
+			if (!showSearchBox) resetSearch();
+			return false;
+		});
+	});
 </script>
 
 <form on:submit|preventDefault={handleSubmit}>
 	<div class="field prefix round fill no-margin search">
 		<i class="front">search</i>
-		<input bind:value={search} on:click={() => (showSearchBox = true)} />
+		<input id="search-box" bind:value={search} on:click={() => (showSearchBox = true)} />
 		{#if showSearchBox}
-			<menu class="min">
+			<menu class="min suggestions-container">
 				<div class="field large prefix suffix no-margin fixed">
 					<i class="front" on:click={() => dispatch('searchCancelled')}>arrow_back</i>
 					<input
@@ -76,12 +101,7 @@
 							}
 						}}
 					/>
-					<i
-						class="front"
-						on:click={() => (
-							(search = ''), (suggestionsForSearch = []), (selectedSuggestionIndex = -1)
-						)}>close</i
-					>
+					<i class="front" on:click={resetSearch}>close</i>
 				</div>
 				{#if searchSuggestions}
 					{#each suggestionsForSearch as suggestion, index}