From fc2932bef8361e1ee3a326ee1c8cd226e72df9c3 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 15 May 2023 19:36:54 +0100 Subject: [PATCH 001/128] feat: command center POC --- src/lib/components/dialog.svelte | 89 ++++++++++++++ src/lib/components/index.ts | 1 + src/lib/helpers/commandCenter.ts | 98 ++++++++++++++++ src/routes/console/+layout.svelte | 29 +++++ src/routes/console/commandCenter.svelte | 109 ++++++++++++++++++ .../project-[project]/auth/+page.svelte | 40 +++++-- .../project-[project]/databases/+page.svelte | 25 +++- .../project-[project]/functions/+page.svelte | 14 ++- .../overview/platforms/+page.svelte | 6 + .../project-[project]/storage/+page.svelte | 13 +++ src/routes/console/project-[project]/store.ts | 47 ++++++++ 11 files changed, 454 insertions(+), 17 deletions(-) create mode 100644 src/lib/components/dialog.svelte create mode 100644 src/lib/helpers/commandCenter.ts create mode 100644 src/routes/console/commandCenter.svelte diff --git a/src/lib/components/dialog.svelte b/src/lib/components/dialog.svelte new file mode 100644 index 0000000000..aa055883e0 --- /dev/null +++ b/src/lib/components/dialog.svelte @@ -0,0 +1,89 @@ + + + + + + {#if show} + + {/if} + + + diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index f891b82552..b775626ffd 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -54,3 +54,4 @@ export { default as PaginationWithLimit } from './paginationWithLimit.svelte'; export { default as ClickableList } from './clickableList.svelte'; export { default as ClickableListItem } from './clickableListItem.svelte'; export { default as Id } from './id.svelte'; +export { default as Dialog } from './dialog.svelte'; diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts new file mode 100644 index 0000000000..ced51ded4c --- /dev/null +++ b/src/lib/helpers/commandCenter.ts @@ -0,0 +1,98 @@ +import { onDestroy } from 'svelte'; +import { derived, writable } from 'svelte/store'; + +type Command = { + keys: string[]; + /* Ctrl on Windows/Linux, Meta on Mac */ + meta?: boolean; + shift?: boolean; + alt?: boolean; + callback: () => void; + label?: string; + disabled?: boolean; + forceEnable?: boolean; +}; + +type CommandCenterState = { + commandMap: Map; + enabled: boolean; +}; + +export const commandCenter = (function init() { + const store = writable({ + commandMap: new Map(), + enabled: true + }); + + return { + ...store + }; +})(); + +export const commands = derived(commandCenter, ($commandCenter) => { + return Array.from($commandCenter.commandMap.values()).flat(); +}); + +export function CommandRegistrant() { + const uuid = crypto.randomUUID(); + + onDestroy(() => { + commandCenter.update((curr) => { + curr.commandMap.delete(uuid); + return curr; + }); + }); + + return { + register(newCommands: Command[]) { + commandCenter.update((curr) => { + curr.commandMap.set(uuid, newCommands); + return curr; + }); + } + }; +} + +export function ExtendCommandRegistrant(baseCommands: Command[]) { + return () => { + const registrant = CommandRegistrant(); + + return { + register: (newCommands?: Command[]) => { + registrant.register([...baseCommands, ...(newCommands ?? [])]); + } + }; + }; +} + +export const commandCenterKeyDownHandler = derived(commandCenter, ({ commandMap, enabled }) => { + const commandsArr = Array.from(commandMap.values()).flat(); + + return (event: KeyboardEvent) => { + const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; + + for (const command of commandsArr) { + if (command.disabled || (!enabled && !command.forceEnable)) continue; + + const { keys, meta, shift, alt, callback } = command; + + const keyCode = event.keyCode; + const isMetaPressed = meta ? (isMac ? event.metaKey : event.ctrlKey) : true; + const isShiftPressed = shift ? event.shiftKey : true; + const isAltPressed = alt ? event.altKey : true; + + const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0)); + + if ( + commandKeyCodes.includes(keyCode) && + isMetaPressed && + isShiftPressed && + isAltPressed + ) { + event.preventDefault(); + callback(); + return; + } + } + }; +}); diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte index 870794b406..df65ef6e00 100644 --- a/src/routes/console/+layout.svelte +++ b/src/routes/console/+layout.svelte @@ -15,6 +15,31 @@ import { loading } from '../store'; import Create from './createOrganization.svelte'; + import { goto } from '$app/navigation'; + import { commandCenterKeyDownHandler, CommandRegistrant } from '$lib/helpers/commandCenter'; + import CommandCenter from './commandCenter.svelte'; + + const { register } = CommandRegistrant(); + $: register([ + { + label: 'Go to Account', + callback: () => { + goto('/console/account'); + }, + keys: ['a'], + meta: true, + shift: true + }, + { + label: 'Go to Home', + callback: () => { + goto('/console'); + }, + keys: ['h'], + alt: true + } + ]); + onMount(() => { loading.set(false); @@ -46,6 +71,10 @@ } + + + + + import Dialog from '$lib/components/dialog.svelte'; + import { CommandRegistrant, commands, commandCenter } from '$lib/helpers/commandCenter'; + import { isMac } from '$lib/helpers/platform'; + + let open = false; + let search = ''; + let selected = 0; + + const { register } = CommandRegistrant(); + $: register([ + { + callback: () => { + open = !open; + }, + keys: ['k'], + meta: true, + forceEnable: true + } + ]); + + $: results = $commands.filter((command) => { + return ( + !command.disabled && + command.label && + command.label.toLowerCase().includes(search.toLowerCase()) + ); + }); + + function handleKeyDown(event: KeyboardEvent) { + if (event.key === 'ArrowDown') { + event.preventDefault(); + selected = selected === results.length - 1 ? 0 : selected + 1; + } else if (event.key === 'ArrowUp') { + event.preventDefault(); + selected = selected === 0 ? results.length - 1 : selected - 1; + } else if (event.key === 'Enter') { + event.preventDefault(); + if (results[selected]) { + results[selected].callback(); + open = false; + search = ''; + } + } + } + + $: { + results; + selected = 0; + } + + $: $commandCenter.enabled = !open; + + + + + +
+ + +
    + {#each results as command, i} +
  • + + {command.label} + +
    + {#if command.meta} + {isMac ? '⌘' : 'ctrl'} + {/if} + {#if command.shift} + ⇧ + {/if} + {#if command.alt} + {isMac ? '⌥' : 'alt'} + {/if} + {#each command.keys as key} + + {key.toUpperCase()} + + {/each} +
    +
    • + {:else} +
  • + No commands found +
    • + {/each} +
+
+ + + diff --git a/src/routes/console/project-[project]/auth/+page.svelte b/src/routes/console/project-[project]/auth/+page.svelte index 0063f7ea1f..4c1038511c 100644 --- a/src/routes/console/project-[project]/auth/+page.svelte +++ b/src/routes/console/project-[project]/auth/+page.svelte @@ -1,31 +1,32 @@ diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index 0d0e1e553b..62f2e9089a 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -1,16 +1,17 @@ diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte index 66b23203d6..7881cd7b04 100644 --- a/src/routes/console/project-[project]/functions/+page.svelte +++ b/src/routes/console/project-[project]/functions/+page.svelte @@ -14,10 +14,12 @@ import { tooltip } from '$lib/actions/tooltip'; import { app } from '$lib/stores/app'; import { wizard } from '$lib/stores/wizard'; - import { beforeNavigate } from '$app/navigation'; + import { beforeNavigate, goto } from '$app/navigation'; import { toLocaleDateTime } from '$lib/helpers/date'; import Create from './createFunction.svelte'; import type { PageData } from './$types'; + import { CommandRegistrant } from '$lib/helpers/commandCenter'; + import { projectRegistrant } from '../store'; export let data: PageData; @@ -32,6 +34,16 @@ beforeNavigate(() => { wizard.hide(); }); + + const { register } = $projectRegistrant(); + $: register([ + { + label: 'Create function', + callback: openWizard, + keys: ['c'], + disabled: $wizard.show + } + ]); diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte index 5c2332b05f..852bb7a27a 100644 --- a/src/routes/console/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte @@ -36,6 +36,9 @@ import { base } from '$app/paths'; import { app } from '$lib/stores/app'; import type { PageData } from './$types'; + import { CommandRegistrant } from '$lib/helpers/commandCenter'; + import { goto } from '$app/navigation'; + import { project, projectRegistrant } from '../../store'; export let data: PageData; @@ -70,6 +73,9 @@ return 'unknown'; } }; + + const { register } = $projectRegistrant(); + $: register();
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte index 826598d662..ed3d7c4ac9 100644 --- a/src/routes/console/project-[project]/storage/+page.svelte +++ b/src/routes/console/project-[project]/storage/+page.svelte @@ -17,6 +17,7 @@ import { tooltip } from '$lib/actions/tooltip'; import type { Models } from '@appwrite.io/console'; import type { PageData } from './$types'; + import { projectRegistrant } from '../store'; export let data: PageData; @@ -28,6 +29,18 @@ showCreate = false; await goto(`${base}/console/project-${project}/storage/bucket-${event.detail.$id}`); } + + const { register } = $projectRegistrant(); + $: register([ + { + label: 'Create bucket', + callback: () => { + showCreate = true; + }, + keys: ['c'], + disabled: showCreate + } + ]); diff --git a/src/routes/console/project-[project]/store.ts b/src/routes/console/project-[project]/store.ts index 2c96c80704..7dc6da82c4 100644 --- a/src/routes/console/project-[project]/store.ts +++ b/src/routes/console/project-[project]/store.ts @@ -2,8 +2,55 @@ import { derived, writable } from 'svelte/store'; import { page } from '$app/stores'; import type { Models } from '@appwrite.io/console'; import type { BarSeriesOption } from 'echarts/charts'; +import { ExtendCommandRegistrant } from '$lib/helpers/commandCenter'; +import { goto } from '$app/navigation'; export const project = derived(page, ($page) => $page.data.project as Models.Project); + +export const projectRegistrant = derived< + typeof project, + ReturnType +>(project, ($project) => { + return ExtendCommandRegistrant([ + { + label: 'Go to Overview', + keys: ['o'], + callback: () => { + goto(`/console/project-${$project.$id}`); + } + }, + + { + label: 'Go to Auth', + callback: () => { + goto(`/console/project-${$project.$id}/auth`); + }, + keys: ['a'] + }, + { + label: 'Go to Databases', + callback: () => { + goto(`/console/project-${$project.$id}/databases`); + }, + keys: ['d'] + }, + { + label: 'Go to Functions', + callback: () => { + goto(`/console/project-${$project.$id}/functions`); + }, + keys: ['f'] + }, + { + label: 'Go to Storage', + callback: () => { + goto(`/console/project-${$project.$id}/storage`); + }, + keys: ['s'] + } + ]); +}); + export const onboarding = derived( project, ($project) => $project.platforms.length === 0 && $project.keys.length === 0 From a7c53ae522df6166d02686f9c018b3fa2ccb56d1 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 15 May 2023 19:55:26 +0100 Subject: [PATCH 002/128] feat: multi key commands --- src/lib/helpers/commandCenter.ts | 27 ++++++++++++++----- .../account/organizations/+page.svelte | 2 ++ .../organization-[organization]/+page.svelte | 21 +++++++++++++++ 3 files changed, 43 insertions(+), 7 deletions(-) diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index ced51ded4c..90a9fb7751 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -1,6 +1,12 @@ import { onDestroy } from 'svelte'; import { derived, writable } from 'svelte/store'; +// type Key = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' +// | 'l' | 'm' | 'n' | 'o' | 'p' | 'q' | 'r' | 's' | 't' | 'u' | 'v' | 'w' | 'x' +// | 'y' | 'z' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' +// | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' +// | 'Y' | 'Z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' + type Command = { keys: string[]; /* Ctrl on Windows/Linux, Meta on Mac */ @@ -65,30 +71,37 @@ export function ExtendCommandRegistrant(baseCommands: Command[]) { }; } +const debounce = (fn: () => void, ms: number) => { + let timeout: NodeJS.Timeout; + return () => { + clearTimeout(timeout); + timeout = setTimeout(fn, ms); + }; +}; + export const commandCenterKeyDownHandler = derived(commandCenter, ({ commandMap, enabled }) => { const commandsArr = Array.from(commandMap.values()).flat(); + const recentKeyCodes = new Set(); return (event: KeyboardEvent) => { const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; + recentKeyCodes.add(event.keyCode); + debounce(() => recentKeyCodes.clear(), 1000)(); + for (const command of commandsArr) { if (command.disabled || (!enabled && !command.forceEnable)) continue; const { keys, meta, shift, alt, callback } = command; - const keyCode = event.keyCode; const isMetaPressed = meta ? (isMac ? event.metaKey : event.ctrlKey) : true; const isShiftPressed = shift ? event.shiftKey : true; const isAltPressed = alt ? event.altKey : true; const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0)); + const allKeysPressed = commandKeyCodes.every((keyCode) => recentKeyCodes.has(keyCode)); - if ( - commandKeyCodes.includes(keyCode) && - isMetaPressed && - isShiftPressed && - isAltPressed - ) { + if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) { event.preventDefault(); callback(); return; diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte index f43f7c46ca..a2435cdf88 100644 --- a/src/routes/console/account/organizations/+page.svelte +++ b/src/routes/console/account/organizations/+page.svelte @@ -13,6 +13,8 @@ import CreateOrganization from '../../createOrganization.svelte'; import { sdk } from '$lib/stores/sdk'; import type { PageData } from './$types'; + import { CommandRegistrant } from '$lib/helpers/commandCenter'; + import { goto } from '$app/navigation'; export let data: PageData; diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte index d039ac7d37..0928668d12 100644 --- a/src/routes/console/organization-[organization]/+page.svelte +++ b/src/routes/console/organization-[organization]/+page.svelte @@ -8,6 +8,8 @@ import CreateOrganization from '../createOrganization.svelte'; import type { PageData } from './$types'; import { page } from '$app/stores'; + import { CommandRegistrant } from '$lib/helpers/commandCenter'; + import { goto } from '$app/navigation'; export let data: PageData; @@ -43,6 +45,25 @@ (value, index, self) => index === self.findIndex((t) => t.name === value.name) ); } + + const { register } = CommandRegistrant(); + $: register([ + ...data.projects.projects.map((project, i) => ({ + label: `Project ${project.name}`, + callback: () => { + goto(`/console/project-${project.$id}`); + }, + keys: ['p', `${i + 1}`] + })), + { + label: 'Create project', + callback: () => { + showCreate = true; + }, + keys: ['c'], + disabled: showCreate + } + ]); From afcbb5dca626e3d93b9f730c962105e94d3ddd50 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Mon, 15 May 2023 23:13:50 +0100 Subject: [PATCH 003/128] refactor: one-liner registers --- src/lib/helpers/commandCenter.ts | 56 ++++++------ src/lib/helpers/platform.ts | 1 + src/routes/console/+layout.svelte | 5 +- .../account/organizations/+page.svelte | 2 - src/routes/console/commandCenter.svelte | 15 +-- .../organization-[organization]/+page.svelte | 13 ++- .../project-[project]/auth/+page.svelte | 3 +- .../project-[project]/databases/+page.svelte | 3 +- .../project-[project]/functions/+page.svelte | 23 +++-- .../overview/platforms/+page.svelte | 15 ++- .../project-[project]/storage/+page.svelte | 21 ++--- src/routes/console/project-[project]/store.ts | 91 ++++++++++--------- 12 files changed, 122 insertions(+), 126 deletions(-) diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index 90a9fb7751..9e6b729f58 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -1,4 +1,3 @@ -import { onDestroy } from 'svelte'; import { derived, writable } from 'svelte/store'; // type Key = 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h' | 'i' | 'j' | 'k' @@ -7,7 +6,7 @@ import { derived, writable } from 'svelte/store'; // | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' // | 'Y' | 'Z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' -type Command = { +export type Command = { keys: string[]; /* Ctrl on Windows/Linux, Meta on Mac */ meta?: boolean; @@ -20,7 +19,7 @@ type Command = { }; type CommandCenterState = { - commandMap: Map; + commandMap: Map; enabled: boolean; }; @@ -39,37 +38,38 @@ export const commands = derived(commandCenter, ($commandCenter) => { return Array.from($commandCenter.commandMap.values()).flat(); }); -export function CommandRegistrant() { - const uuid = crypto.randomUUID(); +function createRegisterProxy() { + return new Proxy( + {}, + { + get(_obj, field, receiver) { + if (field !== 'register') return; + return (newCommands: Command[]) => { + commandCenter.update((curr) => { + curr.commandMap.set(receiver, newCommands); + return curr; + }); + }; + } + } + ) as { register: (newCommands: Command[]) => void }; +} - onDestroy(() => { - commandCenter.update((curr) => { - curr.commandMap.delete(uuid); - return curr; - }); - }); +export type RegisterProxy = ReturnType; - return { - register(newCommands: Command[]) { +export const cmdRegistrant = { + subscribe(runner: (proxy: RegisterProxy) => void) { + const proxy = createRegisterProxy(); + runner(proxy); + + return () => { commandCenter.update((curr) => { - curr.commandMap.set(uuid, newCommands); + curr.commandMap.delete(proxy); return curr; }); - } - }; -} - -export function ExtendCommandRegistrant(baseCommands: Command[]) { - return () => { - const registrant = CommandRegistrant(); - - return { - register: (newCommands?: Command[]) => { - registrant.register([...baseCommands, ...(newCommands ?? [])]); - } }; - }; -} + } +}; const debounce = (fn: () => void, ms: number) => { let timeout: NodeJS.Timeout; diff --git a/src/lib/helpers/platform.ts b/src/lib/helpers/platform.ts index 98920c7c6a..e03708a012 100644 --- a/src/lib/helpers/platform.ts +++ b/src/lib/helpers/platform.ts @@ -1,3 +1,4 @@ export function isMac(): boolean { + console.log('isMac()', window.navigator.platform.toUpperCase().indexOf('MAC') >= 0); return window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; } diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte index df65ef6e00..60e25c92f5 100644 --- a/src/routes/console/+layout.svelte +++ b/src/routes/console/+layout.svelte @@ -16,11 +16,10 @@ import Create from './createOrganization.svelte'; import { goto } from '$app/navigation'; - import { commandCenterKeyDownHandler, CommandRegistrant } from '$lib/helpers/commandCenter'; + import { cmdRegistrant, commandCenterKeyDownHandler } from '$lib/helpers/commandCenter'; import CommandCenter from './commandCenter.svelte'; - const { register } = CommandRegistrant(); - $: register([ + $: $cmdRegistrant.register([ { label: 'Go to Account', callback: () => { diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte index a2435cdf88..f43f7c46ca 100644 --- a/src/routes/console/account/organizations/+page.svelte +++ b/src/routes/console/account/organizations/+page.svelte @@ -13,8 +13,6 @@ import CreateOrganization from '../../createOrganization.svelte'; import { sdk } from '$lib/stores/sdk'; import type { PageData } from './$types'; - import { CommandRegistrant } from '$lib/helpers/commandCenter'; - import { goto } from '$app/navigation'; export let data: PageData; diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index cb7a25cff0..d40373f47f 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -1,14 +1,13 @@
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte index ed3d7c4ac9..4c01b8ad7d 100644 --- a/src/routes/console/project-[project]/storage/+page.svelte +++ b/src/routes/console/project-[project]/storage/+page.svelte @@ -1,23 +1,23 @@
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte index 4c01b8ad7d..f805f326d3 100644 --- a/src/routes/console/project-[project]/storage/+page.svelte +++ b/src/routes/console/project-[project]/storage/+page.svelte @@ -15,7 +15,7 @@ import { Button } from '$lib/elements/forms'; import { Container } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; - import { projectRegistrant } from '../store'; + import { registerProjectCommand } from '../store'; import type { PageData } from './$types'; import Create from './create.svelte'; @@ -30,7 +30,7 @@ await goto(`${base}/console/project-${project}/storage/bucket-${event.detail.$id}`); } - $: $projectRegistrant.register([ + $: $registerProjectCommand([ { label: 'Create bucket', callback: () => { diff --git a/src/routes/console/project-[project]/store.ts b/src/routes/console/project-[project]/store.ts index 3444e7a3b9..d932b663fb 100644 --- a/src/routes/console/project-[project]/store.ts +++ b/src/routes/console/project-[project]/store.ts @@ -1,16 +1,15 @@ import { goto } from '$app/navigation'; import { page } from '$app/stores'; -import { cmdRegistrant, type Command } from '$lib/helpers/commandCenter'; +import { registerCommand, type Command } from '$lib/helpers/commandCenter'; import type { Models } from '@appwrite.io/console'; import type { BarSeriesOption } from 'echarts/charts'; -import { derived, writable } from 'svelte/store'; +import { derived, writable, type Readable } from 'svelte/store'; export const project = derived(page, ($page) => $page.data.project as Models.Project); -export const projectRegistrant = derived([project, cmdRegistrant], ([$project, $registrant]) => { - return { - register: (c: Command[] = []) => - $registrant.register([ +export const registerProjectCommand = derived([project, registerCommand], ([$project, $register]) => { + return (c: Command[] = []) => + $register([ ...[ { label: 'Go to Overview', @@ -51,8 +50,8 @@ export const projectRegistrant = derived([project, cmdRegistrant], ([$project, $ ], ...(c ?? []) ]) - }; -}); + +}) as Readable<(c?: Command[]) => void>; export const onboarding = derived( project, From 41ce56e870e23fa078cacdc5b055edd1a6944950 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 08:25:06 +0100 Subject: [PATCH 005/128] fix: onboarding missing shortcus --- src/lib/helpers/platform.ts | 1 - .../console/project-[project]/databases/+page.svelte | 4 ++++ .../console/project-[project]/overview/onboard.svelte | 3 +++ .../project-[project]/overview/platforms/+page.svelte | 8 +++++++- 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/lib/helpers/platform.ts b/src/lib/helpers/platform.ts index e03708a012..98920c7c6a 100644 --- a/src/lib/helpers/platform.ts +++ b/src/lib/helpers/platform.ts @@ -1,4 +1,3 @@ export function isMac(): boolean { - console.log('isMac()', window.navigator.platform.toUpperCase().indexOf('MAC') >= 0); return window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; } diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index 6295c54744..dc3eb69ca5 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -12,6 +12,7 @@ import Grid from './grid.svelte'; import { columns } from './store'; import Table from './table.svelte'; + import { commandCenter } from '$lib/helpers/commandCenter'; export let data: PageData; @@ -30,9 +31,12 @@ showCreate = true; }, keys: ['c'], + ctrl: true, disabled: showCreate } ]); + + $: $commandCenter.enabled = !showCreate; diff --git a/src/routes/console/project-[project]/overview/onboard.svelte b/src/routes/console/project-[project]/overview/onboard.svelte index 65b6578524..016280d7ee 100644 --- a/src/routes/console/project-[project]/overview/onboard.svelte +++ b/src/routes/console/project-[project]/overview/onboard.svelte @@ -9,6 +9,7 @@ import { app } from '$lib/stores/app'; import { wizard } from '$lib/stores/wizard'; import Wizard from './keys/wizard.svelte'; + import { registerProjectCommand } from '../store'; export let projectId: string; @@ -42,6 +43,8 @@ $: onBoardIntro = $app.themeInUse === 'dark' ? OnboardDarkIntro : OnboardLightIntro; $: onBoardImage1 = $app.themeInUse === 'dark' ? OnboardDark1 : OnboardLight1; $: onBoardImage2 = $app.themeInUse === 'dark' ? OnboardDark2 : OnboardLight2; + + $: $registerProjectCommand();
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte index 2c5fac9a1a..4536d6d864 100644 --- a/src/routes/console/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte @@ -72,7 +72,13 @@ } }; - $: $registerProjectCommand(); + $: $registerProjectCommand([ + { + label: 'Create Web App', + callback: () => addPlatform(Platform.Web), + keys: ['c'] + } + ]);
From bf77043c8e5cdf5a52eb855658304c72a779007d Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 09:04:48 +0100 Subject: [PATCH 006/128] fix: disabling commands --- src/lib/components/dialog.svelte | 1 + src/lib/helpers/commandCenter.ts | 77 +++++++++++++------ src/routes/console/commandCenter.svelte | 6 +- .../project-[project]/databases/+page.svelte | 5 +- 4 files changed, 59 insertions(+), 30 deletions(-) diff --git a/src/lib/components/dialog.svelte b/src/lib/components/dialog.svelte index aa055883e0..6578ebef9b 100644 --- a/src/lib/components/dialog.svelte +++ b/src/lib/components/dialog.svelte @@ -7,6 +7,7 @@ export let error: string = null; export let closable = true; export let headerDivider = true; + export let animate = true; let dialog: HTMLDialogElement; let alert: HTMLElement; diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index a5196b2416..1289b6f571 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -1,5 +1,6 @@ import { derived, writable } from 'svelte/store'; import { debounce } from './debounce'; +import { isMac } from './platform'; export type Command = { keys: string[]; @@ -16,18 +17,23 @@ export type Command = { type CommandCenterState = { commandMap: Map; - enabled: boolean; + disabledMap: Map; }; export const commandCenter = writable({ commandMap: new Map(), - enabled: true + disabledMap: new Map() }); export const commands = derived(commandCenter, ($commandCenter) => { return Array.from($commandCenter.commandMap.values()).flat(); }); +const commandsEnabled = derived(commandCenter, ($commandCenter) => { + // If there's an item on the disabledMap that's true, then disable the command center + return Array.from($commandCenter.disabledMap.values()).every((disabled) => !disabled); +}); + export const registerCommand = { subscribe(runner: (cb: (newCommands: Command[]) => void) => void) { const uuid = crypto.randomUUID(); @@ -48,33 +54,56 @@ export const registerCommand = { } }; -export const commandCenterKeyDownHandler = derived(commandCenter, ({ commandMap, enabled }) => { - const commandsArr = Array.from(commandMap.values()).flat(); - const recentKeyCodes = new Set(); +export const disableCommands = { + subscribe(runner: (cb: (disabled: boolean) => void) => void) { + const uuid = crypto.randomUUID(); - return (event: KeyboardEvent) => { - const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; + runner((disabled: boolean) => { + commandCenter.update((curr) => { + curr.disabledMap.set(uuid, disabled); + return curr; + }); + }); - recentKeyCodes.add(event.keyCode); - debounce(() => recentKeyCodes.clear(), 1000)(); + return () => { + commandCenter.update((curr) => { + curr.disabledMap.delete(uuid); + return curr; + }); + }; + } +}; + +export const commandCenterKeyDownHandler = derived( + [commandCenter, commandsEnabled], + ([{ commandMap }, enabled]) => { + const commandsArr = Array.from(commandMap.values()).flat(); + const recentKeyCodes = new Set(); - for (const command of commandsArr) { - if (command.disabled || (!enabled && !command.forceEnable)) continue; + return (event: KeyboardEvent) => { + recentKeyCodes.add(event.keyCode); + debounce(() => recentKeyCodes.clear(), 1000)(); - const { keys, ctrl: meta, shift, alt, callback } = command; + for (const command of commandsArr) { + if (command.disabled || (!enabled && !command.forceEnable)) continue; - const isMetaPressed = meta ? (isMac ? event.metaKey : event.ctrlKey) : true; - const isShiftPressed = shift ? event.shiftKey : true; - const isAltPressed = alt ? event.altKey : true; + const { keys, ctrl: meta, shift, alt, callback } = command; - const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0)); - const allKeysPressed = commandKeyCodes.every((keyCode) => recentKeyCodes.has(keyCode)); + const isMetaPressed = meta ? (isMac() ? event.metaKey : event.ctrlKey) : true; + const isShiftPressed = shift ? event.shiftKey : true; + const isAltPressed = alt ? event.altKey : true; - if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) { - event.preventDefault(); - callback(); - return; + const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0)); + const allKeysPressed = commandKeyCodes.every((keyCode) => + recentKeyCodes.has(keyCode) + ); + + if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) { + event.preventDefault(); + callback(); + return; + } } - } - }; -}); + }; + } +); diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index e39c113cae..e1857455da 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -1,6 +1,6 @@ @@ -98,7 +98,7 @@ } .result { - border-radius: 0.25rem; + border-radius: 0.75rem; padding: 0.5rem 0.75rem; } diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index dc3eb69ca5..b76e9a8403 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -4,6 +4,7 @@ import { page } from '$app/stores'; import { Empty, PaginationWithLimit } from '$lib/components'; import { Button } from '$lib/elements/forms'; + import { disableCommands } from '$lib/helpers/commandCenter'; import { Container, GridHeader } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; import { registerProjectCommand } from '../store'; @@ -12,7 +13,6 @@ import Grid from './grid.svelte'; import { columns } from './store'; import Table from './table.svelte'; - import { commandCenter } from '$lib/helpers/commandCenter'; export let data: PageData; @@ -31,12 +31,11 @@ showCreate = true; }, keys: ['c'], - ctrl: true, disabled: showCreate } ]); - $: $commandCenter.enabled = !showCreate; + $: $disableCommands(showCreate); From adbd2c7f53350757d0f8f71a75f512d2a582d315 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 09:19:32 +0100 Subject: [PATCH 007/128] fix: command key order --- src/lib/helpers/commandCenter.ts | 10 +-- src/routes/console/+layout.svelte | 3 +- src/routes/console/commandCenter.svelte | 9 +- .../organization-[organization]/+page.svelte | 4 +- src/routes/console/project-[project]/store.ts | 84 ++++++++++--------- 5 files changed, 58 insertions(+), 52 deletions(-) diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index 1289b6f571..f1da960f56 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -78,11 +78,11 @@ export const commandCenterKeyDownHandler = derived( [commandCenter, commandsEnabled], ([{ commandMap }, enabled]) => { const commandsArr = Array.from(commandMap.values()).flat(); - const recentKeyCodes = new Set(); + let recentKeyCodes: number[] = []; return (event: KeyboardEvent) => { - recentKeyCodes.add(event.keyCode); - debounce(() => recentKeyCodes.clear(), 1000)(); + recentKeyCodes.push(event.keyCode); + debounce(() => (recentKeyCodes = []), 1000)(); for (const command of commandsArr) { if (command.disabled || (!enabled && !command.forceEnable)) continue; @@ -94,9 +94,7 @@ export const commandCenterKeyDownHandler = derived( const isAltPressed = alt ? event.altKey : true; const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0)); - const allKeysPressed = commandKeyCodes.every((keyCode) => - recentKeyCodes.has(keyCode) - ); + const allKeysPressed = recentKeyCodes.join('').includes(commandKeyCodes.join('')); if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) { event.preventDefault(); diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte index f2f21e4171..f8511ad3f0 100644 --- a/src/routes/console/+layout.svelte +++ b/src/routes/console/+layout.svelte @@ -34,8 +34,7 @@ callback: () => { goto('/console'); }, - keys: ['h'], - alt: true + keys: ['g', 'h'] } ]); diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index e1857455da..bbdf7c95f0 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -65,7 +65,7 @@ {command.label} -
+
{#if command.ctrl} {isMac() ? '⌘' : 'ctrl'} {/if} @@ -75,10 +75,15 @@ {#if command.alt} {isMac() ? '⌥' : 'alt'} {/if} - {#each command.keys as key} + {#each command.keys as key, i} + {@const hasNext = command.keys.length - 1 !== i} + {key.toUpperCase()} + {#if hasNext} + then + {/if} {/each}
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte index fecfaae901..ddf821e934 100644 --- a/src/routes/console/organization-[organization]/+page.svelte +++ b/src/routes/console/organization-[organization]/+page.svelte @@ -5,7 +5,7 @@ import { CardContainer, Empty, GridItem1, Heading, PaginationWithLimit } from '$lib/components'; import { Pill } from '$lib/elements'; import { Button } from '$lib/elements/forms'; - import { registerCommand } from '$lib/helpers/commandCenter'; + import { disableCommands, registerCommand } from '$lib/helpers/commandCenter'; import { Container } from '$lib/layout'; import CreateOrganization from '../createOrganization.svelte'; import type { PageData } from './$types'; @@ -63,6 +63,8 @@ disabled: showCreate } ]); + + $: $disableCommands(showCreate); diff --git a/src/routes/console/project-[project]/store.ts b/src/routes/console/project-[project]/store.ts index d932b663fb..ed5e12960a 100644 --- a/src/routes/console/project-[project]/store.ts +++ b/src/routes/console/project-[project]/store.ts @@ -7,51 +7,53 @@ import { derived, writable, type Readable } from 'svelte/store'; export const project = derived(page, ($page) => $page.data.project as Models.Project); -export const registerProjectCommand = derived([project, registerCommand], ([$project, $register]) => { - return (c: Command[] = []) => - $register([ - ...[ - { - label: 'Go to Overview', - keys: ['o'], - callback: () => { - goto(`/console/project-${$project.$id}`); - } - }, +export const registerProjectCommand = derived( + [project, registerCommand], + ([$project, $register]) => { + return (c: Command[] = []) => { + const projectCommands: Command[] = [ + { + label: 'Go to Overview', + keys: ['g', 'o'], + + callback: () => { + goto(`/console/project-${$project.$id}`); + } + }, - { - label: 'Go to Auth', - callback: () => { - goto(`/console/project-${$project.$id}/auth`); - }, - keys: ['a'] + { + label: 'Go to Auth', + callback: () => { + goto(`/console/project-${$project.$id}/auth`); }, - { - label: 'Go to Databases', - callback: () => { - goto(`/console/project-${$project.$id}/databases`); - }, - keys: ['d'] + keys: ['g', 'a'] + }, + { + label: 'Go to Databases', + callback: () => { + goto(`/console/project-${$project.$id}/databases`); }, - { - label: 'Go to Functions', - callback: () => { - goto(`/console/project-${$project.$id}/functions`); - }, - keys: ['f'] + keys: ['g', 'd'] + }, + { + label: 'Go to Functions', + callback: () => { + goto(`/console/project-${$project.$id}/functions`); }, - { - label: 'Go to Storage', - callback: () => { - goto(`/console/project-${$project.$id}/storage`); - }, - keys: ['s'] - } - ], - ...(c ?? []) - ]) - -}) as Readable<(c?: Command[]) => void>; + keys: ['g', 'f'] + }, + { + label: 'Go to Storage', + callback: () => { + goto(`/console/project-${$project.$id}/storage`); + }, + keys: ['g', 's'] + } + ]; + return $register([...projectCommands, ...(c ?? [])]); + }; + } +) as Readable<(c?: Command[]) => void>; export const onboarding = derived( project, From 46c7a26f901cd087b84ca026943044223ee6c84d Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 09:47:52 +0100 Subject: [PATCH 008/128] refactor: disable commands on input elements --- src/lib/helpers/commandCenter.ts | 5 +++++ src/routes/console/organization-[organization]/+page.svelte | 4 +--- src/routes/console/project-[project]/databases/+page.svelte | 3 --- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index f1da960f56..f84a2b6f61 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -81,6 +81,11 @@ export const commandCenterKeyDownHandler = derived( let recentKeyCodes: number[] = []; return (event: KeyboardEvent) => { + // ignore keypresses that come from input, textarea and select elements + if (['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName)) { + return; + } + recentKeyCodes.push(event.keyCode); debounce(() => (recentKeyCodes = []), 1000)(); diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte index ddf821e934..fecfaae901 100644 --- a/src/routes/console/organization-[organization]/+page.svelte +++ b/src/routes/console/organization-[organization]/+page.svelte @@ -5,7 +5,7 @@ import { CardContainer, Empty, GridItem1, Heading, PaginationWithLimit } from '$lib/components'; import { Pill } from '$lib/elements'; import { Button } from '$lib/elements/forms'; - import { disableCommands, registerCommand } from '$lib/helpers/commandCenter'; + import { registerCommand } from '$lib/helpers/commandCenter'; import { Container } from '$lib/layout'; import CreateOrganization from '../createOrganization.svelte'; import type { PageData } from './$types'; @@ -63,8 +63,6 @@ disabled: showCreate } ]); - - $: $disableCommands(showCreate); diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index b76e9a8403..6295c54744 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -4,7 +4,6 @@ import { page } from '$app/stores'; import { Empty, PaginationWithLimit } from '$lib/components'; import { Button } from '$lib/elements/forms'; - import { disableCommands } from '$lib/helpers/commandCenter'; import { Container, GridHeader } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; import { registerProjectCommand } from '../store'; @@ -34,8 +33,6 @@ disabled: showCreate } ]); - - $: $disableCommands(showCreate); From ea8a92481ca9414f903fc73c02494b7707507b6e Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 09:57:45 +0100 Subject: [PATCH 009/128] feat: cmd center animation --- src/routes/console/commandCenter.svelte | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index bbdf7c95f0..80b712773c 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -2,6 +2,8 @@ import Dialog from '$lib/components/dialog.svelte'; import { commands, disableCommands, registerCommand } from '$lib/helpers/commandCenter'; import { isMac } from '$lib/helpers/platform'; + import { bounceOut, elasticOut, quadOut } from 'svelte/easing'; + import { crossfade } from 'svelte/transition'; let open = false; let search = ''; @@ -49,6 +51,11 @@ } $: $disableCommands(open); + + const [send, receive] = crossfade({ + duration: 150, + easing: quadOut + }); @@ -86,6 +93,9 @@ {/if} {/each}
+ {#if selected === i} +
+ {/if} {:else}
  • @@ -103,14 +113,25 @@ } .result { - border-radius: 0.75rem; padding: 0.5rem 0.75rem; + transition: 150ms; + position: relative; } - .result[data-selected] { + .result .bg { + position: absolute; + inset: 0; background-color: hsl(var(--color-neutral-200)); + border-radius: 0.75rem; + translate: 0 -1px; + + z-index: -1; } + /* .result[data-selected] { + background-color: hsl(var(--color-neutral-200)); + } */ + .kbd { padding-inline: 0.25rem; } From 6874ab276ff36a7c6054d054bcee64dc24798bc7 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 10:39:11 +0100 Subject: [PATCH 010/128] feat: more command center animations --- src/lib/components/dialog.svelte | 56 +++++++++++++---------- src/routes/console/commandCenter.svelte | 61 +++++++++++++------------ 2 files changed, 65 insertions(+), 52 deletions(-) diff --git a/src/lib/components/dialog.svelte b/src/lib/components/dialog.svelte index 6578ebef9b..daa2cb6c0a 100644 --- a/src/lib/components/dialog.svelte +++ b/src/lib/components/dialog.svelte @@ -1,6 +1,7 @@ From 7de0a2195d7ee117d6e1ccce70db982da5690f19 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 11:24:26 +0100 Subject: [PATCH 012/128] refactor: animation changes --- src/routes/console/commandCenter.svelte | 32 +++++++++++++++++++------ 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index 1735870a13..f2457580a2 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -3,7 +3,7 @@ import Dialog from '$lib/components/dialog.svelte'; import { commands, disableCommands, registerCommand } from '$lib/helpers/commandCenter'; import { isMac } from '$lib/helpers/platform'; - import { bounceOut, elasticOut, quadOut } from 'svelte/easing'; + import { quadOut } from 'svelte/easing'; import { crossfade } from 'svelte/transition'; let open = false; @@ -32,10 +32,18 @@ function handleKeyDown(event: KeyboardEvent) { if (event.key === 'ArrowDown') { event.preventDefault(); - selected = selected === results.length - 1 ? 0 : selected + 1; + if (event.metaKey) { + selected = results.length - 1; + } else { + selected = selected === results.length - 1 ? results.length - 1 : selected + 1; + } } else if (event.key === 'ArrowUp') { event.preventDefault(); - selected = selected === 0 ? results.length - 1 : selected - 1; + if (event.metaKey) { + selected = 0; + } else { + selected = selected === 0 ? 0 : selected - 1; + } } else if (event.key === 'Enter') { event.preventDefault(); if (results[selected]) { @@ -43,6 +51,12 @@ open = false; search = ''; } + } else if (event.key === 'Home') { + event.preventDefault(); + selected = 0; + } else if (event.key === 'End') { + event.preventDefault(); + selected = results.length - 1; } } @@ -122,6 +136,14 @@ padding: 0.5rem 0.75rem; transition: 150ms; position: relative; + + opacity: 0.65; + transition: 75ms cubic-bezier(0.5, 1, 0.89, 1); + } + + .result[data-selected] { + opacity: 1; + transition: 150ms cubic-bezier(0.5, 1, 0.89, 1); } .result .content { @@ -137,10 +159,6 @@ translate: 0 -1px; } - /* .result[data-selected] { - background-color: hsl(var(--color-neutral-200)); - } */ - .kbd { padding-inline: 0.25rem; } From 142e89a59a4de2f367bcf1d19c0c4edb34b6c76f Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 15:46:07 +0100 Subject: [PATCH 013/128] fix: enter bug --- src/routes/console/commandCenter.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index e39c113cae..f65de369df 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -27,6 +27,7 @@ }); function handleKeyDown(event: KeyboardEvent) { + if (!open) return; if (event.key === 'ArrowDown') { event.preventDefault(); selected = selected === results.length - 1 ? 0 : selected + 1; From 7badf3a28bd71ba48635071dca1c2a4f8fae5012 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 15:57:25 +0100 Subject: [PATCH 014/128] refactor: improve commands --- src/lib/helpers/commandCenter.ts | 15 +++--- .../console/project-[project]/+layout.svelte | 44 +++++++++++++++- .../project-[project]/auth/+page.svelte | 5 +- .../project-[project]/databases/+page.svelte | 5 +- .../project-[project]/functions/+page.svelte | 4 +- .../project-[project]/overview/onboard.svelte | 3 -- .../overview/platforms/+page.svelte | 4 +- .../project-[project]/storage/+page.svelte | 4 +- src/routes/console/project-[project]/store.ts | 52 +------------------ 9 files changed, 65 insertions(+), 71 deletions(-) diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index f84a2b6f61..0f1b62bc55 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -74,6 +74,10 @@ export const disableCommands = { } }; +function isInputEvent(event: KeyboardEvent) { + return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName); +} + export const commandCenterKeyDownHandler = derived( [commandCenter, commandsEnabled], ([{ commandMap }, enabled]) => { @@ -81,16 +85,15 @@ export const commandCenterKeyDownHandler = derived( let recentKeyCodes: number[] = []; return (event: KeyboardEvent) => { - // ignore keypresses that come from input, textarea and select elements - if (['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName)) { - return; - } - recentKeyCodes.push(event.keyCode); debounce(() => (recentKeyCodes = []), 1000)(); for (const command of commandsArr) { - if (command.disabled || (!enabled && !command.forceEnable)) continue; + if (!command.forceEnable) { + if (command.disabled) continue; + if (!enabled) continue; + if (isInputEvent(event)) continue; + } const { keys, ctrl: meta, shift, alt, callback } = command; diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte index 1074501c9e..6b6a8d5d8f 100644 --- a/src/routes/console/project-[project]/+layout.svelte +++ b/src/routes/console/project-[project]/+layout.svelte @@ -2,7 +2,9 @@ import { UploadBox } from '$lib/components'; import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; - import { stats } from './store'; + import { project, stats } from './store'; + import { registerCommand } from '$lib/helpers/commandCenter'; + import { goto } from '$app/navigation'; onMount(async () => { return sdk.forConsole.client.subscribe(['project', 'console'], (response) => { @@ -13,6 +15,46 @@ } }); }); + + $: $registerCommand([ + { + label: 'Go to Overview', + keys: ['g', 'o'], + + callback: () => { + goto(`/console/project-${$project.$id}`); + } + }, + + { + label: 'Go to Auth', + callback: () => { + goto(`/console/project-${$project.$id}/auth`); + }, + keys: ['g', 'a'] + }, + { + label: 'Go to Databases', + callback: () => { + goto(`/console/project-${$project.$id}/databases`); + }, + keys: ['g', 'd'] + }, + { + label: 'Go to Functions', + callback: () => { + goto(`/console/project-${$project.$id}/functions`); + }, + keys: ['g', 'f'] + }, + { + label: 'Go to Storage', + callback: () => { + goto(`/console/project-${$project.$id}/storage`); + }, + keys: ['g', 's'] + } + ]); diff --git a/src/routes/console/project-[project]/auth/+page.svelte b/src/routes/console/project-[project]/auth/+page.svelte index faf7d9b18e..dfe0d4d60b 100644 --- a/src/routes/console/project-[project]/auth/+page.svelte +++ b/src/routes/console/project-[project]/auth/+page.svelte @@ -24,9 +24,10 @@ import { toLocaleDateTime } from '$lib/helpers/date'; import { Container } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; - import { project, registerProjectCommand } from '../store'; + import { project } from '../store'; import type { PageData } from './$types'; import Create from './createUser.svelte'; + import { registerCommand } from '$lib/helpers/commandCenter'; export let data: PageData; @@ -36,7 +37,7 @@ await goto(`${base}/console/project-${projectId}/auth/user-${event.detail.$id}`); } - $: $registerProjectCommand([ + $: $registerCommand([ { label: 'Create user', callback: () => { diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index 6295c54744..3c81bbd6f9 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -6,12 +6,13 @@ import { Button } from '$lib/elements/forms'; import { Container, GridHeader } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; - import { registerProjectCommand } from '../store'; + import type { PageData } from './$types'; import Create from './create.svelte'; import Grid from './grid.svelte'; import { columns } from './store'; import Table from './table.svelte'; + import { registerCommand } from '$lib/helpers/commandCenter'; export let data: PageData; @@ -23,7 +24,7 @@ await goto(`${base}/console/project-${project}/databases/database-${event.detail.$id}`); } - $: $registerProjectCommand([ + $: $registerCommand([ { label: 'Create database', callback: () => { diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte index e1eda63144..10fd9bd0f1 100644 --- a/src/routes/console/project-[project]/functions/+page.svelte +++ b/src/routes/console/project-[project]/functions/+page.svelte @@ -19,7 +19,7 @@ import type { PageData } from './$types'; import Create from './createFunction.svelte'; - import { registerProjectCommand } from '../store'; + import { registerCommand } from '$lib/helpers/commandCenter'; export let data: PageData; @@ -35,7 +35,7 @@ wizard.hide(); }); - $: $registerProjectCommand([ + $: $registerCommand([ { label: 'Create function', callback: openWizard, diff --git a/src/routes/console/project-[project]/overview/onboard.svelte b/src/routes/console/project-[project]/overview/onboard.svelte index 016280d7ee..65b6578524 100644 --- a/src/routes/console/project-[project]/overview/onboard.svelte +++ b/src/routes/console/project-[project]/overview/onboard.svelte @@ -9,7 +9,6 @@ import { app } from '$lib/stores/app'; import { wizard } from '$lib/stores/wizard'; import Wizard from './keys/wizard.svelte'; - import { registerProjectCommand } from '../store'; export let projectId: string; @@ -43,8 +42,6 @@ $: onBoardIntro = $app.themeInUse === 'dark' ? OnboardDarkIntro : OnboardLightIntro; $: onBoardImage1 = $app.themeInUse === 'dark' ? OnboardDark1 : OnboardLight1; $: onBoardImage2 = $app.themeInUse === 'dark' ? OnboardDark2 : OnboardLight2; - - $: $registerProjectCommand();
    diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte index 4536d6d864..2ef3260173 100644 --- a/src/routes/console/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte @@ -36,7 +36,7 @@ import { toLocaleDateTime } from '$lib/helpers/date'; import { app } from '$lib/stores/app'; import type { PageData } from './$types'; - import { registerProjectCommand } from '../../store'; + import { registerCommand } from '$lib/helpers/commandCenter'; export let data: PageData; @@ -72,7 +72,7 @@ } }; - $: $registerProjectCommand([ + $: $registerCommand([ { label: 'Create Web App', callback: () => addPlatform(Platform.Web), diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte index f805f326d3..d7d86f07cd 100644 --- a/src/routes/console/project-[project]/storage/+page.svelte +++ b/src/routes/console/project-[project]/storage/+page.svelte @@ -15,7 +15,7 @@ import { Button } from '$lib/elements/forms'; import { Container } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; - import { registerProjectCommand } from '../store'; + import { registerCommand } from '$lib/helpers/commandCenter'; import type { PageData } from './$types'; import Create from './create.svelte'; @@ -30,7 +30,7 @@ await goto(`${base}/console/project-${project}/storage/bucket-${event.detail.$id}`); } - $: $registerProjectCommand([ + $: $registerCommand([ { label: 'Create bucket', callback: () => { diff --git a/src/routes/console/project-[project]/store.ts b/src/routes/console/project-[project]/store.ts index ed5e12960a..55690c0387 100644 --- a/src/routes/console/project-[project]/store.ts +++ b/src/routes/console/project-[project]/store.ts @@ -1,60 +1,10 @@ -import { goto } from '$app/navigation'; import { page } from '$app/stores'; -import { registerCommand, type Command } from '$lib/helpers/commandCenter'; import type { Models } from '@appwrite.io/console'; import type { BarSeriesOption } from 'echarts/charts'; -import { derived, writable, type Readable } from 'svelte/store'; +import { derived, writable } from 'svelte/store'; export const project = derived(page, ($page) => $page.data.project as Models.Project); -export const registerProjectCommand = derived( - [project, registerCommand], - ([$project, $register]) => { - return (c: Command[] = []) => { - const projectCommands: Command[] = [ - { - label: 'Go to Overview', - keys: ['g', 'o'], - - callback: () => { - goto(`/console/project-${$project.$id}`); - } - }, - - { - label: 'Go to Auth', - callback: () => { - goto(`/console/project-${$project.$id}/auth`); - }, - keys: ['g', 'a'] - }, - { - label: 'Go to Databases', - callback: () => { - goto(`/console/project-${$project.$id}/databases`); - }, - keys: ['g', 'd'] - }, - { - label: 'Go to Functions', - callback: () => { - goto(`/console/project-${$project.$id}/functions`); - }, - keys: ['g', 'f'] - }, - { - label: 'Go to Storage', - callback: () => { - goto(`/console/project-${$project.$id}/storage`); - }, - keys: ['g', 's'] - } - ]; - return $register([...projectCommands, ...(c ?? [])]); - }; - } -) as Readable<(c?: Command[]) => void>; - export const onboarding = derived( project, ($project) => $project.platforms.length === 0 && $project.keys.length === 0 From 318d72db1499350fcce9b0820fbcceb5f6458eba Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Tue, 16 May 2023 15:57:40 +0100 Subject: [PATCH 015/128] refactor: rename fn --- src/lib/helpers/commandCenter.ts | 2 +- src/routes/console/+layout.svelte | 4 ++-- src/routes/console/commandCenter.svelte | 4 ++-- src/routes/console/organization-[organization]/+page.svelte | 4 ++-- src/routes/console/project-[project]/+layout.svelte | 4 ++-- src/routes/console/project-[project]/auth/+page.svelte | 4 ++-- src/routes/console/project-[project]/databases/+page.svelte | 4 ++-- src/routes/console/project-[project]/functions/+page.svelte | 4 ++-- .../console/project-[project]/overview/platforms/+page.svelte | 4 ++-- src/routes/console/project-[project]/storage/+page.svelte | 4 ++-- 10 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/helpers/commandCenter.ts index 0f1b62bc55..1cd1f7e3cb 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/helpers/commandCenter.ts @@ -34,7 +34,7 @@ const commandsEnabled = derived(commandCenter, ($commandCenter) => { return Array.from($commandCenter.disabledMap.values()).every((disabled) => !disabled); }); -export const registerCommand = { +export const registerCommands = { subscribe(runner: (cb: (newCommands: Command[]) => void) => void) { const uuid = crypto.randomUUID(); diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte index f8511ad3f0..c32bd4ba7d 100644 --- a/src/routes/console/+layout.svelte +++ b/src/routes/console/+layout.svelte @@ -16,10 +16,10 @@ import Create from './createOrganization.svelte'; import { goto } from '$app/navigation'; - import { registerCommand, commandCenterKeyDownHandler } from '$lib/helpers/commandCenter'; + import { registerCommands, commandCenterKeyDownHandler } from '$lib/helpers/commandCenter'; import CommandCenter from './commandCenter.svelte'; - $: $registerCommand([ + $: $registerCommands([ { label: 'Go to Account', callback: () => { diff --git a/src/routes/console/commandCenter.svelte b/src/routes/console/commandCenter.svelte index 726eedd3f7..603d8e2bd3 100644 --- a/src/routes/console/commandCenter.svelte +++ b/src/routes/console/commandCenter.svelte @@ -1,7 +1,7 @@ + + + +{#if openSubPanel} + +{/if} diff --git a/src/lib/helpers/commandCenter.ts b/src/lib/commandCenter/commands.ts similarity index 69% rename from src/lib/helpers/commandCenter.ts rename to src/lib/commandCenter/commands.ts index 1cd1f7e3cb..d57b28fb7c 100644 --- a/src/lib/helpers/commandCenter.ts +++ b/src/lib/commandCenter/commands.ts @@ -1,7 +1,8 @@ +import { debounce } from '$lib/helpers/debounce'; +import { isMac } from '$lib/helpers/platform'; import { derived, writable } from 'svelte/store'; -import { debounce } from './debounce'; -import { isMac } from './platform'; +// Store export type Command = { keys: string[]; /* Ctrl on Windows/Linux, Meta on Mac */ @@ -15,73 +16,27 @@ export type Command = { forceEnable?: boolean; }; -type CommandCenterState = { - commandMap: Map; - disabledMap: Map; -}; - -export const commandCenter = writable({ - commandMap: new Map(), - disabledMap: new Map() -}); +export const commandMap = writable>(new Map()); +export const disabledMap = writable>(new Map()); -export const commands = derived(commandCenter, ($commandCenter) => { - return Array.from($commandCenter.commandMap.values()).flat(); +// Derived stores +export const commands = derived(commandMap, ($commandMap) => { + return Array.from($commandMap.values()).flat(); }); -const commandsEnabled = derived(commandCenter, ($commandCenter) => { +const commandsEnabled = derived(disabledMap, ($disabledMap) => { // If there's an item on the disabledMap that's true, then disable the command center - return Array.from($commandCenter.disabledMap.values()).every((disabled) => !disabled); + return Array.from($disabledMap.values()).every((disabled) => !disabled); }); -export const registerCommands = { - subscribe(runner: (cb: (newCommands: Command[]) => void) => void) { - const uuid = crypto.randomUUID(); - - runner((newCommands: Command[]) => { - commandCenter.update((curr) => { - curr.commandMap.set(uuid, newCommands); - return curr; - }); - }); - - return () => { - commandCenter.update((curr) => { - curr.commandMap.delete(uuid); - return curr; - }); - }; - } -}; - -export const disableCommands = { - subscribe(runner: (cb: (disabled: boolean) => void) => void) { - const uuid = crypto.randomUUID(); - - runner((disabled: boolean) => { - commandCenter.update((curr) => { - curr.disabledMap.set(uuid, disabled); - return curr; - }); - }); - - return () => { - commandCenter.update((curr) => { - curr.disabledMap.delete(uuid); - return curr; - }); - }; - } -}; - function isInputEvent(event: KeyboardEvent) { return ['INPUT', 'TEXTAREA', 'SELECT'].includes((event.target as HTMLElement).tagName); } export const commandCenterKeyDownHandler = derived( - [commandCenter, commandsEnabled], - ([{ commandMap }, enabled]) => { - const commandsArr = Array.from(commandMap.values()).flat(); + [commandMap, commandsEnabled], + ([$commandMap, enabled]) => { + const commandsArr = Array.from($commandMap.values()).flat(); let recentKeyCodes: number[] = []; return (event: KeyboardEvent) => { @@ -113,3 +68,44 @@ export const commandCenterKeyDownHandler = derived( }; } ); + +// Methods +export const registerCommands = { + subscribe(runner: (cb: (newCommands: Command[]) => void) => void) { + const uuid = crypto.randomUUID(); + + runner((newCommands: Command[]) => { + commandMap.update((curr) => { + curr.set(uuid, newCommands); + return curr; + }); + }); + + return () => { + commandMap.update((curr) => { + curr.delete(uuid); + return curr; + }); + }; + } +}; + +export const disableCommands = { + subscribe(runner: (cb: (disabled: boolean) => void) => void) { + const uuid = crypto.randomUUID(); + + runner((disabled: boolean) => { + disabledMap.update((curr) => { + curr.set(uuid, disabled); + return curr; + }); + }); + + return () => { + disabledMap.update((curr) => { + curr.delete(uuid); + return curr; + }); + }; + } +}; diff --git a/src/lib/commandCenter/index.ts b/src/lib/commandCenter/index.ts new file mode 100644 index 0000000000..b1d8ce5118 --- /dev/null +++ b/src/lib/commandCenter/index.ts @@ -0,0 +1,4 @@ +export * from './commands'; +export * from './subPanels'; +import CommandCenter from './commandCenter.svelte'; +export { CommandCenter }; diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte new file mode 100644 index 0000000000..e8b40a4fdf --- /dev/null +++ b/src/lib/commandCenter/panels/ai.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/lib/commandCenter/panels/index.ts b/src/lib/commandCenter/panels/index.ts new file mode 100644 index 0000000000..d0b6262f48 --- /dev/null +++ b/src/lib/commandCenter/panels/index.ts @@ -0,0 +1,4 @@ +import AI from './ai.svelte'; +import Root from './root.svelte'; +import Template from './template.svelte'; +export { AI, Root, Template }; diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte new file mode 100644 index 0000000000..47d51eba89 --- /dev/null +++ b/src/lib/commandCenter/panels/root.svelte @@ -0,0 +1,54 @@ + + + + + + diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte new file mode 100644 index 0000000000..2f45281b3d --- /dev/null +++ b/src/lib/commandCenter/panels/template.svelte @@ -0,0 +1,130 @@ + + + + + + + +
    + {#if $subPanels.length} + aaa + {/if} + + + {#if options} +
      + {#each options as option, i} +
    • + {#if selected === i} +
      + {/if} +
      + +
      +
      • + {:else} +
    • + + No options found + +
      • + {/each} +
    + {:else} + + {/if} +
    +     + + diff --git a/src/lib/commandCenter/subPanels.ts b/src/lib/commandCenter/subPanels.ts new file mode 100644 index 0000000000..72a489c122 --- /dev/null +++ b/src/lib/commandCenter/subPanels.ts @@ -0,0 +1,32 @@ +import type { SvelteComponentDev } from 'svelte/internal'; +import { writable } from 'svelte/store'; + +export type SubPanel = { + name: string; + component: typeof SvelteComponentDev; +}; + +type CastSubPanel = Omit & { + component: unknown; +}; + +export const subPanels = writable>([]); + +// +export function addSubPanel(subPanel: CastSubPanel) { + subPanels.update((curr) => { + curr.push(subPanel as SubPanel); + return curr; + }); +} + +export function popSubPanel() { + subPanels.update((curr) => { + curr = curr.slice(0, -1); + return curr; + }); +} + +export function clearSubPanels() { + subPanels.set([]); +} diff --git a/src/lib/components/dialog.svelte b/src/lib/components/dialog.svelte index b3949b2155..05e3390295 100644 --- a/src/lib/components/dialog.svelte +++ b/src/lib/components/dialog.svelte @@ -1,28 +1,12 @@ -{#if show} -
    -
    - -
    +
    +
    +
    -{/if} +
    diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte index 3496146ca6..1df72acc77 100644 --- a/src/routes/console/organization-[organization]/+page.svelte +++ b/src/routes/console/organization-[organization]/+page.svelte @@ -2,10 +2,11 @@ import { goto } from '$app/navigation'; import { base } from '$app/paths'; import { page } from '$app/stores'; + import { registerCommands } from '$lib/commandCenter'; import { CardContainer, Empty, GridItem1, Heading, PaginationWithLimit } from '$lib/components'; import { Pill } from '$lib/elements'; import { Button } from '$lib/elements/forms'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { Container } from '$lib/layout'; import CreateOrganization from '../createOrganization.svelte'; import type { PageData } from './$types'; diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte index 49e506ac15..69cade632c 100644 --- a/src/routes/console/project-[project]/+layout.svelte +++ b/src/routes/console/project-[project]/+layout.svelte @@ -3,8 +3,9 @@ import { sdk } from '$lib/stores/sdk'; import { onMount } from 'svelte'; import { project, stats } from './store'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { goto } from '$app/navigation'; + import { registerCommands } from '$lib/commandCenter'; onMount(async () => { return sdk.forConsole.client.subscribe(['project', 'console'], (response) => { diff --git a/src/routes/console/project-[project]/auth/+page.svelte b/src/routes/console/project-[project]/auth/+page.svelte index c05426f023..3aa6c74be0 100644 --- a/src/routes/console/project-[project]/auth/+page.svelte +++ b/src/routes/console/project-[project]/auth/+page.svelte @@ -27,7 +27,7 @@ import { project } from '../store'; import type { PageData } from './$types'; import Create from './createUser.svelte'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { registerCommands } from '$lib/commandCenter'; export let data: PageData; diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index 334e27f6f8..6175f1a051 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -12,7 +12,7 @@ import Grid from './grid.svelte'; import { columns } from './store'; import Table from './table.svelte'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { registerCommands } from '$lib/commandCenter'; export let data: PageData; diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte index 575c88392a..341eeec1b0 100644 --- a/src/routes/console/project-[project]/functions/+page.svelte +++ b/src/routes/console/project-[project]/functions/+page.svelte @@ -19,7 +19,7 @@ import type { PageData } from './$types'; import Create from './createFunction.svelte'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { registerCommands } from '$lib/commandCenter'; export let data: PageData; diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte index fddfa5c49a..959aafe085 100644 --- a/src/routes/console/project-[project]/overview/platforms/+page.svelte +++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte @@ -36,7 +36,7 @@ import { toLocaleDateTime } from '$lib/helpers/date'; import { app } from '$lib/stores/app'; import type { PageData } from './$types'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { registerCommands } from '$lib/commandCenter'; export let data: PageData; diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte index fae25715c2..29eea87f50 100644 --- a/src/routes/console/project-[project]/storage/+page.svelte +++ b/src/routes/console/project-[project]/storage/+page.svelte @@ -15,7 +15,7 @@ import { Button } from '$lib/elements/forms'; import { Container } from '$lib/layout'; import type { Models } from '@appwrite.io/console'; - import { registerCommands } from '$lib/helpers/commandCenter'; + import { registerCommands } from '$lib/commandCenter'; import type { PageData } from './$types'; import Create from './create.svelte'; From 411fa32552a5e73b38b734d2130013014e34a134 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Fri, 19 May 2023 19:00:42 +0100 Subject: [PATCH 017/128] feat(wip): ask ai --- src/lib/commandCenter/commandCenter.svelte | 26 ++++- src/lib/commandCenter/panels/ai.svelte | 70 ++++++++++++- src/lib/commandCenter/panels/root.svelte | 2 +- src/lib/commandCenter/panels/template.svelte | 101 ++++++++++++------- src/lib/components/dialog.svelte | 61 ----------- src/lib/components/index.ts | 1 - 6 files changed, 161 insertions(+), 100 deletions(-) delete mode 100644 src/lib/components/dialog.svelte diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte index 8ef4e01db7..93da0c2bca 100644 --- a/src/lib/commandCenter/commandCenter.svelte +++ b/src/lib/commandCenter/commandCenter.svelte @@ -4,6 +4,7 @@ import { last } from '$lib/helpers/array'; import { addSubPanel, clearSubPanels, subPanels } from './subPanels'; import { commandCenterKeyDownHandler, disableCommands, registerCommands } from './commands'; + import { fade } from 'svelte/transition'; $: $registerCommands([ { @@ -32,13 +33,34 @@ document.documentElement.classList.remove('u-overflow-hidden'); } + let dialog: HTMLDivElement; + + function handleBlur(event: MouseEvent) { + if (event.target === dialog) { + clearSubPanels(); + } + } + afterNavigate(() => { clearSubPanels(); }); - + {#if openSubPanel} - +
    + +
    {/if} + + diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte index e8b40a4fdf..d9bc083951 100644 --- a/src/lib/commandCenter/panels/ai.svelte +++ b/src/lib/commandCenter/panels/ai.svelte @@ -1,5 +1,73 @@ - + + + diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte index 47d51eba89..d20525d76b 100644 --- a/src/lib/commandCenter/panels/root.svelte +++ b/src/lib/commandCenter/panels/root.svelte @@ -17,7 +17,7 @@ }); -