feat: improve layout stores

.github/workflows/tests.yml

@@ -19,7 +19,7 @@ jobs:
               with:
                   node-version: 16
             - name: Audit dependencies
-              run: npm audit --audit-level low
+              run: npm audit --audit-level high
             - name: Install dependencies
               run: npm ci
             - name: Build Console

package.json

@@ -2,7 +2,7 @@
     "name": "@appwrite/console",
     "version": "0.0.1",
     "engines": {
-        "node": ">=14"
+        "node": ">=16"
     },
     "scripts": {
         "dev": "vite dev",
@@ -19,27 +19,27 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^1.0.0-0",
-        "@aw-labs/icons": "^0.0.0-27",
-        "@aw-labs/ui": "^0.0.0-27",
+        "@aw-labs/icons": "^0.0.0-29",
+        "@aw-labs/ui": "^0.0.0-29",
         "echarts": "^5.3.3"
     },
     "devDependencies": {
-        "@playwright/test": "^1.23.2",
-        "@sveltejs/adapter-auto": "1.0.0-next.55",
-        "@sveltejs/kit": "1.0.0-next.367",
-        "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
+        "@playwright/test": "^1.23.4",
+        "@sveltejs/adapter-auto": "1.0.0-next.62",
+        "@sveltejs/kit": "1.0.0-next.379",
+        "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "@testing-library/dom": "^8.16.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/svelte": "^3.1.3",
-        "@testing-library/user-event": "^14.2.1",
+        "@testing-library/user-event": "^14.3.0",
         "@types/gtag.js": "^0.0.10",
-        "@typescript-eslint/eslint-plugin": "^5.30.5",
-        "@typescript-eslint/parser": "^5.30.5",
-        "eslint": "^8.19.0",
+        "@typescript-eslint/eslint-plugin": "^5.30.7",
+        "@typescript-eslint/parser": "^5.30.7",
+        "eslint": "^8.20.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-svelte3": "^4.0.0",
-        "jest": "^28.1.2",
-        "jest-environment-jsdom": "^28.1.2",
+        "jest": "^28.1.3",
+        "jest-environment-jsdom": "^28.1.3",
         "pre-commit": "^1.2.2",
         "prettier": "^2.7.1",
         "prettier-plugin-svelte": "^2.7.0",
@@ -48,10 +48,10 @@
         "svelte-check": "^2.8.0",
         "svelte-jester": "^2.3.2",
         "svelte-preprocess": "^4.10.7",
-        "ts-jest": "^28.0.5",
+        "ts-jest": "^28.0.7",
         "tslib": "^2.4.0",
         "typescript": "^4.7.4",
-        "vite": "^2.9.14"
+        "vite": "^3.0.0"
     },
     "type": "module",
     "jest": {

src/lib/stores/layout.ts

@@ -1,4 +1,5 @@
-import { writable } from 'svelte/store';
+import { project } from '../../routes/console/[project]/store';
+import { get, writable } from 'svelte/store';
 
 export type Tab = {
     href: string;
@@ -12,3 +13,32 @@ export const copyData = writable({
     value: ''
 });
 export const tabs = writable<Tab[]>([]);
+
+export function updateLayout(args: {
+    title: string;
+    tabs?: Tab[];
+    back?: string;
+    copy?: {
+        text: string;
+        value: string;
+    };
+    navigate?: {
+        from: URL | null;
+        to: URL;
+    };
+}) {
+    const projectId = get(project)?.$id;
+    const base = projectId ? `/console/${projectId}` : `/console`;
+
+    if (args?.navigate?.to) {
+        const oldTabs = get(tabs);
+        if (oldTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
+            return;
+        }
+    }
+
+    title.set(args.title);
+    backButton.set(args.back ?? null);
+    copyData.set(args.copy ?? null);
+    tabs.set(args.tabs ?? []);
+}

src/routes/console/[project]/databases/__layout.svelte

@@ -1,25 +1,26 @@
 <script>
     import { afterNavigate } from '$app/navigation';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
 
     onMount(handle);
     afterNavigate(handle);
 
-    function handle() {
-        title.set('Databases');
-        backButton.set('');
-        tabs.set([]);
+    let loaded = false;
 
-        copyData.set({
-            text: '',
-            value: ''
+    function handle(event = null) {
+        updateLayout({
+            navigate: event,
+            title: 'Databases'
         });
+        loaded = true;
     }
 </script>
 
 <svelte:head>
     <title>Appwrite - Databases</title>
 </svelte:head>
 
-<slot />
+{#if loaded}
+    <slot />
+{/if}

src/routes/console/[project]/databases/database/[database]/__layout.svelte

@@ -1,44 +1,38 @@
 <script>
     import { afterNavigate } from '$app/navigation';
-
     import { page } from '$app/stores';
-
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { updateLayout } from '$lib/stores/layout';
     import { setDatabase } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { database } from './store';
 
     const databaseId = $page.params.database;
+
     const path = `databases/database/${databaseId}`;
 
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle() {
+    async function handle(event = null) {
         if ($database?.$id !== databaseId) {
             setDatabase($page.params.database);
             await database.load();
-            title.set(`Database - ${$database.name}`);
-        } else if ($database) {
-            title.set(`Database - ${$database.name}`);
         }
-        backButton.set('');
 
-        copyData.set({
-            text: '',
-            value: ''
+        updateLayout({
+            navigate: event,
+            title: $database.name,
+            tabs: [
+                {
+                    href: path,
+                    title: 'Collections'
+                },
+                {
+                    href: `${path}/usage`,
+                    title: 'Usage'
+                }
+            ]
         });
-
-        tabs.set([
-            {
-                href: path,
-                title: 'Collections'
-            },
-            {
-                href: `${path}/usage`,
-                title: 'Usage'
-            }
-        ]);
     }
 </script>
 

src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte

@@ -2,7 +2,7 @@
     import { afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { collection } from './store';
 
@@ -14,39 +14,34 @@
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle() {
+    async function handle(event = null) {
         if ($collection?.$id !== collectionId) {
             await collection.load(collectionId);
-            title.set($collection.name);
-        } else if ($collection) {
-            title.set($collection.name);
         }
 
-        backButton.set(`${base}/console/${$page.params.project}/database`);
-
-        copyData.set({
-            text: '',
-            value: ''
+        updateLayout({
+            navigate: event,
+            title: $collection.name,
+            back: `${base}/console/${$page.params.project}/database`,
+            tabs: [
+                {
+                    href: path,
+                    title: 'Documents'
+                },
+                {
+                    href: `${path}/attributes`,
+                    title: 'Attributes'
+                },
+                {
+                    href: `${path}/indexes`,
+                    title: 'Indexes'
+                },
+                {
+                    href: `${path}/settings`,
+                    title: 'Settings'
+                }
+            ]
         });
-
-        tabs.set([
-            {
-                href: path,
-                title: 'Documents'
-            },
-            {
-                href: `${path}/attributes`,
-                title: 'Attributes'
-            },
-            {
-                href: `${path}/indexes`,
-                title: 'Indexes'
-            },
-            {
-                href: `${path}/settings`,
-                title: 'Settings'
-            }
-        ]);
     }
 </script>
 

src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { updateLayout } from '$lib/stores/layout';
     import { doc } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
@@ -13,36 +13,31 @@
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle() {
+    async function handle(event = null) {
         if ($doc?.$id !== documentId) {
             await doc.load(collectionId, documentId);
-            title.set(`Document - ${$doc.$id}`);
-        } else if ($doc) {
-            title.set(`Document - ${$doc.$id}`);
         }
-
-        backButton.set('');
-
-        copyData.set({
-            text: '',
-            value: ''
+        updateLayout({
+            navigate: event,
+            title: `Document - ${$doc.$id}`,
+            tabs: [
+                {
+                    href: path,
+                    title: 'Overview'
+                },
+                {
+                    href: `${path}/activity`,
+                    title: 'Activity'
+                }
+            ]
         });
-
-        tabs.set([
-            {
-                href: path,
-                title: 'Overview'
-            },
-            {
-                href: `${path}/activity`,
-                title: 'Activity'
-            }
-        ]);
     }
 </script>
 
 <svelte:head>
     <title>Appwrite - Database Document</title>
 </svelte:head>
 
-<slot />
+{#if $doc}
+    <slot />
+{/if}

src/routes/console/[project]/functions/__layout.svelte

@@ -1,20 +1,15 @@
 <script>
     import { afterNavigate } from '$app/navigation';
-
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
+    import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
 
     onMount(handle);
     afterNavigate(handle);
 
-    function handle() {
-        title.set('Functions');
-        backButton.set('');
-        tabs.set([]);
-
-        copyData.set({
-            text: '',
-            value: ''
+    function handle(event = null) {
+        updateLayout({
+            navigate: event,
+            title: 'Functions'
         });
     }
 </script>