Fixes 1.4

package.json

@@ -29,6 +29,7 @@
         "ai": "^2.1.15",
         "analytics": "^0.8.1",
         "dayjs": "^1.11.9",
+        "deep-equal": "^2.2.2",
         "dotenv": "^16.0.3",
         "echarts": "^5.4.1",
         "logrocket": "^3.0.1",
@@ -48,6 +49,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.2.2",
         "@testing-library/user-event": "^14.4.3",
+        "@types/deep-equal": "^1.0.1",
         "@types/prismjs": "^1.26.0",
         "@typescript-eslint/eslint-plugin": "^5.56.0",
         "@typescript-eslint/parser": "^5.56.0",

src/lib/commandCenter/commands.ts

@@ -31,7 +31,8 @@ const groups = [
     'security',
     'buckets',
     'files',
-    'misc'
+    'misc',
+    'settings'
 ] as const;
 
 export type CommandGroup = (typeof groups)[number];

src/lib/commandCenter/panels/template.svelte

@@ -411,20 +411,21 @@
 
     // Elements
     .card {
+        position: absolute;
+        --top: clamp(64px, 10vh, 400px);
+        top: var(--top);
+        left: 50%;
+        translate: -50%;
+
         display: flex;
         flex-direction: column;
         width: var(--width, 42.5rem);
         max-width: 100%;
         min-height: var(--min-height);
-        max-height: var(--max-height, 32rem);
+        max-height: min(calc(100vh - var(--top) - 4rem), var(--max-height, 32rem));
         overflow: hidden;
         padding: 0;
 
-        position: absolute;
-        top: clamp(128px, 15vh, 400px);
-        left: 50%;
-        translate: -50%;
-
         border-radius: 0.5rem;
         border: 1px solid var(--cmd-center-border);
         background: var(--cmd-center-bg);

src/lib/components/cardGrid.svelte

@@ -2,10 +2,11 @@
     import { Card } from './';
 
     export let danger = false;
+    export let hideOverflow = false;
 </script>
 
 <Card {danger}>
-    <div class="common-section grid-1-2">
+    <div class="common-section grid-1-2" class:hideOverflow>
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
         </div>
@@ -21,7 +22,7 @@
 </Card>
 
 <style lang="scss">
-    .grid-1-2 > * {
+    .hideOverflow > * {
         width: 100%;
         overflow: hidden;
     }

src/lib/helpers/object.ts

@@ -8,33 +8,8 @@ export function objectEntries<T extends object>(obj: T) {
     return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
 }
 
-/**
- * Recursively compares two objects to see if they are equal. Returns true if they are equal, false otherwise.
- * @param obj1 the first object
- * @param obj2 the second object
- * @returns true if the objects are equal, false otherwise
- */
-export function deepEqual<T>(obj1: T, obj2: T): boolean {
-    if (obj1 === obj2) return true;
-
-    if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null)
-        return false;
-
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) return false;
-
-    for (const key of keys1) {
-        if (
-            !keys2.includes(key) ||
-            !Object.prototype.hasOwnProperty.call(obj2, key) ||
-            !deepEqual(obj1[key], obj2[key])
-        )
-            return false;
-    }
-
-    return true;
+export function isRegExp(value: unknown): value is RegExp {
+    return value instanceof RegExp;
 }
 
 /**

src/lib/helpers/stores.ts

@@ -0,0 +1,38 @@
+import { writable, type Writable } from 'svelte/store';
+import { deepClone, objectEntries } from './object';
+
+/**
+ * Given an object `obj`, returns an object of writable stores for each key in that object.
+ *
+ * Also returns a listen method that accepts an object of the same shape as `obj` and updates
+ * the stores with the values from that object if they are different.
+ *
+ * @export
+ */
+export function createConservative<Obj extends Record<string, any>>(obj: Obj) {
+    const stores = Object.fromEntries(
+        objectEntries(obj).map(([key, value]) => [key, writable(value)])
+    ) as {
+        [K in keyof Obj]: Writable<Obj[K]>;
+    };
+
+    const history = deepClone(obj);
+
+    function listen(input: Obj) {
+        objectEntries(input).forEach(([key, value]) => {
+            if (!(key in stores) || !(key in history)) {
+                return;
+            }
+            const curr = history[key];
+            if (curr !== value) {
+                stores[key].set(value);
+                history[key] = value;
+            }
+        });
+    }
+
+    return {
+        stores,
+        listen
+    };
+}

src/lib/helpers/types.ts

@@ -9,3 +9,6 @@ export function isHTMLElement(el: unknown): el is HTMLElement {
 export function isHTMLInputElement(el: unknown): el is HTMLInputElement {
     return el instanceof HTMLInputElement;
 }
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type Prettify<T> = T & {};

src/routes/console/(migration-wizard)/resource-form.svelte

@@ -457,10 +457,10 @@
         grid-template-columns: auto 1fr;
         gap: 0.25rem 1rem;
         align-items: center;
+        padding-block-end: 1rem;
 
         ul {
             grid-column-start: 2;
-            padding-block-end: 2rem;
 
             li {
                 margin-block-start: 1rem;

src/routes/console/+layout.svelte

@@ -159,7 +159,7 @@
                 goto(`/console/project-${$project.$id}/settings`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.endsWith('settings'),
-            group: 'navigation',
+            group: isOnSettingsLayout ? 'navigation' : 'settings',
             rank: isOnSettingsLayout ? 40 : -1
         },
         {
@@ -170,7 +170,7 @@
                 goto(`/console/project-${$project.$id}/settings/domains`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('domains'),
-            group: 'navigation',
+            group: isOnSettingsLayout ? 'navigation' : 'settings',
             rank: isOnSettingsLayout ? 30 : -1
         },
         {
@@ -180,7 +180,7 @@
                 goto(`/console/project-${$project.$id}/settings/webhooks`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('webhooks'),
-            group: 'navigation',
+            group: isOnSettingsLayout ? 'navigation' : 'settings',
 
             rank: isOnSettingsLayout ? 20 : -1
         },
@@ -191,7 +191,7 @@
                 goto(`/console/project-${$project.$id}/settings/migrations`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('migrations'),
-            group: 'navigation',
+            group: isOnSettingsLayout ? 'navigation' : 'settings',
 
             rank: isOnSettingsLayout ? 10 : -1
         },
@@ -202,7 +202,7 @@
                 goto(`/console/project-${$project.$id}/settings/smtp`);
             },
             disabled: isOnSettingsLayout && $page.url.pathname.includes('smtp'),
-            group: 'navigation',
+            group: isOnSettingsLayout ? 'navigation' : 'settings',
             rank: -1
         }
     ]);

src/routes/console/project-[project]/auth/templates/emailTemplate.svelte

@@ -12,7 +12,7 @@
     import { project } from '../../store';
     import ResetEmail from './resetEmail.svelte';
     import { baseEmailTemplate, emailTemplate } from './store';
-    import { deepEqual } from '$lib/helpers/object';
+    import deepEqual from 'deep-equal';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Box } from '$lib/components';
 

src/routes/console/project-[project]/auth/templates/smsTemplate.svelte

@@ -5,7 +5,7 @@
     import { baseSmsTemplate, smsTemplate } from './store';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { deepEqual } from '$lib/helpers/object';
+    import deepEqual from 'deep-equal';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Box } from '$lib/components';
 

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

