From 0b21fe415eda29f29af61313f222d946f5eeb570 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 25 Jul 2023 12:15:04 +0100
Subject: [PATCH] storage commands

---
 src/lib/commandCenter/commandCenter.svelte    |   7 +-
 src/lib/commandCenter/commands.ts             |   7 +-
 src/lib/commandCenter/panels/buckets.svelte   |   9 ++
 src/lib/commandCenter/panels/files.svelte     |   9 ++
 src/lib/commandCenter/panels/index.ts         |  12 ++
 src/lib/commandCenter/panels/template.svelte  |  28 ++---
 src/lib/commandCenter/searchers/buckets.ts    |  81 +++++++++++++
 src/lib/commandCenter/searchers/files.ts      |  27 +++++
 src/lib/commandCenter/searchers/index.ts      |   2 +
 src/lib/commandCenter/searchers/users.ts      |   2 +-
 .../console/project-[project]/+layout.svelte  |  17 ++-
 .../project-[project]/auth/+layout.svelte     |   2 +-
 .../databases/+layout.svelte                  |   2 +-
 .../database-[database]/+layout.svelte        |   2 +-
 .../collection-[collection]/+layout.svelte    |   5 +-
 .../project-[project]/overview/+layout.svelte |   5 +-
 .../project-[project]/settings/+layout.svelte |   5 +-
 .../settings/migrations/+page.svelte          |   7 +-
 .../settings/webhooks/+page.svelte            |   6 +-
 .../project-[project]/storage/+layout.svelte  |  11 +-
 .../storage/bucket-[bucket]/+layout.svelte    | 106 ++++++++++++++++++
 .../storage/bucket-[bucket]/+page.svelte      |  18 ++-
 .../bucket-[bucket]/settings/+page.svelte     |   6 +-
 23 files changed, 309 insertions(+), 67 deletions(-)
 create mode 100644 src/lib/commandCenter/panels/buckets.svelte
 create mode 100644 src/lib/commandCenter/panels/files.svelte
 create mode 100644 src/lib/commandCenter/searchers/buckets.ts
 create mode 100644 src/lib/commandCenter/searchers/files.ts

diff --git a/src/lib/commandCenter/commandCenter.svelte b/src/lib/commandCenter/commandCenter.svelte
index 5fc9aad48..3bae64543 100644
--- a/src/lib/commandCenter/commandCenter.svelte
+++ b/src/lib/commandCenter/commandCenter.svelte
@@ -24,7 +24,6 @@
 
 <script lang="ts">
     import { dev } from '$app/environment';
-    import { afterNavigate } from '$app/navigation';
     import { portal } from '$lib/actions/portal';
     import { last } from '$lib/helpers/array';
     import { debounce } from '$lib/helpers/debounce';
@@ -61,10 +60,6 @@
         }
     }
 
-    afterNavigate(() => {
-        clearSubPanels();
-    });
-
     const ctx = setCommandCenterCtx({
         isInitialPanel: true,
         open: false
@@ -95,6 +90,8 @@
         }
         $commandCenterKeyDownHandler(e);
     };
+
+    $: console.log($subPanels);
 </script>
 
 <svelte:window on:mousedown={handleBlur} on:keydown={handleKeydown} />
diff --git a/src/lib/commandCenter/commands.ts b/src/lib/commandCenter/commands.ts
index a1cfac8f1..5fd52af27 100644
--- a/src/lib/commandCenter/commands.ts
+++ b/src/lib/commandCenter/commands.ts
@@ -25,7 +25,9 @@ const groups = [
     'indexes',
     'documents',
     'teams',
-    'security'
+    'security',
+    'buckets',
+    'files'
 ] as const;
 
 export type CommandGroup = (typeof groups)[number];
