From a4fddd6232a97af7ed6162fd9daf4de2dd035e76 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 17 Jul 2023 15:08:14 +0100
Subject: [PATCH] remove key debug on input events

---
 src/lib/commandCenter/commandCenter.svelte    | 20 +++++----
 src/lib/commandCenter/panels/index.ts         | 43 ++++++++++++++++---
 src/lib/components/migrationBox.svelte        |  2 +-
 .../console/(migration-wizard)/wizard.svelte  |  7 +--
 src/routes/console/+layout.svelte             | 15 ++-----
 .../organization-[organization]/+page.svelte  | 11 ++---
 .../databases/+layout.svelte                  |  7 +--
 .../project-[project]/overview/+layout.svelte | 29 ++++++-------
 8 files changed, 76 insertions(+), 58 deletions(-)

diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
index a53941916..1081e2c05 100644
--- a/src/lib/commandCenter/commandCenter.svelte
+++ b/src/lib/commandCenter/commandCenter.svelte
@@ -17,26 +17,23 @@
         if (get(subPanels).length > 0) {
             clearSubPanels();
         } else {
-            addSubPanel({
-                name: 'root',
-                component: Root
-            });
+            addSubPanel(RootPanel);
         }
     };
 </script>
 
 <script lang="ts">
+    import { dev } from '$app/environment';
     import { afterNavigate } from '$app/navigation';
+    import { portal } from '$lib/actions/portal';
     import { last } from '$lib/helpers/array';
+    import { debounce } from '$lib/helpers/debounce';
     import { getContext, setContext } from 'svelte';
-    import { writable, type Readable, get } from 'svelte/store';
+    import { get, writable, type Readable } from 'svelte/store';
     import { fade } from 'svelte/transition';
     import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
-    import { Root } from './panels';
+    import { RootPanel } from './panels';
     import { addSubPanel, clearSubPanels, subPanels } from './subPanels';
