From f43da081ca6a1eebd2d08c68e1a065664f8595e9 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Mon, 9 Sep 2024 22:44:50 -0600
Subject: [PATCH] feat: add toggle to search

---
 .../app/components/search-filter.svelte       | 63 ++++++++++++++-----
 src/svelte/app/index.svelte                   | 14 ++---
 2 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/svelte/app/components/search-filter.svelte b/src/svelte/app/components/search-filter.svelte
index c08291f..ae39c82 100644
--- a/src/svelte/app/components/search-filter.svelte
+++ b/src/svelte/app/components/search-filter.svelte
@@ -1,36 +1,67 @@
 <script lang="ts">
+	import IconButton from "src/svelte/shared/components/icon-button.svelte";
+	import Stack from "src/svelte/shared/components/stack.svelte";
 	import { createEventDispatcher } from "svelte";
 
 	export let value: string;
 
+	let inputRef: HTMLInputElement | null;
+	let hidden: boolean = true;
+
 	const dispatch = createEventDispatcher();
 
 	function handleClearClick() {
 		dispatch("clear", { value: "" });
 	}
+
+	function handleIconClick() {
+		hidden = !hidden;
+		if (!hidden) {
+			requestAnimationFrame(() => {
+				inputRef?.focus();
+			});
+		}
+	}
 </script>
 
-<div class="vault-explorer-search-filter">
-	<input type="text" placeholder="Search..." {value} on:input />
-	{#if value.length > 0}
-		<div
-			tabindex="0"
-			role="button"
-			aria-label="Clear search"
-			class="search-input-clear-button"
-			on:click={() => handleClearClick()}
-			on:keydown={(e) => {
-				if (e.key === "Enter") {
-					handleClearClick();
-				}
-			}}
+<Stack spacing="sm">
+	<div
+		class="vault-explorer-search-filter"
+		style="display: {hidden ? 'none' : 'block'};"
+	>
+		<input
+			bind:this={inputRef}
+			type="text"
+			placeholder="Search..."
+			{value}
+			on:input
 		/>
-	{/if}
-</div>
+		{#if value.length > 0}
+			<div
+				tabindex="0"
+				role="button"
+				aria-label="Clear search"
+				class="search-input-clear-button"
+				on:click={() => handleClearClick()}
+				on:keydown={(e) => {
+					if (e.key === "Enter") {
+						handleClearClick();
+					}
+				}}
+			/>
+		{/if}
+	</div>
+	<IconButton
+		iconId="search"
+		ariaLabel="Search"
+		on:click={() => handleIconClick()}
+	/>
+</Stack>
 
 <style>
 	.vault-explorer-search-filter input[type="text"] {
 		width: 100%;
+		height: 24px;
 	}
 
 	.vault-explorer-search-filter {
diff --git a/src/svelte/app/index.svelte b/src/svelte/app/index.svelte
index b529f1f..a6a8fe5 100644
--- a/src/svelte/app/index.svelte
+++ b/src/svelte/app/index.svelte
@@ -952,13 +952,6 @@
 						<Stack spacing="sm"></Stack>
 					</Flex>
 				</Stack>
-				{#if searchFilter.isEnabled}
-					<SearchFilter
-						value={searchFilter.value}
-						on:input={debounceSearchFilterChange}
-						on:clear={() => (searchFilter.value = "")}
-					/>
-				{/if}
 			</Stack>
 			<Spacer size="md" />
 		</div>
@@ -991,6 +984,13 @@
 			<!-- </Stack> -->
 		</div>
 		<Flex>
+			{#if searchFilter.isEnabled}
+				<SearchFilter
+					value={searchFilter.value}
+					on:input={debounceSearchFilterChange}
+					on:clear={() => (searchFilter.value = "")}
+				/>
+			{/if}
 			{#if sortFilter.isEnabled}
 				<SortFilter
 					value={sortFilter.value}