@@ -39,6 +41,7 @@ type BaseCommand = {
     icon?: string;
     rank?: number;
     nested?: boolean;
+    keepOpen?: boolean;
 };
 
 type KeyedCommand = BaseCommand & {
@@ -152,7 +155,7 @@ export const commandCenterKeyDownHandler = derived(
 
         const rankAndExecute = debounce(() => {
             const command = getHighestPriorityCommand();
-            command.callback();
+            command?.callback();
             reset.immediate();
         }, 200);
 
diff --git a/src/lib/commandCenter/panels/buckets.svelte b/src/lib/commandCenter/panels/buckets.svelte
new file mode 100644
index 000000000..06859101c
--- /dev/null
+++ b/src/lib/commandCenter/panels/buckets.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { initSearcher } from '../commands';
+    import { bucketSearcher } from '../searchers';
+    import Template from './template.svelte';
+
+    const { search, results } = initSearcher(bucketSearcher);
+</script>
+
+<Template options={$results} bind:search={$search} />
diff --git a/src/lib/commandCenter/panels/files.svelte b/src/lib/commandCenter/panels/files.svelte
new file mode 100644
index 000000000..8bd029c2d
--- /dev/null
+++ b/src/lib/commandCenter/panels/files.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { initSearcher } from '../commands';
+    import { fileSearcher } from '../searchers';
+    import Template from './template.svelte';
+
+    const { search, results } = initSearcher(fileSearcher);
+</script>
+
+<Template options={$results} bind:search={$search} />
diff --git a/src/lib/commandCenter/panels/index.ts b/src/lib/commandCenter/panels/index.ts
index 5b408c90f..c1d8a59f1 100644
--- a/src/lib/commandCenter/panels/index.ts
+++ b/src/lib/commandCenter/panels/index.ts
@@ -66,3 +66,15 @@ export const FunctionsPanel: SubPanel = {
     name: 'Functions',
     component: Functions
 };
+
+import Buckets from './buckets.svelte';
+export const BucketsPanel: SubPanel = {
+    name: 'Buckets',
+    component: Buckets
+};
+
+import Files from './files.svelte';
+export const FilesPanel: SubPanel = {
+    name: 'Files',
+    component: Files
+};
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 043d6b22b..c48e1e55b 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { commandGroupRanks, type CommandGroup } from '../commands';
+    import { commandGroupRanks, type CommandGroup, type Command } from '../commands';
 
     // This is the template for all panels used in the command center.
     // Use this component when you want to create a new panel.
@@ -10,18 +10,7 @@
 
     import { clearSubPanels, popSubPanel, subPanels } from '../subPanels';
 
-    import { quadOut } from 'svelte/easing';
-    import { crossfade } from 'svelte/transition';
-
-    type BaseOption = {
-        callback: () => void;
-        group?: string;
-        rank?: number;
-        nested?: boolean;
-        icon?: string;
-        label?: string;
-    };
-    type Option = $$Generic<BaseOption>;
+    type Option = $$Generic<Command>;
     export let options: Option[] | null = null;
     export let search = '';
     export let searchPlaceholder = 'Search...';
@@ -31,10 +20,10 @@
     let selected = 0;
     let contentEl: HTMLElement;
 
-    function triggerOption(option: Option) {
+    async function triggerOption(option: Option) {
         const prevPanels = $subPanels.length;
         option.callback();
-        if (prevPanels === $subPanels.length && clearOnCallback) {
+        if (prevPanels === $subPanels.length && clearOnCallback && !option.keepOpen) {
             clearSubPanels();
         }
     }
@@ -106,11 +95,6 @@
         selected = 0;
     }
 
-    const [send, receive] = crossfade({
-        duration: 100,
-        easing: quadOut
-    });
-
     const commandCenterCtx = getCommandCenterCtx();
 
     let cardEl: HTMLElement;
@@ -237,10 +221,14 @@
     class:scale-up={$commandCenterCtx.isInitialPanel && $commandCenterCtx.open}>
     <div class="search-wrapper">
         {#each breadcrumbs as crumb, i}
+            {@const isLast = i === breadcrumbs.length - 1}
             <button class="crumb" on:click={() => handleCrumbClick(i)}>
                 <span>{crumb}</span>
                 <i class="icon-x" />
             </button>
+            {#if !isLast}
+                <span style="opacity: 50%">/</span>
+            {/if}
         {/each}
 
         <slot name="search">
diff --git a/src/lib/commandCenter/searchers/buckets.ts b/src/lib/commandCenter/searchers/buckets.ts
new file mode 100644
index 000000000..8e4d45689
--- /dev/null
+++ b/src/lib/commandCenter/searchers/buckets.ts
@@ -0,0 +1,81 @@
+import { goto } from '$app/navigation';
+import { sdk } from '$lib/stores/sdk';
+import { project } from '$routes/console/project-[project]/store';
+import { Query, type Models } from '@appwrite.io/console';
+import { get } from 'svelte/store';
+import type { Command, Searcher } from '../commands';
+import { addSubPanel } from '../subPanels';
+import { FilesPanel } from '../panels';
+
+const getBucketCommand = (bucket: Models.Bucket, projectId: string) => {
+    return {
+        label: `${bucket.name}`,
+        callback() {
+            goto(`/console/project-${projectId}/storage/bucket-${bucket.$id}`);
+        },
+        group: 'buckets',
+        icon: 'folder'
+    } satisfies Command;
+};
+
+export const bucketSearcher = (async (query: string) => {
+    const { buckets } = await sdk.forProject.storage.listBuckets([Query.orderDesc('$createdAt')]);
+
+    const $project = get(project);
+    const filtered = buckets.filter((bucket) => bucket.name.includes(query));
+
+    if (filtered.length === 1) {
+        const bucket = filtered[0];
+        return [
+            getBucketCommand(bucket, $project.$id),
+            {
+                label: 'Find files',
+                async callback() {
+                    await goto(`/console/project-${$project.$id}/storage/bucket-${bucket.$id}`);
+                    addSubPanel(FilesPanel);
+                },
+                group: 'buckets',
+                nested: true,
+                icon: 'search',
+                keepOpen: true
+            },
+            {
+                label: 'Permissions',
+                async callback() {
+                    await goto(
+                        `/console/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#permissions`
+                    );
+                    scrollBy({ top: -100 });
+                },
+                group: 'buckets',
+                nested: true,
+                icon: 'key'
+            },
+            {
+                label: 'Extensions',
+                async callback() {
+                    await goto(
+                        `/console/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#extensions`
+                    );
+                },
+                group: 'buckets',
+                nested: true,
+                icon: 'puzzle'
+            },
+            {
+                label: 'File Security',
+                async callback() {
+                    await goto(
+                        `/console/project-${$project.$id}/storage/bucket-${bucket.$id}/settings#file-security`
+                    );
+                    scrollBy({ top: -100 });
+                },
+                group: 'buckets',
+                nested: true,
+                icon: 'lock-closed'
+            }
+        ];
+    }
+
+    return filtered.map((bucket) => getBucketCommand(bucket, $project.$id));
+}) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/files.ts b/src/lib/commandCenter/searchers/files.ts
new file mode 100644
index 000000000..3ae581882
--- /dev/null
+++ b/src/lib/commandCenter/searchers/files.ts
@@ -0,0 +1,27 @@
+import { sdk } from '$lib/stores/sdk';
+import { get } from 'svelte/store';
+import type { Searcher } from '../commands';
+import { bucket } from '$routes/console/project-[project]/storage/bucket-[bucket]/store';
+import { Query } from '@appwrite.io/console';
+import { goto } from '$app/navigation';
+import { project } from '$routes/console/project-[project]/store';
+
+export const fileSearcher = (async (query: string) => {
+    const $bucket = get(bucket);
+    const $project = get(project);
+
+    const { files } = await sdk.forProject.storage.listFiles(
+        $bucket.$id,
+        [Query.orderDesc('$createdAt')],
+        query || undefined
+    );
+
+    return files.map((file) => ({
+        label: file.name,
+        callback: () => {
+            goto(`/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/file-${file.$id}`);
+        },
+        icon: 'document',
+        group: 'files'
+    }));
+}) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/index.ts b/src/lib/commandCenter/searchers/index.ts
index f86d7690e..0f78e8c90 100644
--- a/src/lib/commandCenter/searchers/index.ts
+++ b/src/lib/commandCenter/searchers/index.ts
@@ -5,3 +5,5 @@ export * from './collections';
 export * from './projects';
 export * from './teams';
 export * from './functions';
+export * from './buckets';
+export * from './files';
diff --git a/src/lib/commandCenter/searchers/users.ts b/src/lib/commandCenter/searchers/users.ts
index e4dc33399..f37f56d6f 100644
--- a/src/lib/commandCenter/searchers/users.ts
+++ b/src/lib/commandCenter/searchers/users.ts
@@ -17,7 +17,7 @@ const getUserCommand = (user: Models.User<Models.Preferences>, projectId: string
     } satisfies Command);
 
 export const userSearcher = (async (query: string) => {
-    const { users } = await sdk.forProject.users.list([], query);
+    const { users } = await sdk.forProject.users.list([], query || undefined);
     const projectId = get(project).$id;
 
     if (users.length === 1) {
diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index 09daa2ea8..278fffc32 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -13,6 +13,7 @@
     } from '$lib/commandCenter';
 
     import {
+        bucketSearcher,
         dbSearcher,
         functionsSearcher,
         teamSearcher,
@@ -23,7 +24,8 @@
         UsersPanel,
         TeamsPanel,
         DatabasesPanel,
-        FunctionsPanel
+        FunctionsPanel,
+        BucketsPanel
     } from '$lib/commandCenter/panels';
 
     onMount(async () => {
@@ -122,12 +124,19 @@
             group: 'functions',
             icon: 'search',
             keys: ['f', 'f']
+        },
+        {
+            label: 'Find Buckets',
+            callback: () => {
+                addSubPanel(BucketsPanel);
+            },
+            group: 'buckets',
+            icon: 'search',
+            keys: ['f', 'b']
         }
     ]);
 
-    $registerSearchers(userSearcher, teamSearcher, dbSearcher, functionsSearcher);
-
-    $updateCommandGroupRanks({ functions: 10 });
+    $registerSearchers(userSearcher, teamSearcher, dbSearcher, functionsSearcher, bucketSearcher);
 </script>
 
 <slot />
diff --git a/src/routes/console/project-[project]/auth/+layout.svelte b/src/routes/console/project-[project]/auth/+layout.svelte
index ea394d546..62c335648 100644
--- a/src/routes/console/project-[project]/auth/+layout.svelte
+++ b/src/routes/console/project-[project]/auth/+layout.svelte
@@ -123,7 +123,7 @@
     ]);
 
     // To prioritize the groups!
-    $: $updateCommandGroupRanks({ users: 300, teams: 200, security: 100 });
+    $: $updateCommandGroupRanks({ users: 300, teams: 200, security: 100, navigation: 50 });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/databases/+layout.svelte b/src/routes/console/project-[project]/databases/+layout.svelte
index 36cd84574..1d101a655 100644
--- a/src/routes/console/project-[project]/databases/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/+layout.svelte
@@ -17,7 +17,7 @@
         }
     ]);
 