@@ -107,7 +107,7 @@
     }
 
     $: isDisabled = (function getDisabled() {
-        return !operator || (!operator?.hideInput && !value);
+        return !operator || (!operator?.hideInput && !value)
     })();
 </script>
 

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

@@ -1,27 +1,21 @@
 <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 { queries, tags } from './store';
+    import Content from './content.svelte';
+    import { queries, queriesAreDirty, tags } from './store';
 
     // We need to separate them so we don't trigger Drop's handlers
     let showFiltersDesktop = false;
     let showFiltersMobile = false;
 
     let applied = $tags.length;
 
-    function apply() {
-        queries.apply();
+    beforeNavigate(() => {
         applied = $tags.length;
         showFiltersDesktop = false;
         showFiltersMobile = false;
-    }
-
-    function clearAll() {
-        queries.clearAll();
-        queries.apply();
-        applied = 0;
-    }
+    });
 </script>
 
 <div class="is-not-mobile">
@@ -43,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}>Apply</Button>
+                    <Button text on:click={queries.clearAll}>Clear all</Button>
+                    <Button on:click={queries.apply} disabled={!$queriesAreDirty}>Apply</Button>
                 </div>
             </div>
         </svelte:fragment>
@@ -69,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}>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

@@ -2,6 +2,8 @@ import { goto } from '$app/navigation';
 
 import { derived, get, writable, type Writable } from 'svelte/store';
 import type { columns } from '../store';
+import { page } from '$app/stores';
+import deepEqual from 'deep-equal';
 
 const columnTypes = ['string', 'integer', 'double', 'boolean', 'datetime', 'relationship'] as const;
 type ColumnType = (typeof columnTypes)[number];
@@ -71,4 +73,18 @@ function initQueries(initialValue = new Map<string, string>()) {
 }
 
 export const queries = initQueries();
+export const queriesAreDirty = derived([queries, page], ([$queries, $page]) => {
+    const paramQueries = $page.url.searchParams.get('query');
+    const parsedQueries = queryParamToMap(paramQueries || '[]');
+    console.log({ $queries, parsedQueries, notDirty: deepEqual($queries, parsedQueries) });
+
+    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 any documents.</b>
+                        <p>There are no documents that match your filters.</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