Add search focus highlight, Ctrl+F shortcut, and dynamic examples indexing

Author: milanofthe

src/lib/components/layout/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
@@ -21,6 +22,22 @@
 	let searchQuery = $state('');
 	let searchResults = $derived(search(searchQuery, 15));
 	let showResults = $derived(searchQuery.length > 0);
+	let searchInput = $state<HTMLInputElement | null>(null);
+
+	function handleGlobalKeydown(event: KeyboardEvent) {
+		if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
+			event.preventDefault();
+			searchInput?.focus();
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('keydown', handleGlobalKeydown);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', handleGlobalKeydown);
+	});
 
 	// Check if we're on an API page or examples listing page
 	// API pages can be /api, /api/latest, or /api/v0.16
@@ -32,8 +49,12 @@
 	}
 
 	function handleSearchKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape' && searchQuery) {
-			searchQuery = '';
+		if (event.key === 'Escape') {
+			if (searchQuery) {
+				searchQuery = '';
+			} else {
+				searchInput?.blur();
+			}
 			event.stopPropagation();
 		}
 	}
@@ -55,6 +76,7 @@
 
 	function getTypeIcon(type: SearchResult['type']): string {
 		switch (type) {
+			case 'page': return 'file';
 			case 'module': return 'package';
 			case 'class': return 'box';
 			case 'function': return 'zap';
@@ -72,6 +94,7 @@
 				type="text"
 				placeholder="Search docs..."
 				bind:value={searchQuery}
+				bind:this={searchInput}
 				class="search-input"
 				onkeydown={handleSearchKeydown}
 			/>
@@ -151,6 +174,11 @@
 		height: var(--header-height);
 		padding: 0 var(--space-md);
 		border-bottom: 1px solid var(--border);
+		transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+	}
+
+	.search-container:focus-within {
+		box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
 	}
 
 	.search-icon {

src/lib/utils/search.ts

@@ -26,6 +26,7 @@ let searchIndex: SearchIndex = { results: [], built: false };
 // Cache for loaded manifests
 let manifestsLoaded = false;
 let exampleResults: SearchResult[] = [];
+let packagesWithExamples: Set<string> = new Set();
 
 /**
  * Build page-level search results for navigation pages
@@ -58,16 +59,18 @@ function buildPageResults(): SearchResult[] {
 			tags: ['api', 'reference', 'documentation']
 		});
 
-		// Examples page
-		results.push({
-			type: 'page',
-			name: `${pkg.name} Examples`,
-			description: `Example notebooks for ${pkg.name}`,
-			path: `${packageId}/examples`,
-			packageId,
-			moduleName: '',
-			tags: ['examples', 'tutorials', 'notebooks']
-		});
+		// Examples page (only if package has examples)
+		if (packagesWithExamples.has(packageId)) {
+			results.push({
+				type: 'page',
+				name: `${pkg.name} Examples`,
+				description: `Example notebooks for ${pkg.name}`,
+				path: `${packageId}/examples`,
+				packageId,
+				moduleName: '',
+				tags: ['examples', 'tutorials', 'notebooks']
+			});
+		}
 	}
 
 	return results;
@@ -157,6 +160,10 @@ async function loadExampleManifests(): Promise<SearchResult[]> {
 
 			const manifest: NotebookManifest = await response.json();
 
+			if (manifest.notebooks.length > 0) {
+				packagesWithExamples.add(packageId);
+			}
+
 			for (const notebook of manifest.notebooks) {
 				results.push({
 					type: 'example',
@@ -175,6 +182,10 @@ async function loadExampleManifests(): Promise<SearchResult[]> {
 
 	exampleResults = results;
 	manifestsLoaded = true;
+
+	// Rebuild search index now that we know which packages have examples
+	searchIndex.built = false;
+
 	return results;
 }
 

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
 	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import Icon from '$lib/components/common/Icon.svelte';
@@ -10,10 +11,30 @@
 	let searchQuery = $state('');
 	let searchResults = $derived(search(searchQuery, 8));
 	let showResults = $derived(searchQuery.length > 0);
+	let searchInput = $state<HTMLInputElement | null>(null);
+
+	function handleGlobalKeydown(event: KeyboardEvent) {
+		if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
+			event.preventDefault();
+			searchInput?.focus();
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('keydown', handleGlobalKeydown);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', handleGlobalKeydown);
+	});
 
 	function handleSearchKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape' && searchQuery) {
-			searchQuery = '';
+		if (event.key === 'Escape') {
+			if (searchQuery) {
+				searchQuery = '';
+			} else {
+				searchInput?.blur();
+			}
 			event.stopPropagation();
 		}
 	}
@@ -62,6 +83,7 @@
 						type="text"
 						placeholder="Search the API..."
 						bind:value={searchQuery}
+						bind:this={searchInput}
 						onkeydown={handleSearchKeydown}
 					/>
 					{#if searchQuery}