add commands & fix command kbd selection

src/lib/commandCenter/commandCenter.svelte

@@ -82,11 +82,11 @@
 
     const resetKeys = debounce(() => {
         keys = [];
-    }, 2000);
+    }, 1000);
 
     const handleKeydown = (e) => {
         $commandCenterKeyDownHandler(e);
-        keys = [...keys, e.key];
+        keys = [...keys, e.key].slice(-5);
         console.log(keys);
         resetKeys();
     };
@@ -102,8 +102,8 @@
 
 {#if dev}
     <div class="debug-keys" use:portal>
-        {#each keys as key}
-            <kbd class="kbd" transition:fade|local>
+        {#each keys as key, i (i)}
+            <kbd class="kbd" transition:fade|local={{ duration: 150 }}>
                 {key.length === 1 ? key.toUpperCase() : key}
             </kbd>
         {/each}
@@ -126,7 +126,7 @@
         left: 50%;
         transform: translateX(-50%);
         padding: 0.5rem;
-        background-color: hsl(var(--color-neutral-500) / 0.5);
+        // background-color: hsl(var(--color-neutral-500) / 0.5);
         z-index: 9999;
 
         display: flex;

src/lib/commandCenter/panels/ai.svelte

@@ -189,7 +189,6 @@
 
             p {
                 white-space: pre-wrap;
-                word-break: break-all;
             }
         }
 

src/lib/commandCenter/panels/index.ts

@@ -2,3 +2,4 @@ export { default as AI } from './ai.svelte';
 export { default as Root } from './root.svelte';
 export { default as Template } from './template.svelte';
 export { default as Projects } from './projects.svelte';
+export { default as Organizations } from './organizations.svelte';

src/lib/commandCenter/panels/organizations.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import Template from './template.svelte';
+
+    let search = '';
+
+    let organizations = [] as Models.TeamList<Models.Preferences>['teams'];
+
+    onMount(async () => {
+        organizations = (await sdk.forConsole.teams.list()).teams;
+    });
+
+    $: filteredOrganizations = organizations
+        .filter((organization) => organization.name.toLowerCase().includes(search.toLowerCase()))
+        .map((organization) => {
+            return {
+                label: organization.name,
+                callback: () => {
+                    goto(`/console/organization-${organization.$id}`);
+                },
+                group: 'organizations'
+            } as const;
+        });
+</script>
+
+<Template options={filteredOrganizations} bind:search>
+    <div class="option" slot="option" let:option>{option.label}</div>
+</Template>

src/lib/commandCenter/panels/projects.svelte

@@ -1,6 +1,3 @@
-<!-- 
-    This is the root command panel. It precedes all other command panels.
- -->
 <script lang="ts">
     import { page } from '$app/stores';
     import type { Models } from '@appwrite.io/console';

src/lib/commandCenter/panels/template.svelte

@@ -49,9 +49,13 @@
                 } else {
                     selected = selected === 0 ? 0 : selected - 1;
                 }
-            } else if (event.key === 'Enter' && options[selected]) {
+            } else if (event.key === 'Enter') {
+                const option = groupsAndOptions.find(
+                    (item) => 'index' in item && item.index === selected
+                ) as IndexedOption;
+                if (!option) return;
                 event.preventDefault();
-                triggerOption(options[selected]);
+                triggerOption(option);
             } else if (event.key === 'Home') {
                 event.preventDefault();
                 selected = 0;

src/routes/+layout.ts

@@ -11,6 +11,7 @@ export const ssr = false;
 
 export const load: LayoutLoad = async ({ depends, url }) => {
     depends(Dependencies.ACCOUNT);
+
     try {
         const account = await sdk.forConsole.account.get();
 

src/routes/console/+layout.svelte

@@ -18,7 +18,7 @@
     import { goto } from '$app/navigation';
 
     import { CommandCenter, registerCommands } from '$lib/commandCenter';
-    import { AI } from '$lib/commandCenter/panels';
+    import { AI, Organizations } from '$lib/commandCenter/panels';
     import { addSubPanel } from '$lib/commandCenter/subPanels';
 
     $: $registerCommands([
@@ -41,6 +41,17 @@
             keys: ['i'],
             group: 'navigation'
         },
+        {
+            label: 'Find an Organization',
+            callback: () => {
+                addSubPanel({
+                    name: 'Find a Organization',
+                    component: Organizations
+                });
+            },
+            group: 'organizations',
+            icon: 'search'
+        },
         {
             label: 'Create new Organization',
             callback: () => {
@@ -48,6 +59,22 @@
             },
             keys: ['c', 'o'],
             group: 'organizations'
+        },
+        {
+            label: 'Go to Home',
+            callback: () => {
+                goto('/console');
+            },
+            keys: ['h'],
+            group: 'navigation'
+        },
+        {
+            label: 'Open documentation',
+            callback: () => {
+                window.open('https://appwrite.io/docs', '_blank');
+            },
+            group: 'help',
+            icon: 'book-open'
         }
     ]);
 

src/routes/console/+layout.ts

@@ -7,9 +7,6 @@ export const load: LayoutLoad = async () => {
     const data = await response.json();
 
     return {
-        version: data?.version ?? null,
-        streamed: {
-            // We nest these so that layout doesn't have to wait for these promises to load
-        }
+        version: data?.version ?? null
     };
 };