From 839c7dc0b86637ba611ca2c167e81f004ec00cd4 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:00:50 -0600
Subject: [PATCH 1/2] fix: delete file

---
 .../shared/components/search-select.svelte    | 205 ------------------
 1 file changed, 205 deletions(-)
 delete mode 100644 src/svelte/shared/components/search-select.svelte

diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
deleted file mode 100644
index c9f2f0d..0000000
--- a/src/svelte/shared/components/search-select.svelte
+++ /dev/null
@@ -1,205 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
-	import Icon from "./icon.svelte";
-
-	export let width = "fit-content";
-	export let options: string[] = [];
-	export let value: string = "";
-
-	let inputValue = value;
-	let isOpen = false;
-	let dropdownRef: HTMLDivElement | null = null;
-	let currentFocusIndex = 0;
-
-	const dispatch = createEventDispatcher();
-
-	onMount(() => {
-		document.addEventListener("click", handleClickOutside);
-
-		return () => {
-			document.removeEventListener("click", handleClickOutside);
-		};
-	});
-
-	function openDropdown() {
-		isOpen = true;
-		inputValue = "";
-	}
-
-	function closeDropdown() {
-		isOpen = false;
-		inputValue = "";
-		currentFocusIndex = 0;
-	}
-
-	function handleOptionClick(option: string) {
-		inputValue = option;
-		value = option;
-		isOpen = false;
-		dispatch("select", { value: option });
-	}
-
-	function handleInputChange(e: Event) {
-		const value = (e.target as HTMLInputElement).value;
-		inputValue = value;
-		currentFocusIndex = 0;
-	}
-
-	function handleInputFocus() {
-		openDropdown();
-	}
-
-	function handleInputKeyDown(e: KeyboardEvent) {
-		if (e.key === "ArrowDown") {
-			if (!isOpen) {
-				openDropdown();
-				return;
-			}
-			currentFocusIndex = currentFocusIndex + 1;
-			if (currentFocusIndex == filteredOptions.length) {
-				currentFocusIndex = currentFocusIndex - 1;
-			}
-		} else if (e.key === "ArrowUp") {
-			if (!isOpen) {
-				openDropdown();
-				return;
-			}
-
-			currentFocusIndex = currentFocusIndex - 1;
-			if (currentFocusIndex < 0) {
-				currentFocusIndex = currentFocusIndex = 0;
-			}
-		} else if (e.key === "Enter") {
-			if (isOpen) {
-				const option = filteredOptions[currentFocusIndex];
-				if (option) {
-					handleOptionClick(option);
-				}
-			} else {
-				openDropdown();
-			}
-		} else if (e.key === "Tab") {
-			closeDropdown();
-		} else {
-			// open dropdown on any key press
-			if (!isOpen) {
-				openDropdown();
-			}
-		}
-	}
-
-	function handleClickOutside(e: Event) {
-		const targetEl = e.target as HTMLElement;
-		const isInsideClick = targetEl.closest(
-			".vault-explorer-search-selection",
-		);
-		if (!isInsideClick && isOpen) {
-			closeDropdown();
-		}
-	}
-
-	function fuzzySearch(input: string) {
-		return options.filter((option) =>
-			option.toLowerCase().includes(input.toLowerCase()),
-		);
-	}
-
-	$: filteredOptions = fuzzySearch(inputValue);
-</script>
-
-<div class="vault-explorer-search-selection" style={`width: ${width}`}>
-	<input
-		bind:value={inputValue}
-		placeholder={value || "Search..."}
-		type="text"
-		on:input={handleInputChange}
-		on:focus={handleInputFocus}
-		on:keydown={handleInputKeyDown}
-	/>
-	<span class="vault-explorer-dropdown-icon"
-		><Icon iconId="chevron-down" size="xs" /></span
-	>
-
-	{#if isOpen}
-		<div class="vault-explorer-dropdown" bind:this={dropdownRef}>
-			{#each filteredOptions as option, i}
-				<div
-					tabindex="-1"
-					role="option"
-					aria-selected={option === value}
-					class="vault-explorer-dropdown-item"
-					class:vault-explorer-dropdown-item--selected={currentFocusIndex ===
-						i}
-					on:click={() => handleOptionClick(option)}
-					on:keydown={() => {}}
-				>
-					{option}
-				</div>
-			{/each}
-			{#if filteredOptions.length === 0}
-				<div
-					class="vault-explorer-dropdown-item vault-explorer-dropdown-item--empty"
-				>
-					No results found
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.vault-explorer-search-selection {
-		position: relative;
-	}
-
-	.vault-explorer-search-selection input {
-		cursor: default;
-		max-width: 300px;
-	}
-
-	.vault-explorer-dropdown {
-		position: absolute;
-		top: calc(100% + 5px);
-		background-color: var(--dropdown-background);
-		box-shadow: var(--input-shadow);
-		width: 100%;
-		max-height: 175px;
-		overflow-y: auto;
-		z-index: 999;
-		color: var(--text-normal);
-		font-size: var(--font-ui-small);
-		line-height: var(--line-height-tight);
-		font-weight: var(--input-font-weight);
-		border-radius: var(--input-radius);
-	}
-
-	.vault-explorer-dropdown-icon {
-		position: absolute;
-		top: 50%;
-		right: 10px;
-		transform: translateY(-50%);
-		pointer-events: none;
-	}
-
-	.vault-explorer-dropdown-item {
-		padding: 6px 8px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.vault-explorer-dropdown-item--selected {
-		background-color: var(--color-base-20);
-	}
-
-	.vault-explorer-dropdown-item:hover {
-		background-color: var(--color-base-30);
-	}
-
-	.vault-explorer-dropdown-item--empty:hover {
-		background-color: transparent;
-	}
-
-	.vault-explorer-dropdown-item:focus-visible {
-		box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
-	}
-</style>

From 3104c91203d3edbb32d51cc51d1e9f7df1319b78 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:01:07 -0600
Subject: [PATCH 2/2] feat: add file back

---
 .../shared/components/search-select.svelte    | 205 ++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100644 src/svelte/shared/components/search-select.svelte

diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
new file mode 100644
index 0000000..c9f2f0d
--- /dev/null
+++ b/src/svelte/shared/components/search-select.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	import Icon from "./icon.svelte";
+
+	export let width = "fit-content";
+	export let options: string[] = [];
+	export let value: string = "";
+
+	let inputValue = value;
+	let isOpen = false;
+	let dropdownRef: HTMLDivElement | null = null;
+	let currentFocusIndex = 0;
+
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		document.addEventListener("click", handleClickOutside);
+
+		return () => {
+			document.removeEventListener("click", handleClickOutside);
+		};
+	});
+
+	function openDropdown() {
+		isOpen = true;
+		inputValue = "";
+	}
+
+	function closeDropdown() {
+		isOpen = false;
+		inputValue = "";
+		currentFocusIndex = 0;
+	}
+
+	function handleOptionClick(option: string) {
+		inputValue = option;
+		value = option;
+		isOpen = false;
+		dispatch("select", { value: option });
+	}
+
+	function handleInputChange(e: Event) {
+		const value = (e.target as HTMLInputElement).value;
+		inputValue = value;
+		currentFocusIndex = 0;
+	}
+
+	function handleInputFocus() {
+		openDropdown();
+	}
+
+	function handleInputKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowDown") {
+			if (!isOpen) {
+				openDropdown();
+				return;
+			}
+			currentFocusIndex = currentFocusIndex + 1;
+			if (currentFocusIndex == filteredOptions.length) {
+				currentFocusIndex = currentFocusIndex - 1;
+			}
+		} else if (e.key === "ArrowUp") {
+			if (!isOpen) {
+				openDropdown();
+				return;
+			}
+
+			currentFocusIndex = currentFocusIndex - 1;
+			if (currentFocusIndex < 0) {
+				currentFocusIndex = currentFocusIndex = 0;
+			}
+		} else if (e.key === "Enter") {
+			if (isOpen) {
+				const option = filteredOptions[currentFocusIndex];
+				if (option) {
+					handleOptionClick(option);
+				}
+			} else {
+				openDropdown();
+			}
+		} else if (e.key === "Tab") {
+			closeDropdown();
+		} else {
+			// open dropdown on any key press
+			if (!isOpen) {
+				openDropdown();
+			}
+		}
+	}
+
+	function handleClickOutside(e: Event) {
+		const targetEl = e.target as HTMLElement;
+		const isInsideClick = targetEl.closest(
+			".vault-explorer-search-selection",
+		);
+		if (!isInsideClick && isOpen) {
+			closeDropdown();
+		}
+	}
+
+	function fuzzySearch(input: string) {
+		return options.filter((option) =>
+			option.toLowerCase().includes(input.toLowerCase()),
+		);
+	}
+
+	$: filteredOptions = fuzzySearch(inputValue);
+</script>
+
+<div class="vault-explorer-search-selection" style={`width: ${width}`}>
+	<input
+		bind:value={inputValue}
+		placeholder={value || "Search..."}
+		type="text"
+		on:input={handleInputChange}
+		on:focus={handleInputFocus}
+		on:keydown={handleInputKeyDown}
+	/>
+	<span class="vault-explorer-dropdown-icon"
+		><Icon iconId="chevron-down" size="xs" /></span
+	>
+
+	{#if isOpen}
+		<div class="vault-explorer-dropdown" bind:this={dropdownRef}>
+			{#each filteredOptions as option, i}
+				<div
+					tabindex="-1"
+					role="option"
+					aria-selected={option === value}
+					class="vault-explorer-dropdown-item"
+					class:vault-explorer-dropdown-item--selected={currentFocusIndex ===
+						i}
+					on:click={() => handleOptionClick(option)}
+					on:keydown={() => {}}
+				>
+					{option}
+				</div>
+			{/each}
+			{#if filteredOptions.length === 0}
+				<div
+					class="vault-explorer-dropdown-item vault-explorer-dropdown-item--empty"
+				>
+					No results found
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.vault-explorer-search-selection {
+		position: relative;
+	}
+
+	.vault-explorer-search-selection input {
+		cursor: default;
+		max-width: 300px;
+	}
+
+	.vault-explorer-dropdown {
+		position: absolute;
+		top: calc(100% + 5px);
+		background-color: var(--dropdown-background);
+		box-shadow: var(--input-shadow);
+		width: 100%;
+		max-height: 175px;
+		overflow-y: auto;
+		z-index: 999;
+		color: var(--text-normal);
+		font-size: var(--font-ui-small);
+		line-height: var(--line-height-tight);
+		font-weight: var(--input-font-weight);
+		border-radius: var(--input-radius);
+	}
+
+	.vault-explorer-dropdown-icon {
+		position: absolute;
+		top: 50%;
+		right: 10px;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+
+	.vault-explorer-dropdown-item {
+		padding: 6px 8px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.vault-explorer-dropdown-item--selected {
+		background-color: var(--color-base-20);
+	}
+
+	.vault-explorer-dropdown-item:hover {
+		background-color: var(--color-base-30);
+	}
+
+	.vault-explorer-dropdown-item--empty:hover {
+		background-color: transparent;
+	}
+
+	.vault-explorer-dropdown-item:focus-visible {
+		box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
+	}
+</style>