useSearchMatchDetails

File Information

• Path: app/composables/core/components/search/useSearchMatchDetails.ts
• Used by: SearchMatchDetails

Overview

Turns one SearchMatch into the lists the hover menu renders, builds clickable tag links, and tracks tag clicks.

Parameters

useSearchMatchDetails(props: { match: SearchMatch; assetId?: string | number })

Returns

Name	Type	Description
title	ComputedRef<string>	'Matched tags', 'Matched custom fields' or 'Matched in description' by match.kind
tags	ComputedRef<string[]>	[match.value, ...match.others] for tag, else []
fields	ComputedRef<CustomFieldMatch[]>	[{ label, value }, ...match.others] for custom_field, else []
tagLinks	Ref<Record<string, string>>	tag name to /{brand}/search?q=<encrypted>
trackTagClick	(tag: string) => void	sends the Amplitude tag-click event

Behavior

• Tag links. A watch on tags (immediate: true) calls useTagSearchLink().buildTagLinks(list) whenever the list is non-empty. Each link encrypts a search state of { searchKey: null, filter: [{ level1: 'tags', level2: 'include-all-of', level3: [{ tag_name, search_name }] }], pageType: '' } with encryptData, because the search page reads its whole state from one encrypted q (useSearch.initOps decrypts it). Encryption is async and needs crypto.subtle, so links are built client-side only and are missing until the promise resolves. A tag whose encryption throws is left unlinked and renders as plain text. Links are prebuilt rather than created in the click handler so the chip stays a real <a>; a deferred window.open would be caught by popup blockers.
• Tracking. trackTagClick(tag) calls $amplitude?.track(AMPLITUDE_EVENTS.TAG_CLICKED, { tag_name, asset_id, source: 'search-match' }), the same event and shape as the asset detail page's tag chips. asset_id is String(assetId) or null.

Related

• SearchMatchDetails
• useSearchMatchChip