feat: patches search bar

src/lib/components/atoms/Search.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let title: string;
+    export let searchTerm: string;
+</script>
+
+<div>
+	<img src="../icons/search.svg" />
+	<input type="text" placeholder={title} bind:value={searchTerm} />
+</div>
+
+<style>
+	img {
+		position: absolute;
+		height: 20px;
+		transform: translate(60%, 60%);
+	}
+
+	input {
+		position: relative;
+		display: flex;
+		padding: 0.75rem 1rem;
+		border-radius: 12px;
+		border: 1px solid var(--grey-three);
+		background-color: transparent;
+		color: var(--grey-five);
+		padding-left: 2.5rem;
+        width: 100%;
+	}
+	input::placeholder {
+		color: var(--grey-five);
+	}
+
+	input:focus {
+		outline: 1px solid var(--accent-color);
+	}
+
+	h3 {
+		font-size: 0.9rem;
+		color: var(--grey-five);
+	}
+</style>

src/lib/components/molecules/NavHost.svelte

@@ -71,7 +71,7 @@
 						<Navigation href="/download">Download</Navigation>
 						<Navigation href="/patches">Patches</Navigation>
 					</div>
-					
+
 					<div class="bottom-mobile-container">
 						<Navigation href="/contributors/">
 							<img src="/icons/contrib.svg" alt="Contributors" />
@@ -103,7 +103,7 @@
 		min-height: 70px;
 		width: 100%;
 		z-index: 999;
-		background-color: var(--grey-seven);
+		background-color: var(--grey-six);
 	}
 
 	.desktop {
@@ -158,8 +158,6 @@
 		img {
 			height: 25px;
 		}
-
-		
 	}
 
 	.bottom-mobile-container {

src/lib/components/molecules/PatchCell.svelte

@@ -36,6 +36,7 @@
 		{/if}
 	</div>
 
+	<h4>{patch.description}</h4>
 	<div class="info-container">
 		{#each patch.compatiblePackages as pkg, i}
 			<a
@@ -59,7 +60,6 @@
 			<h2>⚙️ Patch Options</h2>
 		{/if}
 	</div>
-	<h4>{patch.description}</h4>
 
 	{#if expanded && hasPatchOptions}
 		<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
@@ -127,7 +127,7 @@
 	}
 
 	.patch-container:active {
-		filter: brightness(1.5);
+		filter: brightness(1.75);
 	}
 
 	.title {
@@ -171,6 +171,4 @@
 		display: flex;
 		flex-direction: column;
 	}
-
-
 </style>

src/lib/components/molecules/TreeMenu.svelte

@@ -3,8 +3,6 @@
 </script>
 
 <div class="menu">
-	<h5>{title.toUpperCase()}</h5>
-	<hr />
 	<div class="package-list">
 		<slot />
 	</div>
@@ -19,22 +17,15 @@
 		flex-direction: column;
 		position: sticky;
 		top: 70px;
-		padding-top: calc(7rem - 70px);
+		padding-top: calc(6rem - 70px);
 		overflow-y: scroll;
-		border-right: 1px solid var(--grey-six);
-	}
 
-	h5 {
-		font-weight: 500;
-	}
-
-	hr {
-		margin-top: 0.5rem;
 	}
 
 	.package-list {
 		margin-top: 0.75rem;
 		display: flex;
+		gap: 1rem;
 		flex-direction: column;
 		white-space: normal;
 		word-break: break-all;