improve filtering ux

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+    import { beforeNavigate } from '$app/navigation';
     import { Drop, Modal } from '$lib/components';
-    import Content from './content.svelte';
     import { Button } from '$lib/elements/forms';
+    import Content from './content.svelte';
     import { queries, queriesAreDirty, tags } from './store';
 
     // We need to separate them so we don't trigger Drop's handlers
@@ -10,16 +11,11 @@
 
     let applied = $tags.length;
 
-    function apply() {
-        queries.apply();
+    beforeNavigate(() => {
         applied = $tags.length;
         showFiltersDesktop = false;
         showFiltersMobile = false;
-    }
-
-    function clearAll() {
-        queries.clearAll();
-    }
+    });
 </script>
 
 <div class="is-not-mobile">
@@ -41,8 +37,8 @@
                     on:clear={() => (applied = 0)} />
                 <hr />
                 <div class="u-flex u-margin-block-start-16 u-main-end u-gap-8">
-                    <Button text on:click={clearAll}>Clear all</Button>
-                    <Button on:click={apply} disabled={!$queriesAreDirty}>Apply</Button>
+                    <Button text on:click={queries.clearAll}>Clear all</Button>
+                    <Button on:click={queries.apply} disabled={!$queriesAreDirty}>Apply</Button>
                 </div>
             </div>
         </svelte:fragment>
@@ -67,8 +63,9 @@
         size="big">
         <Content on:apply={(e) => (applied = e.detail.applied)} on:clear={() => (applied = 0)} />
         <svelte:fragment slot="footer">
-            <Button text on:click={clearAll}>Clear all</Button>
-            <Button on:click={apply} disabled={!$queriesAreDirty}>Apply</Button></svelte:fragment>
+            <Button text on:click={queries.clearAll}>Clear all</Button>
+            <Button on:click={queries.apply} disabled={!$queriesAreDirty}>Apply</Button
+            ></svelte:fragment>
     </Modal>
 </div>
 

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/store.ts

@@ -81,4 +81,10 @@ export const queriesAreDirty = derived([queries, page], ([$queries, $page]) => {
     return !deepEqual($queries, parsedQueries);
 });
 
+export const hasPageQueries = derived(page, ($page) => {
+    const paramQueries = $page.url.searchParams.get('query');
+    const parsedQueries = queryParamToMap(paramQueries || '[]');
+    return parsedQueries.size > 0;
+});
+
 export const tags = derived(queries, ($queries) => Array.from($queries.keys()));

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, Heading, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch, Heading, PaginationWithLimit } from '$lib/components';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { wizard } from '$lib/stores/wizard';
     import type { PageData } from './$types';
+    import Filters from './(filters)/filters.svelte';
+    import { hasPageQueries, queries } from './(filters)/store';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
     import Create from './createDocument.svelte';
-    import Filters from './(filters)/filters.svelte';
     import { collection, columns } from './store';
     import Table from './table.svelte';
 
@@ -84,6 +85,25 @@
                 limit={data.limit}
                 offset={data.offset}
                 total={data.documents.total} />
+        {:else if $hasPageQueries}
+            <EmptySearch hidePages>
+                <div class="common-section">
+                    <div class="u-text-center common-section">
+                        <b class="body-text-2 u-bold">Sorry we couldn't find ""</b>
+                        <p>There are no Users that match your search.</p>
+                    </div>
+                    <div class="u-flex common-section u-main-center">
+                        <Button
+                            secondary
+                            on:click={() => {
+                                queries.clearAll();
+                                queries.apply();
+                            }}>
+                            Clear filters
+                        </Button>
+                    </div>
+                </div>
+            </EmptySearch>
         {:else}
             <Empty
                 single