From 03eeb75bfe19e9efbdb6fe56c32741798a846c84 Mon Sep 17 00:00:00 2001
From: Silentoplayz <50341825+Silentoplayz@users.noreply.github.com>
Date: Tue, 20 May 2025 12:21:32 -0400
Subject: [PATCH] feat: Add Clear button for Function and admin Model pages

---
 src/lib/components/admin/Functions.svelte       | 14 ++++++++++++++
 src/lib/components/admin/Settings/Models.svelte | 13 +++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/lib/components/admin/Functions.svelte b/src/lib/components/admin/Functions.svelte
index 9897f7f11..82dc6f438 100644
--- a/src/lib/components/admin/Functions.svelte
+++ b/src/lib/components/admin/Functions.svelte
@@ -32,6 +32,7 @@
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
+	import XMark from '../icons/XMark.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -215,6 +216,19 @@
 				bind:value={query}
 				placeholder={$i18n.t('Search Functions')}
 			/>
+
+			{#if query}
+				<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
+					<button
+						class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+						on:click={() => {
+							query = '';
+						}}
+					>
+						<XMark className="size-3" strokeWidth="2" />
+					</button>
+				</div>
+			{/if}
 		</div>
 
 		<div>
diff --git a/src/lib/components/admin/Settings/Models.svelte b/src/lib/components/admin/Settings/Models.svelte
index 4966e9f6d..1287051ee 100644
--- a/src/lib/components/admin/Settings/Models.svelte
+++ b/src/lib/components/admin/Settings/Models.svelte
@@ -20,6 +20,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
 
 	import ModelEditor from '$lib/components/workspace/Models/ModelEditor.svelte';
 	import { toast } from 'svelte-sonner';
@@ -271,6 +272,18 @@
 						bind:value={searchValue}
 						placeholder={$i18n.t('Search Models')}
 					/>
+					{#if searchValue}
+						<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
+							<button
+								class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+								on:click={() => {
+									searchValue = '';
+								}}
+							>
+								<XMark className="size-3" strokeWidth="2" />
+							</button>
+						</div>
+					{/if}
 				</div>
 			</div>
 		</div>