-    import { dev } from '$app/environment';
-    import { debounce } from '$lib/helpers/debounce';
-    import { portal } from '$lib/actions/portal';
 
     $: $registerCommands([
         {
@@ -86,7 +83,12 @@
         keys = [];
     }, 1000);
 
+    function isInputEvent(event: KeyboardEvent) {
+        return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName);
+    }
+
     const handleKeydown = (e) => {
+        if (isInputEvent(e)) return;
         if (!$subPanels.length) {
             keys = [...keys, e.key].slice(-10);
             resetKeys();
diff --git a/src/lib/commandCenter/panels/index.ts b/src/lib/commandCenter/panels/index.ts
index a7536ddfe..d3b8a87de 100644
--- a/src/lib/commandCenter/panels/index.ts
+++ b/src/lib/commandCenter/panels/index.ts
@@ -1,7 +1,38 @@
-export { default as AI } from './ai.svelte';
-export { default as Root } from './root.svelte';
+import type { SubPanel } from '../subPanels';
 export { default as Template } from './template.svelte';
-export { default as Projects } from './projects.svelte';
-export { default as Organizations } from './organizations.svelte';
-export { default as Platforms } from './platforms.svelte';
-export { default as Databases } from './databases.svelte';
+
+import Root from './root.svelte';
+export const RootPanel: SubPanel = {
+    name: 'root',
+    component: Root
+};
+
+import AI from './ai.svelte';
+export const AIPanel: SubPanel = {
+    name: 'Ask the AI',
+    component: AI
+};
+
+import Projects from './projects.svelte';
+export const ProjectsPanel: SubPanel = {
+    name: 'Projects',
+    component: Projects
+};
+
+import Organizations from './organizations.svelte';
+export const OrganizationsPanel: SubPanel = {
+    name: 'Organizations',
+    component: Organizations
+};
+
+import Platforms from './platforms.svelte';
+export const PlatformsPanel: SubPanel = {
+    name: 'Platforms',
+    component: Platforms
+};
+
+import Databases from './databases.svelte';
+export const DatabasesPanel: SubPanel = {
+    name: 'Databases',
+    component: Databases
+};
diff --git a/src/lib/components/migrationBox.svelte b/src/lib/components/migrationBox.svelte
index 0fc0acfb4..b33dde747 100644
--- a/src/lib/components/migrationBox.svelte
+++ b/src/lib/components/migrationBox.svelte
@@ -7,7 +7,7 @@
     import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
 
-    export const showMigrationBox = writable(true);
+    export const showMigrationBox = writable(false);
 </script>
 
 <script lang="ts">
diff --git a/src/routes/console/(migration-wizard)/wizard.svelte b/src/routes/console/(migration-wizard)/wizard.svelte
index c52629d92..0dbc81147 100644
--- a/src/routes/console/(migration-wizard)/wizard.svelte
+++ b/src/routes/console/(migration-wizard)/wizard.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-    import { goto, invalidate, invalidateAll } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
+    import { goto, invalidateAll } from '$app/navigation';
     import type { WizardStepsType } from '$lib/layout/wizard.svelte';
     import Wizard from '$lib/layout/wizard.svelte';
     import { migrationFormToResources } from '$lib/stores/migration';
     import { getSdkForProject } from '$lib/stores/sdk';
+    import { wizard } from '$lib/stores/wizard';
     import { onDestroy } from 'svelte';
     import { formData, provider, selectedProject } from '.';
     import Step1 from './step1.svelte';
     import Step2 from './step2.svelte';
-    import { wizard } from '$lib/stores/wizard';
+    import { requestedMigration } from '$routes/store';
 
     const onExit = () => {
         formData.reset();
+        requestedMigration.set(null);
     };
 
     const onFinish = async () => {
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 1e75c9df7..d846fcde8 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -12,14 +12,13 @@
     import { newOrgModal } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
     import { onMount } from 'svelte';
-    import { loading } from '../store';
+    import { loading, requestedMigration } from '../store';
     import Create from './createOrganization.svelte';
-    import { requestedMigration } from '../store';
 
     import { goto } from '$app/navigation';
 
     import { CommandCenter, registerCommands } from '$lib/commandCenter';
-    import { AI, Organizations } from '$lib/commandCenter/panels';
+    import { AIPanel, OrganizationsPanel } from '$lib/commandCenter/panels';
     import { addSubPanel } from '$lib/commandCenter/subPanels';
     import { openMigrationWizard } from './(migration-wizard)';
 
@@ -27,10 +26,7 @@
         {
             label: 'Ask AI',
             callback: () => {
-                addSubPanel({
-                    name: 'Ask the AI',
-                    component: AI
-                });
+                addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
             icon: 'light-bulb'
@@ -46,10 +42,7 @@
         {
             label: 'Find an Organization',
             callback: () => {
-                addSubPanel({
-                    name: 'Find a Organization',
-                    component: Organizations
-                });
+                addSubPanel(OrganizationsPanel);
             },
             group: 'organizations',
             icon: 'search'
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 0b416b0b7..a48398326 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { addSubPanel, registerCommands } from '$lib/commandCenter';
-    import { Projects } from '$lib/commandCenter/panels';
+    import { ProjectsPanel } from '$lib/commandCenter/panels';
     import { CardContainer, Empty, GridItem1, Heading, PaginationWithLimit } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
@@ -51,13 +51,10 @@
         {
             label: 'Find a project',
             callback: () => {
-                addSubPanel({
-                    name: 'Projects',
-                    component: Projects
-                });
+                addSubPanel(ProjectsPanel);
             },
             keys: ['f'],
-            group: 'project',
+            group: 'projects',
             icon: 'search'
         },
         {
@@ -67,7 +64,7 @@
             },
             keys: ['c'],
             disabled: showCreate,
-            group: 'project',
+            group: 'projects',
             icon: 'plus'
         }
     ]);
diff --git a/src/routes/console/project-[project]/databases/+layout.svelte b/src/routes/console/project-[project]/databases/+layout.svelte
index e34231c61..e87b2d998 100644
--- a/src/routes/console/project-[project]/databases/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/+layout.svelte
@@ -2,17 +2,14 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
-    import { Databases } from '$lib/commandCenter/panels';
+    import { DatabasesPanel } from '$lib/commandCenter/panels';
     import { project } from '../store';
 
     $: $registerCommands([
         {
             label: 'Find databases',
             callback: () => {
-                addSubPanel({
-                    component: Databases,
-                    name: 'Databases'
-                });
+                addSubPanel(DatabasesPanel);
             },
             keys: ['f', 'd'],
             icon: 'search',
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 11ba09653..6c0a6d740 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -21,23 +21,23 @@
 </script>
 
 <script lang="ts">
-    import type { Models } from '@appwrite.io/console';
-    import { Container, type UsagePeriods } from '$lib/layout';
-    import { page } from '$app/stores';
-    import { onboarding, project } from '../store';
-    import { usage } from './store';
-    import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
+    import { PlatformsPanel } from '$lib/commandCenter/panels';
     import { Heading, Tab } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
-    import { base } from '$app/paths';
-    import Realtime from './realtime.svelte';
+    import { Container, type UsagePeriods } from '$lib/layout';
+    import type { Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import { onboarding, project } from '../store';
     import Bandwith from './bandwith.svelte';
-    import Requests from './requests.svelte';
-    import Onboard from './onboard.svelte';
-    import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
-    import { Platforms } from '$lib/commandCenter/panels';
     import { createApiKey } from './keys/+page.svelte';
+    import Onboard from './onboard.svelte';
+    import Realtime from './realtime.svelte';
+    import Requests from './requests.svelte';
+    import { usage } from './store';
 
     $: projectId = $page.params.project;
     $: path = `/console/project-${projectId}/overview`;
@@ -63,10 +63,7 @@
         {
             label: 'Add platform',
             callback() {
-                addSubPanel({
-                    component: Platforms,
-                    name: 'Platforms'
-                });
+                addSubPanel(PlatformsPanel);
             },
             icon: 'plus',
             group: 'integrations'