fix:broken clear search functionality

src/lib/helpers/clearSearch.ts

@@ -0,0 +1,17 @@
+/**
+ * Creates a clear search function for SearchQuery components
+ * @param searchQuery
+ * @returns A function that clears the search input
+ */
+export function createClearSearch(searchQuery: { clearInput?: () => void } | undefined) {
+    return () => {
+        searchQuery?.clearInput?.();
+    };
+}
+
+/**
+ * @param searchQuery
+ */
+export function clearSearchInput(searchQuery: { clearInput?: () => void } | undefined) {
+    searchQuery?.clearInput?.();
+}

src/lib/layout/responsiveContainerHeader.svelte

@@ -24,7 +24,8 @@
         searchPlaceholder = 'Search by ID',
         hasFilters = false,
         analyticsSource = '',
-        children
+        children,
+        searchQuery = $bindable()
     }: {
         columns?: Writable<Column[]>;
         view?: View;
@@ -35,6 +36,7 @@
         hasFilters?: boolean;
         analyticsSource?: string;
         children?: Snippet;
+        searchQuery?: SearchQuery;
     } = $props();
 
     let hasDisplaySettings = $derived(!hideView || (!hideColumns && $columns?.length));
@@ -97,14 +99,14 @@
                 {/if}
 
                 {#if showSearch && hasSearch}
-                    <SearchQuery placeholder={searchPlaceholder} />
+                    <SearchQuery bind:this={searchQuery} placeholder={searchPlaceholder} />
                 {/if}
             </Layout.Stack>
         {:else}
             <Layout.Stack direction="row" justifyContent="space-between">
                 <Layout.Stack direction="row" alignItems="center">
                     {#if hasSearch}
-                        <SearchQuery placeholder={searchPlaceholder} />
+                        <SearchQuery bind:this={searchQuery} placeholder={searchPlaceholder} />
                     {/if}
                     {#if hasFilters && $columns?.length}
                         <QuickFilters {columns} {analyticsSource} {filterCols} />

src/routes/(console)/organization-[organization]/domains/+page.svelte

@@ -2,6 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { EmptySearch, PaginationWithLimit, ViewSelector } from '$lib/components/index.js';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import { Button } from '$lib/elements/forms';
     import Link from '$lib/elements/link.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -39,6 +40,8 @@
     let showDelete = false;
     let showRetry = false;
     let selectedDomain: Models.Domain = null;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 
     const isDomainVerified = (domain: Models.Domain) => {
         return domain.nameservers.toLowerCase() === 'appwrite';
@@ -47,7 +50,7 @@
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
-        <SearchQuery placeholder="Search domains" />
+        <SearchQuery bind:this={searchQuery} placeholder="Search domains" />
         <Layout.Stack direction="row" gap="m" inline>
             <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button
@@ -183,6 +186,7 @@
                         queries.clearAll();
                         queries.apply();
                     }}>Clear filters</Button>
+                <Button secondary on:click={clearSearch}>Clear search</Button>
             </svelte:fragment>
         </EmptySearch>
     {:else}

src/routes/(console)/organization-[organization]/domains/domain-[domain]/(certificates)/disabledPage.svelte

@@ -16,8 +16,6 @@
         Tooltip
     } from '@appwrite.io/pink-svelte';
     import SearchQuery from '$lib/components/searchQuery.svelte';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
     import CertificateInfoModal from './certificateInfoModal.svelte';
     import DeleteCertificateModal from './deleteCertificateModal.svelte';
 
@@ -26,13 +24,18 @@
     let showDelete = false;
     let showAdvancedInfo = false;
     let selectedCertificate = null; //TODO: add type
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
 
     const now = new Date();
 </script>
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
-        <SearchQuery placeholder="Search by ID" />
+        <SearchQuery bind:this={searchQuery} placeholder="Search by ID" />
     </Layout.Stack>
 
     {#if data.certificates.total}
@@ -140,11 +143,7 @@
     {:else if data?.search}
         <EmptySearch hidePages bind:search={data.search} target="certificates">
             <svelte:fragment slot="actions">
-                <Button
-                    secondary
-                    href={`${base}/organization-${page.params.organization}/domains/domain-${page.params.domain}/certificates`}>
-                    Clear search
-                </Button>
+                <Button secondary on:click={clearSearch}>Clear search</Button>
             </svelte:fragment>
         </EmptySearch>
     {:else}

src/routes/(console)/project-[region]-[project]/auth/+page.svelte

@@ -14,6 +14,7 @@
         PaginationWithLimit,
         SearchQuery
     } from '$lib/components';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
@@ -43,6 +44,9 @@
 
     export let data;
 
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
+
     const columns = writable<Column[]>([
         { id: '$id', title: 'User ID', type: 'string', width: 200 },
         { id: 'name', title: 'Name', type: 'string', width: { min: 260 } },
@@ -104,7 +108,9 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name, email, phone, or ID" />
+            <SearchQuery
+                bind:this={searchQuery}
+                placeholder="Search by name, email, phone, or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector ui="new" view={View.Table} {columns} hideView />
@@ -215,10 +221,7 @@
             total={data.users.total} />
     {:else if data.search}
         <EmptySearch target="users" hidePagination>
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/auth`}
-                size="s"
-                secondary>Clear Search</Button>
+            <Button on:click={clearSearch} size="s" secondary>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty

src/routes/(console)/project-[region]-[project]/auth/teams/+page.svelte

@@ -12,6 +12,7 @@
         SearchQuery,
         PaginationWithLimit
     } from '$lib/components';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import Create from '../createTeam.svelte';
     import { goto } from '$app/navigation';
     import { Container } from '$lib/layout';
@@ -40,6 +41,8 @@
 
     const region = page.params.region;
     const project = page.params.project;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 
     let selectedTeams: string[] = [];
     let showDelete = false;
@@ -90,7 +93,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search by name" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Button on:mousedown={() => ($showCreateTeam = true)} event="create_user" size="s">
@@ -157,9 +160,7 @@
             total={data.teams.total} />
     {:else if data.search}
         <EmptySearch target="teams" search={data.search} hidePagination={data.teams.total === 0}>
-            <Button secondary size="s" href={`${base}/project-${region}-${project}/auth/teams`}>
-                Clear Search
-            </Button>
+            <Button secondary size="s" on:click={clearSearch}>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty

src/routes/(console)/project-[region]-[project]/databases/+page.svelte

@@ -17,11 +17,14 @@
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import EmptySearch from '$lib/components/emptySearch.svelte';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
 
     export let data: PageData;
 
     let showCreate = false;
     const project = page.params.project;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 
     async function handleCreate(event: CustomEvent<Models.Database>) {
         showCreate = false;
@@ -48,7 +51,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search by name or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
@@ -80,10 +83,7 @@
             total={data.databases.total} />
     {:else if data.search}
         <EmptySearch target="databases" hidePagination>
-            <Button
-                href={`${base}/project-${page.params.region}-${page.params.project}/databases`}
-                size="s"
-                secondary>Clear Search</Button>
+            <Button on:click={clearSearch} size="s" secondary>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty

src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { EmptySearch, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { showCreateTable, tableViewColumns } from './store';
@@ -11,17 +12,17 @@
     import { app } from '$lib/stores/app';
     import { canWriteTables } from '$lib/stores/roles';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { page } from '$app/state';
 
     export let data: PageData;
 
-    const databaseId = page.params.database;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 </script>
 
 <Container databasesMainScreen>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search by name or ID" />
         </Layout.Stack>
 
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
@@ -55,11 +56,7 @@
             total={data.tables.total} />
     {:else if data.search}
         <EmptySearch target="tables" hidePagination>
-            <Button
-                size="s"
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}
-                >Clear Search</Button>
+            <Button size="s" secondary on:click={clearSearch}>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Card.Base padding="none">

src/routes/(console)/project-[region]-[project]/functions/+page.svelte

@@ -31,6 +31,11 @@
     export let data;
 
     let offset = 0;
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
 
     const project = page.params.project;
 
@@ -80,7 +85,7 @@
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
-        <SearchQuery placeholder="Search by name or ID" />
+        <SearchQuery bind:this={searchQuery} placeholder="Search by name or ID" />
 
         <Button href={`${base}/project-${page.params.region}-${project}/functions/create-function`}>
             <Icon icon={IconPlus} slot="start" />
@@ -133,11 +138,7 @@
             total={data.functions.total} />
     {:else if data?.search}
         <EmptySearch hidePages bind:search={data.search} target="functions">
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/functions`}>
-                Clear search
-            </Button>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Empty

src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/+page.svelte

@@ -19,11 +19,16 @@
     let showDelete = $state(false);
     let showRetry = $state(false);
     let selectedProxyRule: Models.ProxyRule = null;
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
 </script>
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
-        <SearchQuery placeholder="Search domain" />
+        <SearchQuery bind:this={searchQuery} placeholder="Search domain" />
         <Button
             href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/domains/add-domain`}
             on:click={() => {
@@ -46,11 +51,7 @@
     {:else if data?.search}
         <EmptySearch hidePages bind:search={data.search} target="domains" hidePagination>
             <svelte:fragment slot="actions">
-                <Button
-                    secondary
-                    on:click={() => {
-                        data.search = '';
-                    }}>Clear search</Button>
+                <Button secondary on:click={clearSearch}>Clear search</Button>
             </svelte:fragment>
         </EmptySearch>
     {:else}

src/routes/(console)/project-[region]-[project]/functions/templates/+page.svelte

@@ -28,6 +28,7 @@
     export let data;
 
     let offset = 0;
+    let searchQuery;
 
     function applyFilter(filter: string, value: string, event: CustomEvent) {
         const target = new URL(page.url);
@@ -54,6 +55,7 @@
     }
 
     function clearSearch() {
+        searchQuery?.clearInput();
         const target = new URL(page.url);
         target.search = '';
         goto(target.toString(), {
@@ -89,7 +91,7 @@
 <Container>
     <Layout.GridFraction start={1} end={3} gap="xxl">
         <Layout.Stack gap="xl">
-            <SearchQuery placeholder="Search template" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search template" />
             <Layout.Stack>
                 <Accordion title="Use case">
                     <Layout.Stack>

src/routes/(console)/project-[region]-[project]/messaging/+page.svelte

@@ -38,6 +38,11 @@
     let deleting = false;
     let showFailed = false;
     let errors: string[] = [];
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
 
     const columns = writable<Column[]>([
         { id: '$id', title: 'Message ID', type: 'string', width: 200 },
@@ -152,7 +157,8 @@
         hasFilters
         hasSearch
         analyticsSource="messaging_messages"
-        searchPlaceholder="Search by description, type, status, or ID">
+        searchPlaceholder="Search by description, type, status, or ID"
+        bind:searchQuery>
         {#if $canWriteMessages}
             <CreateMessageDropdown />
         {/if}
@@ -243,19 +249,11 @@
     {:else if $hasPageQueries}
         <EmptyFilter resource="messages" />
     {:else if data.search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find '{data.search}'</b>
-                <p>There are no messages that match your search.</p>
-            </div>
-            <div class="u-flex u-gap-16">
-                <Button external href="https://appwrite.io/docs/products/messaging/messages" text>
-                    Documentation
-                </Button>
-                <Button secondary href={`${base}/project-${region}-${project}/messaging`}>
-                    Clear search
-                </Button>
-            </div>
+        <EmptySearch target="messages" search={data.search}>
+            <Button external href="https://appwrite.io/docs/products/messaging/messages" text>
+                Documentation
+            </Button>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Empty single target="message" on:click={() => ($showCreate = true)}>

src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
     import {
         EmptySearch,
@@ -13,19 +12,22 @@
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import CreateProviderDropdown from './createProviderDropdown.svelte';
     import Table from './table.svelte';
-    import { base } from '$app/paths';
     import { canWriteProviders } from '$lib/stores/roles';
     import { Card, Layout, Empty, Icon } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
 
     export let data;
+
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 </script>
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search providers" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search providers" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
@@ -52,16 +54,8 @@
     {:else if $hasPageQueries}
         <EmptyFilter resource="providers" />
     {:else if data.search && data.search !== 'empty'}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find '{data.search}'</b>
-                <p>There are no providers that match your search.</p>
-            </div>
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/providers`}>
-                Clear search
-            </Button>
+        <EmptySearch target="providers" search={data.search}>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Card.Base padding="none">

src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte

@@ -21,6 +21,12 @@
 
     export let data: PageData;
 
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
+
     const region = page.params.region;
     const project = page.params.project;
     const columns = writable<Column[]>([
@@ -72,7 +78,8 @@
         hasFilters
         hasSearch
         analyticsSource="messaging_topics_filter"
-        searchPlaceholder="Search by name or ID">
+        searchPlaceholder="Search by name or ID"
+        bind:searchQuery>
         {#if $canWriteTopics}
             <Button
                 on:click={() => {
@@ -97,16 +104,8 @@
     {:else if $hasPageQueries}
         <EmptyFilter resource="topics" />
     {:else if data.search}
-        <EmptySearch>
-            <div class="u-text-center">
-                <b>Sorry, we couldn't find '{data.search}'</b>
-                <p>There are no topics that match your search.</p>
-            </div>
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics`}>
-                Clear Search
-            </Button>
+        <EmptySearch target="topics" search={data.search}>
+            <Button secondary on:click={clearSearch}>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty

src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte

@@ -9,6 +9,7 @@
         ViewSelector,
         EmptyFilter
     } from '$lib/components';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import { Container } from '$lib/layout';
     import { ID, type Models } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
@@ -24,12 +25,13 @@
     import { View } from '$lib/helpers/load';
     import { writable } from 'svelte/store';
     import type { Column } from '$lib/helpers/types';
-    import { base } from '$app/paths';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
     let showAdd = false;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
     let subscribersByTargetId: Record<string, Models.Subscriber> = {};
     const columns = writable<Column[]>([
         { id: '$id', title: 'Subscriber ID', type: 'string', width: 200 },
@@ -89,7 +91,7 @@
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
-        <SearchQuery placeholder="Search by type or IDs"></SearchQuery>
+        <SearchQuery bind:this={searchQuery} placeholder="Search by type or IDs"></SearchQuery>
         <Layout.Stack direction="row" inline>
             <Filters query={data.query} {columns} analyticsSource="messaging_topics" />
             <ViewSelector ui="new" view={View.Table} {columns} hideView />
@@ -121,10 +123,7 @@
                 <b>Sorry, we couldn't find '{data.search}'</b>
                 <p>There are no subscribers that match your search.</p>
             </div>
-            <Button
-                secondary
-                href={`${base}/project-${page.params.region}-${page.params.project}/messaging/topics/topic-${page.params.topic}/subscribers`}>
-            </Button>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Empty

src/routes/(console)/project-[region]-[project]/settings/domains/+page.svelte

@@ -12,6 +12,12 @@
     import { ResponsiveContainerHeader } from '$lib/layout';
 
     let { data } = $props();
+
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
 </script>
 
 <Container>
@@ -19,7 +25,8 @@
         hasSearch
         hideView
         searchPlaceholder="Search by domain"
-        analyticsSource="settings_domain_overview">
+        analyticsSource="settings_domain_overview"
+        bind:searchQuery>
         <Button
             href={`${base}/project-${page.params.region}-${page.params.project}/settings/domains/add-domain`}
             on:click={() => {
@@ -41,11 +48,7 @@
             total={data.rules.total} />
     {:else if data?.search}
         <EmptySearch hidePages bind:search={data.search} target="domains" hidePagination>
-            <Button
-                secondary
-                on:click={() => {
-                    data.search = '';
-                }}>Clear search</Button>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Card.Base padding="none">

src/routes/(console)/project-[region]-[project]/sites/+page.svelte

@@ -19,6 +19,7 @@
     import EmptyDark from './(images)/empty-sites-dark.svg';
     import Grid from './grid.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import { columns } from './store';
     import { View } from '$lib/helpers/load';
     import Table from './table.svelte';
@@ -30,6 +31,8 @@
     export let data;
 
     let show = false;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 
     $: $registerCommands([
         {
@@ -60,7 +63,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search by name" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
@@ -89,7 +92,9 @@
             offset={data.offset}
             total={data.siteList.total} />
     {:else if data.search}
-        <EmptySearch target="sites" />
+        <EmptySearch target="sites">
+            <Button secondary on:click={clearSearch}>Clear search</Button>
+        </EmptySearch>
     {:else}
         <Empty
             single

src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/+page.svelte

@@ -12,11 +12,17 @@
     import Table from './table.svelte';
 
     export let data;
+
+    let searchQuery;
+
+    function clearSearch() {
+        searchQuery?.clearInput();
+    }
 </script>
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
-        <SearchQuery placeholder="Search domain" />
+        <SearchQuery bind:this={searchQuery} placeholder="Search domain" />
         <Button
             href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/domains/add-domain`}
             on:click={() => {
@@ -39,11 +45,7 @@
             total={data.proxyRules.total} />
     {:else if data?.search}
         <EmptySearch hidePages bind:search={data.search} target="domains" hidePagination>
-            <Button
-                secondary
-                on:click={() => {
-                    data.search = '';
-                }}>Clear search</Button>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
         </EmptySearch>
     {:else}
         <Card.Base padding="none">

src/routes/(console)/project-[region]-[project]/storage/+page.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { Empty, PaginationWithLimit, SearchQuery } from '$lib/components';
+    import { Empty, EmptySearch, PaginationWithLimit, SearchQuery } from '$lib/components';
     import Create from './create.svelte';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
@@ -19,10 +19,13 @@
     import Table from './table.svelte';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
 
     export let data;
 
     const project = page.params.project;
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
 
     async function bucketCreated(event: CustomEvent<Models.Bucket>) {
         showCreateBucket.set(false);
@@ -35,7 +38,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search by name or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
@@ -64,6 +67,10 @@
             limit={data.limit}
             offset={data.offset}
             total={data.buckets.total} />
+    {:else if data.search}
+        <EmptySearch target="buckets" hidePagination>
+            <Button secondary on:click={clearSearch}>Clear search</Button>
+        </EmptySearch>
     {:else}
         <Empty
             single

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte

@@ -4,6 +4,7 @@
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Avatar, Empty, EmptySearch, PaginationWithLimit, SearchQuery } from '$lib/components';
+    import { clearSearchInput } from '$lib/helpers/clearSearch';
     import { Dependencies } from '$lib/constants';
     import { Badge } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
@@ -36,6 +37,9 @@
 
     export let data;
 
+    let searchQuery;
+    const clearSearch = () => clearSearchInput(searchQuery);
+
     let showDelete = false;
     let selectedFile: Models.File = null;
     let selectedFiles: string[] = [];
@@ -131,7 +135,7 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search files" />
+            <SearchQuery bind:this={searchQuery} placeholder="Search files" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Button
@@ -251,12 +255,7 @@
             total={data.files.total} />
     {:else if data.search}
         <EmptySearch target="files" search={data.search} hidePagination={data.files.total === 0}>
-            <Button
-                secondary
-                size="s"
-                href={`${base}/project-${page.params.region}-${page.params.project}/storage/bucket-${bucketId}`}>
-                Clear Search
-            </Button>
+            <Button secondary size="s" on:click={clearSearch}>Clear Search</Button>
         </EmptySearch>
     {:else}
         <Empty