fix(Patches): use query params for selected package

resolves #106

src/routes/patches/+page.svelte

@@ -3,16 +3,15 @@
 	import { quintOut } from 'svelte/easing';
 	import { page } from '$app/stores';
 
-	import type { PageData } from './$types';
 	import type { Patch } from '$lib/types';
 
 	import { createQuery } from '@tanstack/svelte-query';
 	import { queries } from '$data/api';
 
 	import Meta from '$lib/components/Meta.svelte';
-	import PackageMenu from '../PackageMenu.svelte';
-	import Package from '../Package.svelte';
-	import PatchItem from '../PatchItem.svelte';
+	import PackageMenu from './PackageMenu.svelte';
+	import Package from './Package.svelte';
+	import PatchItem from './PatchItem.svelte';
 	import Footer from '$layout/Footer/FooterHost.svelte';
 	import Search from '$lib/components/Search.svelte';
 	import FilterChip from '$lib/components/FilterChip.svelte';
@@ -21,16 +20,14 @@
 
 	const query = createQuery(['patches'], queries.patches);
 
-	export let data: PageData;
-	$: ({ selectedPkg } = data);
-
-	// Search whatever the s query is from the url
+	$: selectedPkg = $page.url.searchParams.get('pkg');
 	let searchTerm = $page.url.searchParams.get('s');
 	let searchTermFiltered = searchTerm
 		?.replace(/\./g, '')
 		.replace(/\s/g, '')
 		.replace(/-/g, '')
 		.toLowerCase();
+
 	let timeout: ReturnType<typeof setTimeout>;
 	let mobilePackages = false;
 
@@ -80,11 +77,19 @@
 				.toLowerCase();
 			// Update search URL params
 			// must use history.pushState instead of goto(), as goto() unselects the search bar
-			window.history.pushState(
-				null,
-				'',
-				`${window.location.href.split('?')[0]}${searchTerm ? '?s=' + searchTerm : ''}`
-			);
+			const url = new URL(window.location.href);
+			url.pathname = '/patches';
+
+			const params = new URLSearchParams();
+			if (selectedPkg) {
+				params.set('pkg', selectedPkg);
+			}
+			if (searchTerm) {
+				params.set('s', searchTerm);
+			}
+
+			url.search = params.toString();
+			window.history.pushState(null, '', url.toString());
 		}, 500);
 	};
 </script>

src/routes/patches/Package.svelte

@@ -1,20 +1,25 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
-	export let selectedPkg: string | undefined;
+	export let selectedPkg: string | null;
 	export let name: string;
 	export let searchTerm: string | null;
 
 	function handleClick() {
 		// Assign the selected package. If it's already selected, deselect it.
-		let path = '/patches';
+		const url = new URL(window.location.href);
+		const params = new URLSearchParams();
+		url.pathname = '/patches';
+
 		if (selectedPkg !== name && name !== 'All packages') {
-			path += `/${name}`;
+			params.set('pkg', name);
 		}
 		if (searchTerm) {
-			path += `?s=${searchTerm}`
-		};
-		goto(path);
+			params.set('s', searchTerm);
+		}
+		url.search = params.toString();
+		goto(url.pathname + url.search);
+
 		window.scrollTo({ top: 0, behavior: 'smooth' });
 	}
 </script>

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

@@ -1,8 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const prerender = false;
-
-export const load: PageLoad = async ({ params }) => {
-	const selectedPkg = params.package || undefined;
-	return { selectedPkg };
-};