add search icon

src/lib/commandCenter/commandCenter.svelte

@@ -12,13 +12,24 @@
         setContext(contextKey, store);
         return store;
     };
+
+    export const toggleCommandCenter = () => {
+        if (get(subPanels).length > 0) {
+            clearSubPanels();
+        } else {
+            addSubPanel({
+                name: 'root',
+                component: Root
+            });
+        }
+    };
 </script>
 
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { last } from '$lib/helpers/array';
     import { getContext, setContext } from 'svelte';
-    import { writable, type Readable } from 'svelte/store';
+    import { writable, type Readable, get } from 'svelte/store';
     import { fade } from 'svelte/transition';
     import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
     import { Root } from './panels';
@@ -29,16 +40,7 @@
 
     $: $registerCommands([
         {
-            callback: () => {
-                if ($subPanels.length > 0) {
-                    clearSubPanels();
-                } else {
-                    addSubPanel({
-                        name: 'root',
-                        component: Root
-                    });
-                }
-            },
+            callback: toggleCommandCenter,
             keys: ['k'],
             ctrl: true,
             forceEnable: true

src/lib/layout/header.svelte

@@ -21,6 +21,7 @@
     import { Submit, trackEvent } from '$lib/actions/analytics';
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
+    import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
 
     let showDropdown = false;
     let droplistElement: HTMLDivElement;
@@ -91,6 +92,9 @@
             class="button is-small is-text">
             <span class="text">Support</span>
         </a>
+        <button class="button is-text is-small" on:click={toggleCommandCenter}>
+            <i class="icon-search" />
+        </button>
     </nav>
     <nav class="u-flex u-height-100-percent u-sep-inline-start">
         {#if $user}

src/lib/stores/sdk.ts

@@ -38,6 +38,14 @@ const sdkForProject = {
     migrations: new Migrations(clientProject)
 };
 
+export const getSdkForProject = (projectId: string) => {
+    if (projectId && projectId !== clientProject.config.project) {
+        clientProject.setProject(projectId);
+    }
+
+    return sdkForProject;
+};
+
 export const sdk = {
     forConsole: {
         client: clientConsole,
@@ -53,10 +61,6 @@ export const sdk = {
     },
     get forProject() {
         const projectId = getProjectId();
-        if (projectId && projectId !== clientProject.config.project) {
-            clientProject.setProject(projectId);
-        }
-
-        return sdkForProject;
+        return getSdkForProject(projectId);
     }
 };

src/routes/console/organization-[organization]/(migration-wizard)/index.ts

@@ -1,5 +1,6 @@
 import { createMigrationFormStore } from '$lib/stores/migration';
 import { wizard } from '$lib/stores/wizard';
+import { writable } from 'svelte/store';
 import Wizard from './wizard.svelte';
 
 export const formData = createMigrationFormStore();
@@ -8,3 +9,5 @@ export function openMigrationWizard() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     wizard.start(Wizard as any);
 }
+
+export const selectedProject = writable(null);

src/routes/console/organization-[organization]/(migration-wizard)/step1.svelte

@@ -4,13 +4,12 @@
     import InputText from '$lib/elements/forms/inputText.svelte';
     import { WizardStep } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
+    import { selectedProject } from '.';
 
     const projects = $page.data.allProjects as Models.ProjectList;
     const hasProjects = projects.total > 0;
 
     let projectType = 'existing';
-
-    let selectedProject: string = null;
 </script>
 
 <WizardStep>
@@ -48,7 +47,7 @@
         {#if projectType === 'existing'}
             <InputSelect
                 id="project"
-                bind:value={selectedProject}
+                bind:value={$selectedProject}
                 label="Select a project"
                 options={projects.projects.map((p) => ({
                     label: p.name,