fix(Patches): use query params for selected package

resolves #106

src/lib/components/Dialogue.svelte

@@ -3,6 +3,13 @@
 	import { quadInOut } from 'svelte/easing';
 	export let modalOpen = false;
 	export let fullscreen = false;
+
+	let element: HTMLDivElement;
+	let y = 0;
+
+	function parseScroll() {
+		y = element.scrollTop;
+	}
 </script>
 
 {#if modalOpen}
@@ -17,13 +24,16 @@
 		class="modal"
 		role="dialog"
 		class:fullscreen
+		class:scrolled={y > 10}
 		aria-modal="true"
+		bind:this={element}
+		on:scroll={parseScroll}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	>
 		<div class="top">
 			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
-					<button on:click={() => (modalOpen = !modalOpen)}>
+					<button id="back-button" on:click={() => (modalOpen = !modalOpen)}>
 						<img src="../icons/back.svg" id="back" alt="back" />
 					</button>
 				{/if}
@@ -51,7 +61,6 @@
 				</div>
 			{/if}
 		</div>
-		
 	</div>
 {/if}
 
@@ -74,12 +83,9 @@
 	}
 
 	.title {
-		position: sticky;
 		display: flex;
 		align-items: center;
 		gap: 1rem;
-		top: 0;
-		left: 0;
 		width: 100%;
 		background-color: var(--grey-six);
 		margin-bottom: 8px;
@@ -93,6 +99,9 @@
 		width: 100%;
 	}
 
+	#back-button {
+		cursor: pointer;
+	}
 
 	.hasIcon {
 		flex-direction: column;
@@ -135,12 +144,27 @@
 	}
 
 	.fullscreen {
+		padding: 0;
 		max-height: 100%;
 		width: 100%;
 		border-radius: 0;
 	}
+
+	.fullscreen .slot {
+		padding: 0 32px 32px;
+	}
+
 	.fullscreen .title {
 		justify-content: flex-start;
+		position: sticky;
+		padding: 32px;
+		padding-bottom: 0.75rem;
+		top: 0;
+		left: 0;
+	}
+
+	.fullscreen.scrolled .title {
+		border-bottom: 1px solid var(--grey-three);
 	}
 
 	.slot {
@@ -154,5 +178,3 @@
 		display: none;
 	}
 </style>
-
-

src/lib/components/Search.svelte

@@ -11,7 +11,10 @@
 	function clear() {
 		searchTerm = '';
 		searchTermFiltered = '';
-		goto($page.url.pathname)
+		
+		const url = new URL($page.url);
+		url.searchParams.delete('s');
+		goto(url.pathname + url.search);
 	}
 </script>
 
@@ -85,6 +88,6 @@
 
 	input:focus::placeholder {
 		outline: none;
-		color: var(--accent-color)
+		color: var(--accent-color);
 	}
 </style>

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 PackageMenu from './PackageMenu.svelte';
-	import Package from '../Package.svelte';
+	import Package from './Package.svelte';
-	import PatchItem from '../PatchItem.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 = $page.url.searchParams.get('pkg');
-	$: ({ selectedPkg } = data);
-
-	// Search whatever the s query is from the url
 	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(
+			const url = new URL(window.location.href);
-				null,
+			url.pathname = '/patches';
-				'',
+
-				`${window.location.href.split('?')[0]}${searchTerm ? '?s=' + searchTerm : ''}`
+			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}`
+			params.set('s', searchTerm);
-		};
+		}
-		goto(path);
+		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 };
-};