refactor: improve group ranking functionality

src/lib/commandCenter/commandCenter.svelte

@@ -85,10 +85,11 @@
     }, 1000);
 
     const handleKeydown = (e) => {
+        if (!$subPanels.length) {
+            keys = [...keys, e.key].slice(-5);
+            resetKeys();
+        }
         $commandCenterKeyDownHandler(e);
-        keys = [...keys, e.key].slice(-5);
-        console.log(keys);
-        resetKeys();
     };
 </script>
 

src/lib/commandCenter/commands.ts

@@ -46,23 +46,6 @@ export type Command = KeyedCommand | BaseCommand;
 export const commandMap = writable<Map<string, Command[]>>(new Map());
 export const disabledMap = writable<Map<string, boolean>>(new Map());
 
-type CommandGroupRanks = Record<CommandGroup, number>;
-export const commandGroupRanks = writable<CommandGroupRanks>({
-    ungrouped: 9999,
-    domains: 20,
-    webhooks: 10,
-    navigation: 1,
-    projects: 0,
-    account: 0,
-    organizations: 0,
-    auth: 0,
-    platforms: 0,
-    databases: 0,
-    functions: 0,
-    storage: 0,
-    help: -1
-});
-
 // Derived stores
 export const commands = derived(commandMap, ($commandMap) => {
     return Array.from($commandMap.values()).flat();
@@ -241,14 +224,47 @@ export const disableCommands = {
     }
 };
 
-export const updateCommandGroupRanks = (updater: Updater<CommandGroupRanks>) => {
-    let prevRanks: CommandGroupRanks;
-    commandGroupRanks.update((prev) => {
-        prevRanks = prev;
-        return updater(prev);
-    });
+type CommandGroupRanks = Record<CommandGroup, number>;
 
-    return () => {
-        commandGroupRanks.set(prevRanks);
-    };
+type CommandGroupRankTransformations = Map<string, Updater<CommandGroupRanks>>;
+const groupRankTransformations = writable<CommandGroupRankTransformations>(new Map());
+export const updateCommandGroupRanks = {
+    subscribe(runner: (cb: (updater: Updater<CommandGroupRanks>) => void) => void) {
+        const uuid = crypto.randomUUID();
+
+        runner((updater: Updater<CommandGroupRanks>) => {
+            groupRankTransformations.update((curr) => {
+                curr.set(uuid, updater);
+                return curr;
+            });
+        });
+
+        return () => {
+            groupRankTransformations.update((curr) => {
+                curr.delete(uuid);
+                return curr;
+            });
+        };
+    }
 };
+
+export const commandGroupRanks = derived(groupRankTransformations, ($groupRankTransformations) => {
+    const initialRanks: CommandGroupRanks = {
+        ungrouped: 9999,
+        domains: 0,
+        webhooks: 0,
+        navigation: 1,
+        projects: 0,
+        account: 0,
+        organizations: 0,
+        auth: 0,
+        platforms: 0,
+        databases: 0,
+        functions: 0,
+        storage: 0,
+        help: -1
+    };
+
+    const transformations = Array.from($groupRankTransformations.values());
+    return transformations.reduce((prev, curr) => curr(prev), initialRanks);
+});

src/routes/console/project-[project]/settings/+layout.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
-    import { registerCommands } from '$lib/commandCenter';
+    import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { project } from '../store';
     import { openCreateDomainWizard } from './domains/+page.svelte';
+    import { openWebhooksWizard } from './webhooks/+page.svelte';
 
     $: $registerCommands([
         {
@@ -15,6 +16,26 @@
             },
             group: 'domains'
         },
+        {
+            label: 'Create webhook',
+            icon: 'plus',
+            keys: $page.url.pathname.includes('webhooks') ? ['c'] : ['c', 'w'],
+            callback: () => {
+                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: 30
+        },
         {
             label: 'Go to Custom domains',
 
@@ -36,17 +57,14 @@
             group: 'navigation',
 
             rank: 10
-        },
-        {
-            label: 'Create webhook',
-            icon: 'plus',
-            keys: $page.url.pathname.includes('webhooks') ? ['c'] : ['c', 'w'],
-            callback: () => {
-                goto('./settings/webhooks?create');
-            },
-            group: 'webhooks'
         }
     ]);
+
+    $: $updateCommandGroupRanks((prev) => ({
+        ...prev,
+        domains: 20,
+        webhooks: 10
+    }));
 </script>
 
 <svelte:head>

src/routes/console/project-[project]/settings/webhooks/+page.svelte

@@ -1,3 +1,9 @@
+<script lang="ts" context="module">
+    export function openWebhooksWizard() {
+        wizard.start(Create);
+    }
+</script>
+
 <script lang="ts">
     import { beforeNavigate } from '$app/navigation';
     import { base } from '$app/paths';
@@ -19,6 +25,7 @@
     import type { PageData } from './$types';
     import Create from './createWebhook.svelte';
     import Heading from '$lib/components/heading.svelte';
+    import { updateCommandGroupRanks } from '$lib/commandCenter';
 
     export let data: PageData;
 
@@ -31,6 +38,12 @@
     });
 
     const projectId = $page.params.project;
+
+    $: $updateCommandGroupRanks((prev) => ({
+        ...prev,
+        webhooks: 20,
+        domains: 10
+    }));
 </script>
 
 <svelte:head>