-    $: $updateCommandGroupRanks({ databases: 100 });
+    $: $updateCommandGroupRanks({ databases: 200, navigation: 100 });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte b/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
index 6ac88a4f8..7a6a1acf3 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/+layout.svelte
@@ -85,7 +85,7 @@
 
     $registerSearchers(collectionsSearcher);
 
-    $: $updateCommandGroupRanks((p) => ({ ...p, collections: 10 }));
+    $: $updateCommandGroupRanks({ collections: 10 });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 0030617c6..67aa899a5 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -147,13 +147,12 @@
         }
     ]);
 
-    $updateCommandGroupRanks((p) => ({
-        ...p,
+    $updateCommandGroupRanks({
         attributes: 1000,
         documents: 900,
         collections: 800,
         indexes: 700
-    }));
+    });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index c4da511b0..1b2357deb 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -80,10 +80,9 @@
         }
     ]);
 
-    $: $updateCommandGroupRanks((prev) => ({
-        ...prev,
+    $: $updateCommandGroupRanks({
         integrations: 10
-    }));
+    });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index d1676293f..77ac9afee 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -71,11 +71,10 @@
         }
     ]);
 
-    $: $updateCommandGroupRanks((prev) => ({
-        ...prev,
+    $updateCommandGroupRanks({
         domains: 20,
         webhooks: 10
-    }));
+    });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/settings/migrations/+page.svelte b/src/routes/console/project-[project]/settings/migrations/+page.svelte
index e81e073bb..2de72e1d9 100644
--- a/src/routes/console/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/+page.svelte
@@ -13,8 +13,6 @@
     } from '$lib/elements/table';
     import Table from '$lib/elements/table/table.svelte';
     import { isSameDay, toLocaleDate } from '$lib/helpers/date';
