feat: patches search url params

src/lib/components/Search.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	export let title: string;
 	export let searchTerm: string | null;
-	export let searchTermFiltered: string | null;
+	export let searchTermFiltered: string | undefined;
 	import { fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
 	function clear() {
-		searchTerm = null;
+		searchTerm = '';
-		searchTermFiltered = null;
+		searchTermFiltered = '';
+		window.history.pushState(null, '', window.location.href.split('?')[0]) 
 	}
 </script>
 
@@ -68,10 +69,9 @@
 		background-color: var(--grey-ten);
 	}
 
-
 	input::placeholder {
 		color: var(--grey-five);
-		font-size: 0.92rem;
+		font-size: 0.9rem;
 		font-weight: 500;
 		transition: all 0.2s var(--bezier-one);
 	}

src/routes/patches/Package.svelte

@@ -3,6 +3,7 @@
 
 	export let selectedPkg: string | undefined;
 	export let name: string;
+	export let searchTerm: string | null;
 
 	function handleClick() {
 		// Assign the selected package. If it's already selected, deselect it.
@@ -10,6 +11,9 @@
 		if (selectedPkg !== name && name !== 'All packages') {
 			path += `/${name}`;
 		}
+		if (searchTerm) {
+			path += `?s=${searchTerm}`
+		};
 		goto(path);
 		window.scrollTo({ top: 0, behavior: 'smooth' });
 	}

src/routes/patches/[[package]]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	import { page } from '$app/stores';
 
 	import type { PageData } from './$types';
 	import type { Patch } from '$lib/types';
@@ -23,8 +24,12 @@
 	export let data: PageData;
 	$: ({ selectedPkg } = data);
 
-	let searchTerm: string;
+	let searchTerm = $page.url.searchParams.get('s');
-	let searchTermFiltered: string;
+	let searchTermFiltered = searchTerm
+		?.replace(/\./g, '')
+		.replace(/\s/g, '')
+		.replace(/-/g, '')
+		.toLowerCase();
 	let timeout: ReturnType<typeof setTimeout>;
 	let mobilePackages = false;
 
@@ -72,6 +77,8 @@
 				.replace(/\s/g, '')
 				.replace(/-/g, '')
 				.toLowerCase();
+				// Update search URL params
+				window.history.pushState(null, '', `${window.location.href.split('?')[0]}${searchTerm ? '?s=' + searchTerm : ''}`) 
 		}, 500);
 	};
 </script>
@@ -112,14 +119,14 @@
 						on:click={() => (mobilePackages = !mobilePackages)}
 						on:keypress={() => (mobilePackages = !mobilePackages)}
 					>
-						<Package {selectedPkg} name="All packages" />
+						<Package {selectedPkg} name="All packages" bind:searchTerm/>
 					</span>
 					{#each data.packages as pkg}
 						<span
 							on:click={() => (mobilePackages = !mobilePackages)}
 							on:keypress={() => (mobilePackages = !mobilePackages)}
 						>
-							<Package {selectedPkg} name={pkg} />
+							<Package {selectedPkg} name={pkg} bind:searchTerm/>
 						</span>
 					{/each}
 				</div>
@@ -129,9 +136,9 @@
 		<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 			<PackageMenu>
 				<span class="packages">
-					<Package {selectedPkg} name="All packages" />
+					<Package {selectedPkg} name="All packages" bind:searchTerm/>
 					{#each data.packages as pkg}
-						<Package {selectedPkg} name={pkg} />
+						<Package {selectedPkg} name={pkg} bind:searchTerm />
 					{/each}
 				</span>
 			</PackageMenu>