fix: address search review findings

Author: miohtama

docs/search-restoration-plan.md

@@ -21,12 +21,14 @@ Blacklisted vaults remain findable but are shown as the distinct **Blacklisted v
 Every result provides a name, entity type, one-month APY, latest TVL, canonical destination and logo URL. Aggregate entity metrics use eligible, non-blacklisted vaults and USD-normalised TVL. One-month APY is TVL-weighted and excludes invalid or extreme values through the same helper used by vault listings.
 
 Results sort by relevance first, then latest TVL descending and name ascending. The full results table starts sorted by latest TVL, with blacklisted vaults still placed last. The typeahead diversifies the initial suggestions by entity type before filling any remaining positions.
+The results page returns at most 100 rows and explicitly reports when a broader query has been truncated.
 
 ## Typeahead
 
 `src/lib/search/components/Search.svelte` sends a request to `/search/suggestions` after a 200 ms debounce. It cancels the preceding request and ignores stale responses. The endpoint caps requests at 20 results (the widget asks for 10) and queries at 100 characters.
 
 Keyboard navigation follows the combobox pattern: Arrow keys choose a suggestion, Enter opens the selected result or submits the query, and Escape closes the quick search. On mobile, the widget opens as a full-height dialog and restores focus to its trigger when closed. The dialog is layered above page content and only the mobile dialog locks body scrolling.
+On desktop, interacting outside the search closes the quick-results panel.
 
 Desktop vault suggestions and full results show the 90-day price mini-map when chart data is available. Aggregate entities do not show a mini-map.
 

docs/search.md

@@ -7,7 +7,6 @@ Responsive site header with menu, search and compact-navigation controls.
 	import Logo from '$lib/components/Logo.svelte';
 	import Menu from '$lib/components/Menu.svelte';
 	import NavPanel from '$lib/components/NavPanel.svelte';
-	import TextInput from '$lib/components/TextInput.svelte';
 	import IconMenu from '~icons/local/menu';
 
 	interface Props {
@@ -34,11 +33,7 @@ Responsive site header with menu, search and compact-navigation controls.
 	</nav>
 
 	<div class="search">
-		{#if search}
-			{@render search(false, noop)}
-		{:else}
-			<TextInput type="search" --text-input-width="100%" />
-		{/if}
+		{@render search?.(false, noop)}
 	</div>
 
 	<button class="show-nav-panel mobile-only" aria-label="Show navigation panel" onclick={() => (panelOpen = true)}>

src/lib/components/Header.svelte

@@ -10,7 +10,7 @@ underlying vault JSON index private.
 	import { goto } from '$app/navigation';
 	import { disableScroll } from '$lib/actions/scroll';
 	import { removeOnError } from '$lib/actions/image';
-	import { formatDollar, formatPercent } from '$lib/helpers/formatters';
+	import { formatDollar, formatPercent, notFilledMarker } from '$lib/helpers/formatters';
 	import {
 		formatVaultAddressPrefix,
 		searchEntityColours,
@@ -42,6 +42,7 @@ underlying vault JSON index private.
 	let requestSequence = 0;
 	let mobileSearchInput = $state<HTMLInputElement>();
 	let searchTrigger = $state<HTMLButtonElement>();
+	let searchRoot: HTMLDivElement;
 
 	let hasQuery = $derived(query.trim().length > 0);
 	let activeOptionId = $derived(selectedIndex >= 0 ? `${listboxId}-${selectedIndex}` : undefined);
@@ -88,12 +89,23 @@ underlying vault JSON index private.
 		};
 	});
 
