feat: add npm package search to dashboard with dedicated search input and API endpoint

Author: fullstackjam

src/routes/api/npm/search/+server.ts

@@ -0,0 +1,56 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+interface NpmPackage {
+	name: string;
+	description: string;
+	version: string;
+}
+
+interface NpmSearchResult {
+	name: string;
+	desc: string;
+	type: 'npm';
+}
+
+interface NpmRegistryResponse {
+	objects: Array<{
+		package: {
+			name: string;
+			description: string;
+			version: string;
+		};
+	}>;
+}
+
+export const GET: RequestHandler = async ({ url }) => {
+	const query = url.searchParams.get('q')?.toLowerCase().trim();
+
+	if (!query || query.length < 2) {
+		return json({ results: [], error: 'Query must be at least 2 characters' });
+	}
+
+	try {
+		const response = await fetch(
+			`https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(query)}&size=30`,
+			{ cf: { cacheTtl: 300, cacheEverything: true } } as RequestInit
+		);
+
+		if (!response.ok) {
+			throw new Error('Failed to search npm registry');
+		}
+
+		const data = (await response.json()) as NpmRegistryResponse;
+
+		const results: NpmSearchResult[] = data.objects.map((obj) => ({
+			name: obj.package.name,
+			desc: obj.package.description || '',
+			type: 'npm' as const
+		}));
+
+		return json({ results });
+	} catch (error) {
+		console.error('npm search error:', error);
+		return json({ results: [], error: 'Failed to search npm packages' }, { status: 500 });
+	}
+};

src/routes/dashboard/+page.svelte

@@ -54,6 +54,11 @@
 	let searchLoading = $state(false);
 	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 
+	let npmSearch = $state('');
+	let npmSearchResults = $state<SearchResult[]>([]);
+	let npmSearchLoading = $state(false);
+	let npmSearchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
 	let showImportModal = $state(false);
 	let brewfileContent = $state('');
 	let importLoading = $state(false);
@@ -111,6 +116,39 @@
 		}, 300);
 	}
 
+	async function searchNpm(query: string) {
+		if (query.length < 2) {
+			npmSearchResults = [];
+			return;
+		}
+
+		npmSearchLoading = true;
+		try {
+			const response = await fetch(`/api/npm/search?q=${encodeURIComponent(query)}`);
+			const data = await response.json();
+			npmSearchResults = data.results || [];
+		} catch (e) {
+			console.error('npm search failed:', e);
+			npmSearchResults = [];
+		} finally {
+			npmSearchLoading = false;
+		}
+	}
+
+	function handleNpmSearchInput(value: string) {
+		npmSearch = value;
+		if (npmSearchDebounceTimer) {
+			clearTimeout(npmSearchDebounceTimer);
+		}
+		if (value.length < 2) {
+			npmSearchResults = [];
+			return;
+		}
+		npmSearchDebounceTimer = setTimeout(() => {
+			searchNpm(value);
+		}, 300);
+	}
+
 	function getExtraPackages(): string[] {
 		const presetPkgs = new Set(getPresetPackages(formData.base_preset));
 		return Array.from(selectedPackages.keys()).filter((pkg) => !presetPkgs.has(pkg));
@@ -601,20 +639,53 @@
 							<span class="group-empty">No npm packages</span>
 						{/if}
 					</div>
+					<div class="packages-search">
+						<input 
+							type="text" 
+							class="search-input" 
+							value={npmSearch}
+							oninput={(e) => handleNpmSearchInput(e.currentTarget.value)}
+							placeholder="Search npm packages (e.g. typescript, eslint)" 
+						/>
+					</div>
+					{#if npmSearchLoading}
+						<div class="search-status">Searching npm...</div>
+					{:else if npmSearch.length >= 2 && npmSearchResults.length === 0}
+						<div class="search-status">No npm packages found for "{npmSearch}"</div>
+					{:else if npmSearch.length >= 2}
+						<div class="packages-grid">
+							{#each npmSearchResults as result}
+								<button type="button" class="package-item" class:selected={selectedPackages.has(result.name)} onclick={() => togglePackage(result.name, 'npm')}>
+									<span class="check-indicator">{selectedPackages.has(result.name) ? '✓' : ''}</span>
+									<div class="package-content">
+										<div class="package-info">
+											<span class="package-name">{result.name}</span>
+											<span class="package-type">npm</span>
+										</div>
+										{#if result.desc}
+											<span class="package-desc">{result.desc.slice(0, 60)}{result.desc.length > 60 ? '...' : ''}</span>
+										{/if}
+									</div>
+								</button>
+							{/each}
+						</div>
+					{:else}
+						<div class="search-hint">Type at least 2 characters to search npm packages</div>
+					{/if}
 				</div>
 				<div class="packages-search">
 					<input 
 						type="text" 
 						class="search-input" 
 						value={packageSearch}
 						oninput={(e) => handleSearchInput(e.currentTarget.value)}
-						placeholder="Search packages or enter tap (e.g. steipete/tap/codexbar)" 
+						placeholder="Search Homebrew packages or enter tap (e.g. steipete/tap/codexbar)" 
 					/>
 				</div>
 				{#if searchLoading}
-					<div class="search-status">Searching...</div>
+					<div class="search-status">Searching Homebrew...</div>
 				{:else if packageSearch.length >= 2 && searchResults.length === 0}
-					<div class="search-status">No packages found for "{packageSearch}"</div>
+					<div class="search-status">No Homebrew packages found for "{packageSearch}"</div>
 				{:else if packageSearch.length >= 2}
 					<div class="packages-grid">
 						{#each searchResults as result}