From 261b69b85b20ab7c83c0a48474f8be104da2f8c7 Mon Sep 17 00:00:00 2001
From: Davide Marcoli <69892203+davidemarcoli@users.noreply.github.com>
Date: Sun, 27 Oct 2024 14:25:21 +0100
Subject: [PATCH] feat: improve the keyboard navigation of the search window
 (#157)

* feat: improve the keyboard navigation of the search window

* chore: remove console logs
---
 src/lib/components/header.svelte | 62 ++++++++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
index 4ea412b..13c1685 100644
--- a/src/lib/components/header.svelte
+++ b/src/lib/components/header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import { getContext } from 'svelte';
@@ -32,6 +32,8 @@
 		posterPath?: string;
 	}> = [];
 	let isSearchOpen = false;
+	let selectedIndex = -1;
+	let searchResultElements: HTMLButtonElement[] = [];
 
 	async function handleSearch() {
 		if (searchQuery.trim() === '') {
@@ -41,6 +43,7 @@
 
 		try {
 			searchResults = await searchContent(searchQuery);
+			selectedIndex = -1; // Reset selection when search results change
 		} catch {
 			searchResults = [];
 		}
@@ -49,6 +52,12 @@
 	async function handleMediaSearch() {
 		const tmdbResults = await searchTMDB(searchQuery);
 		searchResults = [...tmdbResults];
+		selectedIndex = -1;
+		await tick(); // Wait for DOM update
+		if (searchResultElements[0]) {
+			searchResultElements[0].focus();
+			selectedIndex = 0;
+		}
 	}
 
 	function handleResultClick(result: (typeof searchResults)[number]) {
@@ -60,6 +69,47 @@
 		}
 	}
 
+	function handleKeydown(event: KeyboardEvent) {
+		if (!searchResults.length) return;
+
+		switch (event.key) {
+			case 'ArrowDown':
+				event.preventDefault();
+				selectedIndex = Math.min(selectedIndex + 1, searchResults.length - 1);
+				searchResultElements[selectedIndex]?.focus();
+				break;
+			case 'ArrowUp':
+				event.preventDefault();
+				if (selectedIndex === 0) {
+					document.querySelector('input')?.focus();
+					selectedIndex = -1;
+				} else {
+					selectedIndex = Math.max(selectedIndex - 1, 0);
+					searchResultElements[selectedIndex]?.focus();
+				}
+				break;
+			case 'Enter':
+				if (searchResults.length === 1) {
+					handleResultClick(searchResults[0]);
+				} else if (selectedIndex >= 0) {
+					handleResultClick(searchResults[selectedIndex]);
+				}
+				break;
+		}
+	}
+
+	function handleGlobalKeydown(event: KeyboardEvent) {
+		// Check for Ctrl+K (or Cmd+K on Mac)
+		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+			event.preventDefault(); // Prevent default browser behavior
+			isSearchOpen = true;
+			// Focus the search input after the dialog opens
+			tick().then(() => {
+				document.querySelector('input')?.focus();
+			});
+		}
+	}
+
 	let applyBackdropBlur = () => {};
 
 	onMount(() => {
@@ -81,12 +131,14 @@
 
 		if (browser) {
 			window.addEventListener('scroll', applyBackdropBlur);
+			window.addEventListener('keydown', handleGlobalKeydown);
 		}
 	});
 
 	onDestroy(() => {
 		if (browser) {
 			window.removeEventListener('scroll', applyBackdropBlur);
+			window.removeEventListener('keydown', handleGlobalKeydown);
 		}
 	});
 </script>
@@ -161,6 +213,7 @@
 					placeholder="Search..."
 					bind:value={searchQuery}
 					on:input={handleSearch}
+					on:keydown={handleKeydown}
 					class="flex-grow"
 				/>
 			</div>
@@ -168,11 +221,14 @@
 		{#if searchResults.length > 0}
 			<div class="max-h-[400px] overflow-y-auto p-4">
 				<ul class="space-y-4">
-					{#each searchResults as result}
+					{#each searchResults as result, index}
 						<li>
 							<button
-								class="block w-full rounded p-2 text-left hover:bg-muted"
+								class="search-result block w-full rounded p-2 text-left hover:bg-muted focus:bg-muted"
 								on:click={() => handleResultClick(result)}
+								on:keydown={handleKeydown}
+								bind:this={searchResultElements[index]}
+								tabindex={index === 0 ? 0 : -1}
 							>
 								<div class="flex items-start">
 									{#if result.type === 'media' && result.posterPath}