From 5489e602cab2815e4a8bdb93cba64a1b98ce68b2 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 14 Aug 2023 15:56:12 +0100
Subject: [PATCH 01/46] small design review

---
 src/lib/commandCenter/commands.ts            |  8 +++++---
 src/lib/commandCenter/panels/template.svelte | 20 +++++++++++++++++++-
 src/routes/console/+layout.svelte            |  8 --------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts
index 734a3ab6a6..9b5707e61a 100644
--- a/src/lib/commandCenter/commands.ts
+++ b/src/lib/commandCenter/commands.ts
@@ -288,9 +288,11 @@ export const commandGroupRanks = derived(groupRanksMap, ($groupRankTransformatio
     const initialRanks = {
         ...Object.fromEntries(groups.map((group) => [group, 0])),
         ungrouped: 9999,
-        databases: 3,
-        users: 2,
-        teams: 1,
+        databases: 4,
+        users: 3,
+        teams: 2,
+        projects: 1,
+        organizations: 0,
         navigation: -10,
         help: -20,
         misc: -30
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 61d543bda8..08d33d7b2b 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -458,6 +458,8 @@
                 position: relative;
                 z-index: 10;
 
+                font-size: 10px !important;
+
                 &:not(:first-child) {
                     margin-block-start: 1rem;
                 }
@@ -475,12 +477,28 @@
                 }
 
                 .option {
-                    padding: 0.5rem 0.75rem;
+                    padding: 0.5rem 9.5px;
+                    font-size: 14px;
                     position: relative;
                     z-index: 10;
                     width: 100%;
 
                     box-shadow: none !important;
+
+                    :global(i[class^='icon-']) {
+                        font-size: 1rem !important;
+                        width: 1rem !important;
+                        height: 1rem !important;
+
+                        position: relative;
+                    }
+
+                    :global(i[class^='icon-']::before) {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        translate: -50% -50%;
+                    }
                 }
 
                 &.nested {
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 37080eb23e..efcd11c0da 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -67,14 +67,6 @@
             keys: ['c', 'o'],
             group: 'organizations'
         },
-        {
-            label: 'Go to home',
-            callback: () => {
-                goto('/console');
-            },
-            keys: ['h'],
-            group: 'navigation'
-        },
         {
             label: 'Open documentation',
             callback: () => {

From d11fa022217ebef4e09471e31bec80351f042c73 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 14 Aug 2023 17:58:08 +0100
Subject: [PATCH 02/46] more design review changes

---
 src/lib/commandCenter/commandCenter.svelte    |  1 -
 src/lib/commandCenter/panels/template.svelte  | 10 ++++++-
 src/lib/stores/sdk.ts                         |  6 ++---
 src/routes/console/+layout.svelte             | 17 ++++++++++--
 .../+layout.svelte                            | 26 +++++++++++++++++++
 5 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
index 3dcf142f98..72a7bcd72a 100644
--- a/src/lib/commandCenter/commandCenter.svelte
+++ b/src/lib/commandCenter/commandCenter.svelte
@@ -126,7 +126,6 @@
         left: 50%;
         transform: translateX(-50%);
         padding: 0.5rem;
-        // background-color: hsl(var(--color-neutral-500) / 0.5);
         z-index: 9999;
 
         display: flex;
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 08d33d7b2b..217c22c313 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -350,6 +350,9 @@
 
         --result-bg: hsl(var(--color-neutral-10));
         --footer-bg: linear-gradient(180deg, #fff 0%, #e8e9f0 100%);
+
+        --icon-color: hsl(var(--color-neutral-50));
+        --label-color: hsl(var(--color-neutral-100));
     }
 
     :global(.theme-dark) .card {
@@ -364,6 +367,9 @@
 
         --result-bg: hsl(var(--color-neutral-200));
         --footer-bg: linear-gradient(180deg, #1b1b28 0%, #282a3b 100%);
+
+        --icon-color: hsl(var(--color-neutral-70));
+        --label-color: hsl(var(--color-neutral-30));
     }
 
     // Elements
@@ -485,11 +491,13 @@
 
                     box-shadow: none !important;
 
+                    color: var(--label-color);
+
                     :global(i[class^='icon-']) {
                         font-size: 1rem !important;
                         width: 1rem !important;
                         height: 1rem !important;
-
+                        color: var(--icon-color);
                         position: relative;
                     }
 
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 56c09cbc5d..6142c9c1cd 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -8,7 +8,7 @@ import {
     Functions,
     Health,
     Locale,
-    Migrations,
+    // Migrations,
     Projects,
     Project,
     Storage,
@@ -35,7 +35,7 @@ const sdkForProject = {
     storage: new Storage(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
-    migrations: new Migrations(clientProject)
+    // migrations: new Migrations(clientProject)
 };
 
 export const getSdkForProject = (projectId: string) => {
@@ -57,7 +57,7 @@ export const sdk = {
         projects: new Projects(clientConsole),
         teams: new Teams(clientConsole),
         users: new Users(clientConsole),
-        migrations: new Migrations(clientConsole)
+        // migrations: new Migrations(clientConsole)
     },
     get forProject() {
         const projectId = getProjectId();
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index efcd11c0da..bdb1415017 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -26,7 +26,19 @@
 
     $: $registerCommands([
         {
-            label: 'Ask AI',
+            label: 'Go to projects',
+            callback: () => {
+                goto('/console');
+            },
+            keys: ['g', 'p'],
+            group: 'navigation',
+            disabled:
+                $page.url.pathname.includes('/console/organization-') &&
+                !$page.url.pathname.endsWith('/members') &&
+                !$page.url.pathname.endsWith('/settings')
+        },
+        {
+            label: 'Ask the AI',
             callback: () => {
                 addSubPanel(AIPanel);
             },
@@ -39,7 +51,8 @@
                 goto('/console/account');
             },
             keys: ['i'],
-            group: 'navigation'
+            group: 'navigation',
+            rank: 1
         },
         {
             label: 'Find an organization',
diff --git a/src/routes/console/organization-[organization]/+layout.svelte b/src/routes/console/organization-[organization]/+layout.svelte
index 8dc64cbec8..dbc4fbb266 100644
--- a/src/routes/console/organization-[organization]/+layout.svelte
+++ b/src/routes/console/organization-[organization]/+layout.svelte
@@ -1,13 +1,39 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { registerCommands } from '$lib/commandCenter';
     import { newMemberModal, newOrgModal } from '$lib/stores/organization';
     import { requestedMigration } from '$routes/store';
     import { openMigrationWizard } from '../(migration-wizard)';
     import Create from '../createOrganization.svelte';
     import CreateMember from './createMember.svelte';
 
+    export let data;
+
     $: if ($requestedMigration) {
         openMigrationWizard();
     }
+
+    $: $registerCommands([
+        {
+            label: 'Go to members',
+            callback: () => {
+                goto(`/console/organization-${data.organization.$id}/members`);
+            },
+            keys: ['g', 'm'],
+            disabled: $page.url.pathname.endsWith('/members'),
+            group: 'navigation'
+        },
+        {
+            label: 'Go to settings',
+            callback: () => {
+                goto(`/console/organization-${data.organization.$id}/settings`);
+            },
+            keys: ['g', 's'],
+            disabled: $page.url.pathname.endsWith('/settings'),
+            group: 'navigation'
+        }
+    ]);
 </script>
 
 <svelte:head>

From 03deb8d6185e508a3cb87be75a98ffdcc89b5884 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 14 Aug 2023 17:59:27 +0100
Subject: [PATCH 03/46] mock migrations

---
 src/lib/stores/sdk.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 6142c9c1cd..106fa6d479 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -35,7 +35,7 @@ const sdkForProject = {
     storage: new Storage(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
-    // migrations: new Migrations(clientProject)
+    migrations: {}
 };
 
 export const getSdkForProject = (projectId: string) => {
@@ -57,7 +57,7 @@ export const sdk = {
         projects: new Projects(clientConsole),
         teams: new Teams(clientConsole),
         users: new Users(clientConsole),
-        // migrations: new Migrations(clientConsole)
+        migrations: {}
     },
     get forProject() {
         const projectId = getProjectId();

From 74de2e584fcf641d8ed6e11a75f9ffaf35341da8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 11:41:53 +0100
Subject: [PATCH 04/46] change ai logo in console

---
 src/lib/commandCenter/panels/ai.svelte       | 38 ++++++--------------
 src/lib/commandCenter/panels/template.svelte |  2 +-
 static/icons/dark/color/sparkles.svg         | 24 +++++++++++++
 static/icons/light/color/sparkles.svg        | 24 +++++++++++++
 4 files changed, 60 insertions(+), 28 deletions(-)
 create mode 100644 static/icons/dark/color/sparkles.svg
 create mode 100644 static/icons/light/color/sparkles.svg

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 3cc6a54096..eb5296f9f8 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
     import Template from './template.svelte';
 
-    import { AvatarInitials, Code } from '$lib/components';
+    import { AvatarInitials, Code, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
     import { subPanels } from '../subPanels';
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
-    import CoolerAppwrite from '$lib/images/appwrite-cooler.svg';
     import { VARS } from '$lib/system';
 
     const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
@@ -106,7 +105,7 @@
         <div class="content">
             <div class="u-flex u-gap-8">
                 <div class="logo">
-                    <img src={CoolerAppwrite} alt="Appwrite logo" />
+                    <SvgIcon name="sparkles" type="color" />
                 </div>
                 <div class="answer">
                     {#if $isLoading && !$completion}
@@ -169,6 +168,14 @@
 </Template>
 
 <style lang="scss">
+    :global(.theme-dark) .content {
+        --logo-bg: #282a3b;
+    }
+
+    :global(.theme-light) .content {
+        --logo-bg: #f2f2f8;
+    }
+
     .content {
         overflow-y: auto;
         padding: 1rem;
@@ -182,7 +189,7 @@
             flex-shrink: 0;
 
             border-radius: 0.25rem;
-            background: #282a3b;
+            background: var(--logo-bg);
         }
 
         .answer {
@@ -192,29 +199,6 @@
                 white-space: pre-wrap;
             }
         }
-
-        h2 {
-            color: hsl(var(--color-neutral-70));
-        }
-
-        .examples {
-            display: flex;
-            flex-direction: column;
-
-            li {
-                padding: 0.59375rem 0.5rem;
-
-                button {
-                    &:hover {
-                        opacity: 0.75;
-                    }
-
-                    i {
-                        color: hsl(var(--color-neutral-70));
-                    }
-                }
-            }
-        }
     }
 
     .footer {
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 217c22c313..c277528b5b 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -10,7 +10,7 @@
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
 
-    type Option = $$Generic<Command>;
+    type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
     export let options: Option[] | null = null;
     export let search = '';
     export let searchPlaceholder = 'Search...';
diff --git a/static/icons/dark/color/sparkles.svg b/static/icons/dark/color/sparkles.svg
new file mode 100644
index 0000000000..2b07d17608
--- /dev/null
+++ b/static/icons/dark/color/sparkles.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" fill="url(#paint0_linear_1513_36621)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" fill="url(#paint1_linear_1513_36621)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" stroke="url(#paint2_linear_1513_36621)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" stroke="url(#paint3_linear_1513_36621)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1513_36621" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1513_36621" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E9F0"/>
+<stop offset="1" stop-color="#E8E9F0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1513_36621" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1513_36621" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/static/icons/light/color/sparkles.svg b/static/icons/light/color/sparkles.svg
new file mode 100644
index 0000000000..ccfa91b97c
--- /dev/null
+++ b/static/icons/light/color/sparkles.svg
@@ -0,0 +1,24 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" fill="url(#paint0_linear_1513_36627)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" fill="url(#paint1_linear_1513_36627)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C5.55229 2 6 2.44772 6 3V4H7C7.55229 4 8 4.44772 8 5C8 5.55228 7.55229 6 7 6H6V7C6 7.55228 5.55229 8 5 8C4.44772 8 4 7.55228 4 7V6H3C2.44772 6 2 5.55228 2 5C2 4.44772 2.44772 4 3 4H4V3C4 2.44772 4.44772 2 5 2ZM5 12C5.55229 12 6 12.4477 6 13V14H7C7.55229 14 8 14.4477 8 15C8 15.5523 7.55229 16 7 16H6V17C6 17.5523 5.55229 18 5 18C4.44772 18 4 17.5523 4 17V16H3C2.44772 16 2 15.5523 2 15C2 14.4477 2.44772 14 3 14H4V13C4 12.4477 4.44772 12 5 12Z" stroke="url(#paint2_linear_1513_36627)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 2C12.4537 2 12.8505 2.30548 12.9667 2.74411L14.1459 7.19893L17.4997 9.13381C17.8092 9.3124 17.9999 9.64262 17.9999 10C17.9999 10.3574 17.8092 10.6876 17.4997 10.8662L14.1459 12.8011L12.9667 17.2559C12.8505 17.6945 12.4537 18 11.9999 18C11.5462 18 11.1494 17.6945 11.0332 17.2559L9.85402 12.8011L6.50027 10.8662C6.19072 10.6876 6 10.3574 6 10C6 9.64262 6.19072 9.31241 6.50027 9.13382L9.85402 7.19893L11.0332 2.74411C11.1494 2.30548 11.5462 2 11.9999 2Z" stroke="url(#paint3_linear_1513_36627)" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1513_36627" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1513_36627" x1="9.99998" y1="-5" x2="9.99998" y2="31.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1513_36627" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1513_36627" x1="9.99997" y1="2" x2="9.99997" y2="18" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

From c4629057f7f1bd16ca84061f5014cce8a0129602 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 12:52:23 +0100
Subject: [PATCH 05/46] add experimental label & fix breadcrumb clearing visual
 bug

---
 src/lib/commandCenter/panels/ai.svelte       | 35 +++++++++++++++++++-
 src/lib/commandCenter/panels/template.svelte | 11 +++++-
 src/routes/+layout.svelte                    | 20 +++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index eb5296f9f8..7aac568a65 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -94,7 +94,9 @@
     clearOnCallback={false}
     fullheight
     --command-panel-max-height="40rem">
-    <div slot="search" />
+    <div slot="search">
+        <span class="experimental border-gradient">EXPERIMENTAL</span>
+    </div>
 
     <div slot="option" let:option class="u-flex u-cross-center u-gap-8">
         <i class="icon-question-mark-circle" />
@@ -208,4 +210,35 @@
             background-color: hsl(var(--color-neutral-150));
         }
     }
+
+    .experimental {
+        display: flex;
+        padding: 0.09375rem 0.25rem;
+        align-items: center;
+
+        color: var(--light-neutrals-30, #e8e9f0);
+        text-align: center;
+        font-family: Inter;
+        font-size: 0.625rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 150%; /* 0.9375rem */
+        letter-spacing: 0.075rem;
+        text-transform: uppercase;
+
+        background: rgba(240, 46, 101, 0.24);
+        --border-gradient: linear-gradient(
+                to bottom,
+                rgba(240, 46, 101, 0.48) 0%,
+                rgba(240, 46, 101, 0) 150%
+            )
+            border-box;
+        --border-size: 0.03rem;
+        --border-radius: 0.25rem;
+        border-radius: var(--border-radius);
+    }
+
+    :global(.theme-light) .experimental {
+        color: rgba(240, 46, 101, 1);
+    }
 </style>
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index c277528b5b..db648efb12 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -179,7 +179,16 @@
 
     const castOption = (option: IndexedOption) => option as Option;
 
-    $: breadcrumbs = $subPanels.filter((panel) => panel.name !== 'root').map((panel) => panel.name);
+    function getBreadcrumbs(subPanels: typeof $subPanels) {
+        return subPanels.filter((panel) => panel.name !== 'root').map((panel) => panel.name);
+    }
+
+    let breadcrumbs = getBreadcrumbs($subPanels);
+
+    // Avoid clearing subpanels before the closing transition is finished
+    $: if ($subPanels.length) {
+        breadcrumbs = getBreadcrumbs($subPanels);
+    }
 
     const handleCrumbClick = (index: number) => {
         if (index === breadcrumbs.length - 1) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2bffdc9c4a..f8d9f93f41 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -184,4 +184,24 @@
     [type='checkbox']:where(:checked)::before {
         content: '\ea38';
     }
+
+    .border-gradient {
+        position: relative;
+    }
+
+    .border-gradient::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: var(--border-radius);
+        border: var(--border-size) solid transparent;
+        background: var(--border-gradient) border-box;
+        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+        pointer-events: none;
+    }
 </style>

From ecadba6e44239c6d7a0a1ee8b46f4ec71b14a1cd Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 13:11:43 +0100
Subject: [PATCH 06/46] AI question avatar

---
 src/lib/commandCenter/panels/ai.svelte   | 11 +++++++-
 src/lib/components/avatarInitials.svelte |  3 +-
 src/routes/console/+layout.svelte        | 35 +++++++++++-------------
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 7aac568a65..85bd9fb9fc 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -76,6 +76,11 @@
     }
 
     $: answer = parseCompletion($completion);
+
+    function getInitials(name: string) {
+        const [first, last] = name.split(' ');
+        return `${first[0]}${last[0]}`;
+    }
 </script>
 
 <Template
@@ -105,7 +110,11 @@
 
     {#if $isLoading || answer}
         <div class="content">
-            <div class="u-flex u-gap-8">
+            <div class="u-flex u-gap-8 u-cross-center">
+                <div class="avatar is-size-x-small">{getInitials($user.name)}</div>
+                <p class="u-opacity-75">{$input}</p>
+            </div>
+            <div class="u-flex u-gap-8 u-margin-block-start-24">
                 <div class="logo">
                     <SvgIcon name="sparkles" type="color" />
                 </div>
diff --git a/src/lib/components/avatarInitials.svelte b/src/lib/components/avatarInitials.svelte
index 025dd998c8..0d4df1a70a 100644
--- a/src/lib/components/avatarInitials.svelte
+++ b/src/lib/components/avatarInitials.svelte
@@ -4,8 +4,9 @@
 
     export let name: string;
     export let size: number;
+    export let background: string | undefined = undefined;
 
-    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2).toString();
+    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
 </script>
 
 <Avatar {name} {size} {src} />
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index bdb1415017..28e9e78b1a 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -112,25 +112,22 @@
             group: 'help',
             icon: 'discord'
         },
-        {
-            label: 'Toggle theme',
-            callback: () => {
-                if ($app.theme === 'auto') {
-                    $app.theme = 'light';
-                } else if ($app.theme === 'light') {
-                    $app.theme = 'dark';
-                } else {
-                    $app.theme = 'auto';
-                }
-                addNotification({
-                    title: 'Theme changed',
-                    message: `Theme changed to ${$app.theme}`,
-                    type: 'success'
-                });
-            },
-            group: 'misc',
-            icon: 'switch-horizontal'
-        }
+        ...(['auto', 'dark', 'light'] as const).map((theme) => {
+            return {
+                label: `Set theme to ${theme}`,
+                callback: () => {
+                    $app.theme = theme;
+                    addNotification({
+                        title: 'Theme changed',
+                        message: `Theme changed to ${$app.theme}`,
+                        type: 'success'
+                    });
+                },
+                group: 'misc',
+                icon: 'switch-horizontal',
+                keys: ['t', theme[0]]
+            } as const;
+        })
     ]);
     let isOpen = false;
 

From b496a54e6b8b6dffe79c08cc55c0ddac4f9496d6 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 13:28:16 +0100
Subject: [PATCH 07/46] auto-expandable ai panel

---
 src/lib/commandCenter/panels/ai.svelte       | 6 +++---
 src/lib/commandCenter/panels/template.svelte | 7 ++++---
 src/lib/helpers/mutation.ts                  | 6 ++++++
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/helpers/mutation.ts

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 85bd9fb9fc..307263c2df 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -97,8 +97,8 @@
               };
           })}
     clearOnCallback={false}
-    fullheight
-    --command-panel-max-height="40rem">
+    --min-height="40rem"
+    --max-height="52.5rem">
     <div slot="search">
         <span class="experimental border-gradient">EXPERIMENTAL</span>
     </div>
@@ -188,7 +188,7 @@
     }
 
     .content {
-        overflow-y: auto;
+        overflow: auto;
         padding: 1rem;
 
         .logo {
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index db648efb12..025840988c 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -385,9 +385,10 @@
     .card {
         display: flex;
         flex-direction: column;
-        width: var(--command-panel-width, 42.5rem);
+        width: var(--width, 42.5rem);
         max-width: 100%;
-        max-height: var(--command-panel-max-height, 32rem);
+        min-height: var(--min-height);
+        max-height: var(--max-height, 32rem);
         overflow: hidden;
         padding: 0;
 
@@ -403,7 +404,7 @@
         backdrop-filter: blur(6px);
 
         &.fullheight {
-            height: var(--command-panel-max-height, 32rem);
+            height: var(--max-height, 32rem);
         }
 
         :global(.kbd) {
diff --git a/src/lib/helpers/mutation.ts b/src/lib/helpers/mutation.ts
new file mode 100644
index 0000000000..8639d9ae6c
--- /dev/null
+++ b/src/lib/helpers/mutation.ts
@@ -0,0 +1,6 @@
+// Easier wrapper over mutation observer, which takes an element, a callback, and returns an unsubscribe fn
+export function observeElement(el: HTMLElement, callback: MutationCallback): () => void {
+    const observer = new MutationObserver(callback);
+    observer.observe(el, { childList: true, subtree: true });
+    return () => observer.disconnect();
+}

From 1f402848db4b8724e554eafef97f99150518a90e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 14:02:35 +0100
Subject: [PATCH 08/46] table check touch area

---
 src/lib/elements/forms/inputCheckbox.svelte   |  2 +-
 src/lib/elements/table/cell.svelte            |  6 +++
 src/lib/elements/table/cellCheck.svelte       | 39 ++++++++++++-------
 .../collection-[collection]/table.svelte      |  2 +-
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 601607e594..7b9fef8fb3 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -10,7 +10,7 @@
     export let required = false;
     export let disabled = false;
 
-    let element: HTMLInputElement;
+    export let element: HTMLInputElement;
     let error: string;
 
     const handleInvalid = (event: Event) => {
diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index 4c778d31ac..eb66991d8b 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -14,3 +14,9 @@
     role="cell">
     <slot />
 </div>
+
+<style lang="scss">
+    .table-col {
+        position: relative;
+    }
+</style>
diff --git a/src/lib/elements/table/cellCheck.svelte b/src/lib/elements/table/cellCheck.svelte
index 3c55aa395e..09424abdfa 100644
--- a/src/lib/elements/table/cellCheck.svelte
+++ b/src/lib/elements/table/cellCheck.svelte
@@ -6,24 +6,35 @@
 
     export let id: string;
     export let selectedIds: string[] = [];
+    let el: HTMLInputElement;
+
+    const handleClick = (e: Event) => {
+        // Prevent the link from being followed
+        e.preventDefault();
+        if (!isHTMLInputElement(el)) return;
+
+        selectedIds = toggle(selectedIds, id);
+
+        // Hack to make sure the checkbox is checked, independent of the
+        // preventDefault() call above
+        window.setTimeout(() => {
+            el.checked = selectedIds.includes(id);
+        });
+    };
 </script>
 
 <TableCell>
+    <div class="touch-area" on:click={handleClick} on:keypress={handleClick} />
     <InputCheckbox
+        bind:element={el}
         id="select-{id}"
         value={selectedIds.includes(id)}
-        on:click={(e) => {
-            // Prevent the link from being followed
-            e.preventDefault();
-            const el = e.currentTarget;
-            if (!isHTMLInputElement(el)) return;
-
-            selectedIds = toggle(selectedIds, id);
-
-            // Hack to make sure the checkbox is checked, independent of the
-            // preventDefault() call above
-            window.setTimeout(() => {
-                el.checked = selectedIds.includes(id);
-            });
-        }} />
+        on:click={handleClick} />
 </TableCell>
+
+<style lang="scss">
+    .touch-area {
+        position: absolute;
+        inset: 0;
+    }
+</style>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 63a39c64d1..37c2dbcf89 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -235,7 +235,7 @@
         <div class="u-flex u-cross-center u-gap-8">
             <span class="indicator body-text-2 u-bold">{selectedDb.length}</span>
             <span>
-                {selected.length > 1 ? 'documents' : 'document'} selected
+                {selectedDb.length > 1 ? 'documents' : 'document'} selected
             </span>
         </div>
 

From 64f0e783d7f479c290ce3ec374b52722ad47bb78 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 14:18:10 +0100
Subject: [PATCH 09/46] fix floating action bar mobile

---
 src/lib/components/floatingActionBar.svelte     |  2 ++
 .../collection-[collection]/table.svelte        | 17 +++++++++++------
 .../databases/database-[database]/table.svelte  | 17 +++++++++++------
 .../project-[project]/databases/table.svelte    | 17 +++++++++++------
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/floatingActionBar.svelte b/src/lib/components/floatingActionBar.svelte
index 5f25bad40a..d248df4a24 100644
--- a/src/lib/components/floatingActionBar.svelte
+++ b/src/lib/components/floatingActionBar.svelte
@@ -21,6 +21,8 @@
 
         border-radius: 0.5rem;
         padding: 0.75rem 1rem;
+
+        width: clamp(0px, calc(100vw - 4rem), 32.5rem);
     }
 
     :global(.theme-dark) .floating-action-bar {
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 37c2dbcf89..d37ab8bb9c 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -234,14 +234,21 @@
     <div class="u-flex u-cross-center u-main-space-between actions">
         <div class="u-flex u-cross-center u-gap-8">
             <span class="indicator body-text-2 u-bold">{selectedDb.length}</span>
-            <span>
-                {selectedDb.length > 1 ? 'documents' : 'document'} selected
-            </span>
+            <p>
+                <span class="is-only-desktop">
+                    {selectedDb.length > 1 ? 'documents' : 'document'}
+                </span>
+                selected
+            </p>
         </div>
 
         <div class="u-flex u-cross-center u-gap-8">
             <Button text on:click={() => (selected = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+            <Button secondary on:click={() => (showDelete = true)}>
+                <p>
+                    Delete <span class="is-only-desktop">selection</span>
+                </p>
+            </Button>
         </div>
     </div>
 </FloatingActionBar>
@@ -312,8 +319,6 @@
 
 <style lang="scss">
     .actions {
-        width: 31.25rem;
-
         .indicator {
             border-radius: 0.25rem;
             background: hsl(var(--color-information-100));
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index 22305fee2b..c7ad3fda56 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -103,14 +103,21 @@
     <div class="u-flex u-cross-center u-main-space-between actions">
         <div class="u-flex u-cross-center u-gap-8">
             <span class="indicator body-text-2 u-bold">{selected.length}</span>
-            <span>
-                {selected.length > 1 ? 'collections' : 'collection'} selected
-            </span>
+            <p>
+                <span class="is-only-desktop">
+                    {selected.length > 1 ? 'collections' : 'collection'}
+                </span>
+                selected
+            </p>
         </div>
 
         <div class="u-flex u-cross-center u-gap-8">
             <Button text on:click={() => (selected = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+            <Button secondary on:click={() => (showDelete = true)}>
+                <p>
+                    Delete <span class="is-only-desktop">selection</span>
+                </p>
+            </Button>
         </div>
     </div>
 </FloatingActionBar>
@@ -135,8 +142,6 @@
 
 <style lang="scss">
     .actions {
-        width: 31.25rem;
-
         .indicator {
             border-radius: 0.25rem;
             background: hsl(var(--color-information-100));
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index 0477187a4f..eb95ea57b5 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -102,14 +102,21 @@
     <div class="u-flex u-cross-center u-main-space-between actions">
         <div class="u-flex u-cross-center u-gap-8">
             <span class="indicator body-text-2 u-bold">{selected.length}</span>
-            <span>
-                {selected.length > 1 ? 'databases' : 'database'} selected
-            </span>
+            <p>
+                <span class="is-only-desktop">
+                    {selected.length > 1 ? 'databases' : 'database'}
+                </span>
+                selected
+            </p>
         </div>
 
         <div class="u-flex u-cross-center u-gap-8">
             <Button text on:click={() => (selected = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+            <Button secondary on:click={() => (showDelete = true)}>
+                <p>
+                    Delete <span class="is-only-desktop">selection</span>
+                </p>
+            </Button>
         </div>
     </div>
 </FloatingActionBar>
@@ -134,8 +141,6 @@
 
 <style lang="scss">
     .actions {
-        width: 31.25rem;
-
         .indicator {
             border-radius: 0.25rem;
             background: hsl(var(--color-information-100));

From 5d7b5831a4b51544a4fa27ab36750474a8df40dc Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 16 Aug 2023 14:19:54 +0100
Subject: [PATCH 10/46] fix: selection clear

---
 .../database-[database]/collection-[collection]/table.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index d37ab8bb9c..59d5c33ecb 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -243,7 +243,7 @@
         </div>
 
         <div class="u-flex u-cross-center u-gap-8">
-            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button text on:click={() => (selectedDb = [])}>Cancel</Button>
             <Button secondary on:click={() => (showDelete = true)}>
                 <p>
                     Delete <span class="is-only-desktop">selection</span>

From d37fb2da7208da9eb4db69b985c64c60d882788c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:10:28 +0100
Subject: [PATCH 11/46] fix queries

---
 package-lock.json                                | 16 ++++++++--------
 package.json                                     |  2 +-
 src/lib/layout/container.svelte                  |  2 +-
 .../(filters)/content.svelte                     | 13 +++++++++----
 .../(filters)/filters.svelte                     |  2 ++
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f6ed893db8..8793ae4fcb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
                 "@analytics/google-analytics": "^1.0.5",
                 "@analytics/google-tag-manager": "^0.5.3",
                 "@appwrite.io/console": "npm:christy-console@^0.4.0",
-                "@appwrite.io/pink": "^0.0.6-rc.14",
+                "@appwrite.io/pink": "^0.1.0-next.3",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
                 "@sentry/tracing": "^7.44.2",
@@ -175,19 +175,19 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.0.6-rc.14",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.6-rc.14.tgz",
-            "integrity": "sha512-KSfuW/MIc9aXaSjHmOB0TSyd2G/nTX8Yj49LOqOw41v649tVNfPGutvI6eTULCKve24HTYSspnHLil5Eb4Kk2Q==",
+            "version": "0.1.0-next.3",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.1.0-next.3.tgz",
+            "integrity": "sha512-mPova8MDiDAXq0/ie7h+RsPbAdBdoKcWe4IcgcJJVQuhxhyMCmSRE+Y+5uduC3QXqmuA2TWx8p/RERl5s1Q1vQ==",
             "dependencies": {
-                "@appwrite.io/pink-icons": "*",
+                "@appwrite.io/pink-icons": "0.1.0-next.3",
                 "normalize.css": "^8.0.1",
                 "the-new-css-reset": "^1.7.3"
             }
         },
         "node_modules/@appwrite.io/pink-icons": {
-            "version": "0.0.6-rc.14",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.0.6-rc.14.tgz",
-            "integrity": "sha512-OHkW3nOc7aTNlf+kdcSojlimWR+NKUJoYNCcC6ysQs7GnD/ny+en6bpT6u1X5EYEszO/IUQuQYDZhURFeGGO1A=="
+            "version": "0.1.0-next.3",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.1.0-next.3.tgz",
+            "integrity": "sha512-v6tYnowtVRmpkF4ZWT4BIgmJ/gbZ7gycaw2lTwdNIyY2dsAIxbFImbFz14OGAbC8T1ll5C7XtsXMlAjnWmLyag=="
         },
         "node_modules/@babel/code-frame": {
             "version": "7.22.5",
diff --git a/package.json b/package.json
index d3626c725a..c674dfeed5 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/console": "npm:christy-console@^0.4.0",
-        "@appwrite.io/pink": "^0.0.6-rc.14",
+        "@appwrite.io/pink": "^0.1.0-next.3",
         "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index fb9ec29ddc..0e7c262e8d 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     export let overlapCover = false;
-    export let size: 'small' | 'medium' | 'large' | 'xl' = null;
+    export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
 
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
index 488dcaf228..4411957458 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
@@ -51,7 +51,12 @@
         equal: {
             toQuery: Query.equal,
             toTag: (attribute, input) => `**${attribute}** equal to **${input}**`,
-            types: ['string', 'integer', 'double']
+            types: ['string', 'integer', 'double', 'boolean']
+        },
+        'not equal to': {
+            toQuery: Query.notEqual,
+            toTag: (attribute, input) => `**${attribute}** not equal to **${input}**`,
+            types: ['string', 'integer', 'double', 'boolean']
         },
         'not null': {
             toQuery: Query.isNotNull,
@@ -108,7 +113,7 @@
 
 <div>
     <form on:submit|preventDefault={addFilter}>
-        <div class="selects u-flex u-gap-12 u-margin-block-start-16">
+        <div class="selects u-flex u-gap-8 u-margin-block-start-16">
             <InputSelect
                 id="column"
                 options={$columns.map((c) => ({
@@ -125,7 +130,7 @@
                 bind:value={operatorKey} />
         </div>
         {#if column && operator && !operator?.hideInput}
-            <div class="u-margin-block-start-16">
+            <div class="u-margin-block-start-8">
                 {#if column.type === 'integer' || column.type === 'double'}
                     <InputNumber id="value" bind:value placeholder="Enter value" />
                 {:else}
@@ -133,7 +138,7 @@
                 {/if}
             </div>
         {/if}
-        <Button text disabled={isDisabled} class="u-margin-block-start-12" submit>
+        <Button text disabled={isDisabled} class="u-margin-block-start-4" submit>
             <i class="icon-plus" />
             Add filter
         </Button>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
index 5e4611cce8..264eaf6eea 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
@@ -13,6 +13,8 @@
     function apply() {
         queries.apply();
         applied = $tags.length;
+        showFiltersDesktop = false;
+        showFiltersMobile = false;
     }
 
     function clearAll() {

From 8d9e54f5f532eaddd2fa4ffa45cb722d0acd9a2c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:39:09 +0100
Subject: [PATCH 12/46] toggleable debug overlay

---
 src/lib/commandCenter/commandCenter.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
index 72a7bcd72a..e13498a25c 100644
--- a/src/lib/commandCenter/commandCenter.svelte
+++ b/src/lib/commandCenter/commandCenter.svelte
@@ -33,6 +33,9 @@
     import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
     import { RootPanel } from './panels';
     import { addSubPanel, clearSubPanels, subPanels } from './subPanels';
+    import { addNotification } from '$lib/stores/notifications';
+
+    let debugOverlayEnabled = false;
 
     $: $registerCommands([
         {
@@ -40,6 +43,20 @@
             keys: ['k'],
             ctrl: true,
             forceEnable: true
+        },
+        {
+            label: 'Toggle debug overlay',
+            callback: () => {
+                debugOverlayEnabled = !debugOverlayEnabled;
+                addNotification({
+                    title: 'Debug overlay',
+                    message: debugOverlayEnabled ? 'Enabled' : 'Disabled',
+                    type: 'info'
+                });
+            },
+            keys: ['d', 'o'],
+            group: 'misc',
+            disabled: !dev
         }
     ]);
 
@@ -100,7 +117,7 @@
     </div>
 {/if}
 
-{#if dev}
+{#if dev && debugOverlayEnabled}
     <div class="debug-keys" use:portal>
         {#each keys as key, i (i)}
             <kbd class="kbd" transition:fade|local={{ duration: 150 }}>

From 668034e0390aea3e3fd50df57ac888f6d767fef8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:39:30 +0100
Subject: [PATCH 13/46] remove search commands in favor of searchers

---
 .../console/project-[project]/+layout.svelte  | 101 ++++++++----------
 1 file changed, 47 insertions(+), 54 deletions(-)

diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index fc4f1892a4..7c2c225169 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -5,15 +5,8 @@
     import { project, stats } from './store';
 
     import { goto } from '$app/navigation';
-    import { addSubPanel, registerCommands, registerSearchers } from '$lib/commandCenter';
+    import { registerCommands, registerSearchers } from '$lib/commandCenter';
 
-    import {
-        BucketsPanel,
-        DatabasesPanel,
-        FunctionsPanel,
-        TeamsPanel,
-        UsersPanel
-    } from '$lib/commandCenter/panels';
     import {
         bucketSearcher,
         dbSearcher,
@@ -82,53 +75,53 @@
             },
             keys: ['p'],
             group: 'navigation'
-        },
-        {
-            label: 'Find users',
-            callback: () => {
-                addSubPanel(UsersPanel);
-            },
-            group: 'users',
-            icon: 'search',
-            keys: ['f', 'u'],
-            rank: 10
-        },
-        {
-            label: 'Find teams',
-            callback: () => {
-                addSubPanel(TeamsPanel);
-            },
-            group: 'teams',
-            icon: 'search',
-            keys: ['f', 't']
-        },
-        {
-            label: 'Find databases',
-            callback: () => {
-                addSubPanel(DatabasesPanel);
-            },
-            group: 'databases',
-            icon: 'search',
-            keys: ['f', 'd']
-        },
-        {
-            label: 'Find functions',
-            callback: () => {
-                addSubPanel(FunctionsPanel);
-            },
-            group: 'functions',
-            icon: 'search',
-            keys: ['f', 'f']
-        },
-        {
-            label: 'Find buckets',
-            callback: () => {
-                addSubPanel(BucketsPanel);
-            },
-            group: 'buckets',
-            icon: 'search',
-            keys: ['f', 'b']
         }
+        // {
+        //     label: 'Find users',
+        //     callback: () => {
+        //         addSubPanel(UsersPanel);
+        //     },
+        //     group: 'users',
+        //     icon: 'search',
+        //     keys: ['f', 'u'],
+        //     rank: 10
+        // },
+        // {
+        //     label: 'Find teams',
+        //     callback: () => {
+        //         addSubPanel(TeamsPanel);
+        //     },
+        //     group: 'teams',
+        //     icon: 'search',
+        //     keys: ['f', 't']
+        // },
+        // {
+        //     label: 'Find databases',
+        //     callback: () => {
+        //         addSubPanel(DatabasesPanel);
+        //     },
+        //     group: 'databases',
+        //     icon: 'search',
+        //     keys: ['f', 'd']
+        // },
+        // {
+        //     label: 'Find functions',
+        //     callback: () => {
+        //         addSubPanel(FunctionsPanel);
+        //     },
+        //     group: 'functions',
+        //     icon: 'search',
+        //     keys: ['f', 'f']
+        // },
+        // {
+        //     label: 'Find buckets',
+        //     callback: () => {
+        //         addSubPanel(BucketsPanel);
+        //     },
+        //     group: 'buckets',
+        //     icon: 'search',
+        //     keys: ['f', 'b']
+        // }
     ]);
 
     $registerSearchers(userSearcher, teamSearcher, dbSearcher, functionsSearcher, bucketSearcher);

From 79774d79bf5f0b8008754efb54af5de56e8b783c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:40:46 +0100
Subject: [PATCH 14/46] remove search commands in favor of searchers

---
 src/routes/console/+layout.svelte             | 21 ++-----------------
 .../database-[database]/+layout.svelte        | 19 ++++-------------
 .../storage/bucket-[bucket]/+layout.svelte    | 11 ----------
 3 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 28e9e78b1a..7d81193ff0 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -18,7 +18,7 @@
     import { goto } from '$app/navigation';
 
     import { CommandCenter, registerCommands, registerSearchers } from '$lib/commandCenter';
-    import { AIPanel, OrganizationsPanel, ProjectsPanel } from '$lib/commandCenter/panels';
+    import { AIPanel } from '$lib/commandCenter/panels';
     import { orgSearcher, projectsSearcher } from '$lib/commandCenter/searchers';
     import { addSubPanel } from '$lib/commandCenter/subPanels';
     import { addNotification } from '$lib/stores/notifications';
@@ -54,24 +54,7 @@
             group: 'navigation',
             rank: 1
         },
-        {
-            label: 'Find an organization',
-            callback: () => {
-                addSubPanel(OrganizationsPanel);
-            },
-            group: 'organizations',
-            icon: 'search',
-            keys: ['f', 'o']
-        },
-        {
-            label: 'Find a project',
-            callback: () => {
-                addSubPanel(ProjectsPanel);
-            },
-            keys: ['f', 'p'],
-            group: 'projects',
-            icon: 'search'
-        },
+
         {
             label: 'Create new organization',
             callback: () => {
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte b/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
index adec8e535f..afb79e3589 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
@@ -1,19 +1,17 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
-    import type { Models } from '@appwrite.io/console';
-    import CreateCollection from './createCollection.svelte';
-    import { showCreate } from './store';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Dependencies } from '$lib/constants';
     import {
-        addSubPanel,
         registerCommands,
         registerSearchers,
         updateCommandGroupRanks
     } from '$lib/commandCenter';
     import { collectionsSearcher } from '$lib/commandCenter/searchers';
-    import { CollectionsPanel } from '$lib/commandCenter/panels';
+    import { Dependencies } from '$lib/constants';
+    import type { Models } from '@appwrite.io/console';
+    import CreateCollection from './createCollection.svelte';
+    import { showCreate } from './store';
 
     const project = $page.params.project;
     const databaseId = $page.params.database;
@@ -27,15 +25,6 @@
     }
 
     $: $registerCommands([
-        {
-            label: 'Find collections',
-            callback() {
-                addSubPanel(CollectionsPanel);
-            },
-            keys: ['f', 'c'],
-            group: 'collections',
-            icon: 'search'
-        },
         {
             label: 'Create collection',
             callback() {
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
index f4c029ec90..bd199a1a7a 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
@@ -2,27 +2,16 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import {
-        addSubPanel,
         registerCommands,
         registerSearchers,
         updateCommandGroupRanks
     } from '$lib/commandCenter';
-    import { FilesPanel } from '$lib/commandCenter/panels';
     import { fileSearcher } from '$lib/commandCenter/searchers';
     import { project } from '../../store';
     import { showCreateFile } from './+page.svelte';
     import { bucket } from './store';
 
     $: $registerCommands([
-        {
-            label: 'Search files',
-            callback() {
-                addSubPanel(FilesPanel);
-            },
-            keys: ['f', 'l'],
-            group: 'files',
-            icon: 'search'
-        },
         {
             label: 'Create file',
             async callback() {

From aca26202fd14dfa50ecc042e216be487c3d15aa5 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:41:00 +0100
Subject: [PATCH 15/46] remove comments

---
 .../console/project-[project]/+layout.svelte  | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index 7c2c225169..c187cfdd70 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -76,52 +76,6 @@
             keys: ['p'],
             group: 'navigation'
         }
-        // {
-        //     label: 'Find users',
-        //     callback: () => {
-        //         addSubPanel(UsersPanel);
-        //     },
-        //     group: 'users',
-        //     icon: 'search',
-        //     keys: ['f', 'u'],
-        //     rank: 10
-        // },
-        // {
-        //     label: 'Find teams',
-        //     callback: () => {
-        //         addSubPanel(TeamsPanel);
-        //     },
-        //     group: 'teams',
-        //     icon: 'search',
-        //     keys: ['f', 't']
-        // },
-        // {
-        //     label: 'Find databases',
-        //     callback: () => {
-        //         addSubPanel(DatabasesPanel);
-        //     },
-        //     group: 'databases',
-        //     icon: 'search',
-        //     keys: ['f', 'd']
-        // },
-        // {
-        //     label: 'Find functions',
-        //     callback: () => {
-        //         addSubPanel(FunctionsPanel);
-        //     },
-        //     group: 'functions',
-        //     icon: 'search',
-        //     keys: ['f', 'f']
-        // },
-        // {
-        //     label: 'Find buckets',
-        //     callback: () => {
-        //         addSubPanel(BucketsPanel);
-        //     },
-        //     group: 'buckets',
-        //     icon: 'search',
-        //     keys: ['f', 'b']
-        // }
     ]);
 
     $registerSearchers(userSearcher, teamSearcher, dbSearcher, functionsSearcher, bucketSearcher);

From 190395e588f835a35a782588d746b4346285f7ef Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 17:22:30 +0100
Subject: [PATCH 16/46] command center design review

---
 src/lib/commandCenter/panels/template.svelte | 2 +-
 src/routes/console/+layout.svelte            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 025840988c..9b83cd9968 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -488,7 +488,7 @@
                     position: absolute;
                     inset: 0;
                     background-color: var(--result-bg);
-                    border-radius: 0.75rem;
+                    border-radius: 0.5rem;
                     translate: 0 -1px;
                 }
 
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 7d81193ff0..ab8ff7b1b2 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -43,7 +43,7 @@
                 addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
-            icon: 'light-bulb'
+            icon: 'sparkles'
         },
         {
             label: 'Go to account',

From cdb86dab2401e81e4b6638430e18a1063f6b8324 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:23:40 +0100
Subject: [PATCH 17/46] add tooltip to header

---
 src/lib/actions/multi-actions.ts     | 20 ++++++++++++++++++++
 src/lib/elements/forms/button.svelte |  8 ++++++--
 src/lib/layout/header.svelte         | 15 ++++++++++++++-
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/actions/multi-actions.ts

diff --git a/src/lib/actions/multi-actions.ts b/src/lib/actions/multi-actions.ts
new file mode 100644
index 0000000000..b78221d294
--- /dev/null
+++ b/src/lib/actions/multi-actions.ts
@@ -0,0 +1,20 @@
+import type { Action } from 'svelte/action';
+
+export type MultiActionArray = Array<(node: HTMLElement) => ReturnType<Action>>;
+
+export function multiAction(node: HTMLElement, arr: MultiActionArray) {
+    const destroyFns = arr.map((fn) => {
+        const actionReturn = fn(node);
+
+        return actionReturn
+            ? actionReturn.destroy
+            : () => {
+                  /* noop */
+              };
+    });
+    return {
+        destroy() {
+            destroyFns.forEach((fn) => fn());
+        }
+    };
+}
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 50622a7a3b..c25af8dc35 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -3,6 +3,7 @@
     import { getContext, hasContext } from 'svelte';
     import { readable } from 'svelte/store';
     import type { FormContext } from './form.svelte';
+    import { multiAction, type MultiActionArray } from '$lib/actions/multi-actions';
 
     export let submit = false;
     export let secondary = false;
@@ -19,6 +20,7 @@
     export let event: string = null;
     let classes: string = undefined;
     export { classes as class };
+    export let actions: MultiActionArray = [];
 
     const isSubmitting = hasContext('form')
         ? getContext<FormContext>('form').isSubmitting
@@ -59,7 +61,8 @@
         target={external ? '_blank' : ''}
         rel={external ? 'noopener noreferrer' : ''}
         class={resolvedClasses}
-        aria-label={ariaLabel}>
+        aria-label={ariaLabel}
+        use:multiAction={actions}>
         <slot />
     </a>
 {:else}
@@ -69,7 +72,8 @@
         disabled={internalDisabled}
         class={resolvedClasses}
         aria-label={ariaLabel}
-        type={submit === false ? 'button' : undefined}>
+        type={submit === false ? 'button' : undefined}
+        use:multiAction={actions}>
         <slot />
     </button>
 {/if}
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 69a2d32e57..d39cc6fd43 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -3,10 +3,12 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackEvent } from '$lib/actions/analytics';
+    import { tooltip } from '$lib/actions/tooltip';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import { AvatarInitials, DropList, DropListItem, DropListLink } from '$lib/components';
     import { Feedback } from '$lib/components/feedback';
     import Button from '$lib/elements/forms/button.svelte';
+    import { isMac } from '$lib/helpers/platform';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import LightMode from '$lib/images/mode/light-mode.svg';
@@ -95,7 +97,18 @@
             class="button is-small is-text">
             <span class="text">Support</span>
         </a>
-        <Button text class="is-small" on:click={toggleCommandCenter}>
+        <Button
+            actions={[
+                (node) => {
+                    return tooltip(node, {
+                        content: isMac() ? '⌘ + K' : 'Ctrl + K',
+                        placement: 'bottom'
+                    });
+                }
+            ]}
+            text
+            class="is-small"
+            on:click={toggleCommandCenter}>
             <i class="icon-search" />
         </Button>
     </nav>

From d8147034b0110da631af4ae428628ec1c2da5621 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:34:47 +0100
Subject: [PATCH 18/46] reorder commands

---
 src/lib/commandCenter/commands.ts             | 12 ++---
 src/routes/console/+layout.svelte             | 33 +++++++++++++-
 .../console/project-[project]/+layout.svelte  | 29 ++++++------
 .../project-[project]/auth/+layout.svelte     | 45 -------------------
 .../security/updatePersonalDataCheck.svelte   |  2 +-
 5 files changed, 52 insertions(+), 69 deletions(-)

diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts
index 9b5707e61a..fa5ade28cc 100644
--- a/src/lib/commandCenter/commands.ts
+++ b/src/lib/commandCenter/commands.ts
@@ -288,12 +288,12 @@ export const commandGroupRanks = derived(groupRanksMap, ($groupRankTransformatio
     const initialRanks = {
         ...Object.fromEntries(groups.map((group) => [group, 0])),
         ungrouped: 9999,
-        databases: 4,
-        users: 3,
-        teams: 2,
-        projects: 1,
-        organizations: 0,
-        navigation: -10,
+        databases: 50,
+        users: 40,
+        teams: 30,
+        projects: 20,
+        organizations: 10,
+        navigation: 0,
         help: -20,
         misc: -30
     } as CommandGroupRanks;
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index ab8ff7b1b2..6556764fc8 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -23,6 +23,14 @@
     import { addSubPanel } from '$lib/commandCenter/subPanels';
     import { addNotification } from '$lib/stores/notifications';
     import { openMigrationWizard } from './(migration-wizard)';
+    import { project } from './project-[project]/store';
+
+    function kebabToSentenceCase(str: string) {
+        return str
+            .split('-')
+            .map((word) => word[0].toUpperCase() + word.slice(1))
+            .join(' ');
+    }
 
     $: $registerCommands([
         {
@@ -35,7 +43,8 @@
             disabled:
                 $page.url.pathname.includes('/console/organization-') &&
                 !$page.url.pathname.endsWith('/members') &&
-                !$page.url.pathname.endsWith('/settings')
+                !$page.url.pathname.endsWith('/settings'),
+            rank: -1
         },
         {
             label: 'Ask the AI',
@@ -52,7 +61,7 @@
             },
             keys: ['i'],
             group: 'navigation',
-            rank: 1
+            rank: -2
         },
 
         {
@@ -63,6 +72,26 @@
             keys: ['c', 'o'],
             group: 'organizations'
         },
+        ...[
+            'users-limit',
+            'session-length',
+            'sessions-limit',
+            'password-history',
+            'password-dictionary',
+            'personal-data'
+        ].map(
+            (heading) =>
+                ({
+                    label: kebabToSentenceCase(heading),
+                    async callback() {
+                        await goto(`/console/project-${$project.$id}/auth/security#${heading}`);
+                        scrollBy({ top: -100 });
+                    },
+                    group: 'security',
+                    icon: 'pencil'
+                } as const)
+        ),
+
         {
             label: 'Open documentation',
             callback: () => {
diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index c187cfdd70..727ca6e149 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -28,16 +28,15 @@
 
     $: $registerCommands([
         {
-            label: 'Go to overview',
+            label: 'Go to Databases',
             callback: () => {
-                goto(`/console/project-${$project.$id}`);
+                goto(`/console/project-${$project.$id}/databases`);
             },
-            keys: ['o'],
+            keys: ['d'],
             group: 'navigation'
         },
-
         {
-            label: 'Go to auth',
+            label: 'Go to Auth',
             callback: () => {
                 goto(`/console/project-${$project.$id}/auth`);
             },
@@ -45,15 +44,7 @@
             group: 'navigation'
         },
         {
-            label: 'Go to databases',
-            callback: () => {
-                goto(`/console/project-${$project.$id}/databases`);
-            },
-            keys: ['d'],
-            group: 'navigation'
-        },
-        {
-            label: 'Go to functions',
+            label: 'Go to Functions',
             callback: () => {
                 goto(`/console/project-${$project.$id}/functions`);
             },
@@ -61,7 +52,7 @@
             group: 'navigation'
         },
         {
-            label: 'Go to storage',
+            label: 'Go to Storage',
             callback: () => {
                 goto(`/console/project-${$project.$id}/storage`);
             },
@@ -75,6 +66,14 @@
             },
             keys: ['p'],
             group: 'navigation'
+        },
+        {
+            label: 'Go to overview',
+            callback: () => {
+                goto(`/console/project-${$project.$id}`);
+            },
+            keys: ['o'],
+            group: 'navigation'
         }
     ]);
 
diff --git a/src/routes/console/project-[project]/auth/+layout.svelte b/src/routes/console/project-[project]/auth/+layout.svelte
index 62c3356484..69c53375a0 100644
--- a/src/routes/console/project-[project]/auth/+layout.svelte
+++ b/src/routes/console/project-[project]/auth/+layout.svelte
@@ -74,51 +74,6 @@
             group: 'navigation',
             rank: 1,
             disabled: $page.url.pathname.endsWith('settings')
-        },
-        {
-            label: 'Users limit',
-            async callback() {
-                await goto(`/console/project-${$project.$id}/auth/security#users-limit`);
-                scrollBy({ top: -100 });
-            },
-            group: 'security',
-            icon: 'pencil'
-        },
-        {
-            label: 'Session length',
-            async callback() {
-                await goto(`/console/project-${$project.$id}/auth/security#session-length`);
-                scrollBy({ top: -100 });
-            },
-            group: 'security',
-            icon: 'pencil'
-        },
-        {
-            label: 'Sessions limit',
-            async callback() {
-                await goto(`/console/project-${$project.$id}/auth/security#sessions-limit`);
-                scrollBy({ top: -100 });
-            },
-            group: 'security',
-            icon: 'pencil'
-        },
-        {
-            label: 'Password history',
-            async callback() {
-                await goto(`/console/project-${$project.$id}/auth/security#password-history`);
-                scrollBy({ top: -100 });
-            },
-            group: 'security',
-            icon: 'pencil'
-        },
-        {
-            label: 'Password dictionary',
-            async callback() {
-                await goto(`/console/project-${$project.$id}/auth/security#password-dictionary`);
-                scrollBy({ top: -100 });
-            },
-            group: 'security',
-            icon: 'pencil'
         }
     ]);
 
diff --git a/src/routes/console/project-[project]/auth/security/updatePersonalDataCheck.svelte b/src/routes/console/project-[project]/auth/security/updatePersonalDataCheck.svelte
index 140eebb707..31e0b3d5a5 100644
--- a/src/routes/console/project-[project]/auth/security/updatePersonalDataCheck.svelte
+++ b/src/routes/console/project-[project]/auth/security/updatePersonalDataCheck.svelte
@@ -35,7 +35,7 @@
 
 <Form onSubmit={updatePersonalDataCheck}>
     <CardGrid>
-        <Heading tag="h2" size="7">Personal Data</Heading>
+        <Heading tag="h2" size="7" id="personal-data">Personal Data</Heading>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputSwitch

From 7bb0ae4db4f0dc5c01f7c0ef8c696496efdf0652 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:59:44 +0100
Subject: [PATCH 19/46] fix ai panel input

---
 src/lib/commandCenter/panels/ai.svelte       |  4 ++++
 src/lib/commandCenter/panels/template.svelte | 23 +++++++++++++++++++-
 src/routes/console/+layout.svelte            |  1 -
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 307263c2df..db956216c1 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -8,6 +8,7 @@
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
     import { VARS } from '$lib/system';
+    import { key } from '$routes/console/project-[project]/overview/keys/[key]/store';
 
     const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
         api: VARS.ASSISTANT_ENDPOINT
@@ -97,6 +98,9 @@
               };
           })}
     clearOnCallback={false}
+    on:keydown={(e) => {
+        e.detail.cancel();
+    }}
     --min-height="40rem"
     --max-height="52.5rem">
     <div slot="search">
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 9b83cd9968..22e1e3937e 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -4,7 +4,7 @@
     // This is the template for all panels used in the command center.
     // Use this component when you want to create a new panel.
 
-    import { tick } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
 
     import { getCommandCenterCtx } from '../commandCenter.svelte';
 
@@ -28,9 +28,25 @@
         }
     }
 
+    const dispatch = createEventDispatcher<{
+        keydown: {
+            originalEvent: KeyboardEvent;
+            cancel: () => void;
+            key: string;
+        };
+    }>();
+
     function handleKeyDown(event: KeyboardEvent) {
         if (!open) return;
 
+        let canceled = false;
+        dispatch('keydown', {
+            originalEvent: event,
+            cancel: () => (canceled = true),
+            key: event.key
+        });
+        if (canceled) return;
+
         if (options) {
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -177,6 +193,10 @@
         selected = option.index;
     };
 
+    const getOptionBlurHandler = () => () => {
+        selected = -1;
+    };
+
     const castOption = (option: IndexedOption) => option as Option;
 
     function getBreadcrumbs(subPanels: typeof $subPanels) {
@@ -272,6 +292,7 @@
                                 class="option"
                                 on:click={getOptionClickHandler(item)}
                                 on:mouseover={getOptionFocusHandler(item)}
+                                on:mouseleave={getOptionBlurHandler()}
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
                                     <div class="u-flex u-gap-8 u-cross-center">
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 6556764fc8..87f34689f8 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -63,7 +63,6 @@
             group: 'navigation',
             rank: -2
         },
-
         {
             label: 'Create new organization',
             callback: () => {

From 2a0f8f570a67146170f176e3fca5a7a1990288a9 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 19:21:20 +0100
Subject: [PATCH 20/46] more commands

---
 src/lib/commandCenter/panels/ai.svelte                   | 1 -
 .../console/project-[project]/settings/+layout.svelte    | 9 +++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index db956216c1..02a51a078e 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -8,7 +8,6 @@
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
     import { VARS } from '$lib/system';
-    import { key } from '$routes/console/project-[project]/overview/keys/[key]/store';
 
     const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
         api: VARS.ASSISTANT_ENDPOINT
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index f1fc7db408..1d3b9fe91d 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -68,6 +68,15 @@
             group: 'navigation',
 
             rank: 10
+        },
+        {
+            label: 'Go to SMTP settings',
+            keys: ['g', 's'],
+            callback: () => {
+                goto(`/console/project-${$project.$id}/settings/smtp`);
+            },
+            disabled: $page.url.pathname.includes('smtp'),
+            group: 'navigation'
         }
     ]);
 

From 42f6eedc05ac7d5641f42018f5451f8f15490bc3 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 19:22:07 +0100
Subject: [PATCH 21/46] hide firebase oauth

---
 .../settings/migrations/(import)/step1.svelte | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
index 2800ff2498..a2655101b4 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
@@ -96,32 +96,32 @@
         </FormList>
     {:else if $provider.provider === 'firebase'}
         {#if !firebaseProjects?.length}
-            <div class="box u-flex u-flex-vertical u-gap-16 u-cross-center u-margin-block-start-24">
+            <!-- <div class="box u-flex u-flex-vertical u-gap-16 u-cross-center u-margin-block-start-24">
                 <p class="u-text-center u-bold">Sign in with Google to get started</p>
                 <Button secondary href={connectGoogle().toString()}>
                     <SvgIcon name="google" />Sign in
                 </Button>
-            </div>
+            </div> -->
 
-            <button
+            <!-- <button
                 class="tag u-margin-block-start-16"
                 type="button"
                 on:click={() => (showAuth = !showAuth)}
                 class:is-selected={showAuth}>
                 <span class="icon-lock-closed" aria-hidden="true" />
                 <span class="text">Manual authentication</span>
-            </button>
+            </button> -->
 
-            {#if showAuth}
-                <div class="u-margin-block-start-16">
-                    <InputText
-                        id="credentials"
-                        label="Account credentials"
-                        required
-                        bind:value={$provider.serviceAccount}
-                        placeholder="Enter account credentials" />
-                </div>
-            {/if}
+            <!-- {#if showAuth} -->
+            <div class="u-margin-block-start-16">
+                <InputText
+                    id="credentials"
+                    label="Account credentials"
+                    required
+                    bind:value={$provider.serviceAccount}
+                    placeholder="Enter account credentials" />
+            </div>
+            <!-- {/if} -->
         {:else}
             <FormList class="u-margin-block-start-24">
                 <InputSelect

From 67883b32946bd283d42f1e09fba5b0a9a74491cb Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 12:25:46 +0100
Subject: [PATCH 22/46] fix missing project sdk

---
 package-lock.json                                     | 10 +++++-----
 package.json                                          |  2 +-
 src/lib/stores/sdk.ts                                 |  4 ++--
 .../console/(migration-wizard)/resource-form.svelte   | 11 ++++++-----
 src/routes/console/(migration-wizard)/step2.svelte    |  5 +++--
 .../settings/migrations/(import)/step2.svelte         |  3 ++-
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8793ae4fcb..7795ceff91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@analytics/google-tag-manager": "^0.5.3",
-                "@appwrite.io/console": "npm:christy-console@^0.4.0",
+                "@appwrite.io/console": "npm:bradley-console@^0.1.0",
                 "@appwrite.io/pink": "^0.1.0-next.3",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
@@ -165,10 +165,10 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "name": "christy-console",
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/christy-console/-/christy-console-0.4.0.tgz",
-            "integrity": "sha512-PypVyV0eg79uju7pLe8zLEXQpD3wTDyGEpfzbEt/uYlt7RMSZUris9kL75wiw8pULYzmUGC33lgMwELcIXgK/Q==",
+            "name": "bradley-console",
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/bradley-console/-/bradley-console-0.1.0.tgz",
+            "integrity": "sha512-SKgIz4Tmd0AmL/8darZvu4bNEUZWkINgPpVrXQNRM5YLXq8SV0w0AQDeuvPVkenVbpKwcowr2rS6fEsix8+sXg==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index c674dfeed5..b4841b6094 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "npm:christy-console@^0.4.0",
+        "@appwrite.io/console": "npm:bradley-console@^0.1.0",
         "@appwrite.io/pink": "^0.1.0-next.3",
         "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 106fa6d479..ea4d481614 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -8,7 +8,7 @@ import {
     Functions,
     Health,
     Locale,
-    // Migrations,
+    Migrations,
     Projects,
     Project,
     Storage,
@@ -35,7 +35,7 @@ const sdkForProject = {
     storage: new Storage(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
-    migrations: {}
+    migrations: Migrations
 };
 
 export const getSdkForProject = (projectId: string) => {
diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index 531aa6e246..8a1fd53370 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -3,7 +3,7 @@
     import { Button } from '$lib/elements/forms';
     import { deepMap } from '$lib/helpers/object';
     import type { WritableValue } from '$lib/helpers/types';
-    import { sdk } from '$lib/stores/sdk';
+    import type { getSdkForProject } from '$lib/stores/sdk';
 
     import { onMount } from 'svelte';
 
@@ -18,6 +18,7 @@
 
     export let formData: ReturnType<typeof createMigrationFormStore>;
     export let provider: ReturnType<typeof createMigrationProviderStore>;
+    export let projectSdk: ReturnType<typeof getSdkForProject>;
 
     type ValueOf<T> = T[keyof T];
     type FormData = WritableValue<typeof formData>;
@@ -84,7 +85,7 @@
         try {
             switch ($provider.provider) {
                 case 'appwrite': {
-                    const res = await sdk.forProject.migrations.getAppwriteReport(
+                    const res = await projectSdk.migrations.getAppwriteReport(
                         providerResources.appwrite,
                         $provider.endpoint,
                         $provider.projectID,
@@ -94,7 +95,7 @@
                     break;
                 }
                 case 'supabase': {
-                    const res = await sdk.forProject.migrations.getSupabaseReport(
+                    const res = await projectSdk.migrations.getSupabaseReport(
                         providerResources.supabase,
                         $provider.endpoint,
                         $provider.apiKey,
@@ -111,7 +112,7 @@
                         // OAuth
                     } else if ($provider.serviceAccount) {
                         // Manual auth
-                        const res = await sdk.forProject.migrations.getFirebaseReport(
+                        const res = await projectSdk.migrations.getFirebaseReport(
                             providerResources.firebase,
                             $provider.serviceAccount
                         );
@@ -121,7 +122,7 @@
                     break;
                 }
                 case 'nhost': {
-                    const res = await sdk.forProject.migrations.getNHostReport(
+                    const res = await projectSdk.migrations.getNHostReport(
                         providerResources.nhost,
                         $provider.subdomain,
                         $provider.region,
diff --git a/src/routes/console/(migration-wizard)/step2.svelte b/src/routes/console/(migration-wizard)/step2.svelte
index 75cb8ea8fb..005b9e7bc3 100644
--- a/src/routes/console/(migration-wizard)/step2.svelte
+++ b/src/routes/console/(migration-wizard)/step2.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
+    import { getSdkForProject } from '$lib/stores/sdk';
 
-    import { formData, provider } from '.';
+    import { formData, provider, selectedProject } from '.';
     import ResourceForm from './resource-form.svelte';
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">Select data</svelte:fragment>
-    <ResourceForm {provider} {formData} />
+    <ResourceForm {provider} {formData} projectSdk={getSdkForProject($selectedProject)} />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte
index 6353b5968f..b1f7ccf353 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step2.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
+    import { sdk } from '$lib/stores/sdk';
 
     import ResourceForm from '$routes/console/(migration-wizard)/resource-form.svelte';
     import { formData, provider } from '.';
@@ -7,5 +8,5 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Select data</svelte:fragment>
-    <ResourceForm {formData} {provider} />
+    <ResourceForm {formData} {provider} projectSdk={sdk.forProject} />
 </WizardStep>

From 5ef22c8e9509b5d4fc11a99ead6e7e124a281eb5 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 12:27:23 +0100
Subject: [PATCH 23/46] fix icon

---
 src/routes/+layout.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f8d9f93f41..959882dd53 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -181,10 +181,6 @@
         }
     }
 
-    [type='checkbox']:where(:checked)::before {
-        content: '\ea38';
-    }
-
     .border-gradient {
         position: relative;
     }

From 320605cc0e93aee5f64907a46037bb17241b3fdb Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 12:49:39 +0100
Subject: [PATCH 24/46] add feedback fn

---
 .../settings/migrations/(import)/step1.svelte | 28 +++++++++----------
 .../settings/migrations/exportModal.svelte    |  5 +++-
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
index 5ab8f0bbb9..0cb9d9365c 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import SvgIcon from '$lib/components/svgIcon.svelte';
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Dependencies } from '$lib/constants';
     import {
-        Button,
         FormList,
         InputNumber,
         InputPassword,
@@ -10,12 +11,9 @@
     } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import type { Provider } from '$lib/stores/migration';
+    import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { page } from '$app/stores';
     import { provider } from '.';
-    import { addNotification } from '$lib/stores/notifications';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
 
     const providers: Record<Provider, string> = {
         appwrite: 'Appwrite Self-hosted',
@@ -24,15 +22,15 @@
         nhost: 'NHost'
     };
 
-    function connectGoogle() {
-        const redirect = new URL($page.url);
-        const target = new URL(
-            `${sdk.forProject.client.config.endpoint}/migrations/firebase/connect`
-        );
-        target.searchParams.set('redirect', redirect.toString());
-        target.searchParams.set('projectId', $page.params.project);
-        return target;
-    }
+    // function connectGoogle() {
+    //     const redirect = new URL($page.url);
+    //     const target = new URL(
+    //         `${sdk.forProject.client.config.endpoint}/migrations/firebase/connect`
+    //     );
+    //     target.searchParams.set('redirect', redirect.toString());
+    //     target.searchParams.set('projectId', $page.params.project);
+    //     return target;
+    // }
 
     function deauthorizeGoogle() {
         sdk.forProject.migrations.deleteFirebaseAuth().then(() => {
diff --git a/src/routes/console/project-[project]/settings/migrations/exportModal.svelte b/src/routes/console/project-[project]/settings/migrations/exportModal.svelte
index 81cc40dade..7f2407468d 100644
--- a/src/routes/console/project-[project]/settings/migrations/exportModal.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/exportModal.svelte
@@ -2,6 +2,7 @@
     import { Alert, Modal } from '$lib/components';
     import { Button, InputText, InputTextarea } from '$lib/elements/forms';
     import { getFormData } from '$lib/helpers/form';
+    import { feedback } from '$lib/stores/feedback';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
 
@@ -48,7 +49,9 @@
         const formData = getFormData<{ endpoint: string; feedback: string }>(e);
 
         // TODO: Send feedback somewhere
-        const { endpoint, feedback: _feedback } = formData;
+        const { endpoint, feedback: message } = formData;
+
+        await feedback.submitFeedback(`feedback-${$feedback.type}`, message);
 
         if (!isValidEndpoint(endpoint)) {
             const endpointInput = document.getElementById('endpoint') as HTMLInputElement;

From ec5ad21fb84bc9bc761341322892c28d74ddb14d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 13:20:56 +0100
Subject: [PATCH 25/46] migration design changes

---
 src/lib/stores/sdk.ts                                       | 4 ++--
 .../settings/migrations/(import)/step1.svelte               | 2 +-
 .../project-[project]/settings/migrations/+page.svelte      | 6 ++++--
 .../project-[project]/settings/migrations/details.svelte    | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index ea4d481614..56c09cbc5d 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -35,7 +35,7 @@ const sdkForProject = {
     storage: new Storage(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
-    migrations: Migrations
+    migrations: new Migrations(clientProject)
 };
 
 export const getSdkForProject = (projectId: string) => {
@@ -57,7 +57,7 @@ export const sdk = {
         projects: new Projects(clientConsole),
         teams: new Teams(clientConsole),
         users: new Users(clientConsole),
-        migrations: {}
+        migrations: new Migrations(clientConsole)
     },
     get forProject() {
         const projectId = getProjectId();
diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
index 0cb9d9365c..67540685d5 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
@@ -49,7 +49,7 @@
 
     $: console.log(firebaseProjects);
 
-    let showAuth = false;
+    // let showAuth = false;
 </script>
 
 <WizardStep>
diff --git a/src/routes/console/project-[project]/settings/migrations/+page.svelte b/src/routes/console/project-[project]/settings/migrations/+page.svelte
index 2de72e1d94..08fadc9693 100644
--- a/src/routes/console/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/+page.svelte
@@ -173,8 +173,10 @@
                                     </div>
                                 </TableCell>
                                 <TableCell title="">
-                                    <Button secondary on:click={() => (details = entry.$id)}
-                                        >Details</Button>
+                                    <div class="u-flex u-main-end">
+                                        <Button secondary on:click={() => (details = entry.$id)}
+                                            >Details</Button>
+                                    </div>
                                 </TableCell>
                             </TableRow>
                         {/each}
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 5151359b28..19f8e2ade4 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -79,7 +79,7 @@
                         </div>
 
                         <div>
-                            <span class="u-capitalize">{entity}</span>
+                            <span class="u-capitalize">{entity + 's'}</span>
                             <span class="inline-tag">{totalItems(entityCounter)}</span>
                         </div>
                     </div>

From aa822fba8f3e2ed4e7e3a0e96c2c997c324eb296 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 13:28:25 +0100
Subject: [PATCH 26/46] improve command selection

---
 src/lib/commandCenter/panels/template.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 22e1e3937e..86f29a53b1 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -106,8 +106,9 @@
         }
     }
 
-    $: {
-        options;
+    $: if (selected > options.length - 1) {
+        selected = options.length - 1;
+    } else if (selected < 0) {
         selected = 0;
     }
 

From 1fb8b58087d847a08090f2d52f5abcb40a22e719 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 13:45:33 +0100
Subject: [PATCH 27/46] fix code padding

---
 src/lib/commandCenter/panels/ai.svelte       | 15 +++++++++++----
 src/lib/commandCenter/panels/template.svelte |  6 ++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 02a51a078e..bed645cccd 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -39,6 +39,7 @@
 
         // get all code matches
         const codeMatches = Array.from(c.matchAll(/```([a-z]*)(.*?)(```|$)/gs));
+        console.log(codeMatches);
 
         let i = 0;
         let codeIdx = 0;
@@ -56,7 +57,9 @@
 
                 answer.push({
                     type: 'code',
-                    value: nextCodeMatch[2],
+                    value: nextCodeMatch[2].startsWith('\n')
+                        ? nextCodeMatch[2].slice(1)
+                        : nextCodeMatch[2],
                     language: isLanguage(language) ? language : 'js'
                 });
 
@@ -79,7 +82,7 @@
 
     function getInitials(name: string) {
         const [first, last] = name.split(' ');
-        return `${first[0]}${last[0]}`;
+        return `${first?.[0] ?? ''}${last?.[0] ?? ''}`;
     }
 </script>
 
@@ -127,10 +130,14 @@
                     {:else}
                         {#each answer as part}
                             {#if part.type === 'text'}
-                                <p>{part.value}</p>
+                                <p>{part.value.trimStart()}</p>
                             {:else if part.type === 'code'}
                                 {#key part.value}
-                                    <Code language={part.language} code={part.value} />
+                                    <div
+                                        class="u-margin-block-start-8"
+                                        style="margin-block-end: 1rem;">
+                                        <Code language={part.language} code={part.value} noMargin />
+                                    </div>
                                 {/key}
                             {/if}
                         {/each}
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 86f29a53b1..3b69a80aad 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -106,10 +106,8 @@
         }
     }
 
-    $: if (selected > options.length - 1) {
-        selected = options.length - 1;
-    } else if (selected < 0) {
-        selected = 0;
+    $: if (selected > options?.length - 1) {
+        selected = options?.length - 1;
     }
 
     const commandCenterCtx = getCommandCenterCtx();

From 2b589344d5b2cc44b7012e06455dc390ca5be39e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:01:22 +0100
Subject: [PATCH 28/46] loading dots animation

---
 src/lib/commandCenter/panels/ai.svelte |  4 +-
 src/lib/components/index.ts            |  1 +
 src/lib/components/loadingDots.svelte  | 56 ++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/loadingDots.svelte

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index bed645cccd..6cd1897cff 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Template from './template.svelte';
 
-    import { AvatarInitials, Code, SvgIcon } from '$lib/components';
+    import { AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
     import { subPanels } from '../subPanels';
@@ -126,7 +126,7 @@
                 </div>
                 <div class="answer">
                     {#if $isLoading && !$completion}
-                        <p>...</p>
+                        <LoadingDots />
                     {:else}
                         {#each answer as part}
                             {#if part.type === 'text'}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 581b391467..cacb811412 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -56,3 +56,4 @@ export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
 export { default as MigrationBox } from './migrationBox.svelte';
 export { default as FloatingActionBar } from './floatingActionBar.svelte';
+export { default as LoadingDots } from './loadingDots.svelte';
diff --git a/src/lib/components/loadingDots.svelte b/src/lib/components/loadingDots.svelte
new file mode 100644
index 0000000000..71df2f1289
--- /dev/null
+++ b/src/lib/components/loadingDots.svelte
@@ -0,0 +1,56 @@
+<!-- Loading dots -->
+<script>
+    let className = '';
+    export { className as class };
+</script>
+
+<div class="loading-dots {className}">
+    <div class="dot" />
+    <div class="dot" />
+    <div class="dot" />
+</div>
+
+<style>
+    .loading-dots {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: 0.25rem;
+        padding-inline: 0.5rem;
+    }
+
+    .dot {
+        width: 0.25rem;
+        height: 0.25rem;
+        border-radius: 50%;
+        background-color: hsl(var(--p-body-text-color));
+        animation: loading-dots 1s infinite ease-in-out;
+    }
+
+    .dot:nth-child(1) {
+        animation-delay: 0.1s;
+    }
+
+    .dot:nth-child(2) {
+        animation-delay: 0.2s;
+    }
+
+    .dot:nth-child(3) {
+        animation-delay: 0.3s;
+    }
+
+    @keyframes loading-dots {
+        0% {
+            transform: translateY(0.25rem);
+        }
+        25% {
+            transform: translateY(0rem);
+        }
+        50%,
+        100% {
+            transform: translateY(0.25rem);
+        }
+    }
+</style>

From 5bdc88f3a9fa1f7de370e12ed6e662828c0392c4 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:05:47 +0100
Subject: [PATCH 29/46] add border to avatars

---
 .../console/project-[project]/settings/migrations/+page.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/+page.svelte b/src/routes/console/project-[project]/settings/migrations/+page.svelte
index 08fadc9693..19f90ab8d3 100644
--- a/src/routes/console/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/+page.svelte
@@ -184,7 +184,7 @@
                 </Table>
             {:else}
                 <div class="import-box">
-                    <ul class="avatars-group">
+                    <ul class="avatars-group is-with-border">
                         <li class="avatars-group-item">
                             <div class="avatar">
                                 <i class="icon-user-group" />

From 15980227b1228234510d3ed866e814be1bba97ea Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:16:02 +0100
Subject: [PATCH 30/46] migrations loaders

---
 .../(migration-wizard)/resource-form.svelte   | 64 +++++++++++++------
 1 file changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index 8a1fd53370..f67f5fc8c0 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -210,18 +210,22 @@
     </li>
 </ul>
 
-<ul class="u-flex u-flex-vertical u-gap-32 u-margin-block-start-16">
+<ul class="u-flex u-flex-vertical u-margin-block-start-16">
     {#if resources.includes('user')}
         <li class="checkbox-field">
             <input
                 type="checkbox"
                 bind:checked={$formData.users.root}
                 on:change={handleInputChange('users.root')} />
-            <div class="u-flex u-gap-4">
+            <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Users</span>
 
                 {#if $provider.provider !== 'firebase'}
-                    <span class="inline-tag">{report?.user ?? '...'}</span>
+                    {#if report?.user}
+                        <span class="inline-tag">{report.user}</span>
+                    {:else}
+                        <span class="loader is-small u-margin-inline-start-4" />
+                    {/if}
                 {/if}
             </div>
             <div />
@@ -234,10 +238,14 @@
                             type="checkbox"
                             bind:checked={$formData.users.teams}
                             on:change={handleInputChange('users.teams')} />
-                        <div class="u-flex u-gap-4">
+                        <div class="u-flex u-gap-4 u-cross-center">
                             <span class="u-bold">Include teams</span>
                             {#if $provider.provider === 'firebase'}
-                                <span class="inline-tag">{report?.team ?? '...'}</span>
+                                {#if report?.team}
+                                    <span class="inline-tag">{report.team}</span>
+                                {:else}
+                                    <span class="loader is-small u-margin-inline-start-4" />
+                                {/if}
                             {/if}
                         </div>
                         <div />
@@ -254,10 +262,14 @@
                 type="checkbox"
                 bind:checked={$formData.databases.root}
                 on:change={handleInputChange('databases.root')} />
-            <div class="u-flex u-gap-4">
+            <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Databases</span>
                 {#if $provider.provider !== 'firebase'}
-                    <span class="inline-tag">{report?.database ?? '...'}</span>
+                    {#if report?.database}
+                        <span class="inline-tag">{report.database}</span>
+                    {:else}
+                        <span class="loader is-small u-margin-inline-start-4" />
+                    {/if}
                 {/if}
             </div>
             <div />
@@ -270,10 +282,14 @@
                             type="checkbox"
                             bind:checked={$formData.databases.documents}
                             on:change={handleInputChange('databases.documents')} />
-                        <div class="u-flex u-gap-4">
+                        <div class="u-flex u-gap-4 u-cross-center">
                             <span class="u-bold">Include documents</span>
                             {#if $provider.provider !== 'firebase'}
-                                <span class="inline-tag">{report?.document ?? '...'}</span>
+                                {#if report?.document}
+                                    <span class="inline-tag">{report.document}</span>
+                                {:else}
+                                    <span class="loader is-small u-margin-inline-start-4" />
+                                {/if}
                             {/if}
                         </div>
                         <div />
@@ -290,10 +306,14 @@
                 type="checkbox"
                 bind:checked={$formData.functions.root}
                 on:change={handleInputChange('functions.root')} />
-            <div class="u-flex u-gap-4">
+            <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Functions</span>
                 {#if $provider.provider !== 'firebase'}
-                    <span class="inline-tag">{report?.function ?? '...'}</span>
+                    {#if report?.function}
+                        <span class="inline-tag">{report.function}</span>
+                    {:else}
+                        <span class="loader is-small u-margin-inline-start-4" />
+                    {/if}
                 {/if}
             </div>
             <div />
@@ -335,26 +355,28 @@
                 type="checkbox"
                 bind:checked={$formData.storage.root}
                 on:change={handleInputChange('storage.root')} />
-            <div class="u-flex u-gap-4">
+            <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Storage</span>
                 {#if $provider.provider !== 'firebase'}
-                    <span class="inline-tag">
-                        {report?.size ? `${report.size.toFixed(2)}MB` : '...'}
-                    </span>
+                    {#if report?.size}
+                        <span class="inline-tag">{`${report.size.toFixed(2)}MB`}</span>
+                    {:else}
+                        <span class="loader is-small u-margin-inline-start-4" />
+                    {/if}
                 {/if}
             </div>
             <div />
 
-            <span>
+            <p>
                 Import all buckets
-                {#if $provider.provider !== 'firebase'}
-                    <span class="inline-tag">{report?.bucket ?? '...'}</span>
+                {#if $provider.provider !== 'firebase' && report?.bucket}
+                    <span class="inline-tag">{report.bucket}</span>
                 {/if}
                 and files
-                {#if $provider.provider !== 'firebase'}
-                    <span class="inline-tag">{report?.file ?? '...'}</span>
+                {#if $provider.provider !== 'firebase' && report?.file}
+                    <span class="inline-tag">{report.file}</span>
                 {/if}
-            </span>
+            </p>
         </li>
     {/if}
 </ul>

From 7069fb2f692e6c9a81857314ab00ce87d22f9b9f Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:22:41 +0100
Subject: [PATCH 31/46] fix wizard title

---
 .../settings/migrations/(import)/wizard.svelte                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/wizard.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/wizard.svelte
index 2207303f00..bf1e37696d 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/wizard.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/wizard.svelte
@@ -103,4 +103,4 @@
     });
 </script>
 
-<Wizard title="Create Project" {steps} on:exit={onExit} on:finish={onFinish} />
+<Wizard title="Create Migration" {steps} on:exit={onExit} on:finish={onFinish} />

From d97c489bb0ab8ab1943c2ef2d181b70f1c2cd8ce Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:24:13 +0100
Subject: [PATCH 32/46] radio button spacing

---
 .../project-[project]/settings/migrations/(import)/step1.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
index 67540685d5..9e2c412d21 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
@@ -54,7 +54,7 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Choose provider</svelte:fragment>
-    <div class="u-flex u-flex-vertical u-gap-16">
+    <div class="u-flex u-flex-vertical u-gap-8">
         {#each Object.entries(providers) as [key, value]}
             <label class="u-flex u-cross-center u-cursor-pointer u-gap-8">
                 <input

From 84ccd9e32b87e274ad82a46d4d48cbd16e05147c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 18 Aug 2023 14:30:31 +0100
Subject: [PATCH 33/46] fix padding

---
 src/lib/elements/forms/inputChoice.svelte                       | 2 +-
 .../collection-[collection]/attributes/string.svelte            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
index f3348f148e..48aa7454e5 100644
--- a/src/lib/elements/forms/inputChoice.svelte
+++ b/src/lib/elements/forms/inputChoice.svelte
@@ -40,7 +40,7 @@
 
         <div class="choice-item-content">
             <div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
-            {#if $$slots}
+            {#if $$slots.default}
                 <p class="choice-item-paragraph"><slot /></p>
             {/if}
         </div>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index a52135d8df..92c3feaa51 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -44,7 +44,7 @@
     };
     export let editing = false;
 
-    $: if (data.required || data.array) {
+    $: if (data.array) {
         data.default = null;
     }
 </script>

From d899623012a210f645f9d9811730ccc119ec3541 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 21 Aug 2023 13:43:23 +0100
Subject: [PATCH 34/46] logs MVP

---
 src/lib/components/code.svelte                | 12 ++++++++++--
 .../settings/migrations/details.svelte        | 19 +++++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 6613d337a1..d6f6f93cba 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -29,6 +29,7 @@
     export let withLineNumbers = false;
     export let withCopy = false;
     export let noMargin = false;
+    export let allowScroll = false;
 
     Prism.plugins.customClass.prefix('prism-');
 
@@ -56,8 +57,10 @@
             </Copy>
         {/if}
     </div>
-    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
-            >{code}</code></pre>
+    <pre
+        class:with-scroll={allowScroll}
+        class={`language-${language}`}
+        class:line-numbers={withLineNumbers}><code>{code}</code></pre>
 </section>
 
 <style lang="scss" global>
@@ -76,6 +79,11 @@
         }
     }
 
+    .with-scroll {
+        height: 100%;
+        overflow: auto;
+    }
+
     code,
     pre {
         &[class*='language-'] {
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 19f8e2ade4..801ffde8b1 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Code, Modal } from '$lib/components';
+    import Button from '$lib/elements/forms/button.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { parseIfString } from '$lib/helpers/object';
     import type { Models } from '@appwrite.io/console';
@@ -41,6 +42,8 @@
         if (!counter) return 0;
         return Object.values(counter).reduce((acc, curr) => acc + curr, 0);
     };
+
+    let viewLogs = false;
 </script>
 
 <Modal bind:show on:close={() => (migrationId = null)} size="big">
@@ -51,7 +54,9 @@
             Migration details
         {/if}
     </svelte:fragment>
-    {#if details}
+    {#if viewLogs}
+        <Code code={JSON.stringify(details, null, 2)} language="json" allowScroll />
+    {:else}
         <div class="box meta">
             <span>Date</span>
             <span>{toLocaleDateTime(details.$createdAt)}</span>
@@ -87,6 +92,16 @@
             </div>
         {/if}
     {/if}
+
+    <svelte:fragment slot="footer">
+        <Button
+            secondary
+            on:click={() => {
+                viewLogs = !viewLogs;
+            }}>
+            {viewLogs ? 'Hide' : 'View'} logs
+        </Button>
+    </svelte:fragment>
 </Modal>
 
 <style lang="scss">

From ebcf8ee51648c29bc38568e180c22fe76e49565c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 21 Aug 2023 13:54:07 +0100
Subject: [PATCH 35/46] better errors

---
 .../console/(migration-wizard)/resource-form.svelte      | 6 +++---
 .../settings/migrations/(import)/step1.svelte            | 9 ++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index f67f5fc8c0..b2015db315 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -15,6 +15,7 @@
         resourcesToMigrationForm
     } from '$lib/stores/migration';
     import { addNotification } from '$lib/stores/notifications';
+    import { wizard } from '$lib/stores/wizard';
 
     export let formData: ReturnType<typeof createMigrationFormStore>;
     export let provider: ReturnType<typeof createMigrationProviderStore>;
@@ -137,7 +138,7 @@
         } catch (e) {
             if (!isOpen) return;
             addNotification({
-                message: e.message,
+                message: 'Request failed, please check your crendentials and try again.',
                 type: 'error'
             });
         }
@@ -148,8 +149,7 @@
     });
 
     $: resources = providerResources[$provider.provider];
-
-    // $: wizard.setNextDisabled(!report);
+    $: wizard.setNextDisabled(!report);
 </script>
 
 <div class="box" style:border-radius="0.5rem">
diff --git a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
index 9e2c412d21..6647917a0c 100644
--- a/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/(import)/step1.svelte
@@ -7,7 +7,8 @@
         InputNumber,
         InputPassword,
         InputSelect,
-        InputText
+        InputText,
+        InputTextarea
     } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import type { Provider } from '$lib/stores/migration';
@@ -112,7 +113,7 @@
 
             <!-- {#if showAuth} -->
             <div class="u-margin-block-start-16">
-                <InputText
+                <InputTextarea
                     id="credentials"
                     label="Account credentials"
                     required
@@ -195,7 +196,9 @@
             <InputText
                 id="database"
                 label="Database"
-                placeholder={$provider.subdomain || 'Enter database'}
+                placeholder={$provider.subdomain
+                    ? `Default: ${$provider.subdomain}`
+                    : 'Enter database'}
                 bind:value={$provider.database} />
             <InputText
                 id="username"

From fdd4b5f72012f09ba8a61429d91cf351c7fde03f Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 21 Aug 2023 14:09:42 +0100
Subject: [PATCH 36/46] fix tags

---
 .../console/(migration-wizard)/resource-form.svelte  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index b2015db315..a51e63c631 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -221,7 +221,7 @@
                 <span class="u-bold">Users</span>
 
                 {#if $provider.provider !== 'firebase'}
-                    {#if report?.user}
+                    {#if report?.user !== undefined}
                         <span class="inline-tag">{report.user}</span>
                     {:else}
                         <span class="loader is-small u-margin-inline-start-4" />
@@ -241,7 +241,7 @@
                         <div class="u-flex u-gap-4 u-cross-center">
                             <span class="u-bold">Include teams</span>
                             {#if $provider.provider === 'firebase'}
-                                {#if report?.team}
+                                {#if report?.team !== undefined}
                                     <span class="inline-tag">{report.team}</span>
                                 {:else}
                                     <span class="loader is-small u-margin-inline-start-4" />
@@ -265,7 +265,7 @@
             <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Databases</span>
                 {#if $provider.provider !== 'firebase'}
-                    {#if report?.database}
+                    {#if report?.database !== undefined}
                         <span class="inline-tag">{report.database}</span>
                     {:else}
                         <span class="loader is-small u-margin-inline-start-4" />
@@ -285,7 +285,7 @@
                         <div class="u-flex u-gap-4 u-cross-center">
                             <span class="u-bold">Include documents</span>
                             {#if $provider.provider !== 'firebase'}
-                                {#if report?.document}
+                                {#if report?.document !== undefined}
                                     <span class="inline-tag">{report.document}</span>
                                 {:else}
                                     <span class="loader is-small u-margin-inline-start-4" />
@@ -309,7 +309,7 @@
             <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Functions</span>
                 {#if $provider.provider !== 'firebase'}
-                    {#if report?.function}
+                    {#if report?.function !== undefined}
                         <span class="inline-tag">{report.function}</span>
                     {:else}
                         <span class="loader is-small u-margin-inline-start-4" />
@@ -358,7 +358,7 @@
             <div class="u-flex u-gap-4 u-cross-center">
                 <span class="u-bold">Storage</span>
                 {#if $provider.provider !== 'firebase'}
-                    {#if report?.size}
+                    {#if report?.size !== undefined}
                         <span class="inline-tag">{`${report.size.toFixed(2)}MB`}</span>
                     {:else}
                         <span class="loader is-small u-margin-inline-start-4" />

From 15175449fb8826b003f0c64b9cac7d565406dc16 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 21 Aug 2023 16:10:15 +0100
Subject: [PATCH 37/46] more design changes

---
 src/lib/components/alert.svelte               |  1 -
 src/lib/layout/wizard.svelte                  | 21 +++++-----
 src/lib/stores/wizard.ts                      | 20 +++++++++-
 .../(migration-wizard)/resource-form.svelte   | 40 ++++++++++++++-----
 4 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index 6954b29d1d..c45d773a29 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -4,7 +4,6 @@
 
     export let dismissible = false;
     export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
-    export let standalone = false;
     export let buttons: Buttons[] = [];
     export let isAction = false;
     export let isStandalone = false;
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 4a0baff215..a30b3c71db 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -26,7 +26,6 @@
 
     const dispatch = createEventDispatcher();
 
-    let currentStep = 1;
     let showExitModal = false;
 
     function handleKeydown(event: KeyboardEvent) {
@@ -55,8 +54,8 @@
 
     function handleStepClick(e: CustomEvent<number>) {
         const step = e.detail;
-        if (step < currentStep) {
-            currentStep = step;
+        if (step < $wizard.step) {
+            $wizard.step = step;
         }
     }
 
@@ -79,12 +78,14 @@
             dispatch('finish');
         } else {
             trackEvent('wizard_next');
-            currentStep++;
+            $wizard.step++;
         }
     }
 
     $: sortedSteps = [...steps].sort(([a], [b]) => (a > b ? 1 : -1));
-    $: isLastStep = currentStep === steps.size;
+    $: isLastStep = $wizard.step === steps.size;
+
+    $: console.log({ sortedSteps, current: $wizard.step });
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -114,7 +115,7 @@
                 text: label,
                 optional
             }))}
-            {currentStep} />
+            currentStep={$wizard.step} />
     </aside>
     <div class="wizard-media">
         {#if $wizard.media}
@@ -124,24 +125,24 @@
     <div class="wizard-main">
         <Form noStyle onSubmit={submit}>
             {#each sortedSteps as [step, { component }]}
-                {#if currentStep === step}
+                {#if $wizard.step === step}
                     <svelte:component this={component} />
                 {/if}
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
+                    {#if !isLastStep && sortedSteps[$wizard.step - 1]?.[1]?.optional}
                         <Button text on:click={() => dispatch('finish')}>
                             Skip optional steps
                         </Button>
                     {/if}
 
-                    {#if currentStep === 1}
+                    {#if $wizard.step === 1}
                         <Button secondary on:click={handleExit}>Cancel</Button>
                     {:else}
                         <Button
                             secondary
-                            on:click={() => currentStep--}
+                            on:click={() => $wizard.step--}
                             on:click={() => trackEvent('wizard_back')}>Back</Button>
                     {/if}
 
diff --git a/src/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index fee71cfcf3..78cda6139a 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -8,6 +8,7 @@ export type WizardStore = {
     component?: ComponentType;
     interceptor?: () => Promise<void>;
     nextDisabled: boolean;
+    step: number;
 };
 
 function createWizardStore() {
@@ -16,7 +17,8 @@ function createWizardStore() {
         component: null,
         interceptor: null,
         media: null,
-        nextDisabled: false
+        nextDisabled: false,
+        step: 1
     });
 
     return {
@@ -28,6 +30,7 @@ function createWizardStore() {
                 n.component = component;
                 n.interceptor = null;
                 n.media = media;
+                n.step = 1;
                 trackEvent('wizard_start');
                 return n;
             }),
@@ -49,9 +52,22 @@ function createWizardStore() {
                 n.component = null;
                 n.interceptor = null;
                 n.media = null;
+                n.step = 1;
 
                 return n;
-            })
+            }),
+        updateStep: (cb: (prevStep: number) => number) => {
+            update((n) => {
+                n.step = cb(n.step);
+                return n;
+            });
+        },
+        setStep: (step: number) => {
+            update((n) => {
+                n.step = step;
+                return n;
+            });
+        }
     };
 }
 
diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index a51e63c631..76de60f23d 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { EyebrowHeading } from '$lib/components';
+    import { Alert, EyebrowHeading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { deepMap } from '$lib/helpers/object';
     import type { WritableValue } from '$lib/helpers/types';
@@ -81,6 +81,8 @@
     $: version = report?.version || '0.0.0';
 
     let isOpen = false;
+
+    let error = false;
     onMount(async () => {
         isOpen = true;
         try {
@@ -137,10 +139,7 @@
             }
         } catch (e) {
             if (!isOpen) return;
-            addNotification({
-                message: 'Request failed, please check your crendentials and try again.',
-                type: 'error'
-            });
+            error = true;
         }
 
         return () => {
@@ -200,6 +199,25 @@
     </div>
 </div>
 
+{#if error}
+    <div class="u-margin-block-start-24">
+        <Alert
+            type="error"
+            isStandalone
+            buttons={[
+                {
+                    name: 'Edit credentials',
+                    method() {
+                        wizard.updateStep((p) => p - 1);
+                    }
+                }
+            ]}>
+            <svelte:fragment slot="title">Request failed</svelte:fragment>
+            Please check if your credentials are filled in correctly in the previous step
+        </Alert>
+    </div>
+{/if}
+
 <ul class="buttons-list u-margin-block-start-32 u-main-end">
     <li class="buttons-list-item">
         <Button text on:click={deselectAll}>Deselect all</Button>
@@ -223,7 +241,7 @@
                 {#if $provider.provider !== 'firebase'}
                     {#if report?.user !== undefined}
                         <span class="inline-tag">{report.user}</span>
-                    {:else}
+                    {:else if !error}
                         <span class="loader is-small u-margin-inline-start-4" />
                     {/if}
                 {/if}
@@ -243,7 +261,7 @@
                             {#if $provider.provider === 'firebase'}
                                 {#if report?.team !== undefined}
                                     <span class="inline-tag">{report.team}</span>
-                                {:else}
+                                {:else if !error}
                                     <span class="loader is-small u-margin-inline-start-4" />
                                 {/if}
                             {/if}
@@ -267,7 +285,7 @@
                 {#if $provider.provider !== 'firebase'}
                     {#if report?.database !== undefined}
                         <span class="inline-tag">{report.database}</span>
-                    {:else}
+                    {:else if !error}
                         <span class="loader is-small u-margin-inline-start-4" />
                     {/if}
                 {/if}
@@ -287,7 +305,7 @@
                             {#if $provider.provider !== 'firebase'}
                                 {#if report?.document !== undefined}
                                     <span class="inline-tag">{report.document}</span>
-                                {:else}
+                                {:else if !error}
                                     <span class="loader is-small u-margin-inline-start-4" />
                                 {/if}
                             {/if}
@@ -311,7 +329,7 @@
                 {#if $provider.provider !== 'firebase'}
                     {#if report?.function !== undefined}
                         <span class="inline-tag">{report.function}</span>
-                    {:else}
+                    {:else if !error}
                         <span class="loader is-small u-margin-inline-start-4" />
                     {/if}
                 {/if}
@@ -360,7 +378,7 @@
                 {#if $provider.provider !== 'firebase'}
                     {#if report?.size !== undefined}
                         <span class="inline-tag">{`${report.size.toFixed(2)}MB`}</span>
-                    {:else}
+                    {:else if !error}
                         <span class="loader is-small u-margin-inline-start-4" />
                     {/if}
                 {/if}

From 441fcce7ba7896220de5b70d5434d2019f213390 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 21 Aug 2023 17:10:02 +0100
Subject: [PATCH 38/46] details tabs

---
 .../(migration-wizard)/resource-form.svelte   | 21 +++++++++++++++-
 .../settings/migrations/details.svelte        | 25 ++++++++-----------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index 76de60f23d..5b13540631 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -14,7 +14,6 @@
         providerResources,
         resourcesToMigrationForm
     } from '$lib/stores/migration';
-    import { addNotification } from '$lib/stores/notifications';
     import { wizard } from '$lib/stores/wizard';
 
     export let formData: ReturnType<typeof createMigrationFormStore>;
@@ -199,6 +198,26 @@
     </div>
 </div>
 
+{#if report && !isVersionAtLeast(version, '1.4.0')}
+    <div class="u-margin-block-start-24">
+        <Alert
+            type="warning"
+            isStandalone
+            buttons={[
+                {
+                    name: 'Learn more',
+                    method() {
+                        wizard.updateStep((p) => p - 1);
+                    }
+                }
+            ]}>
+            <svelte:fragment slot="title">Functions not available for import</svelte:fragment>
+            To migrate your functions, update the version of the Appwrite instance you're importing from
+            to a version newer than 1.4
+        </Alert>
+    </div>
+{/if}
+
 {#if error}
     <div class="u-margin-block-start-24">
         <Alert
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 801ffde8b1..76cc93d2b7 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Code, Modal } from '$lib/components';
-    import Button from '$lib/elements/forms/button.svelte';
+    import { Code, Modal, Tab } from '$lib/components';
+    import Tabs from '$lib/components/tabs.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { parseIfString } from '$lib/helpers/object';
     import type { Models } from '@appwrite.io/console';
@@ -43,7 +43,7 @@
         return Object.values(counter).reduce((acc, curr) => acc + curr, 0);
     };
 
-    let viewLogs = false;
+    let tab = 'details' as 'details' | 'logs';
 </script>
 
 <Modal bind:show on:close={() => (migrationId = null)} size="big">
@@ -54,9 +54,14 @@
             Migration details
         {/if}
     </svelte:fragment>
-    {#if viewLogs}
+    <Tabs>
+        <Tab selected={tab === 'details'} on:click={() => (tab = 'details')}>Details</Tab>
+        <Tab selected={tab === 'logs'} on:click={() => (tab = 'logs')}>Logs</Tab>
+    </Tabs>
+
+    {#if tab === 'logs'}
         <Code code={JSON.stringify(details, null, 2)} language="json" allowScroll />
-    {:else}
+    {:else if tab === 'details'}
         <div class="box meta">
             <span>Date</span>
             <span>{toLocaleDateTime(details.$createdAt)}</span>
@@ -92,16 +97,6 @@
             </div>
         {/if}
     {/if}
-
-    <svelte:fragment slot="footer">
-        <Button
-            secondary
-            on:click={() => {
-                viewLogs = !viewLogs;
-            }}>
-            {viewLogs ? 'Hide' : 'View'} logs
-        </Button>
-    </svelte:fragment>
 </Modal>
 
 <style lang="scss">

From e1e4c9292bf83eddeb86e5ece1ea36e275081b67 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 21 Aug 2023 17:22:35 +0100
Subject: [PATCH 39/46] hide AI command when needed

---
 package-lock.json                 | 10 +++++-----
 package.json                      |  2 +-
 src/lib/stores/sdk.ts             |  8 ++++++--
 src/routes/console/+layout.svelte |  9 ++++++++-
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7795ceff91..b2da6d0fa7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
                 "@analytics/google-tag-manager": "^0.5.3",
-                "@appwrite.io/console": "npm:bradley-console@^0.1.0",
+                "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
                 "@appwrite.io/pink": "^0.1.0-next.3",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.44.2",
@@ -165,10 +165,10 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "name": "bradley-console",
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/bradley-console/-/bradley-console-0.1.0.tgz",
-            "integrity": "sha512-SKgIz4Tmd0AmL/8darZvu4bNEUZWkINgPpVrXQNRM5YLXq8SV0w0AQDeuvPVkenVbpKwcowr2rS6fEsix8+sXg==",
+            "name": "matej-appwrite-console",
+            "version": "7.1.126",
+            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.126.tgz",
+            "integrity": "sha512-ulgi17MwokLEG1BF/cmZIHdrv47pj1Hb4TLjEhIt57pMKuLDQ/VnFK6hyIBmD8pvU+wU56zEyFKl0Q+RIzFaow==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index b4841b6094..4bbd728456 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "npm:bradley-console@^0.1.0",
+        "@appwrite.io/console": "npm:matej-appwrite-console@7.1.126",
         "@appwrite.io/pink": "^0.1.0-next.3",
         "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 56c09cbc5d..d50f502d16 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -13,7 +13,9 @@ import {
     Project,
     Storage,
     Teams,
-    Users
+    Users,
+    Console,
+    Assistant
 } from '@appwrite.io/console';
 
 const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
@@ -57,7 +59,9 @@ export const sdk = {
         projects: new Projects(clientConsole),
         teams: new Teams(clientConsole),
         users: new Users(clientConsole),
-        migrations: new Migrations(clientConsole)
+        migrations: new Migrations(clientConsole),
+        console: new Console(clientConsole),
+        assistant: new Assistant(clientConsole)
     },
     get forProject() {
         const projectId = getProjectId();
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 87f34689f8..945ec443a3 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -24,6 +24,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { openMigrationWizard } from './(migration-wizard)';
     import { project } from './project-[project]/store';
+    import { sdk } from '$lib/stores/sdk';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -32,6 +33,11 @@
             .join(' ');
     }
 
+    let isAssistantEnabled = false;
+    onMount(async () => {
+        const vars = sdk.forConsole.console.variables();
+        isAssistantEnabled = vars._APP_ASSISTANT_ENABLED === true;
+    });
     $: $registerCommands([
         {
             label: 'Go to projects',
@@ -52,7 +58,8 @@
                 addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
-            icon: 'sparkles'
+            icon: 'sparkles',
+            disabled: !isAssistantEnabled
         },
         {
             label: 'Go to account',

From 58b5707a733348b10ae7dc56d3140b4b4638862b Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 11:25:49 +0100
Subject: [PATCH 40/46] review changes

---
 src/lib/commandCenter/panels/ai.svelte | 1 -
 src/lib/elements/table/cell.svelte     | 8 +-------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 6cd1897cff..b32d902c16 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -39,7 +39,6 @@
 
         // get all code matches
         const codeMatches = Array.from(c.matchAll(/```([a-z]*)(.*?)(```|$)/gs));
-        console.log(codeMatches);
 
         let i = 0;
         let codeIdx = 0;
diff --git a/src/lib/elements/table/cell.svelte b/src/lib/elements/table/cell.svelte
index eb66991d8b..d985c424d8 100644
--- a/src/lib/elements/table/cell.svelte
+++ b/src/lib/elements/table/cell.svelte
@@ -7,16 +7,10 @@
 
 <div
     style={width ? `--p-col-width:${width?.toString()}` : ''}
-    class="table-col"
+    class="table-col u-position-relative"
     class:u-overflow-visible={showOverflow}
     class:is-only-desktop={onlyDesktop}
     data-title={title}
     role="cell">
     <slot />
 </div>
-
-<style lang="scss">
-    .table-col {
-        position: relative;
-    }
-</style>

From b44f12e9d50ee44c2b266697c00dbef2128ad370 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 11:38:26 +0100
Subject: [PATCH 41/46] fix some check issues

---
 src/lib/elements/forms/inputCheckbox.svelte   |  2 +-
 src/routes/+layout.svelte                     |  1 +
 .../(filters)/content.svelte                  | 19 -------------------
 3 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 7b9fef8fb3..16cad22f38 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -10,7 +10,7 @@
     export let required = false;
     export let disabled = false;
 
-    export let element: HTMLInputElement;
+    export let element: HTMLInputElement | undefined = undefined;
     let error: string;
 
     const handleInvalid = (event: Event) => {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 959882dd53..11e75eedd0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -195,6 +195,7 @@
         border-radius: var(--border-radius);
         border: var(--border-size) solid transparent;
         background: var(--border-gradient) border-box;
+        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
         -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
         -webkit-mask-composite: destination-out;
         mask-composite: exclude;
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
index 4411957458..799e9e7f43 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/content.svelte
@@ -161,16 +161,6 @@
 </div>
 
 <style lang="scss">
-    .dropped {
-        border-radius: 0.5rem;
-        box-shadow: 0px 16px 32px 0px rgba(55, 59, 77, 0.04);
-
-        padding: 1rem;
-        margin-top: 0.5rem;
-
-        width: 37.5rem;
-    }
-
     .selects {
         :global(> *) {
             flex: 1;
@@ -182,13 +172,4 @@
             font-weight: bold;
         }
     }
-
-    hr {
-        height: 1px;
-        width: calc(100% + 2rem);
-        background-color: hsl(var(--color-border));
-
-        margin-block-start: 1rem;
-        margin-inline: -1rem;
-    }
 </style>

From 3b483d14f69e0f3cede715dab21f22a7e5765455 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 15:46:08 +0100
Subject: [PATCH 42/46] extract helpers

---
 src/lib/helpers/array.ts                      |  8 +++-
 src/lib/helpers/string.ts                     |  8 ++++
 .../project-[project]/overview/+layout.svelte | 37 +++++++------------
 .../overview/bandwith.svelte                  |  4 +-
 .../overview/realtime.svelte                  |  4 +-
 .../overview/requests.svelte                  |  9 +++--
 .../settings/migrations/details.svelte        | 17 ++++++++-
 7 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index 6690dd1dfc..cecf9a9bdd 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -55,7 +55,7 @@ export function empty(arr: unknown[]): boolean {
 export function at(array: readonly [], index: number): undefined;
 export function at<T>(array: readonly T[], index: number): T;
 export function at<T>(array: readonly T[] | [], index: number): T | undefined {
-    const len = array.length;
+    const len = array?.length;
     if (!len) return undefined;
 
     if (index < 0) index += len;
@@ -96,3 +96,9 @@ export function toggle<T>(arr: T[], elem: T): T[] {
     arr.push(elem);
     return arr;
 }
+
+// TODO: metric type is wrong
+export function total(set: Array<number>): number {
+    if (!set) return 0;
+    return set.reduce((prev, curr) => prev + curr, 0);
+}
diff --git a/src/lib/helpers/string.ts b/src/lib/helpers/string.ts
index b9f99f0450..2ef6ac191e 100644
--- a/src/lib/helpers/string.ts
+++ b/src/lib/helpers/string.ts
@@ -40,3 +40,11 @@ export function camelize(str: string): string {
             return firstChar.toLowerCase();
         });
 }
+
+const formatter = Intl.NumberFormat('en', {
+    notation: 'compact'
+});
+
+export function formatNum(number: number): string {
+    return formatter.format(number);
+}
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 8c7559701f..de47844ea2 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -1,22 +1,7 @@
-<script context="module" lang="ts">
-    const formatter = Intl.NumberFormat('en', {
-        notation: 'compact'
-    });
-
-    // TODO: metric type is wrong
-    export function last(set: Array<unknown>): Models.Metric | null {
-        if (!set) return null;
-        return (set as Models.Metric[]).slice(-1)[0] ?? null;
-    }
-
-    // TODO: metric type is wrong
-    export function total(set: Array<unknown>): number {
+<script lang="ts" context="module">
+    export function totalMetrics(set: Array<unknown>): number {
         if (!set) return 0;
-        return (set as Models.Metric[]).reduce((prev, curr) => prev + curr.value, 0);
-    }
-
-    export function format(number: number): string {
-        return formatter.format(number);
+        return total((set as Models.Metric[]).map((c) => c.value));
     }
 </script>
 
@@ -38,6 +23,8 @@
     import Realtime from './realtime.svelte';
     import Requests from './requests.svelte';
     import { usage } from './store';
+    import { formatNum } from '$lib/helpers/string';
+    import { total } from '$lib/helpers/array';
 
     $: projectId = $page.params.project;
     $: path = `/console/project-${projectId}/overview`;
@@ -95,7 +82,7 @@
             <Onboard {projectId} />
         {:else}
             {#if $usage}
-                {@const storage = humanFileSize(total($usage.filesStorage) ?? 0)}
+                {@const storage = humanFileSize(totalMetrics($usage.filesStorage) ?? 0)}
                 <section class="common-section">
                     <div class="grid-dashboard-1s-2m-6l">
                         <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
@@ -119,14 +106,16 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.documentsTotal) ?? 0)}
+                                        {formatNum(totalMetrics($usage.documentsTotal) ?? 0)}
                                     </div>
                                     <div>Documents</div>
                                 </div>
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Databases: {format(total($usage.databasesTotal) ?? 0)}
+                                        Databases: {formatNum(
+                                            totalMetrics($usage.databasesTotal) ?? 0
+                                        )}
                                     </div>
                                 </div>
                             </div>
@@ -154,7 +143,7 @@
 
                                 <div class="grid-item-1-end-end">
                                     <div class="text">
-                                        Buckets: {format(total($usage.bucketsTotal) ?? 0)}
+                                        Buckets: {formatNum(totalMetrics($usage.bucketsTotal) ?? 0)}
                                     </div>
                                 </div>
                             </div>
@@ -174,7 +163,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.usersTotal) ?? 0)}
+                                        {formatNum(totalMetrics($usage.usersTotal) ?? 0)}
                                     </div>
                                     <div>Users</div>
                                 </div>
@@ -195,7 +184,7 @@
 
                                 <div class="grid-item-1-end-start">
                                     <div class="heading-level-4">
-                                        {format(total($usage.executionsTotal) ?? 0)}
+                                        {formatNum(totalMetrics($usage.executionsTotal) ?? 0)}
                                     </div>
                                     <div>Executions</div>
                                 </div>
diff --git a/src/routes/console/project-[project]/overview/bandwith.svelte b/src/routes/console/project-[project]/overview/bandwith.svelte
index defadb90c3..a8d077c3e4 100644
--- a/src/routes/console/project-[project]/overview/bandwith.svelte
+++ b/src/routes/console/project-[project]/overview/bandwith.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Card, DropList, DropListItem } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { total } from './+layout.svelte';
+    import { totalMetrics } from './+layout.svelte';
     import { usage } from './store';
     import type { UsagePeriods } from '$lib/layout';
     import { createEventDispatcher } from 'svelte';
@@ -17,7 +17,7 @@
         date: number;
         value: number;
     }>;
-    $: bandwith = humanFileSize(total($usage?.network));
+    $: bandwith = humanFileSize(totalMetrics($usage?.network));
 
     $: if (period) {
         showPeriod = false;
diff --git a/src/routes/console/project-[project]/overview/realtime.svelte b/src/routes/console/project-[project]/overview/realtime.svelte
index 8bcd552393..5626231894 100644
--- a/src/routes/console/project-[project]/overview/realtime.svelte
+++ b/src/routes/console/project-[project]/overview/realtime.svelte
@@ -2,8 +2,8 @@
     import { page } from '$app/stores';
     import { BarChart } from '$lib/charts';
     import { Card } from '$lib/components';
+    import { formatNum } from '$lib/helpers/string';
     import { stats } from '../store';
-    import { format } from './+layout.svelte';
 
     $: projectId = $page.params.project;
     $: projectStats = $stats?.get(projectId);
@@ -12,7 +12,7 @@
 </script>
 
 <div class="heading-level-4">
-    {format(current)}
+    {formatNum(current)}
 </div>
 <div>Realtime Connections</div>
 {#if total}
diff --git a/src/routes/console/project-[project]/overview/requests.svelte b/src/routes/console/project-[project]/overview/requests.svelte
index b762f22dab..e1efd2d158 100644
--- a/src/routes/console/project-[project]/overview/requests.svelte
+++ b/src/routes/console/project-[project]/overview/requests.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { Card, DropList, DropListItem } from '$lib/components';
-    import { format, total } from './+layout.svelte';
+    import { totalMetrics } from './+layout.svelte';
     import { usage } from './store';
     import type { UsagePeriods } from '$lib/layout';
     import { createEventDispatcher } from 'svelte';
     import { LineChart } from '$lib/charts';
+    import { formatNum } from '$lib/helpers/string';
 
     export let period: UsagePeriods;
 
@@ -25,7 +26,7 @@
 <div class="u-flex u-gap-16 u-main-space-between">
     <div>
         <div class="heading-level-4">
-            {format(total($usage?.requestsTotal))}
+            {formatNum(totalMetrics($usage?.requestsTotal))}
         </div>
         <div>Requests</div>
     </div>
@@ -41,13 +42,13 @@
         </svelte:fragment>
     </DropList>
 </div>
-{#if total($usage?.requestsTotal) !== 0}
+{#if totalMetrics($usage?.requestsTotal) !== 0}
     <div style="height: 12rem;">
         <LineChart
             options={{
                 yAxis: {
                     axisLabel: {
-                        formatter: format
+                        formatter: formatNum
                     }
                 }
             }}
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 76cc93d2b7..3fb4608616 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Code, Modal, Tab } from '$lib/components';
+    import { Alert, Code, Modal, Tab } from '$lib/components';
     import Tabs from '$lib/components/tabs.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { parseIfString } from '$lib/helpers/object';
@@ -69,6 +69,21 @@
             <span>{details.source}</span>
         </div>
 
+        {#if Object.values(statusCounters).some(hasError)}
+            <Alert
+                type="error"
+                buttons={[
+                    {
+                        name: 'View logs',
+                        method() {
+                            tab = 'logs';
+                        }
+                    }
+                ]}>
+                There was an error migrating some of the project's entities.
+            </Alert>
+        {/if}
+
         {#if Object.keys(statusCounters).length}
             <div class="box">
                 {#each Object.keys(statusCounters) as entity}

From 2f59c4fd88258b9639d0738f007913f3e7ad5788 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:00:37 +0100
Subject: [PATCH 43/46] status icons

---
 .../settings/migrations/+page.svelte            | 17 ++++++++---------
 .../settings/migrations/details.svelte          |  4 +++-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/routes/console/project-[project]/settings/migrations/+page.svelte b/src/routes/console/project-[project]/settings/migrations/+page.svelte
index 19f90ab8d3..1fe8cc105c 100644
--- a/src/routes/console/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/+page.svelte
@@ -21,6 +21,8 @@
     import { openImportWizard } from './(import)';
     import Details from './details.svelte';
     import ExportModal from './exportModal.svelte';
+    import Status from '$lib/components/status.svelte';
+    import { capitalize } from '$lib/helpers/string';
 
     export let data;
     let details: string | null = null;
@@ -28,12 +30,12 @@
 
     const getStatus = (status: string) => {
         if (status === 'failed') {
-            return { text: 'Failed', icon: 'exclamation', iconColor: 'danger' };
+            return 'failed';
         } else if (status === 'completed') {
-            return { text: 'Completed', icon: 'check', iconColor: 'success' };
+            return 'completed';
         }
 
-        return { text: 'Pending', icon: 'clock', iconColor: 'blue' };
+        return 'pending';
     };
 
     onMount(async () => {
@@ -165,12 +167,9 @@
                                 </TableCell>
                                 <TableCell title="Source">{entry.source}</TableCell>
                                 <TableCell title="Status">
-                                    <div class="u-flex u-gap-4 u-cross-center">
-                                        <i
-                                            class="icon-{status.icon}"
-                                            style="color: hsl(var(--color-text-{status.iconColor}))" />
-                                        <span>{status.text}</span>
-                                    </div>
+                                    <Status {status}>
+                                        {capitalize(status)}
+                                    </Status>
                                 </TableCell>
                                 <TableCell title="">
                                     <div class="u-flex u-main-end">
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index 3fb4608616..de58d82957 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import { Alert, Code, Modal, Tab } from '$lib/components';
     import Tabs from '$lib/components/tabs.svelte';
+    import { total } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { parseIfString } from '$lib/helpers/object';
+    import { formatNum } from '$lib/helpers/string';
     import type { Models } from '@appwrite.io/console';
 
     export let migrations: Models.Migration[] = [];
@@ -40,7 +42,7 @@
 
     const totalItems = (counter: StatusCounter) => {
         if (!counter) return 0;
-        return Object.values(counter).reduce((acc, curr) => acc + curr, 0);
+        return formatNum(total(Object.values(counter)));
     };
 
     let tab = 'details' as 'details' | 'logs';

From 188e5f71ad095ff20e0710b9374350f557928801 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:24:10 +0100
Subject: [PATCH 44/46] globalize commands

---
 src/lib/commandCenter/commands.ts        |  14 ++--
 src/lib/commandCenter/panels/root.svelte |   4 +-
 src/routes/console/+layout.svelte        | 102 ++++++++++++++++++-----
 3 files changed, 91 insertions(+), 29 deletions(-)

diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts
index fa5ade28cc..a89eb306cb 100644
--- a/src/lib/commandCenter/commands.ts
+++ b/src/lib/commandCenter/commands.ts
@@ -57,8 +57,8 @@ type KeyedCommand = BaseCommand & {
     alt?: boolean;
 };
 
-function isKeyedCommand(command: Command): command is KeyedCommand {
-    return 'keys' in command;
+export function isKeyedCommand(command: Command): command is KeyedCommand {
+    return 'keys' in command && Array.isArray((command as KeyedCommand).keys);
 }
 
 export type Command = KeyedCommand | BaseCommand;
@@ -83,7 +83,7 @@ function isInputEvent(event: KeyboardEvent) {
 function getCommandRank(command: KeyedCommand) {
     const { keys, ctrl: meta, shift, alt } = command;
     const modifiers = [meta, shift, alt].filter(Boolean).length;
-    return keys.length + modifiers * 10;
+    return (keys?.length || 0) + modifiers * 10;
 }
 
 function hasDisputing(command: KeyedCommand, allCommands: Command[]) {
@@ -95,7 +95,7 @@ function hasDisputing(command: KeyedCommand, allCommands: Command[]) {
             return false;
         }
         const keysString = command.keys.join('+');
-        const otherKeysString = otherCommand.keys.join('+');
+        const otherKeysString = otherCommand?.keys?.join('+');
 
         const cmdRank = getCommandRank(command);
         const otherCmdRank = getCommandRank(otherCommand);
@@ -195,8 +195,10 @@ export const commandCenterKeyDownHandler = derived(
                 const isShiftPressed = shift ? event.shiftKey : !event.shiftKey;
                 const isAltPressed = alt ? event.altKey : !event.altKey;
 
-                const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0));
-                const allKeysPressed = recentKeyCodes.join('').includes(commandKeyCodes.join(''));
+                const commandKeyCodes = keys?.map((key) => key.toUpperCase().charCodeAt(0));
+                const allKeysPressed = commandKeyCodes
+                    ? recentKeyCodes.join('').includes(commandKeyCodes.join(''))
+                    : false;
 
                 if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) {
                     event.preventDefault();
diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte
index 29476da56f..66850914f9 100644
--- a/src/lib/commandCenter/panels/root.svelte
+++ b/src/lib/commandCenter/panels/root.svelte
@@ -4,7 +4,7 @@
 <script lang="ts">
     import { debounce } from '$lib/helpers/debounce';
     import { isMac } from '$lib/helpers/platform';
-    import { commands, searchers, type Command } from '../commands';
+    import { commands, searchers, type Command, isKeyedCommand } from '../commands';
     import Template from './template.svelte';
 
     let search = '';
@@ -69,7 +69,7 @@
             {#if hasAlt(command)}
                 <kbd class="kbd"> {isMac() ? '⌥' : 'Alt'} </kbd>
             {/if}
-            {#if 'keys' in command}
+            {#if isKeyedCommand(command)}
                 {#each command.keys as key, i}
                     {@const hasNext = command.keys.length - 1 !== i}
 
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 945ec443a3..bc20d1bfe0 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -38,6 +38,11 @@
         const vars = sdk.forConsole.console.variables();
         isAssistantEnabled = vars._APP_ASSISTANT_ENABLED === true;
     });
+
+    $: isOnSettingsLayout = $project?.$id
+        ? $page.url.pathname.includes(`project-${$project.$id}/settings`)
+        : false;
+
     $: $registerCommands([
         {
             label: 'Go to projects',
@@ -78,26 +83,6 @@
             keys: ['c', 'o'],
             group: 'organizations'
         },
-        ...[
-            'users-limit',
-            'session-length',
-            'sessions-limit',
-            'password-history',
-            'password-dictionary',
-            'personal-data'
-        ].map(
-            (heading) =>
-                ({
-                    label: kebabToSentenceCase(heading),
-                    async callback() {
-                        await goto(`/console/project-${$project.$id}/auth/security#${heading}`);
-                        scrollBy({ top: -100 });
-                    },
-                    group: 'security',
-                    icon: 'pencil'
-                } as const)
-        ),
-
         {
             label: 'Open documentation',
             callback: () => {
@@ -145,7 +130,82 @@
                 icon: 'switch-horizontal',
                 keys: ['t', theme[0]]
             } as const;
-        })
+        }),
+        // Auth
+        ...[
+            'users-limit',
+            'session-length',
+            'sessions-limit',
+            'password-history',
+            'password-dictionary',
+            'personal-data'
+        ].map(
+            (heading) =>
+                ({
+                    label: kebabToSentenceCase(heading),
+                    async callback() {
+                        await goto(`/console/project-${$project.$id}/auth/security#${heading}`);
+                        scrollBy({ top: -100 });
+                    },
+                    group: 'security',
+                    icon: 'pencil'
+                } as const)
+        ),
+        // Settings
+        {
+            label: 'Go to settings overview',
+
+            keys: isOnSettingsLayout ? ['g', 'o'] : undefined,
+            callback: () => {
+                goto(`/console/project-${$project.$id}/settings`);
+            },
+            disabled: isOnSettingsLayout && $page.url.pathname.endsWith('settings'),
+            group: 'navigation',
+            rank: isOnSettingsLayout ? 40 : -1
+        },
+        {
+            label: 'Go to custom domains',
+
+            keys: isOnSettingsLayout ? ['g', 'd'] : undefined,
+            callback: () => {
+                goto(`/console/project-${$project.$id}/settings/domains`);
+            },
+            disabled: isOnSettingsLayout && $page.url.pathname.includes('domains'),
+            group: 'navigation',
+            rank: isOnSettingsLayout ? 30 : -1
+        },
+        {
+            label: 'Go to webhooks',
+            keys: isOnSettingsLayout ? ['g', 'w'] : undefined,
+            callback: () => {
+                goto(`/console/project-${$project.$id}/settings/webhooks`);
+            },
+            disabled: isOnSettingsLayout && $page.url.pathname.includes('webhooks'),
+            group: 'navigation',
+
+            rank: isOnSettingsLayout ? 20 : -1
+        },
+        {
+            label: 'Go to migrations',
+            keys: isOnSettingsLayout ? ['g', 'm'] : undefined,
+            callback: () => {
+                goto(`/console/project-${$project.$id}/settings/migrations`);
+            },
+            disabled: isOnSettingsLayout && $page.url.pathname.includes('migrations'),
+            group: 'navigation',
+
+            rank: isOnSettingsLayout ? 10 : -1
+        },
+        {
+            label: 'Go to SMTP settings',
+            keys: isOnSettingsLayout ? ['g', 's'] : undefined,
+            callback: () => {
+                goto(`/console/project-${$project.$id}/settings/smtp`);
+            },
+            disabled: isOnSettingsLayout && $page.url.pathname.includes('smtp'),
+            group: 'navigation',
+            rank: -1
+        }
     ]);
     let isOpen = false;
 

From 552470cfd9df0ee978aaba2fafeead4b72e12372 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:35:03 +0100
Subject: [PATCH 45/46] improve kbd nav command center

---
 src/lib/commandCenter/panels/template.svelte  | 16 ++++--
 .../project-[project]/settings/+layout.svelte | 55 -------------------
 2 files changed, 12 insertions(+), 59 deletions(-)

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 3b69a80aad..d56a7fa682 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -18,6 +18,7 @@
     export let clearOnCallback = true;
 
     let selected = 0;
+    let usingKeyboard = false;
     let contentEl: HTMLElement;
 
     async function triggerOption(option: Option) {
@@ -38,6 +39,7 @@
 
     function handleKeyDown(event: KeyboardEvent) {
         if (!open) return;
+        usingKeyboard = true;
 
         let canceled = false;
         dispatch('keydown', {
@@ -108,6 +110,8 @@
 
     $: if (selected > options?.length - 1) {
         selected = options?.length - 1;
+    } else if (usingKeyboard && selected < 0 && options?.length) {
+        selected = 0;
     }
 
     const commandCenterCtx = getCommandCenterCtx();
@@ -188,12 +192,16 @@
         triggerOption(option);
     };
 
-    const getOptionFocusHandler = (option: IndexedOption) => () => {
-        selected = option.index;
-    };
+    const getOptionFocusHandler =
+        (option: IndexedOption, hover = false) =>
+        () => {
+            selected = option.index;
+            usingKeyboard = hover ? false : usingKeyboard;
+        };
 
     const getOptionBlurHandler = () => () => {
         selected = -1;
+        usingKeyboard = false;
     };
 
     const castOption = (option: IndexedOption) => option as Option;
@@ -290,7 +298,7 @@
                             <button
                                 class="option"
                                 on:click={getOptionClickHandler(item)}
-                                on:mouseover={getOptionFocusHandler(item)}
+                                on:mouseover={getOptionFocusHandler(item, true)}
                                 on:mouseleave={getOptionBlurHandler()}
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index 1d3b9fe91d..c4208845e8 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
-    import { project } from '../store';
     import { openCreateDomainWizard } from './domains/+page.svelte';
     import { openWebhooksWizard } from './webhooks/+page.svelte';
 
@@ -24,59 +22,6 @@
                 openWebhooksWizard();
             },
             group: 'webhooks'
-        },
-        {
-            label: 'Go to settings overview',
-
-            keys: ['g', 'o'],
-            callback: () => {
-                goto(`/console/project-${$project.$id}/settings`);
-            },
-            disabled: $page.url.pathname.endsWith('settings'),
-            group: 'navigation',
-            rank: 40
-        },
-        {
-            label: 'Go to custom domains',
-
-            keys: ['g', 'd'],
-            callback: () => {
-                goto(`/console/project-${$project.$id}/settings/domains`);
-            },
-            disabled: $page.url.pathname.includes('domains'),
-            group: 'navigation',
-            rank: 30
-        },
-        {
-            label: 'Go to webhooks',
-            keys: ['g', 'w'],
-            callback: () => {
-                goto(`/console/project-${$project.$id}/settings/webhooks`);
-            },
-            disabled: $page.url.pathname.includes('webhooks'),
-            group: 'navigation',
-
-            rank: 20
-        },
-        {
-            label: 'Go to migrations',
-            keys: ['g', 'm'],
-            callback: () => {
-                goto(`/console/project-${$project.$id}/settings/migrations`);
-            },
-            disabled: $page.url.pathname.includes('migrations'),
-            group: 'navigation',
-
-            rank: 10
-        },
-        {
-            label: 'Go to SMTP settings',
-            keys: ['g', 's'],
-            callback: () => {
-                goto(`/console/project-${$project.$id}/settings/smtp`);
-            },
-            disabled: $page.url.pathname.includes('smtp'),
-            group: 'navigation'
         }
     ]);
 

From f46cf9f7c160ec5501af7271c57eaedc77bd23a1 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:50:58 +0100
Subject: [PATCH 46/46] small fix

---
 src/routes/console/(migration-wizard)/resource-form.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/(migration-wizard)/resource-form.svelte b/src/routes/console/(migration-wizard)/resource-form.svelte
index db798ecd5e..5f72261e82 100644
--- a/src/routes/console/(migration-wizard)/resource-form.svelte
+++ b/src/routes/console/(migration-wizard)/resource-form.svelte
@@ -3,7 +3,7 @@
     import { Button } from '$lib/elements/forms';
     import { deepMap } from '$lib/helpers/object';
     import type { WritableValue } from '$lib/helpers/types';
-    import type { getSdkForProject } from '$lib/stores/sdk';
+    import { sdk, type getSdkForProject } from '$lib/stores/sdk';
 
     import { onMount } from 'svelte';