-    import { parseIfString } from '$lib/helpers/object';
-    import { capitalize } from '$lib/helpers/string';
     import { Container } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { isSelfHosted } from '$lib/system';
@@ -71,10 +69,7 @@
               }
     ]);
 
-    $: $updateCommandGroupRanks((prev) => ({
-        ...prev,
-        migrations: 100
-    }));
+    $updateCommandGroupRanks({ migrations: 100 });
 
     const getCurrentEndpoint = () => {
         // Remove subpaths and query strings from the current URL. Add a /v1 suffix
diff --git a/src/routes/console/project-[project]/settings/webhooks/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
index 342bca071..5bdf900b9 100644
--- a/src/routes/console/project-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/+page.svelte
@@ -39,11 +39,7 @@
 
     const projectId = $page.params.project;
 
-    $: $updateCommandGroupRanks((prev) => ({
-        ...prev,
-        webhooks: 20,
-        domains: 10
-    }));
+    $: $updateCommandGroupRanks({ webhooks: 20, domains: 10 });
 </script>
 
 <svelte:head>
diff --git a/src/routes/console/project-[project]/storage/+layout.svelte b/src/routes/console/project-[project]/storage/+layout.svelte
index 4d32c08a5..8a12d0d0f 100644
--- a/src/routes/console/project-[project]/storage/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/+layout.svelte
@@ -15,7 +15,8 @@
                 $showCreateBucket = true;
             },
             keys: $page.url.pathname.endsWith('storage') ? ['c'] : ['c', 'b'],
