feat: search bar clear button

src/lib/components/atoms/Search.svelte

@@ -1,20 +1,44 @@
 <script lang="ts">
 	export let title: string;
-    export let searchTerm: string;
+	export let searchTerm: string | null;
+	import { fade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 </script>
 
 <div>
-	<img src="../icons/search.svg" alt="Search" />
-	<input type="text" placeholder={title} bind:value={searchTerm} />
+	<img src="../icons/search.svg" id="search" alt="Search" />
+	{#if searchTerm}
+		<img
+			src="../icons/close.svg"
+			id="clear"
+			alt="Close"
+			on:click={() => (searchTerm = null)}
+			on:keypress={() => (searchTerm = null)}
+			transition:fade|local={{ easing: quintOut, duration: 250 }}
+		/>
+	{/if}
+	<input type="text" class:clear={searchTerm} placeholder={title} bind:value={searchTerm} />
 </div>
 
 <style>
-	img {
+	#search {
 		position: absolute;
 		height: 20px;
 		transform: translate(60%, 60%);
 	}
 
+	#clear {
+		position: absolute;
+		z-index: 1;
+		height: 20px;
+		cursor: pointer;
+		transform: translate(1060%, 60%);
+	}
+
+	.clear {
+		padding-right: 2.5rem;
+	}
+
 	input {
 		position: relative;
 		display: flex;

src/lib/components/molecules/TreeMenu.svelte

@@ -1,7 +1,3 @@
-<script lang="ts">
-	export let title: string;
-</script>
-
 <div class="menu">
 	<div class="package-list">
 		<slot />
@@ -19,7 +15,6 @@
 		top: 70px;
 		padding-top: calc(6rem - 70px);
 		overflow-y: scroll;
-
 	}
 
 	.package-list {
@@ -30,5 +25,4 @@
 		white-space: normal;
 		word-break: break-all;
 	}
-
 </style>

src/routes/patches/+page.svelte

@@ -52,7 +52,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" />
 			<span>
 				{#each packages as pkg}
 					<TreeMenuButton bind:current name={pkg} />

static/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="#ACC0D3"/></svg>