Command center and migrations

.gitignore

@@ -13,3 +13,5 @@ node_modules
 node_modules/
 dist/
 .vercel
+
+*.swp

package.json

@@ -25,10 +25,12 @@
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",
+        "ai": "^2.1.15",
         "analytics": "^0.8.1",
         "dotenv": "^16.0.3",
         "echarts": "^5.4.1",
         "logrocket": "^3.0.1",
+        "nanoid": "^4.0.2",
         "pretty-bytes": "^6.1.0",
         "prismjs": "^1.29.0",
         "svelte-confetti": "^1.2.2",

src/lib/actions/portal.ts

@@ -0,0 +1,42 @@
+import { tick } from 'svelte';
+import type { Action } from 'svelte/action';
+
+export type PortalConfig = string | HTMLElement | undefined;
+
+export const portal: Action<HTMLElement, PortalConfig> = (el, target = 'body') => {
+    let targetEl;
+
+    async function update(newTarget: PortalConfig) {
+        target = newTarget;
+        if (typeof target === 'string') {
+            targetEl = document.querySelector(target);
+            if (targetEl === null) {
+                await tick();
+                targetEl = document.querySelector(target);
+            }
+            if (targetEl === null) {
+                throw new Error(`No element found matching css selector: "${target}"`);
+            }
+        } else if (target instanceof HTMLElement) {
+            targetEl = target;
+        } else {
+            throw new TypeError(
+                `Unknown portal target type: ${
+                    target === null ? 'null' : typeof target
+                }. Allowed types: string (CSS selector) or HTMLElement.`
+            );
+        }
+        targetEl.appendChild(el);
+        el.hidden = false;
+    }
+
+    function destroy() {
+        el.remove();
+    }
+
+    update(target);
+    return {
+        update,
+        destroy
+    };
+};

src/lib/commandCenter/commandCenter.svelte

@@ -0,0 +1,142 @@
+<script lang="ts" context="module">
+    type Context = Readable<{
+        isInitialPanel: boolean;
+        open: boolean;
+    }>;
+    type ReadableValue<T> = T extends Readable<infer U> ? U : never;
+
+    const contextKey = 'command-center';
+    export const getCommandCenterCtx = () => getContext<Context>(contextKey);
+    const setCommandCenterCtx = (value: ReadableValue<Context>) => {
+        const store = writable(value);
+        setContext(contextKey, store);
+        return store;
+    };
+
+    export const toggleCommandCenter = () => {
+        if (get(subPanels).length > 0) {
+            clearSubPanels();
+        } else {
+            addSubPanel(RootPanel);
+        }
+    };
+</script>
+
+<script lang="ts">
+    import { dev } from '$app/environment';
+    import { portal } from '$lib/actions/portal';
+    import { last } from '$lib/helpers/array';
+    import { debounce } from '$lib/helpers/debounce';
+    import { getContext, setContext } from 'svelte';
+    import { get, writable, type Readable } from 'svelte/store';
+    import { fade } from 'svelte/transition';
+    import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands';
+    import { RootPanel } from './panels';
+    import { addSubPanel, clearSubPanels, subPanels } from './subPanels';
+
+    $: $registerCommands([
+        {
+            callback: toggleCommandCenter,
+            keys: ['k'],
+            ctrl: true,
+            forceEnable: true
+        }
+    ]);
+
+    $: openSubPanel = last($subPanels) ?? null;
+    $: $disableCommands(!!openSubPanel);
+
+    $: if (openSubPanel) {
+        document.documentElement.classList.add('u-overflow-hidden');
+    } else {
+        document.documentElement.classList.remove('u-overflow-hidden');
+    }
+
+    let dialog: HTMLDivElement;
+
+    function handleBlur(event: MouseEvent) {
+        if (event.target === dialog) {
+            clearSubPanels();
+        }
+    }
+
+    const ctx = setCommandCenterCtx({
+        isInitialPanel: true,
+        open: false
+    });
+
+    $: if (!openSubPanel) {
+        $ctx.isInitialPanel = true;
+    }
+    $: $subPanels.length > 1 && ($ctx.isInitialPanel = false);
+
+    $: $ctx.open = !!openSubPanel;
+
+    let keys: string[] = [];
+
+    const resetKeys = debounce(() => {
+        keys = [];
+    }, 1000);
+
+    function isInputEvent(event: KeyboardEvent) {
+        return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName);
+    }
+
+    const handleKeydown = (e) => {
+        if (!$subPanels.length) {
+            if (isInputEvent(e)) return;
+            keys = [...keys, e.key].slice(-10);
+            resetKeys();
+        }
+        $commandCenterKeyDownHandler(e);
+    };
+</script>
+
+<svelte:window on:mousedown={handleBlur} on:keydown={handleKeydown} />
+
+{#if openSubPanel}
+    <div class="dialog" bind:this={dialog} transition:fade={{ duration: 100 }}>
+        <svelte:component this={openSubPanel.component} />
+    </div>
+{/if}
+
+{#if dev}
+    <div class="debug-keys" use:portal>
+        {#each keys as key, i (i)}
+            <kbd class="kbd" transition:fade|local={{ duration: 150 }}>
+                {key.length === 1 ? key.toUpperCase() : key}
+            </kbd>
+        {/each}
+    </div>
+{/if}
+
+<style lang="scss">
+    .dialog {
+        padding: 0.5rem;
+        position: fixed;
+        inset: 0;
+
+        background-color: hsl(var(--color-neutral-500) / 0.5);
+        z-index: 9999;
+    }
+
+    .debug-keys {
+        position: fixed;
+        bottom: 10%;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 0.5rem;
+        // background-color: hsl(var(--color-neutral-500) / 0.5);
+        z-index: 9999;
+
+        display: flex;
+        gap: 1rem;
+
+        font-size: 2rem;
+
+        .kbd {
+            padding-inline: 0.5rem;
+            padding-block: 1.5rem;
+        }
+    }
+</style>