-            icon: 'plus'
+            icon: 'plus',
+            group: 'buckets'
         },
         {
             label: 'Go to usage',
@@ -23,12 +24,14 @@
                 goto(`/console/project-${$project.$id}/storage/usage`);
             },
             keys: ['g', 'u'],
-            disabled: $page.url.pathname.endsWith('usage'),
-            group: 'storage'
+            disabled:
+                $page.url.pathname.endsWith('usage') || $page.url.pathname.includes('bucket-'),
+            group: 'navigation',
+            rank: 10
         }
     ]);
 
-    $: $updateCommandGroupRanks((prev) => ({ ...prev, storage: 10 }));
+    $: $updateCommandGroupRanks({ buckets: 200, files: 150, navigation: 100 });
 </script>
 
 <svelte:head>
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 b6f596a77..ed7a6ee74 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+layout.svelte
@@ -1,3 +1,109 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import {
+        addSubPanel,
+        registerCommands,
+        registerSearchers,
+        updateCommandGroupRanks
+    } from '$lib/commandCenter';
+    import { FilesPanel } from '$lib/commandCenter/panels';
+    import { fileSearcher } from '$lib/commandCenter/searchers';
+    import { project } from '../../store';
+    import { showCreateFile } from './+page.svelte';
+    import { bucket } from './store';
+
+    $: $registerCommands([
+        {
+            label: 'Search files',
+            callback() {
+                addSubPanel(FilesPanel);
+            },
+            keys: ['f', 'l'],
+            group: 'files',
+            icon: 'search'
+        },
+        {
+            label: 'Create file',
+            async callback() {
+                if (!$page.url.pathname.endsWith($bucket.$id)) {
+                    goto(`/console/project-${$project.$id}/storage/bucket-${$bucket.$id}`);
+                }
+                showCreateFile();
+            },
+            keys: $page.url.pathname.endsWith($bucket.$id) ? ['c'] : ['c', 'f'],
+            group: 'files',
+            icon: 'plus'
+        },
+        {
+            label: 'Permissions',
+            async callback() {
+                await goto(
+                    `/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/settings#permissions`
+                );
+                scrollBy({ top: -100 });
+            },
+            group: 'buckets',
+            icon: 'key'
+        },
+        {
+            label: 'Extensions',
+            async callback() {
+                await goto(
+                    `/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/settings#extensions`
+                );
+            },
+            group: 'buckets',
+            icon: 'puzzle'
+        },
+        {
+            label: 'File Security',
+            async callback() {
+                await goto(
+                    `/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/settings#file-security`
+                );
+                scrollBy({ top: -100 });
+            },
+            group: 'buckets',
+            icon: 'lock-closed'
+        },
+        {
+            label: 'Go to files',
+            callback() {
+                goto(`/console/project-${$project.$id}/storage/bucket-${$bucket.$id}`);
+            },
+            disabled: $page.url.pathname.endsWith($bucket.$id),
+            keys: ['g', 'f'],
+            group: 'navigation',
+            rank: 10
+        },
+        {
+            label: 'Go to usage',
+            callback() {
+                goto(`/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/usage`);
+            },
+            disabled: $page.url.pathname.endsWith('usage'),
+            keys: ['g', 'u'],
+            group: 'navigation',
+            rank: 10
+        },
+        {
+            label: 'Go to settings',
+            callback() {
+                goto(`/console/project-${$project.$id}/storage/bucket-${$bucket.$id}/settings`);
+            },
+            disabled: $page.url.pathname.endsWith('settings'),
+            keys: ['g', 's'],
+            group: 'navigation',
+            rank: 10
+        }
+    ]);
+
+    $: $updateCommandGroupRanks({ files: 300 });
+
+    $registerSearchers(fileSearcher);
+</script>
+
 <svelte:head>
     <title>Bucket - Appwrite</title>
 </svelte:head>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
