feat: patches search bar

src/app.css

@@ -44,7 +44,7 @@ body {
     --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
     --grey-six: #202126;
-    --grey-seven: #202126;
+    --grey-seven: #18191D;
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -83,7 +83,7 @@ h4 {
 }
 
 h5 {
-    color: var(--white);
+    color: var(--accent-color-two);
     font-weight: 300;
     font-size: 1rem;
     letter-spacing: 0.02rem;
@@ -102,7 +102,7 @@ h6 {
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--grey-one);
+    background-color: var(--accent-color);
     background-clip: content-box;
     border-radius: 100px;
 }

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

@@ -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;

src/routes/patches/+page.svelte

@@ -2,19 +2,28 @@
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import type { CompatiblePackage } from 'src/data/types';
+	import type { Patch } from 'src/data/types';
 	import { patches as api_patches } from '../../data/api';
 
 	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
 	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
 	import PatchCell from '$lib/components/molecules/PatchCell.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
+	import Search from '$lib/components/atoms/Search.svelte';
 
 	$: ({ patches, packages } = $api_patches);
 
 	let current: boolean = false;
+	let searchTerm: string;
 
-	function search(findTerm: string | boolean, array: any) {
+	function search(patch: Patch) {
+		if (patch.name.includes(searchTerm) || patch.description.includes(searchTerm)) {
+			return true;
+		}
+		return false;
+	}
+
+	function filterByPackage(findTerm: string | boolean, array: any) {
 		for (let i = 0; i < array.length; i++) {
 			if (array[i].name === findTerm) {
 				return true;
@@ -32,21 +41,26 @@
 
 <main>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
-		<TreeMenu title="packages">
+		<TreeMenu title="Search patches...">
+			<Search bind:searchTerm title="Search patches..." />
+			<span>
 				{#each packages as pkg}
 					<TreeMenuButton bind:current name={pkg} />
 				{/each}
+			</span>
 		</TreeMenu>
 	</aside>
 
 	<div class="patches-container">
 		{#each patches as patch}
-			{#key current}
+			{#key current || searchTerm}
-				{#if search(current, patch.compatiblePackages) || !current}
+				{#if filterByPackage(current, patch.compatiblePackages) || !current}
+					{#if search(patch) || !searchTerm}
 						<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
 							<PatchCell bind:current {patch} />
 						</div>
 					{/if}
+				{/if}
 			{/key}
 		{/each}
 	</div>
@@ -56,21 +70,26 @@
 <style>
 	main {
 		margin-inline: auto;
-		padding: 0 2rem;
 		display: grid;
 		grid-template-columns: 300px 3fr;
+		width: min(98%, 90rem);
 		gap: 1.5rem;
-		padding-bottom: 3rem;
+	}
+
+	aside {
+		padding-left: 0.75rem;
 	}
 
 	.patches-container {
-		margin-top: 7rem;
+		margin-top: 6rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 		width: 100%;
 		position: sticky;
 		z-index: 1;
-		min-height: calc(100vh - 7rem);
+		min-height: calc(100vh - 6rem);
+		padding-bottom: 3rem;
+		padding-right: 0.75rem;
 	}
 </style>

static/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" fill="#ACC0D3"/></svg>