appwrite · TorstenDittmann · Aug 28, 2023 · Aug 16, 2023 · Aug 16, 2023 · Aug 17, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -24,5 +24,8 @@ module.exports = {
         browser: true,
         es2017: true,
         node: true
+    },
+    globals: {
+        globalThis: false // false means it is not writeable
     }
 };
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,5 @@ node_modules
 node_modules/
 dist/
 .vercel
+
+*.swp
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,16 +19,21 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/pink": "^0.0.6-rc.14",
-        "@appwrite.io/console": "0.2.0",
         "@analytics/google-tag-manager": "^0.5.3",
+        "@appwrite.io/console": "npm:matej-appwrite-console@7.1.130",
+        "@appwrite.io/pink": "0.1.0-next.8",
+        "@appwrite.io/pink-icons": "^0.1.0-next.8",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",
+        "ai": "^2.1.15",
         "analytics": "^0.8.1",
+        "dayjs": "^1.11.9",
+        "deep-equal": "^2.2.2",
         "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",
@@ -44,6 +49,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/svelte": "^3.2.2",
         "@testing-library/user-event": "^14.4.3",
+        "@types/deep-equal": "^1.0.1",
         "@types/prismjs": "^1.26.0",
         "@typescript-eslint/eslint-plugin": "^5.56.0",
         "@typescript-eslint/parser": "^5.56.0",

diff --git a/src/app.html b/src/app.html
@@ -47,7 +47,7 @@
 
         %sveltekit.head%
     </head>
-    <body>
+    <body data-sveltekit-preload-data="hover">
         <div id="svelte">%sveltekit.body%</div>
     </body>
 </html>
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -142,6 +142,7 @@ export enum Submit {
     ProjectUpdateName = 'submit_project_update_name',
     ProjectUpdateTeam = 'submit_project_update_team',
     ProjectService = 'submit_project_service',
+    ProjectUpdateSMTP = 'submit_project_update_smtp',
     MemberCreate = 'submit_member_create',
     MemberDelete = 'submit_member_delete',
     MembershipUpdateStatus = 'submit_membership_update_status',
@@ -153,6 +154,7 @@ export enum Submit {
     AuthStatusUpdate = 'submit_auth_status_update',
     AuthPasswordHistoryUpdate = 'submit_auth_password_history_limit_update',
     AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_update',
+    AuthPersonalDataCheckUpdate = 'submit_auth_personal_data_check_update',
     SessionsLengthUpdate = 'submit_sessions_length_update',
     SessionsLimitUpdate = 'submit_sessions_limit_update',
     SessionDelete = 'submit_session_delete',
@@ -181,15 +183,21 @@ export enum Submit {
     FunctionUpdateName = 'submit_function_update_name',
     FunctionUpdatePermissions = 'submit_function_update_permissions',
     FunctionUpdateSchedule = 'submit_function_update_schedule',
+    FunctionUpdateConfiguration = 'submit_function_update_configuration',
+    FunctionUpdateLogging = 'submit_function_update_logging',
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
+    FunctionConnectRepo = 'submit_function_disconnect_repo',
+    FunctionDisconnectRepo = 'submit_function_disconnect_repo',
+    FunctionRedeploy = 'submit_function_redeploy',
     DeploymentCreate = 'submit_deployment_create',
     DeploymentDelete = 'submit_deployment_delete',
     DeploymentUpdate = 'submit_deployment_update',
     ExecutionCreate = 'submit_execution_create',
     VariableCreate = 'submit_variable_create',
     VariableDelete = 'submit_variable_delete',
     VariableUpdate = 'submit_variable_update',
+    VariableEditor = 'submit_variable_editor',
     KeyCreate = 'submit_key_create',
     KeyDelete = 'submit_key_delete',
     KeyUpdateName = 'submit_key_update_name',
@@ -220,5 +228,18 @@ export enum Submit {
     BucketUpdateExtensions = 'submit_bucket_update_extensions',
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
-    FileUpdatePermissions = 'submit_file_update_permissions'
+    FileUpdatePermissions = 'submit_file_update_permissions',
+    InstallationCreate = 'submit_installation_create',
+    InstallationDelete = 'submit_installation_delete',
+    EmailChangeLocale = 'submit_email_change_locale',
+    EmailResetTemplate = 'submit_email_reset_template',
+    EmailUpdateInviteTemplate = 'submit_email_update_invite_template',
+    EmailUpdateMagicUrlTemplate = 'submit_email_update_magic_url_template',
+    EmailUpdateRecoveryTemplate = 'submit_email_update_recovery_template',
+    EmailUpdateVerificationTemplate = 'submit_email_update_verification_template',
+    SmsChangeLocale = 'submit_sms_change_locale',
+    SmsResetTemplate = 'submit_sms_reset_template',
+    SmsUpdateInviteTemplate = 'submit_sms_update_invite_template',
+    SmsUpdateLoginTemplate = 'submit_sms_update_login_template',
+    SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template'
 }
diff --git a/src/lib/actions/multi-actions.ts b/src/lib/actions/multi-actions.ts
@@ -0,0 +1,20 @@
+import type { Action } from 'svelte/action';
+
+export type MultiActionArray = Array<(node: HTMLElement) => ReturnType<Action>>;
+
+export function multiAction(node: HTMLElement, arr: MultiActionArray) {
+    const destroyFns = arr.map((fn) => {
+        const actionReturn = fn(node);
+
+        return actionReturn
+            ? actionReturn.destroy
+            : () => {
+                  /* noop */
+              };
+    });
+    return {
+        destroy() {
+            destroyFns.forEach((fn) => fn());
+        }
+    };
+}
diff --git a/src/lib/actions/portal.ts b/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
+    };
+};
diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
@@ -0,0 +1,158 @@
+<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';
+    import { addNotification } from '$lib/stores/notifications';
+
+    let debugOverlayEnabled = false;
+
+    $: $registerCommands([
+        {
+            callback: toggleCommandCenter,
+            keys: ['k'],
+            ctrl: true,
+            forceEnable: true
+        },
+        {
+            label: 'Toggle debug overlay',
+            callback: () => {
+                debugOverlayEnabled = !debugOverlayEnabled;
+                addNotification({
+                    title: 'Debug overlay',
+                    message: debugOverlayEnabled ? 'Enabled' : 'Disabled',
+                    type: 'info'
+                });
+            },
+            keys: ['d', 'o'],
+            group: 'misc',
+            disabled: !dev
+        }
+    ]);
+
+    $: 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 && debugOverlayEnabled}
+    <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;
+        z-index: 9999;
+
+        display: flex;
+        gap: 1rem;
+
+        font-size: 2rem;
+
+        .kbd {
+            padding-inline: 0.5rem;
+            padding-block: 1.5rem;
+        }
+    }
+</style>