feat(lxl-web): Implement supersearch

lxl-web/.env.example

@@ -5,4 +5,5 @@ AUXD_SECRET=
 USE_LOCAL_DISPLAY_JSONLD=false
 HOLDING_STATUS_URL=
 PUBLIC_MATOMO_URL=
-PUBLIC_MATOMO_ID=
+PUBLIC_MATOMO_ID=
+PUBLIC_USE_SUPERSEARCH=false

lxl-web/package.json

@@ -55,6 +55,7 @@
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.6",
+		"supersearch": "^0.0.1",
 		"svelte": "^5.1.9",
 		"svelte-check": "^4.0.4",
 		"tailwindcss": "^3.4.10",

lxl-web/src/lib/components/Search.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { PUBLIC_USE_SUPERSEARCH } from '$env/static/public';
 	import { page } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
+	import { SuperSearch } from 'supersearch';
 	import addDefaultSearchParams from '$lib/utils/addDefaultSearchParams';
 	import getSortedSearchParams from '$lib/utils/getSortedSearchParams';
 	import BiSearch from '~icons/bi/search';
@@ -41,38 +43,42 @@
 </script>
 
 <form class="relative w-full" action="find" on:submit={handleSubmit}>
-	<!-- svelte-ignore a11y-autofocus -->
-	<input
-		id="main-search"
-		class="h-12 w-full rounded-full pr-12 text-secondary shadow-accent-dark/32 focus:shadow-search-focus focus:outline
+	{#if PUBLIC_USE_SUPERSEARCH === 'true'}
+		<SuperSearch />
+	{:else}
+		<!-- svelte-ignore a11y-autofocus -->
+		<input
+			id="main-search"
+			class="h-12 w-full rounded-full pr-12 text-secondary shadow-accent-dark/32 focus:shadow-search-focus focus:outline
 			focus:outline-8 focus:outline-accent-dark/16 sm:h-14
 			sm:pr-28"
-		type="search"
-		name="_q"
-		{placeholder}
-		aria-label={$page.data.t('search.search')}
-		spellcheck="false"
-		bind:value={q}
-		{autofocus}
-		data-testid="main-search"
-	/>
-	{#each searchParams as [name, value]}
-		{#if name !== '_q'}
-			<input type="hidden" {name} {value} />
+			type="search"
+			name="_q"
+			{placeholder}
+			aria-label={$page.data.t('search.search')}
+			spellcheck="false"
+			bind:value={q}
+			{autofocus}
+			data-testid="main-search"
+		/>
+		{#each searchParams as [name, value]}
+			{#if name !== '_q'}
+				<input type="hidden" {name} {value} />
+			{/if}
+		{/each}
+
+		<input type="hidden" name="_i" value={q} />
+		{#if $page.url.searchParams.get('_x') === 'advanced'}
+			<!-- keep 'edit' state on new search -->
+			<input type="hidden" name="_x" value="advanced" />
 		{/if}
-	{/each}
 
-	<input type="hidden" name="_i" value={q} />
-	{#if $page.url.searchParams.get('_x') === 'advanced'}
-		<!-- keep 'edit' state on new search -->
-		<input type="hidden" name="_x" value="advanced" />
+		<button
+			type="submit"
+			class="button-primary absolute right-1 top-1 rounded-full px-3 sm:right-2 sm:top-2 sm:px-4"
+		>
+			<BiSearch fill="currentColor" aria-hidden="true" />
+			<span class="sr-only sm:not-sr-only">{$page.data.t('search.search')}</span>
+		</button>
 	{/if}
-
-	<button
-		type="submit"
-		class="button-primary absolute right-1 top-1 rounded-full px-3 sm:right-2 sm:top-2 sm:px-4"
-	>
-		<BiSearch fill="currentColor" aria-hidden="true" />
-		<span class="sr-only sm:not-sr-only">{$page.data.t('search.search')}</span>
-	</button>
 </form>