+	$effect(() => {
+		if (!open || mobileDialogOpen) return;
+
+		function closeOnOutsidePointerDown(event: PointerEvent) {
+			if (event.target instanceof Node && !searchRoot.contains(event.target)) closeSearch();
+		}
+
+		document.addEventListener('pointerdown', closeOnOutsidePointerDown);
+		return () => document.removeEventListener('pointerdown', closeOnOutsidePointerDown);
+	});
+
 	function formatApy(value: number | null) {
-		return value === null ? 'N/A' : formatPercent(value, 1, 1);
+		return value === null ? notFilledMarker : formatPercent(value, 1, 1);
 	}
 
 	function formatTvl(value: number | null) {
-		return value === null ? 'N/A' : formatDollar(value, 1, 1);
+		return value === null ? notFilledMarker : formatDollar(value, 1, 1);
 	}
 
 	function openSearch() {
@@ -149,7 +161,12 @@ underlying vault JSON index private.
 
 <svelte:body use:disableScroll={mobileDialogOpen} />
 
-<div class="search" class:menu-search={menu} data-testid={menu ? 'mobile-menu-search' : 'nav-search'}>
+<div
+	bind:this={searchRoot}
+	class="search"
+	class:menu-search={menu}
+	data-testid={menu ? 'mobile-menu-search' : 'nav-search'}
+>
 	<form class="desktop-search" action="/search" role="search" onsubmit={handleSubmit}>
 		<input
 			bind:value={query}

src/lib/search/components/Search.svelte

@@ -1,6 +1,5 @@
 import { getLogoUrl } from '$lib/helpers/assets';
 import { getChain } from '$lib/helpers/chain';
-import { slugify } from '$lib/helpers/slugify';
 import { fetchStablecoinMetadataIndex } from '$lib/stablecoin-metadata/client';
 import {
 	buildStablecoinMetadataLookup,
@@ -16,7 +15,11 @@ import {
 	getProtocolDisplayName,
 	getVaultCurrentTvlUsd,
 	isBlacklisted,
+	isUnknownVaultProtocol,
 	meetsMinTvl,
+	UNKNOWN_VAULT_PROTOCOL_DISPLAY_NAME,
+	UNKNOWN_VAULT_PROTOCOL_SLUG,
+	withVaultCurrentTvlUsd,
 	withVaultDenominationTokenRate
 } from '$lib/top-vaults/helpers';
 import type { TopVaults, VaultInfo } from '$lib/top-vaults/schemas';
@@ -81,7 +84,7 @@ function getEligibleVaults(vaults: VaultInfo[]): VaultInfo[] {
 
 function getGroupMetrics(vaults: VaultInfo[]) {
 	const eligibleVaults = getEligibleVaults(vaults);
-	const weightedVaults = eligibleVaults.map((vault) => ({ ...vault, current_nav: getVaultCurrentTvlUsd(vault) }));
+	const weightedVaults = eligibleVaults.map(withVaultCurrentTvlUsd);
 
 	return {
 		averageApy1m: calculateTvlWeightedApy(weightedVaults),
@@ -147,55 +150,58 @@ function buildIndex(topVaults: TopVaults, stablecoins: StablecoinMetadata[]): In
 	for (const vault of vaults) {
 		if (vault.curator_slug)
 			curatorVaults.set(vault.curator_slug, [...(curatorVaults.get(vault.curator_slug) ?? []), vault]);
-		protocolVaults.set(vault.protocol_slug, [...(protocolVaults.get(vault.protocol_slug) ?? []), vault]);
-
-		const stablecoinSlug =
-			resolveStablecoinSlug(
-				{ slug: vault.denomination_slug, symbol: vault.denomination, name: vault.normalised_denomination },
-				metadataLookup
-			) ?? vault.denomination_slug;
-		stablecoinVaults.set(stablecoinSlug, [...(stablecoinVaults.get(stablecoinSlug) ?? []), vault]);
+		const protocolSlug = isUnknownVaultProtocol(vault) ? UNKNOWN_VAULT_PROTOCOL_SLUG : vault.protocol_slug;
+		protocolVaults.set(protocolSlug, [...(protocolVaults.get(protocolSlug) ?? []), vault]);
+
+		if (vault.stablecoinish) {
+			const stablecoinSlug =
+				resolveStablecoinSlug(
+					{ slug: vault.denomination_slug, symbol: vault.denomination, name: vault.normalised_denomination },
+					metadataLookup
+				) ?? vault.denomination_slug;
+			stablecoinVaults.set(stablecoinSlug, [...(stablecoinVaults.get(stablecoinSlug) ?? []), vault]);
+		}
 
 		const chain = getChain(vault.chain_id);
-		const chainSlug = chain?.slug ?? slugify(vault.chain);
-		chainVaults.set(chainSlug, [...(chainVaults.get(chainSlug) ?? []), vault]);
+		if (chain) chainVaults.set(chain.slug, [...(chainVaults.get(chain.slug) ?? []), vault]);
 	}
 
 	for (const [slug, groupVaults] of curatorVaults) {
 		const curator = topVaults.curators[slug];
-		const fallbackVault = groupVaults[0];
-		const logos = curator?.logos;
+		if (!curator) continue;
+		const logos = curator.logos;
 		addRecord(
 			records,
 			{
 				id: `curator:${slug}`,
-				name: curator?.name ?? fallbackVault.curator_name ?? slug,
+				name: curator.name,
 				entityType: 'curator',
 				vaultId: null,
 				address: null,
 				...getGroupMetrics(groupVaults),
 				href: `/vaults/curators/${slug}`,
 				logoUrl: logos?.generic ?? logos?.light ?? logos?.dark ?? null
 			},
-			[slug, fallbackVault.curator_name]
+			[slug, curator.name]
 		);
 	}
 
 	for (const [slug, groupVaults] of protocolVaults) {
 		const fallbackVault = groupVaults[0];
+		const isUnknown = slug === UNKNOWN_VAULT_PROTOCOL_SLUG;
 		addRecord(
 			records,
 			{
 				id: `protocol:${slug}`,
-				name: getProtocolDisplayName(fallbackVault.protocol, slug),
+				name: isUnknown ? UNKNOWN_VAULT_PROTOCOL_DISPLAY_NAME : getProtocolDisplayName(fallbackVault.protocol, slug),
 				entityType: 'protocol',
 				vaultId: null,
 				address: null,
 				...getGroupMetrics(groupVaults),
 				href: `/vaults/protocols/${slug}`,
 				logoUrl: getVaultProtocolLogoUrl(slug) ?? null
 			},
-			[slug, fallbackVault.protocol]
+			[slug, fallbackVault.protocol, isUnknown ? UNKNOWN_VAULT_PROTOCOL_DISPLAY_NAME : null]
 		);
 	}
 
@@ -284,8 +290,8 @@ export async function searchVaultEntities(
 	options: SearchOptions = {}
 ): Promise<SearchResponse> {
 	const trimmedQuery = query.trim();
-	const index = await getIndex(fetch);
 	if (!trimmedQuery) return { query: '', results: [], total: 0 };
+	const index = await getIndex(fetch);
 
 	const normalisedQuery = normalise(trimmedQuery);
 	if (!normalisedQuery) return { query: trimmedQuery, results: [], total: 0 };

src/lib/search/vault-search.server.ts

@@ -112,7 +112,13 @@ Search vaults and vault-related data about curators, protocols and stablecoins.
 		{:else if !data.total}
 			<div class="message">No results found for “{data.query}”. Try another name or symbol.</div>
 		{:else}
-			<p class="result-count">{data.total} result{data.total === 1 ? '' : 's'} for “{data.query}”</p>
+			<p class="result-count">
+				{#if data.total > data.results.length}
+					Showing {data.results.length} of {data.total} results for “{data.query}”
+				{:else}
+					{data.total} result{data.total === 1 ? '' : 's'} for “{data.query}”
+				{/if}
+			</p>
 
 			<VaultGroupTable
 				class="search-results-table"

src/routes/search/+page.svelte

@@ -59,6 +59,19 @@ test.describe('site search typeahead', () => {
 		await expect(page.getByRole('dialog', { name: 'Search' })).toBeHidden();
 	});
 
+	test('closes desktop quick results when interacting outside search', async ({ page }) => {
+		await page.goto('/vaults');
+		await page.waitForLoadState('networkidle');
+
+		const search = page.getByTestId('nav-search').getByRole('combobox');
+		await search.fill('Euler');
+		const dialog = page.getByRole('dialog', { name: 'Search' });
+		await expect(dialog).toBeVisible();
+
+		await page.getByTestId('top-vaults-meta').click();
+		await expect(dialog).toBeHidden();
+	});
+
 	test('opens a vault result from a nested page without a route-relative 404', async ({ page }) => {
 		await page.goto('/vaults/curators/steakhouse-financial');
 		await page.waitForLoadState('networkidle');

tests/integration/search.test.ts

@@ -19,15 +19,19 @@ async function closeAdvancedSettings(page: import('@playwright/test').Page) {
 	await expect(advancedFilters).toHaveJSProperty('open', false);
 }
 
-async function waitForVaultRows(page: import('@playwright/test').Page) {
+/** Load additional listing rows until a named vault is rendered. */
+async function getVaultRow(page: import('@playwright/test').Page, name: string) {
 	await expect(page.locator('tbody tr.targetable').first()).toBeVisible();
-}
-
-async function searchVault(page: import('@playwright/test').Page, query: string) {
-	await waitForVaultRows(page);
-	const vaultSearch = page.getByTestId('vault-search');
-	await vaultSearch.click();
-	await vaultSearch.pressSequentially(query);
+	const row = page.locator('tbody tr.targetable').filter({ hasText: name });
+	for (let attempt = 0; attempt < 3 && (await row.count()) === 0; attempt++) {
+		const sentinel = page.getByTestId('load-more-sentinel');
+		if (!(await sentinel.isVisible())) break;
+		const previousRowCount = await page.locator('tbody tr.targetable').count();
+		await sentinel.scrollIntoViewIfNeeded();
+		await expect.poll(() => page.locator('tbody tr.targetable').count()).toBeGreaterThan(previousRowCount);
+	}
+	await expect(row).toHaveCount(1);
+	return row;
 }
 
 async function toggleReturnOption(page: import('@playwright/test').Page, label: string) {
@@ -80,10 +84,7 @@ test.describe('vault index page', () => {
 	});
 
 	test('shows lifetime data tooltip on the lifetime return cell', async ({ page }) => {
-		await searchVault(page, 'Trading Strategy ICHIv3 LS 2');
-
-		const row = page.locator('tbody tr.targetable').filter({ hasText: 'Trading Strategy ICHIv3 LS 2' });
-		await expect(row).toHaveCount(1);
+		const row = await getVaultRow(page, 'Trading Strategy ICHIv3 LS 2');
 
 		await expectLifetimeDataTooltip(
 			row.locator('td.return-column-lifetime-abs .tooltip'),
@@ -97,7 +98,6 @@ test.describe('vault index page', () => {
 		const primaryFilters = page.locator('.primary-filters');
 		await expect(primaryFilters.getByText('Technical risk', { exact: true })).toBeVisible();
 		await expect(primaryFilters.getByText('Hide undepositable', { exact: true })).toBeVisible();
-		await expect(primaryFilters.getByTestId('vault-search')).toBeVisible();
 
 		const advanced = page.getByTestId('advanced-filters');
 		await expect(advanced).not.toHaveAttribute('open', '');
@@ -141,7 +141,6 @@ test.describe('vault index page', () => {
 
 		await expect(mobileFiltersTrigger).toHaveAttribute('aria-expanded', 'true');
 		await expect(primaryFilters.getByText('Technical risk', { exact: true })).toBeVisible();
-		await expect(primaryFilters.getByTestId('vault-search')).not.toBeVisible();
 		await expect(page.locator('.advanced-filters-content').getByText('Min TVL')).toBeVisible();
 		await expect(page.getByTestId('advanced-filters-summary')).not.toBeVisible();
 	});
@@ -298,11 +297,8 @@ test.describe('vault index page', () => {
 	});
 
 	test('shows limited data tooltips for partial 3M and 1Y returns', async ({ page }) => {
-		await page.goto('/vaults?returns=1m-ann,3m-ann,1y-ann');
-		await searchVault(page, 'Limited coverage vault');
-
-		const row = page.locator('tbody tr.targetable').filter({ hasText: 'Limited coverage vault' });
-		await expect(row).toHaveCount(1);
+		await page.goto('/vaults?returns=1m-ann,3m-ann,1y-ann&unknown=0');
+		const row = await getVaultRow(page, 'Limited coverage vault');
 
 		await expectLimitedDataTooltip(
 			page,
@@ -321,11 +317,8 @@ test.describe('vault index page', () => {
 	});
 
 	test('shows limited data tooltip for partial 6M returns', async ({ page }) => {
-		await page.goto('/vaults?returns=1m-ann,3m-ann,6m-ann');
-		await searchVault(page, 'Limited coverage vault');
-
-		const row = page.locator('tbody tr.targetable').filter({ hasText: 'Limited coverage vault' });
-		await expect(row).toHaveCount(1);
+		await page.goto('/vaults?returns=1m-ann,3m-ann,6m-ann&unknown=0');
+		const row = await getVaultRow(page, 'Limited coverage vault');
 
 		await expectLimitedDataTooltip(
 			page,