From bbe022958d1a9c3f719ac9f5fac3f98f1932d054 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 22 Jan 2025 13:37:17 +0100
Subject: [PATCH 1/7] Command center to pink2

---
 src/lib/commandCenter/commands.ts             |  4 +-
 src/lib/commandCenter/panels/ai.svelte        | 83 ++++++++--------
 src/lib/commandCenter/panels/root.svelte      | 35 +++++--
 src/lib/commandCenter/panels/template.svelte  | 96 ++++++++-----------
 src/lib/commandCenter/searchers/functions.ts  |  5 +-
 src/routes/(console)/+layout.svelte           | 24 +++--
 .../organization-[organization]/+page.svelte  |  3 +-
 .../attributes/store.ts                       | 35 ++++---
 .../project-[project]/settings/+layout.svelte |  3 +-
 9 files changed, 157 insertions(+), 131 deletions(-)

diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts
index f1845a6bf..b191b892f 100644
--- a/src/lib/commandCenter/commands.ts
+++ b/src/lib/commandCenter/commands.ts
@@ -1,7 +1,7 @@
 import { debounce } from '$lib/helpers/debounce';
 import { isMac } from '$lib/helpers/platform';
 import { wizard } from '$lib/stores/wizard';
-import { onMount } from 'svelte';
+import { type ComponentType, onMount } from 'svelte';
 import { derived, writable } from 'svelte/store';
 import { nanoid } from 'nanoid/non-secure';
 import { trackEvent } from '$lib/actions/analytics';
@@ -49,7 +49,7 @@ type BaseCommand = {
     disabled?: boolean;
     forceEnable?: boolean;
     group?: CommandGroup;
-    icon?: string;
+    icon?: ComponentType;
     image?: string;
     rank?: number;
     nested?: boolean;
diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index da09311f7..0d4355cab 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Remarkable } from 'remarkable';
     import Template from './template.svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     const markdownInstance = new Remarkable();
 
@@ -227,47 +228,49 @@
         </div>
     {/if}
 
-    <div class="footer" slot="footer">
-        <div class="u-flex u-cross-center u-gap-4">
-            <AvatarInitials size={32} name={$user.name} />
-            <form
-                class="input-text-wrapper u-width-full-line"
-                style="--amount-of-buttons: 1;"
-                on:submit|preventDefault={(e) => {
-                    handleSubmit(e);
-                }}>
-                <!--  svelte-ignore a11y-autofocus -->
-                <input
-                    type="text"
-                    class="input-text"
-                    placeholder="Ask a question..."
-                    autofocus
-                    bind:value={$input}
-                    disabled={$isLoading} />
-                <div class="options-list">
-                    <button
-                        class="options-list-button"
-                        aria-label="ask AI"
-                        type="submit"
-                        disabled={!$input.trim() || $isLoading}>
-                        <span class="icon-arrow-sm-right" aria-hidden="true" />
-                    </button>
-                </div>
-            </form>
-        </div>
+    <Layout.Stack slot="footer">
+        <Layout.Stack gap="l">
+            <Layout.Stack direction="row" gap="s">
+                <AvatarInitials size={32} name={$user.name} />
+                <form
+                    class="input-text-wrapper u-width-full-line"
+                    style="--amount-of-buttons: 1;"
+                    on:submit|preventDefault={(e) => {
+                        handleSubmit(e);
+                    }}>
+                    <!--  svelte-ignore a11y-autofocus -->
+                    <input
+                        type="text"
+                        class="input-text"
+                        placeholder="Ask a question..."
+                        autofocus
+                        bind:value={$input}
+                        disabled={$isLoading} />
+                    <div class="options-list">
+                        <button
+                            class="options-list-button"
+                            aria-label="ask AI"
+                            type="submit"
+                            disabled={!$input.trim() || $isLoading}>
+                            <span class="icon-arrow-sm-right" aria-hidden="true" />
+                        </button>
+                    </div>
+                </form>
+            </Layout.Stack>
 
-        <div class="u-flex u-main-end u-cross-center u-gap-16 u-margin-block-start-16">
-            <div class="u-flex u-cross-center u-gap-4">
-                <kbd class="kbd">Enter</kbd>
-                <span>to search</span>
-            </div>
-            <div class="sep" />
-            <div class="u-flex u-cross-center u-gap-4">
-                <kbd class="kbd">Esc</kbd>
-                <span>to {$subPanels.length === 1 ? 'close' : 'go back'}</span>
-            </div>
-        </div>
-    </div>
+            <Layout.Stack direction="row" justifyContent="space-between" gap="xxl"
+                ><Layout.Stack direction="row" alignItems="center" gap="xxs">
+                    <kbd class="kbd">Enter</kbd> <span>to search</span></Layout.Stack>
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="flex-end"
+                    alignItems="center"
+                    gap="xxs">
+                    <kbd class="kbd">Esc</kbd>
+                    <span>to {$subPanels.length === 1 ? 'close' : 'go back'}</span></Layout.Stack>
+            </Layout.Stack>
+        </Layout.Stack>
+    </Layout.Stack>
 </Template>
 
 <style lang="scss">
diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte
index 3aca62151..1eef98382 100644
--- a/src/lib/commandCenter/panels/root.svelte
+++ b/src/lib/commandCenter/panels/root.svelte
@@ -8,6 +8,8 @@
     import { isMac } from '$lib/helpers/platform';
     import { commands, searchers, type Command, isKeyedCommand } from '../commands';
     import Template from './template.svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
 
     let search = '';
 
@@ -53,21 +55,28 @@
     };
 </script>
 
-<Template options={results} bind:search searchPlaceholder="Search for commands or content...">
-    <div slot="option" class="u-flex u-main-space-between content" let:option={command}>
-        <div class="u-flex u-gap-8 u-cross-center">
+<Template options={results} bind:search searchPlaceholder="Search...">
+    <Layout.Stack
+        slot="option"
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        let:option={command}>
+        <Layout.Stack direction="row" alignItems="center" gap="s">
             {#if command.image}
                 <img
                     src={`${base}/icons/${$app.themeInUse}/color/${command.image}.svg`}
                     alt={command.label} />
+            {:else if command.icon}
+                <Icon icon={command.icon} size="s" />
             {:else}
-                <i class="icon-{command.icon ?? 'arrow-sm-right'}" />
+                <Icon icon={IconArrowRight} size="s" />
             {/if}
             <span>
                 {command.label}
             </span>
-        </div>
-        <div class="u-flex u-gap-4 u-cross-center">
+        </Layout.Stack>
+        <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center" gap="s">
             {#if hasCtrl(command)}
                 <kbd class="kbd"> {isMac() ? '⌘' : 'Ctrl'} </kbd>
             {/if}
@@ -85,11 +94,19 @@
                         {key.toUpperCase()}
                     </kbd>
                     {#if hasNext}
-                        <span class="u-margin-inline-4" style:opacity={0.5}>then</span>
+                        <span class="then">then</span>
                     {/if}
                 {/each}
             {/if}
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
     <svelte:fragment slot="no-options">No commands found</svelte:fragment>
 </Template>
+
+<style>
+    .then {
+        color: var(--color-fgcolor-neutral-tertiary, #97979b);
+        font-size: var(--font-size-s, 14px);
+        font-weight: 400;
+    }
+</style>
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 31a14a33e..92d6d703c 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -8,6 +8,8 @@
     import { getCommandCenterCtx } from '../commandCenter.svelte';
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
+    import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Layout } from '@appwrite.io/pink-svelte';
 
     /* eslint no-undef: "off" */
     type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
@@ -294,7 +296,11 @@
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
                                     <div class="u-flex u-gap-8 u-cross-center">
-                                        <i class="icon-{item.icon ?? 'arrow-sm-right'}" />
+                                        {#if item.icon}
+                                            <Icon icon={item.icon} size="s" />
+                                        {:else}
+                                            <Icon icon={IconArrowRight} size="s" />
+                                        {/if}
                                         <span>
                                             {item.label}
                                         </span>
@@ -316,15 +322,17 @@
 
     <div class="footer">
         <slot name="footer">
-            <div class=" u-flex u-flex u-cross-center u-main-space-between">
-                <div class="u-flex u-cross-center u-gap-4">
-                    <kbd class="kbd">Enter</kbd> <span>to select</span>
-                </div>
-                <div class="u-flex u-cross-center u-gap-4">
+            <Layout.Stack direction="row" justifyContent="space-between"
+                ><Layout.Stack direction="row" alignItems="center" gap="xxs">
+                    <kbd class="kbd">Enter</kbd> <span>to select</span></Layout.Stack>
+                <Layout.Stack
+                    direction="row"
+                    justifyContent="flex-end"
+                    alignItems="center"
+                    gap="xxs">
                     <kbd class="kbd">Esc</kbd>
-                    <span>to {$subPanels.length > 1 ? 'go back' : 'close'}</span>
-                </div>
-            </div>
+                    <span>to {$subPanels.length > 1 ? 'go back' : 'close'}</span></Layout.Stack>
+            </Layout.Stack>
         </slot>
     </div>
 </div>
@@ -363,45 +371,16 @@
         animation: scale-up 150ms cubic-bezier(0.5, 1, 0.89, 1);
     }
 
-    // Theme
-    :global(.theme-light) .card {
-        --cmd-center-bg: hsl(var(--color-neutral-0));
-        --cmd-center-border: hsl(var(--color-neutral-10));
-        --cmd-center-shadow: 0px 16px 32px 0px rgba(55, 59, 77, 0.04);
-
-        --kbd-bg: hsl(var(--color-neutral-15));
-        --kbd-color: hsl(var(--color-neutral-60));
-
-        --crumb-bg: hsl(var(--color-neutral-10));
-        --crumb-color: hsl(var(--color-neutral-100));
-
-        --result-bg: hsl(var(--color-neutral-10));
-        --footer-bg: linear-gradient(180deg, #fff 0%, #e8e9f0 100%);
-
-        --icon-color: hsl(var(--color-neutral-50));
-        --label-color: hsl(var(--color-neutral-60));
-    }
-
-    :global(.theme-dark) .card {
-        --cmd-center-bg: hsl(var(--color-neutral-90));
-        --cmd-center-border: hsl(var(--color-neutral-80));
-        --cmd-center-shadow: 0px 16px 32px 0px #14141f;
-
-        --kbd-bg: hsl(var(--color-neutral-80));
-        --kbd-color: hsl(var(--color-neutral-15));
-
-        --crumb-bg: hsl(var(--color-neutral-150));
-        --crumb-color: hsl(var(--color-neutral-30));
-
-        --result-bg: hsl(var(--color-neutral-85));
-        --footer-bg: linear-gradient(
-            180deg,
-            hsl(var(--color-neutral-100)) 0%,
-            hsl(var(--color-neutral-85)) 100%
-        );
-
-        --icon-color: hsl(var(--color-neutral-70));
-        --label-color: hsl(var(--color-neutral-15));
+    .card {
+        --cmd-center-bg: var(--color-bgcolor-neutral-primary, #fff);
+        --footer-bg: var(--color-bgcolor-neutral-primary, #fff);
+        --cmd-center-border: var(--color-border-neutral, #ededf0);
+        --result-bg: var(--color-overlay-neutral-hover, rgba(25, 25, 28, 0.03));
+        --kbd-bg: var(--color-overlay-on-neutral, rgba(0, 0, 0, 0.06));
+        --kbd-color: var(--color-fgcolor-neutral-secondary, #56565c);
+        --icon-color: var(--color-fgcolor-neutral-tertiary, #97979b);
+        --label-color: var(--color-fgColor-neutral-secondary, #56565c);
+        --crumb-color: var(--color-fgColor-neutral-secondary, #56565c);
     }
 
     // Elements
@@ -420,11 +399,14 @@
         max-height: min(calc(100vh - var(--top) - 4rem), var(--max-height, 32rem));
         overflow: hidden;
         padding: 0;
+        box-shadow:
+            0 56px 32px 0 rgba(0, 0, 0, 0.02),
+            0 6px 14px 0 rgba(0, 0, 0, 0.04),
+            0 24px 25px 0 rgba(0, 0, 0, 0.03);
 
         border-radius: 0.5rem;
         border: 1px solid var(--cmd-center-border);
         background: var(--cmd-center-bg);
-        box-shadow: var(--cmd-center-shadow);
         backdrop-filter: blur(6px);
 
         &.fullheight {
@@ -434,7 +416,7 @@
         :global(.kbd) {
             color: var(--kbd-color);
             background-color: var(--kbd-bg);
-            padding-inline: 0.25rem;
+            padding-inline: var(--space-2, 4px);
         }
     }
 
@@ -444,7 +426,7 @@
         align-items: center;
         width: 100%;
 
-        border-bottom: 1px solid hsl(var(--color-border));
+        border-bottom: 1px solid var(--color-border-neutral, #ededf0);
         font-size: 16px;
         padding: 1rem;
 
@@ -465,7 +447,6 @@
         gap: 0.25rem;
 
         border-radius: 0.25rem;
-        background: var(--crumb-bg);
         color: var(--crumb-color);
         text-align: center;
         font-family: Inter;
@@ -493,13 +474,14 @@
             padding: 1rem;
 
             .group {
-                color: hsl(var(--color-neutral-70));
+                color: var(--color-fgcolor-neutral-secondary, #56565c);
                 margin-inline-start: 0.25rem;
                 margin-block-end: 0.25rem;
                 position: relative;
                 z-index: 10;
 
-                font-size: 10px !important;
+                font-size: var(--font-size-xs, 12px);
+                font-weight: 500;
 
                 &:not(:first-child) {
                     margin-block-start: 1rem;
@@ -560,7 +542,7 @@
                         content: '';
                         position: absolute;
                         left: -8px;
-                        border-left: 1px solid hsl(var(--color-border));
+                        border-left: 1px solid var(--color-border-neutral, #ededf0);
                         height: 100%;
                     }
                 }
@@ -570,8 +552,8 @@
 
     .footer {
         background: var(--footer-bg);
-        border-top: 1px solid hsl(var(--color-border));
+        border-top: 1px solid var(--color-border-neutral, #ededf0);
 
-        padding: 0.5rem 1rem;
+        padding: 0.75rem 1rem;
     }
 </style>
diff --git a/src/lib/commandCenter/searchers/functions.ts b/src/lib/commandCenter/searchers/functions.ts
index 174df48aa..0a22eedc9 100644
--- a/src/lib/commandCenter/searchers/functions.ts
+++ b/src/lib/commandCenter/searchers/functions.ts
@@ -7,6 +7,7 @@ import type { Models } from '@appwrite.io/console';
 import { page } from '$app/stores';
 import { showCreateDeployment } from '$routes/(console)/project-[project]/functions/function-[function]/store';
 import { base } from '$app/paths';
+import { IconLightningBolt, IconPlus } from '@appwrite.io/pink-icons-svelte';
 
 const getFunctionCommand = (fn: Models.Function, projectId: string) => {
     return {
@@ -15,7 +16,7 @@ const getFunctionCommand = (fn: Models.Function, projectId: string) => {
             goto(`${base}/project-${projectId}/functions/function-${fn.$id}`);
         },
         group: 'functions',
-        icon: 'lightning-bolt'
+        icon: IconLightningBolt
     } as const;
 };
 
@@ -41,7 +42,7 @@ export const functionsSearcher = (async (query: string) => {
                     showCreateDeployment.set(true);
                 },
                 group: 'functions',
-                icon: 'plus'
+                icon: IconPlus
             },
             {
                 label: 'Go to deployments',
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index dee3bc09b..60b9d6b35 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -46,6 +46,16 @@
     import { base } from '$app/paths';
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert } from '$lib/components';
+    import {
+        IconAnnotation,
+        IconArrowRight,
+        IconBookOpen,
+        IconDiscord,
+        IconPencil,
+        IconQuestionMarkCircle,
+        IconSparkles,
+        IconSwitchHorizontal
+    } from '@appwrite.io/pink-icons-svelte';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -81,7 +91,7 @@
                 addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
-            icon: 'sparkles',
+            icon: IconSparkles,
             disabled: !isAssistantEnabled
         },
         {
@@ -98,7 +108,7 @@
                 window.open('https://appwrite.io/docs', '_blank');
             },
             group: 'help',
-            icon: 'book-open'
+            icon: IconBookOpen
         },
         {
             label: 'Contact support',
@@ -106,7 +116,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: 'question-mark-circle'
+            icon: IconQuestionMarkCircle
         },
         {
             label: 'Send feedback',
@@ -114,7 +124,7 @@
                 feedback.toggleFeedback();
             },
             group: 'help',
-            icon: 'annotation'
+            icon: IconAnnotation
         },
         {
             label: 'Join Discord community',
@@ -122,7 +132,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: 'discord'
+            icon: IconDiscord
         },
         ...(['auto', 'dark', 'light'] as const).map((theme) => {
             return {
@@ -136,7 +146,7 @@
                     });
                 },
                 group: 'misc',
-                icon: 'switch-horizontal',
+                icon: IconSwitchHorizontal,
                 keys: ['t', theme[0]]
             } as const;
         }),
@@ -158,7 +168,7 @@
                     },
                     disabled: !$project?.$id,
                     group: 'security',
-                    icon: 'pencil'
+                    icon: IconPencil
                 }) as const
         ),
         // Settings
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index 76607b429..7134eaf63 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -33,6 +33,7 @@
     import { organization } from '$lib/stores/organization';
     import { canWriteProjects } from '$lib/stores/roles';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -94,7 +95,7 @@
             keys: ['c'],
             disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteProjects,
             group: 'projects',
-            icon: 'plus'
+            icon: IconPlus
         }
     ]);
 
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
index 05fa8b81c..bab27d07c 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -1,4 +1,4 @@
-import type { SvelteComponent } from 'svelte';
+import type { ComponentType, SvelteComponent } from 'svelte';
 import { writable } from 'svelte/store';
 import Boolean, { submitBoolean, updateBoolean } from './boolean.svelte';
 import Email, { submitEmail, updateEmail } from './email.svelte';
@@ -11,6 +11,17 @@ import Url, { submitUrl, updateUrl } from './url.svelte';
 import Datetime, { submitDatetime, updateDatetime } from './datetime.svelte';
 import type { Attributes } from '../store';
 import Relationship, { submitRelationship, updateRelationship } from './relationship.svelte';
+import {
+    IconCalendar,
+    IconHashtag,
+    IconLink,
+    IconLocationMarker,
+    IconMail,
+    IconRelationship,
+    IconText,
+    IconToggle,
+    IconViewList
+} from '@appwrite.io/pink-icons-svelte';
 
 export type Option = {
     name:
@@ -39,7 +50,7 @@ export type Option = {
         originalKey: string
     ) => Promise<void>;
     format?: 'email' | 'ip' | 'url' | 'enum';
-    icon: string;
+    icon: ComponentType;
 };
 
 export const attributeOptions: Option[] = [
@@ -49,7 +60,7 @@ export const attributeOptions: Option[] = [
         type: 'string',
         create: submitString,
         update: updateString,
-        icon: 'text'
+        icon: IconText
     },
     {
         name: 'Integer',
@@ -57,7 +68,7 @@ export const attributeOptions: Option[] = [
         type: 'integer',
         create: submitInteger,
         update: updateInteger,
-        icon: 'hashtag'
+        icon: IconHashtag
     },
     {
         name: 'Float',
@@ -65,7 +76,7 @@ export const attributeOptions: Option[] = [
         type: 'double',
         create: submitFloat,
         update: updateFloat,
-        icon: 'hashtag'
+        icon: IconHashtag
     },
     {
         name: 'Boolean',
@@ -73,7 +84,7 @@ export const attributeOptions: Option[] = [
         type: 'boolean',
         create: submitBoolean,
         update: updateBoolean,
-        icon: 'toggle'
+        icon: IconToggle
     },
     {
         name: 'Datetime',
@@ -81,7 +92,7 @@ export const attributeOptions: Option[] = [
         type: 'datetime',
         create: submitDatetime,
         update: updateDatetime,
-        icon: 'calendar'
+        icon: IconCalendar
     },
     {
         name: 'Email',
@@ -90,7 +101,7 @@ export const attributeOptions: Option[] = [
         format: 'email',
         create: submitEmail,
         update: updateEmail,
-        icon: 'mail'
+        icon: IconMail
     },
     {
         name: 'IP',
@@ -99,7 +110,7 @@ export const attributeOptions: Option[] = [
         format: 'ip',
         create: submitIp,
         update: updateIp,
-        icon: 'location-marker'
+        icon: IconLocationMarker
     },
     {
         name: 'URL',
@@ -108,7 +119,7 @@ export const attributeOptions: Option[] = [
         format: 'url',
         create: submitUrl,
         update: updateUrl,
-        icon: 'link'
+        icon: IconLink
     },
     {
         name: 'Enum',
@@ -117,7 +128,7 @@ export const attributeOptions: Option[] = [
         format: 'enum',
         create: submitEnum,
         update: updateEnum,
-        icon: 'view-list'
+        icon: IconViewList
     },
     {
         name: 'Relationship',
@@ -125,7 +136,7 @@ export const attributeOptions: Option[] = [
         type: 'relationship',
         create: submitRelationship,
         update: updateRelationship,
-        icon: 'relationship'
+        icon: IconRelationship
     }
 ];
 
diff --git a/src/routes/(console)/project-[project]/settings/+layout.svelte b/src/routes/(console)/project-[project]/settings/+layout.svelte
index da22182b3..a03f9545e 100644
--- a/src/routes/(console)/project-[project]/settings/+layout.svelte
+++ b/src/routes/(console)/project-[project]/settings/+layout.svelte
@@ -3,11 +3,12 @@
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { canWriteProjects } from '$lib/stores/roles';
     import { openWebhooksWizard } from './webhooks/+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
             label: 'Create webhook',
-            icon: 'plus',
+            icon: IconPlus,
             keys: $page.url.pathname.includes('webhooks') ? ['c'] : ['c', 'w'],
             callback: () => {
                 openWebhooksWizard();

From f8750b013f5f73d44821bc49b3a0bd423f71a860 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 22 Jan 2025 13:43:37 +0100
Subject: [PATCH 2/7] Update icons

---
 src/routes/(console)/+layout.svelte                | 14 ++++++++------
 .../project-[project]/storage/+layout.svelte       |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 60b9d6b35..4584c5f80 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -52,6 +52,7 @@
         IconBookOpen,
         IconDiscord,
         IconPencil,
+        IconPlus,
         IconQuestionMarkCircle,
         IconSparkles,
         IconSwitchHorizontal
@@ -91,7 +92,7 @@
                 addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
-            icon: IconSparkles,
+            icon: IconArrowRight,
             disabled: !isAssistantEnabled
         },
         {
@@ -100,7 +101,8 @@
                 isCloud ? goto(`${base}/create-organization`) : newOrgModal.set(true);
             },
             keys: ['c', 'o'],
-            group: 'organizations'
+            group: 'organizations',
+            icon: IconPlus
         },
         {
             label: 'Open documentation',
@@ -108,7 +110,7 @@
                 window.open('https://appwrite.io/docs', '_blank');
             },
             group: 'help',
-            icon: IconBookOpen
+            icon: IconArrowRight
         },
         {
             label: 'Contact support',
@@ -116,7 +118,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: IconQuestionMarkCircle
+            icon: IconArrowRight
         },
         {
             label: 'Send feedback',
@@ -124,7 +126,7 @@
                 feedback.toggleFeedback();
             },
             group: 'help',
-            icon: IconAnnotation
+            icon: IconArrowRight
         },
         {
             label: 'Join Discord community',
@@ -132,7 +134,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: IconDiscord
+            icon: IconArrowRight
         },
         ...(['auto', 'dark', 'light'] as const).map((theme) => {
             return {
diff --git a/src/routes/(console)/project-[project]/storage/+layout.svelte b/src/routes/(console)/project-[project]/storage/+layout.svelte
index 2b56ac223..95f5df0ce 100644
--- a/src/routes/(console)/project-[project]/storage/+layout.svelte
+++ b/src/routes/(console)/project-[project]/storage/+layout.svelte
@@ -7,6 +7,7 @@
     import { canWriteBuckets } from '$lib/stores/roles';
     import { project } from '../store';
     import { showCreateBucket } from './+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
@@ -18,7 +19,7 @@
                 $showCreateBucket = true;
             },
             keys: $page.url.pathname.endsWith('storage') ? ['c'] : ['c', 'b'],
-            icon: 'plus',
+            icon: IconPlus,
             group: 'buckets',
             disabled: !$canWriteBuckets
         },

From 7189dad62de27332e667b9aaad0b52b06a6394a8 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 22 Jan 2025 13:43:50 +0100
Subject: [PATCH 3/7] Update icons

---
 src/routes/(console)/+layout.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 4584c5f80..1f2e5b4b6 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -47,14 +47,9 @@
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert } from '$lib/components';
     import {
-        IconAnnotation,
         IconArrowRight,
-        IconBookOpen,
-        IconDiscord,
         IconPencil,
         IconPlus,
-        IconQuestionMarkCircle,
-        IconSparkles,
         IconSwitchHorizontal
     } from '@appwrite.io/pink-icons-svelte';
 

From 4d04d4746fd06f7f5c0163ee9194274dff882e61 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 27 Jan 2025 14:52:11 +0100
Subject: [PATCH 4/7] Update colors and icons

---
 src/lib/commandCenter/panels/root.svelte     |  6 +++---
 src/lib/commandCenter/panels/template.svelte | 12 +++++++++---
 src/routes/(console)/+layout.svelte          | 16 ++++++++++------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte
index 1eef98382..8d626391e 100644
--- a/src/lib/commandCenter/panels/root.svelte
+++ b/src/lib/commandCenter/panels/root.svelte
@@ -9,7 +9,7 @@
     import { commands, searchers, type Command, isKeyedCommand } from '../commands';
     import Template from './template.svelte';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
-    import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
 
     let search = '';
 
@@ -68,9 +68,9 @@
                     src={`${base}/icons/${$app.themeInUse}/color/${command.image}.svg`}
                     alt={command.label} />
             {:else if command.icon}
-                <Icon icon={command.icon} size="s" />
+                <Icon icon={command.icon} size="s" color="--color-fgcolor-neutral-tertiary" />
             {:else}
-                <Icon icon={IconArrowRight} size="s" />
+                <Icon icon={IconArrowSmRight} size="s" color="--color-fgcolor-neutral-tertiary" />
             {/if}
             <span>
                 {command.label}
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 92d6d703c..1e6d4011e 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -8,7 +8,7 @@
     import { getCommandCenterCtx } from '../commandCenter.svelte';
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
-    import { IconArrowRight } from '@appwrite.io/pink-icons-svelte';
+    import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
 
     /* eslint no-undef: "off" */
@@ -297,9 +297,15 @@
                                 <slot name="option" option={castOption(item)}>
                                     <div class="u-flex u-gap-8 u-cross-center">
                                         {#if item.icon}
-                                            <Icon icon={item.icon} size="s" />
+                                            <Icon
+                                                icon={item.icon}
+                                                size="s"
+                                                color="--color-fgcolor-neutral-tertiary" />
                                         {:else}
-                                            <Icon icon={IconArrowRight} size="s" />
+                                            <Icon
+                                                icon={IconArrowSmRight}
+                                                size="s"
+                                                color="--color-fgcolor-neutral-tertiary" />
                                         {/if}
                                         <span>
                                             {item.label}
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 1f2e5b4b6..3fdefe218 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -47,9 +47,13 @@
     import { canSeeProjects } from '$lib/stores/roles';
     import { BottomModalAlert } from '$lib/components';
     import {
-        IconArrowRight,
+        IconAnnotation,
+        IconBookOpen,
+        IconDiscord,
         IconPencil,
         IconPlus,
+        IconQuestionMarkCircle,
+        IconSparkles,
         IconSwitchHorizontal
     } from '@appwrite.io/pink-icons-svelte';
 
@@ -87,7 +91,7 @@
                 addSubPanel(AIPanel);
             },
             keys: ['a', 'i'],
-            icon: IconArrowRight,
+            icon: IconSparkles,
             disabled: !isAssistantEnabled
         },
         {
@@ -105,7 +109,7 @@
                 window.open('https://appwrite.io/docs', '_blank');
             },
             group: 'help',
-            icon: IconArrowRight
+            icon: IconBookOpen
         },
         {
             label: 'Contact support',
@@ -113,7 +117,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: IconArrowRight
+            icon: IconQuestionMarkCircle
         },
         {
             label: 'Send feedback',
@@ -121,7 +125,7 @@
                 feedback.toggleFeedback();
             },
             group: 'help',
-            icon: IconArrowRight
+            icon: IconAnnotation
         },
         {
             label: 'Join Discord community',
@@ -129,7 +133,7 @@
                 window.open('https://appwrite.io/discord', '_blank');
             },
             group: 'help',
-            icon: IconArrowRight
+            icon: IconDiscord
         },
         ...(['auto', 'dark', 'light'] as const).map((theme) => {
             return {

From ef12a8fed431cd5ab1a700bff466f755549e5ace Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 27 Jan 2025 16:35:09 +0100
Subject: [PATCH 5/7] Switch to Keyboard component

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 43 ++++++++++++++-----
 src/lib/commandCenter/panels/root.svelte      | 12 +++---
 src/lib/commandCenter/panels/template.svelte  |  6 +--
 .../project-[project]/auth/+layout.svelte     |  5 ++-
 .../messaging/+layout.svelte                  |  3 +-
 .../project-[project]/overview/+layout.svelte |  5 ++-
 .../storage/bucket-[bucket]/+layout.svelte    |  9 ++--
 8 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index c3e186bd4..992e4df86 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "1.0.0-next.7",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@52b288f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@4a73ad4",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef4bd68ad..715a01002 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: 1.0.0-next.7
         version: 1.0.0-next.7(svelte@4.2.19)
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@52b288f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@52b288f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@4a73ad4
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@4a73ad4(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -223,8 +223,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@52b288f3f73c311876a749a006b728ee84c67127':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@52b288f3f73c311876a749a006b728ee84c67127}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a73ad48c64ce1078565d893a9c91d887d05d90a':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a73ad48c64ce1078565d893a9c91d887d05d90a}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -232,8 +232,8 @@ packages:
   '@appwrite.io/pink-icons@0.25.0':
     resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@52b288f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@52b288f}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@4a73ad4':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@4a73ad4}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -691,6 +691,11 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
 
+  '@melt-ui/svelte@0.86.2':
+    resolution: {integrity: sha512-wRVN603oIt1aXvx2QRmKqVDJgTScSvr/WJLLokkD8c4QzHgn6pfpPtUKmhV6Dvkk+OY89OG/1Irkd6ouA50Ztw==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4087,17 +4092,18 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@52b288f3f73c311876a749a006b728ee84c67127(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a73ad48c64ce1078565d893a9c91d887d05d90a(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
   '@appwrite.io/pink-icons@0.25.0': {}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@52b288f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@4a73ad4(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@52b288f3f73c311876a749a006b728ee84c67127(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a73ad48c64ce1078565d893a9c91d887d05d90a(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
-      '@melt-ui/svelte': 0.83.0(svelte@4.2.19)
+      '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
+      '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
       pretty-bytes: 6.1.1
       react-dom: 18.3.1(react@18.3.1)
       shiki: 1.27.2
@@ -4617,6 +4623,13 @@ snapshots:
       magic-string: 0.30.17
       svelte: 4.2.19
 
+  '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)':
+    dependencies:
+      '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
+      estree-walker: 3.0.3
+      magic-string: 0.30.17
+      svelte: 4.2.19
+
   '@melt-ui/svelte@0.83.0(svelte@4.2.19)':
     dependencies:
       '@floating-ui/core': 1.6.9
@@ -4627,6 +4640,16 @@ snapshots:
       nanoid: 5.0.9
       svelte: 4.2.19
 
+  '@melt-ui/svelte@0.86.2(svelte@4.2.19)':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/dom': 1.6.13
+      '@internationalized/date': 3.6.0
+      dequal: 2.0.3
+      focus-trap: 7.6.4
+      nanoid: 5.0.9
+      svelte: 4.2.19
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
diff --git a/src/lib/commandCenter/panels/root.svelte b/src/lib/commandCenter/panels/root.svelte
index 8d626391e..5a1230618 100644
--- a/src/lib/commandCenter/panels/root.svelte
+++ b/src/lib/commandCenter/panels/root.svelte
@@ -8,7 +8,7 @@
     import { isMac } from '$lib/helpers/platform';
     import { commands, searchers, type Command, isKeyedCommand } from '../commands';
     import Template from './template.svelte';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Keyboard, Layout } from '@appwrite.io/pink-svelte';
     import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
 
     let search = '';
@@ -78,21 +78,19 @@
         </Layout.Stack>
         <Layout.Stack direction="row" justifyContent="flex-end" alignItems="center" gap="s">
             {#if hasCtrl(command)}
-                <kbd class="kbd"> {isMac() ? '⌘' : 'Ctrl'} </kbd>
+                <Keyboard autoWidth={!isMac()} key={isMac() ? '⌘' : 'Ctrl'} />
             {/if}
             {#if hasShift(command)}
-                <kbd class="kbd"> {isMac() ? '⇧' : 'Shift'} </kbd>
+                <Keyboard autoWidth={!isMac()} key={isMac() ? '⇧' : 'Shift'} />
             {/if}
             {#if hasAlt(command)}
-                <kbd class="kbd"> {isMac() ? '⌥' : 'Alt'} </kbd>
+                <Keyboard autoWidth={!isMac()} key={isMac() ? '⌥' : 'Alt'} />
             {/if}
             {#if isKeyedCommand(command)}
                 {#each command.keys as key, i}
                     {@const hasNext = command.keys.length - 1 !== i}
 
-                    <kbd class="kbd">
-                        {key.toUpperCase()}
-                    </kbd>
+                    <Keyboard key={key.toUpperCase()} />
                     {#if hasNext}
                         <span class="then">then</span>
                     {/if}
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 1e6d4011e..b580a9b90 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -9,7 +9,7 @@
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
     import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon, Keyboard, Layout } from '@appwrite.io/pink-svelte';
 
     /* eslint no-undef: "off" */
     type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
@@ -330,13 +330,13 @@
         <slot name="footer">
             <Layout.Stack direction="row" justifyContent="space-between"
                 ><Layout.Stack direction="row" alignItems="center" gap="xxs">
-                    <kbd class="kbd">Enter</kbd> <span>to select</span></Layout.Stack>
+                    <Keyboard key="Enter" autoWidth={true} /> <span>to select</span></Layout.Stack>
                 <Layout.Stack
                     direction="row"
                     justifyContent="flex-end"
                     alignItems="center"
                     gap="xxs">
-                    <kbd class="kbd">Esc</kbd>
+                    <Keyboard key="Esc" autoWidth={true} />
                     <span>to {$subPanels.length > 1 ? 'go back' : 'close'}</span></Layout.Stack>
             </Layout.Stack>
         </slot>
diff --git a/src/routes/(console)/project-[project]/auth/+layout.svelte b/src/routes/(console)/project-[project]/auth/+layout.svelte
index 915225055..d183f1257 100644
--- a/src/routes/(console)/project-[project]/auth/+layout.svelte
+++ b/src/routes/(console)/project-[project]/auth/+layout.svelte
@@ -10,6 +10,7 @@
     import { project } from '../store';
     import { showCreateUser } from './+page.svelte';
     import { showCreateTeam } from './teams/+page.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
@@ -22,7 +23,7 @@
             },
             keys: $page.url.pathname.endsWith('auth') ? ['c'] : ['c', 'u'],
             group: 'users',
-            icon: 'plus',
+            icon: IconPlus,
             rank: $page.url.pathname.endsWith('auth') ? 10 : 0,
             disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteUsers
         },
@@ -37,7 +38,7 @@
             keys: $page.url.pathname.endsWith('teams') ? ['c'] : ['c', 't'],
 
             group: 'teams',
-            icon: 'plus',
+            icon: IconPlus,
             rank: $page.url.pathname.endsWith('teams') ? 10 : 0,
             disabled: ($readOnly && !GRACE_PERIOD_OVERRIDE) || !$canWriteTeams
         },
diff --git a/src/routes/(console)/project-[project]/messaging/+layout.svelte b/src/routes/(console)/project-[project]/messaging/+layout.svelte
index 50ee249dc..2a7a130c2 100644
--- a/src/routes/(console)/project-[project]/messaging/+layout.svelte
+++ b/src/routes/(console)/project-[project]/messaging/+layout.svelte
@@ -14,6 +14,7 @@
     import { topicsSearcher } from '$lib/commandCenter/searchers/topics';
     import { canWriteMessages } from '$lib/stores/roles';
     import { project } from '../store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     // TODO: finalize the commands
     $: $registerCommands([
@@ -23,7 +24,7 @@
             callback() {
                 addSubPanel(CreateMessagePanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'messaging',
             disabled: !$canWriteMessages
         },
diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index d0f59d1fc..7bbcc2112 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -27,6 +27,7 @@
     import type { Metric } from '$lib/sdk/usage';
     import { periodToDates } from '$lib/layout/usage.svelte';
     import { canWriteProjects } from '$lib/stores/roles';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     $: projectId = $page.params.project;
     $: path = `${base}/project-${projectId}/overview`;
@@ -56,13 +57,13 @@
             callback() {
                 addSubPanel(PlatformsPanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'integrations',
             disabled: !$canWriteProjects
         },
         {
             label: 'Create API Key',
-            icon: 'plus',
+            icon: IconPlus,
             callback() {
                 createApiKey();
             },
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+layout.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+layout.svelte
index 06189da1f..2dba92726 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+layout.svelte
@@ -12,6 +12,7 @@
     import { project } from '../../store';
     import { showCreateFile } from './+page.svelte';
     import { bucket } from './store';
+    import { IconKey, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
 
     $: $registerCommands([
         {
@@ -24,7 +25,7 @@
             },
             keys: $page.url.pathname.endsWith($bucket.$id) ? ['c'] : ['c', 'f'],
             group: 'files',
-            icon: 'plus'
+            icon: IconPlus
         },
         {
             label: 'Permissions',
@@ -35,7 +36,7 @@
                 scrollBy({ top: -100 });
             },
             group: 'buckets',
-            icon: 'key',
+            icon: IconKey,
             disabled: !$canWriteBuckets
         },
         {
@@ -46,7 +47,7 @@
                 );
             },
             group: 'buckets',
-            icon: 'puzzle',
+            icon: IconPuzzle,
             disabled: !$canWriteBuckets
         },
         {
@@ -58,7 +59,7 @@
                 scrollBy({ top: -100 });
             },
             group: 'buckets',
-            icon: 'lock-closed',
+            icon: IconLockClosed,
             disabled: !$canWriteBuckets
         },
         {

From 7f112ab99420a2329a2bff680ba83ad79da4df77 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 27 Jan 2025 16:37:23 +0100
Subject: [PATCH 6/7] Switch to Keyboard component

---
 src/lib/commandCenter/panels/ai.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 0d4355cab..e777bfa63 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Remarkable } from 'remarkable';
     import Template from './template.svelte';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Keyboard, Layout } from '@appwrite.io/pink-svelte';
 
     const markdownInstance = new Remarkable();
 
@@ -260,13 +260,13 @@
 
             <Layout.Stack direction="row" justifyContent="space-between" gap="xxl"
                 ><Layout.Stack direction="row" alignItems="center" gap="xxs">
-                    <kbd class="kbd">Enter</kbd> <span>to search</span></Layout.Stack>
+                    <Keyboard key="Enter" autoWidth={true} /> <span>to search</span></Layout.Stack>
                 <Layout.Stack
                     direction="row"
                     justifyContent="flex-end"
                     alignItems="center"
                     gap="xxs">
-                    <kbd class="kbd">Esc</kbd>
+                    <Keyboard key="Esc" autoWidth={true} />
                     <span>to {$subPanels.length === 1 ? 'close' : 'go back'}</span></Layout.Stack>
             </Layout.Stack>
         </Layout.Stack>

From 0aec566f7bfd57e39c5ebb6a09f488dd4c94aefa Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 6 Feb 2025 13:49:07 +0100
Subject: [PATCH 7/7] Update to stack

---
 src/lib/commandCenter/panels/template.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index b580a9b90..a39946a7c 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -295,7 +295,7 @@
                                 on:mouseleave={getOptionBlurHandler()}
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
-                                    <div class="u-flex u-gap-8 u-cross-center">
+                                    <Layout.Stack direction="column" gap="s">
                                         {#if item.icon}
                                             <Icon
                                                 icon={item.icon}
@@ -310,7 +310,7 @@
                                         <span>
                                             {item.label}
                                         </span>
-                                    </div>
+                                    </Layout.Stack>
                                 </slot>
                             </button>
                         </li>