feat: search debounce

src/lib/components/atoms/Search.svelte

@@ -3,8 +3,19 @@
 	export let searchTerm: string | null;
 	import { fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	// import { onMount } from 'svelte';
+
+	// let search: HTMLInputElement;
+
+	// function handleKeydown(event) {
+	// 	if (event.code === 'Slash') {
+	// 		search.focus;
+	// 	}
+	// }
 </script>
 
+<!-- <svelte:window on:keydown={handleKeydown} /> -->
+
 <div>
 	<img src="../icons/search.svg" id="search" alt="Search" />
 	{#if searchTerm}
@@ -17,7 +28,13 @@
 			transition:fade|local={{ easing: quintOut, duration: 250 }}
 		/>
 	{/if}
-	<input type="text" class:clear={searchTerm} placeholder={title} bind:value={searchTerm} />
+	<input
+		type="text"
+		class:clear={searchTerm}
+		placeholder={title}
+		bind:value={searchTerm}
+		on:keyup
+	/>
 </div>
 
 <style>
@@ -46,7 +63,7 @@
 		border-radius: 12px;
 		border: 1px solid var(--grey-three);
 		background-color: transparent;
-		color: var(--grey-five);
+		color: var(--accent-color);
 		padding-left: 2.5rem;
 		width: 100%;
 	}

src/lib/components/molecules/TreeMenu.svelte

@@ -6,7 +6,7 @@
 
 <style>
 	.menu {
-		height: calc(100vh - 70px);
+		height: calc(100vh - 60px);
 		width: 100%;
 		padding: 0px 30px 30px 10px;
 		display: flex;
@@ -17,6 +17,13 @@
 		overflow-y: scroll;
 	}
 
+	.menu::-webkit-scrollbar-thumb {
+		background-color: transparent;
+	}
+	.menu:hover::-webkit-scrollbar-thumb {
+		background-color: var(--accent-color);
+	}
+
 	.package-list {
 		margin-top: 0.75rem;
 		display: flex;

src/routes/patches/+page.svelte

@@ -15,21 +15,30 @@
 
 	let current: boolean = false;
 	let searchTerm: string;
-	$: searchTermLowerCase = searchTerm?.toLowerCase();
+	let searchTermFiltered: string;
+	let timeout: any = null;
+
+	const debounce = () => {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			searchTermFiltered = searchTerm?.replace(/\./g, '').replace(/\s/g, '').replace(/-/g, '').toLowerCase()
+		}, 500);
+	}
+
 
 	function search(patch: Patch) {
 		function checkPkgName(findTerm: string | boolean, array: any) {
 			for (let i = 0; i < array.length; i++) {
-				if (array[i].name.includes(findTerm)) {
+				if (array[i].name.replace(/\./g, '').includes(findTerm)) {
 					return true;
 				}
 			}
 		}
 
 		return (
-			patch.description.toLowerCase().includes(searchTermLowerCase) ||
+			patch.description.toLowerCase().replace(/\s/g, '').includes(searchTermFiltered) ||
-			patch.name.replace(/-/g, ' ').toLowerCase().includes(searchTermLowerCase) ||
+			patch.name.replace(/-/g, '').toLowerCase().includes(searchTermFiltered) ||
-			checkPkgName(searchTermLowerCase, patch.compatiblePackages)
+			checkPkgName(searchTermFiltered, patch.compatiblePackages)
 		);
 	}
 
@@ -52,7 +61,7 @@
 <main>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
 		<TreeMenu title="Search patches...">
-			<Search bind:searchTerm title="Search patches" />
+			<Search bind:searchTerm title="Search patches" on:keyup={debounce} />
 			<span>
 				{#each packages as pkg}
 					<TreeMenuButton bind:current name={pkg} />
@@ -63,7 +72,7 @@
 
 	<div class="patches-container">
 		{#each patches as patch}
-			{#key current || searchTerm}
+			{#key current || searchTermFiltered}
 				{#if filterByPackage(current, patch.compatiblePackages) || !current}
 					{#if search(patch) || !searchTerm}
 						<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
@@ -91,7 +100,7 @@
 	}
 
 	.patches-container {
-		margin-top: 6rem;
+		margin-top: 6.7rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;