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,9 +99,12 @@
 		width: 100%;
 	}
 
+	#back-button {
+		cursor: pointer;
+	}
 
 	.hasIcon {
-		flex-direction: column;	
+		flex-direction: column;
 	}
 
 	.modal {
@@ -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>