Merge pull request #14096 from silentoplayz/add-clear-button-to-remaining-pages

feat: Add Clear button to Functions and Models pages search bar

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>

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>