index a30fef481..578098cfb 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,3 +1,11 @@
+<script lang="ts" context="module">
+    let showCreate = writable(false);
+
+    export const showCreateFile = () => {
+        showCreate.set(true);
+    };
+</script>
+
 <script lang="ts">
     import { page } from '$app/stores';
     import { sdk } from '$lib/stores/sdk';
@@ -36,10 +44,10 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { writable } from 'svelte/store';
 
     export let data: PageData;
 
-    let showCreate = false;
     let showDelete = false;
     let showDropdown = [];
     let selectedFile: Models.File = null;
@@ -50,7 +58,7 @@
         sdk.forProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
 
     async function fileCreated() {
-        showCreate = false;
+        $showCreate = false;
         await invalidate(Dependencies.FILES);
     }
 
@@ -78,7 +86,7 @@
 
 <Container>
     <SearchQuery search={data.search} placeholder="Search by filename">
-        <Button on:click={() => (showCreate = true)} event="create_file">
+        <Button on:click={() => ($showCreate = true)} event="create_file">
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create file</span>
         </Button>
     </SearchQuery>
@@ -211,11 +219,11 @@
             single
             href="https://appwrite.io/docs/storage#createFile"
             target="file"
-            on:click={() => (showCreate = true)} />
+            on:click={() => ($showCreate = true)} />
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={fileCreated} />
+<Create bind:showCreate={$showCreate} on:created={fileCreated} />
 {#if selectedFile}
     <Delete file={selectedFile} bind:showDelete on:deleted={fileDeleted} />
 {/if}
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index ed2adfc49..5ca3f0844 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -258,7 +258,7 @@
 
         <Form onSubmit={updatePermissions}>
             <CardGrid>
-                <Heading tag="h6" size="7">Permissions</Heading>
+                <Heading tag="h6" size="7" id="permissions">Permissions</Heading>
                 <p class="text">
                     Choose who can access your buckets and files. For more information, check out
                     the <a
@@ -282,7 +282,7 @@
 
         <Form onSubmit={updateFileSecurity}>
             <CardGrid>
-                <Heading tag="h6" size="7">File Security</Heading>
+                <Heading tag="h6" size="7" id="file-security">File Security</Heading>
                 <svelte:fragment slot="aside">
                     <FormList>
                         <InputSwitch
@@ -406,7 +406,7 @@
 
         <Form onSubmit={updateAllowedExtensions}>
             <CardGrid>
-                <Heading tag="h6" size="7">File Extensions</Heading>
+                <Heading tag="h6" size="7" id="extensions">File Extensions</Heading>
                 <p class="text">
                     Allowed file extensions. A maximum of 100 file extensions can be added. Leave
                     blank to allow all file types.