Merge pull request #508 from appwrite/design-reviews-1.4

QA Fixes 1.4

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());
+        }
+    };
+}

src/lib/commandCenter/commandCenter.svelte

@@ -33,13 +33,30 @@
     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
         }
     ]);
 
@@ -100,7 +117,7 @@
     </div>
 {/if}
 
-{#if dev}
+{#if dev && debugOverlayEnabled}
     <div class="debug-keys" use:portal>
         {#each keys as key, i (i)}
             <kbd class="kbd" transition:fade|local={{ duration: 150 }}>
@@ -126,7 +143,6 @@
         left: 50%;
         transform: translateX(-50%);
         padding: 0.5rem;
-        // background-color: hsl(var(--color-neutral-500) / 0.5);
         z-index: 9999;
 
         display: flex;

src/lib/commandCenter/commands.ts

@@ -57,8 +57,8 @@ type KeyedCommand = BaseCommand & {
     alt?: boolean;
 };
 
-function isKeyedCommand(command: Command): command is KeyedCommand {
-    return 'keys' in command;
+export function isKeyedCommand(command: Command): command is KeyedCommand {
+    return 'keys' in command && Array.isArray((command as KeyedCommand).keys);
 }
 
 export type Command = KeyedCommand | BaseCommand;
@@ -83,7 +83,7 @@ function isInputEvent(event: KeyboardEvent) {
 function getCommandRank(command: KeyedCommand) {
     const { keys, ctrl: meta, shift, alt } = command;
     const modifiers = [meta, shift, alt].filter(Boolean).length;
-    return keys.length + modifiers * 10;
+    return (keys?.length || 0) + modifiers * 10;
 }
 
 function hasDisputing(command: KeyedCommand, allCommands: Command[]) {
@@ -95,7 +95,7 @@ function hasDisputing(command: KeyedCommand, allCommands: Command[]) {
             return false;
         }
         const keysString = command.keys.join('+');
-        const otherKeysString = otherCommand.keys.join('+');
+        const otherKeysString = otherCommand?.keys?.join('+');
 
         const cmdRank = getCommandRank(command);
         const otherCmdRank = getCommandRank(otherCommand);
@@ -195,8 +195,10 @@ export const commandCenterKeyDownHandler = derived(
                 const isShiftPressed = shift ? event.shiftKey : !event.shiftKey;
                 const isAltPressed = alt ? event.altKey : !event.altKey;
 
-                const commandKeyCodes = keys.map((key) => key.toUpperCase().charCodeAt(0));
-                const allKeysPressed = recentKeyCodes.join('').includes(commandKeyCodes.join(''));
+                const commandKeyCodes = keys?.map((key) => key.toUpperCase().charCodeAt(0));
+                const allKeysPressed = commandKeyCodes
+                    ? recentKeyCodes.join('').includes(commandKeyCodes.join(''))
+                    : false;
 
                 if (allKeysPressed && isMetaPressed && isShiftPressed && isAltPressed) {
                     event.preventDefault();
@@ -288,10 +290,12 @@ export const commandGroupRanks = derived(groupRanksMap, ($groupRankTransformatio
     const initialRanks = {
         ...Object.fromEntries(groups.map((group) => [group, 0])),
         ungrouped: 9999,
-        databases: 3,
-        users: 2,
-        teams: 1,
-        navigation: -10,
+        databases: 50,
+        users: 40,
+        teams: 30,
+        projects: 20,
+        organizations: 10,
+        navigation: 0,
         help: -20,
         misc: -30
     } as CommandGroupRanks;

src/lib/commandCenter/panels/ai.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
     import Template from './template.svelte';
 
-    import { AvatarInitials, Code } from '$lib/components';
+    import { AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
     import { subPanels } from '../subPanels';
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
-    import CoolerAppwrite from '$lib/images/appwrite-cooler.svg';
     import { VARS } from '$lib/system';
 
     const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
@@ -62,7 +61,9 @@
 
                 answer.push({
                     type: 'code',
-                    value: nextCodeMatch[2],
+                    value: nextCodeMatch[2].startsWith('\n')
+                        ? nextCodeMatch[2].slice(1)
+                        : nextCodeMatch[2],
                     language: isLanguage(language) ? language : 'js'
                 });
 
@@ -82,6 +83,11 @@
     }
 
     $: answer = parseCompletion($completion);
+
+    function getInitials(name: string) {
+        const [first, last] = name.split(' ');
+        return `${first?.[0] ?? ''}${last?.[0] ?? ''}`;
+    }
 </script>
 
 <Template
@@ -98,9 +104,14 @@
               };
           })}
     clearOnCallback={false}
-    fullheight
-    --command-panel-max-height="40rem">
-    <div slot="search" />
+    on:keydown={(e) => {
+        e.detail.cancel();
+    }}
+    --min-height="40rem"
+    --max-height="52.5rem">
+    <div slot="search">
+        <span class="experimental border-gradient">EXPERIMENTAL</span>
+    </div>
 
     <div slot="option" let:option class="u-flex u-cross-center u-gap-8">
         <i class="icon-question-mark-circle" />
@@ -109,20 +120,28 @@
 
     {#if $isLoading || answer}
         <div class="content">
-            <div class="u-flex u-gap-8">
+            <div class="u-flex u-gap-8 u-cross-center">
+                <div class="avatar is-size-x-small">{getInitials($user.name)}</div>
+                <p class="u-opacity-75">{$input}</p>
+            </div>
+            <div class="u-flex u-gap-8 u-margin-block-start-24">
                 <div class="logo">
-                    <img src={CoolerAppwrite} alt="Appwrite logo" />
+                    <SvgIcon name="sparkles" type="color" />
                 </div>
                 <div class="answer">
                     {#if $isLoading && !$completion}
-                        <p>...</p>
+                        <LoadingDots />
                     {:else}
                         {#each answer as part}
                             {#if part.type === 'text'}
-                                <p>{part.value}</p>
+                                <p>{part.value.trimStart()}</p>
                             {:else if part.type === 'code'}
                                 {#key part.value}
-                                    <Code language={part.language} code={part.value} />
+                                    <div
+                                        class="u-margin-block-start-8"
+                                        style="margin-block-end: 1rem;">
+                                        <Code language={part.language} code={part.value} noMargin />
+                                    </div>
                                 {/key}
                             {/if}
                         {/each}
@@ -174,8 +193,16 @@
 </Template>
 
 <style lang="scss">
+    :global(.theme-dark) .content {
+        --logo-bg: #282a3b;
+    }
+
+    :global(.theme-light) .content {
+        --logo-bg: #f2f2f8;
+    }
+
     .content {
-        overflow-y: auto;
+        overflow: auto;
         padding: 1rem;
 
         .logo {
@@ -187,7 +214,7 @@
             flex-shrink: 0;
 
             border-radius: 0.25rem;
-            background: #282a3b;
+            background: var(--logo-bg);
         }
 
         .answer {
@@ -197,29 +224,6 @@
                 white-space: pre-wrap;
             }
         }
-
-        h2 {
-            color: hsl(var(--color-neutral-70));
-        }
-
-        .examples {
-            display: flex;
-            flex-direction: column;
-
-            li {
-                padding: 0.59375rem 0.5rem;
-
-                button {
-                    &:hover {
-                        opacity: 0.75;
-                    }
-
-                    i {
-                        color: hsl(var(--color-neutral-70));
-                    }
-                }
-            }
-        }
     }
 
     .footer {
@@ -229,4 +233,35 @@
             background-color: hsl(var(--color-neutral-150));
         }
     }
+
+    .experimental {
+        display: flex;
+        padding: 0.09375rem 0.25rem;
+        align-items: center;
+
+        color: var(--light-neutrals-30, #e8e9f0);
+        text-align: center;
+        font-family: Inter;
+        font-size: 0.625rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 150%; /* 0.9375rem */
+        letter-spacing: 0.075rem;
+        text-transform: uppercase;
+
+        background: rgba(240, 46, 101, 0.24);
+        --border-gradient: linear-gradient(
+                to bottom,
+                rgba(240, 46, 101, 0.48) 0%,
+                rgba(240, 46, 101, 0) 150%
+            )
+            border-box;
+        --border-size: 0.03rem;
+        --border-radius: 0.25rem;
+        border-radius: var(--border-radius);
+    }
+
+    :global(.theme-light) .experimental {
+        color: rgba(240, 46, 101, 1);
+    }
 </style>

src/lib/commandCenter/panels/root.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">
     import { debounce } from '$lib/helpers/debounce';
     import { isMac } from '$lib/helpers/platform';
-    import { commands, searchers, type Command } from '../commands';
+    import { commands, searchers, type Command, isKeyedCommand } from '../commands';
     import Template from './template.svelte';
 
     let search = '';
@@ -69,7 +69,7 @@
             {#if hasAlt(command)}
                 <kbd class="kbd"> {isMac() ? '⌥' : 'Alt'} </kbd>
             {/if}
-            {#if 'keys' in command}
+            {#if isKeyedCommand(command)}
                 {#each command.keys as key, i}
                     {@const hasNext = command.keys.length - 1 !== i}