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;