From 03bd2b4cc785bafe51d761b4c976c413db94182f Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 28 Jan 2025 17:36:36 +0100
Subject: [PATCH] fix: more links

---
 src/lib/commandCenter/searchers/buckets.ts    |  9 +++---
 .../commandCenter/searchers/collections.ts    |  4 +--
 src/lib/commandCenter/searchers/databases.ts  |  5 ++--
 src/lib/commandCenter/searchers/functions.ts  | 28 +++++++++++++------
 src/lib/commandCenter/searchers/messages.ts   | 10 +++----
 src/lib/commandCenter/searchers/providers.ts  |  4 +--
 src/lib/commandCenter/searchers/teams.ts      | 18 ++++++------
 src/lib/commandCenter/searchers/topics.ts     |  6 ++--
 src/lib/commandCenter/searchers/users.ts      | 22 +++++++++------
 .../auth/breadcrumbs.svelte                   |  4 +--
 .../auth/teams/team-[team]/breadcrumbs.svelte |  7 +++--
 .../auth/user-[user]/breadcrumbs.svelte       |  7 +++--
 .../databases/breadcrumbs.svelte              |  4 +--
 .../database-[database]/breadcrumbs.svelte    |  6 ++--
 .../breadcrumbs.svelte                        |  8 +++---
 .../document-[document]/breadcrumbs.svelte    |  8 +++---
 .../functions/breadcrumbs.svelte              |  5 ++--
 .../function-[function]/breadcrumbs.svelte    |  7 +++--
 .../breadcrumbs.svelte                        |  8 +++---
 .../messaging/breadcrumbs.svelte              |  5 ++--
 .../message-[message]/breadcrumbs.svelte      |  5 ++--
 .../overview/breadcrumbs.svelte               |  3 +-
 .../overview/keys/[key]/breadcrumbs.svelte    |  7 +++--
 .../settings/breadcrumbs.svelte               |  5 ++--
 .../webhooks/[webhook]/breadcrumbs.svelte     |  7 +++--
 .../bucket-[bucket]/breadcrumbs.svelte        |  7 +++--
 .../bucket-[bucket]/create-file/step1.svelte  |  3 +-
 .../file-[file]/breadcrumbs.svelte            |  8 +++---
 28 files changed, 122 insertions(+), 98 deletions(-)

diff --git a/src/lib/commandCenter/searchers/buckets.ts b/src/lib/commandCenter/searchers/buckets.ts
index 8b81a1574..6c6a30f4f 100644
--- a/src/lib/commandCenter/searchers/buckets.ts
+++ b/src/lib/commandCenter/searchers/buckets.ts
@@ -9,11 +9,11 @@ import { FilesPanel } from '../panels';
 import { base } from '$app/paths';
 import { page } from '$app/stores';
 
-const getBucketCommand = (bucket: Models.Bucket, projectId: string) => {
+const getBucketCommand = (bucket: Models.Bucket, region: string, projectId: string) => {
     return {
         label: `${bucket.name}`,
         callback() {
-            goto(`${base}/project-${projectId}/storage/bucket-${bucket.$id}`);
+            goto(`${base}/project-${region}-${projectId}/storage/bucket-${bucket.$id}`);
         },
         group: 'buckets',
         icon: 'folder'
@@ -23,6 +23,7 @@ const getBucketCommand = (bucket: Models.Bucket, projectId: string) => {
 export const bucketSearcher = (async (query: string) => {
     const $page = get(page);
     const $project = get(project);
+    const region = $page.params.region;
     const { buckets } = await sdk
         .forProject($page.params.region, $page.params.project)
         .storage.listBuckets([Query.orderDesc('$createdAt')]);
@@ -32,7 +33,7 @@ export const bucketSearcher = (async (query: string) => {
     if (filtered.length === 1) {
         const bucket = filtered[0];
         return [
-            getBucketCommand(bucket, $project.$id),
+            getBucketCommand(bucket, region, $project.$id),
             {
                 label: 'Find files',
                 async callback() {
@@ -84,5 +85,5 @@ export const bucketSearcher = (async (query: string) => {
         ];
     }
 
-    return filtered.map((bucket) => getBucketCommand(bucket, $project.$id));
+    return filtered.map((bucket) => getBucketCommand(bucket, $project.region, $project.$id));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/collections.ts b/src/lib/commandCenter/searchers/collections.ts
index d7ece4b2d..1045b17d2 100644
--- a/src/lib/commandCenter/searchers/collections.ts
+++ b/src/lib/commandCenter/searchers/collections.ts
@@ -1,6 +1,5 @@
 import { goto } from '$app/navigation';
 import { database } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/store';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
@@ -14,7 +13,6 @@ export const collectionsSearcher = (async (query: string) => {
         .forProject($page.params.region, $page.params.project)
         .databases.listCollections(databaseId);
 
-    const projectId = get(project).$id;
     return collections
         .filter((col) => col.name.toLowerCase().includes(query.toLowerCase()))
         .map(
@@ -24,7 +22,7 @@ export const collectionsSearcher = (async (query: string) => {
                     label: col.name,
                     callback: () => {
                         goto(
-                            `${base}/project-${projectId}/databases/database-${databaseId}/collection-${col.$id}`
+                            `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${databaseId}/collection-${col.$id}`
                         );
                     }
                 }) as const
diff --git a/src/lib/commandCenter/searchers/databases.ts b/src/lib/commandCenter/searchers/databases.ts
index bb1691e5a..605afbb92 100644
--- a/src/lib/commandCenter/searchers/databases.ts
+++ b/src/lib/commandCenter/searchers/databases.ts
@@ -1,5 +1,4 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
@@ -20,7 +19,9 @@ export const dbSearcher = (async (query: string) => {
                     group: 'databases',
                     label: db.name,
                     callback: () => {
-                        goto(`${base}/project-${get(project).$id}/databases/database-${db.$id}`);
+                        goto(
+                            `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${db.$id}`
+                        );
                     },
                     icon: 'database'
                 }) as const
diff --git a/src/lib/commandCenter/searchers/functions.ts b/src/lib/commandCenter/searchers/functions.ts
index 2c7867511..091491993 100644
--- a/src/lib/commandCenter/searchers/functions.ts
+++ b/src/lib/commandCenter/searchers/functions.ts
@@ -8,11 +8,11 @@ import { page } from '$app/stores';
 import { showCreateDeployment } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
 import { base } from '$app/paths';
 
-const getFunctionCommand = (fn: Models.Function, projectId: string) => {
+const getFunctionCommand = (fn: Models.Function, region: string, projectId: string) => {
     return {
         label: fn.name,
         callback: () => {
-            goto(`${base}/project-${projectId}/functions/function-${fn.$id}`);
+            goto(`${base}/project-${region}-${projectId}/functions/function-${fn.$id}`);
         },
         group: 'functions',
         icon: 'lightning-bolt'
@@ -31,14 +31,16 @@ export const functionsSearcher = (async (query: string) => {
     if (filtered.length === 1) {
         const func = filtered[0];
         return [
-            getFunctionCommand(func, projectId),
+            getFunctionCommand(func, $page.params.region, projectId),
             {
                 label: 'Create deployment',
                 nested: true,
                 async callback() {
                     const $page = get(page);
                     if (!$page.url.pathname.endsWith(func.$id)) {
-                        await goto(`${base}/project-${projectId}/functions/function-${func.$id}`);
+                        await goto(
+                            `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}`
+                        );
                     }
                     showCreateDeployment.set(true);
                 },
@@ -49,7 +51,9 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to deployments',
                 nested: true,
                 callback() {
-                    goto(`${base}/project-${projectId}/functions/function-${func.$id}`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}`
+                    );
                 },
                 group: 'functions'
             },
@@ -57,7 +61,9 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to usage',
                 nested: true,
                 callback() {
-                    goto(`${base}/project-${projectId}/functions/function-${func.$id}/usage`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}/usage`
+                    );
                 },
                 group: 'functions'
             },
@@ -65,7 +71,9 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to executions',
                 nested: true,
                 callback() {
-                    goto(`${base}/project-${projectId}/functions/function-${func.$id}/executions`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}/executions`
+                    );
                 },
                 group: 'functions'
             },
@@ -73,12 +81,14 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to settings',
                 nested: true,
                 callback() {
-                    goto(`${base}/project-${projectId}/functions/function-${func.$id}/settings`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${projectId}/functions/function-${func.$id}/settings`
+                    );
                 },
                 group: 'functions'
             }
         ];
     }
 
-    return filtered.map((fn) => getFunctionCommand(fn, projectId));
+    return filtered.map((fn) => getFunctionCommand(fn, $page.params.region, projectId));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/messages.ts b/src/lib/commandCenter/searchers/messages.ts
index 9db090442..3e5e72c27 100644
--- a/src/lib/commandCenter/searchers/messages.ts
+++ b/src/lib/commandCenter/searchers/messages.ts
@@ -1,9 +1,8 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import { type Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
-import { MessagingProviderType } from '@appwrite.io/console';
+import { MessagingProviderType, type Models } from '@appwrite.io/console';
 import { base } from '$app/paths';
 import { page } from '$app/stores';
 
@@ -20,7 +19,7 @@ const getLabel = (message) => {
     }
 };
 
-const getIcon = (message) => {
+const getIcon = (message: Models.Message) => {
     switch (message.providerType) {
         case MessagingProviderType.Push:
             return 'device-mobile';
@@ -35,7 +34,6 @@ const getIcon = (message) => {
 
 export const messagesSearcher = (async (query: string) => {
     const $page = get(page);
-    const projectId = get(project).$id;
     const { messages } = await sdk
         .forProject($page.params.region, $page.params.project)
         .messaging.listMessages([], query || undefined);
@@ -48,7 +46,9 @@ export const messagesSearcher = (async (query: string) => {
                     group: 'messages',
                     label: getLabel(message),
                     callback: () => {
-                        goto(`${base}/project-${projectId}/messaging/message-${message.$id}`);
+                        goto(
+                            `${base}/project-${$page.params.region}-${$page.params.project}/messaging/message-${message.$id}`
+                        );
                     },
                     icon: getIcon(message)
                 }) as const
diff --git a/src/lib/commandCenter/searchers/providers.ts b/src/lib/commandCenter/searchers/providers.ts
index 1ff011c35..4a30a9e65 100644
--- a/src/lib/commandCenter/searchers/providers.ts
+++ b/src/lib/commandCenter/searchers/providers.ts
@@ -1,5 +1,4 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
@@ -14,7 +13,6 @@ const getIcon = (provider: string) => {
 
 export const providersSearcher = (async (query: string) => {
     const $page = get(page);
-    const projectId = get(project).$id;
     const { providers } = await sdk
         .forProject($page.params.region, $page.params.project)
         .messaging.listProviders([], query || undefined);
@@ -28,7 +26,7 @@ export const providersSearcher = (async (query: string) => {
                     label: provider.name,
                     callback: () => {
                         goto(
-                            `${base}/project-${projectId}/messaging/providers/provider-${provider.$id}`
+                            `${base}/project-${$page.params.region}-${$page.params.project}/messaging/providers/provider-${provider.$id}`
                         );
                     },
                     image: getIcon(provider.provider)
diff --git a/src/lib/commandCenter/searchers/teams.ts b/src/lib/commandCenter/searchers/teams.ts
index 342cf547d..47de6470e 100644
--- a/src/lib/commandCenter/searchers/teams.ts
+++ b/src/lib/commandCenter/searchers/teams.ts
@@ -1,17 +1,16 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { base } from '$app/paths';
 import { page } from '$app/stores';
 
-const getTeamCommand = (team: Models.Team<Models.Preferences>, projectId: string) =>
+const getTeamCommand = (team: Models.Team<Models.Preferences>, region: string, projectId: string) =>
     ({
         label: team.name,
         callback: () => {
-            goto(`${base}/project-${projectId}/auth/teams/team-${team.$id}`);
+            goto(`${base}/project-${region}-${projectId}/auth/teams/team-${team.$id}`);
         },
         group: 'teams',
         icon: 'user-circle'
@@ -19,18 +18,19 @@ const getTeamCommand = (team: Models.Team<Models.Preferences>, projectId: string
 
 export const teamSearcher = (async (query: string) => {
     const $page = get(page);
-    const projectId = get(project).$id;
     const { teams } = await sdk
         .forProject($page.params.region, $page.params.project)
         .teams.list([], query);
 
     if (teams.length === 1) {
         return [
-            getTeamCommand(teams[0], projectId),
+            getTeamCommand(teams[0], $page.params.region, $page.params.project),
             {
                 label: 'Go to members',
                 callback: () => {
-                    goto(`${base}/project-${projectId}/auth/teams/team-${teams[0].$id}/members`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${teams[0].$id}/members`
+                    );
                 },
                 group: 'teams',
                 nested: true
@@ -39,12 +39,14 @@ export const teamSearcher = (async (query: string) => {
             {
                 label: 'Go to activity',
                 callback: () => {
-                    goto(`${base}/project-${projectId}/auth/teams/team-${teams[0].$id}/activity`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${teams[0].$id}/activity`
+                    );
                 },
                 group: 'teams',
                 nested: true
             }
         ];
     }
-    return teams.map((team) => getTeamCommand(team, projectId));
+    return teams.map((team) => getTeamCommand(team, $page.params.region, $page.params.project));
 }) satisfies Searcher;
diff --git a/src/lib/commandCenter/searchers/topics.ts b/src/lib/commandCenter/searchers/topics.ts
index 83bed6224..7e47149de 100644
--- a/src/lib/commandCenter/searchers/topics.ts
+++ b/src/lib/commandCenter/searchers/topics.ts
@@ -1,5 +1,4 @@
 import { goto } from '$app/navigation';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
@@ -8,7 +7,6 @@ import { page } from '$app/stores';
 
 export const topicsSearcher = (async (query: string) => {
     const $page = get(page);
-    const projectId = get(project).$id;
     const { topics } = await sdk
         .forProject($page.params.region, $page.params.project)
         .messaging.listTopics([], query || undefined);
@@ -21,7 +19,9 @@ export const topicsSearcher = (async (query: string) => {
                     group: 'topics',
                     label: topic.name,
                     callback: () => {
-                        goto(`${base}/project-${projectId}/messaging/topics/topic-${topic.$id}`);
+                        goto(
+                            `${base}/project-${$page.params.region}-${$page.params.project}/messaging/topics/topic-${topic.$id}`
+                        );
                     },
                     icon: 'send'
                 }) as const
diff --git a/src/lib/commandCenter/searchers/users.ts b/src/lib/commandCenter/searchers/users.ts
index b7ee17828..31bfeadee 100644
--- a/src/lib/commandCenter/searchers/users.ts
+++ b/src/lib/commandCenter/searchers/users.ts
@@ -1,6 +1,5 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
 import { get } from 'svelte/store';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
@@ -8,11 +7,11 @@ import { promptDeleteUser } from '$routes/(console)/project-[region]-[project]/a
 import { base } from '$app/paths';
 import { page } from '$app/stores';
 
-const getUserCommand = (user: Models.User<Models.Preferences>, projectId: string) =>
+const getUserCommand = (user: Models.User<Models.Preferences>, region: string, projectId: string) =>
     ({
         label: user.name,
         callback: () => {
-            goto(`${base}/project-${projectId}/auth/user-${user.$id}`);
+            goto(`${base}/project-${region}-${projectId}/auth/user-${user.$id}`);
         },
         group: 'users',
         icon: 'user-circle'
@@ -20,14 +19,13 @@ const getUserCommand = (user: Models.User<Models.Preferences>, projectId: string
 
 export const userSearcher = (async (query: string) => {
     const $page = get(page);
-    const projectId = get(project).$id;
     const { users } = await sdk
         .forProject($page.params.region, $page.params.project)
         .users.list([], query || undefined);
 
     if (users.length === 1) {
         return [
-            getUserCommand(users[0], projectId),
+            getUserCommand(users[0], $page.params.region, $page.params.project),
             {
                 label: 'Delete user',
                 callback: () => {
@@ -40,7 +38,9 @@ export const userSearcher = (async (query: string) => {
             {
                 label: 'Go to activity',
                 callback: () => {
-                    goto(`${base}/project-${projectId}/auth/user-${users[0].$id}/activity`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${users[0].$id}/activity`
+                    );
                 },
                 group: 'users',
                 nested: true
@@ -48,7 +48,9 @@ export const userSearcher = (async (query: string) => {
             {
                 label: 'Go to sessions',
                 callback: () => {
-                    goto(`${base}/project-${projectId}/auth/user-${users[0].$id}/sessions`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${users[0].$id}/sessions`
+                    );
                 },
                 group: 'users',
                 nested: true
@@ -56,12 +58,14 @@ export const userSearcher = (async (query: string) => {
             {
                 label: 'Go to memberships',
                 callback: () => {
-                    goto(`${base}/project-${projectId}/auth/user-${users[0].$id}/memberships`);
+                    goto(
+                        `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${users[0].$id}/memberships`
+                    );
                 },
                 group: 'users',
                 nested: true
             }
         ];
     }
-    return users.map((user) => getUserCommand(user, projectId));
+    return users.map((user) => getUserCommand(user, $page.params.region, $page.params.project));
 }) satisfies Searcher;
diff --git a/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte
index 7fe41fa7c..db806d038 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/breadcrumbs.svelte
@@ -10,11 +10,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$project.region}-${$project?.$id}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/auth`,
+            href: `${base}/project-${$project.region}-${$project?.$id}/auth`,
             title: 'Auth'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
index b6ce1e98c..04e22dcac 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
@@ -11,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/auth`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth`,
             title: 'Auth'
         },
         {
-            href: `${base}/project-${$project?.$id}/auth/teams/team-${$team?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth/teams/team-${$team?.$id}`,
             title: $team?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
index a457244f1..4217743d3 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -11,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/auth`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth`,
             title: 'Auth'
         },
         {
-            href: `${base}/project-${$project?.$id}/auth/user-${$user?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/auth/user-${$user?.$id}`,
             title: $user?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
index 4c775c0f5..ef7fa5361 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/breadcrumbs.svelte
@@ -11,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$page.data.project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$page.data.project?.$id}/databases`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases`,
             title: 'Databases'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
index f5d6ec07d..8d730764d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/breadcrumbs.svelte
@@ -11,15 +11,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$page.data.project.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $page.data.project.name
         },
         {
-            href: `${base}/project-${$page.data.project.$id}/databases`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases`,
             title: 'Databases'
         },
         {
-            href: `${base}/project-${$page.data.project.$id}/databases/database-${$database.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database.$id}`,
             title: $database.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
index 2e54f9fd6..c588496c3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/breadcrumbs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../store';
     import { database } from '../store';
     import { collection } from './store';
 
@@ -10,15 +10,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$project?.$id}/databases`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases`,
             title: 'Databases'
         },
         {
-            href: `${base}/project-${$project?.$id}/databases/database-${$database?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}`,
             title: $database?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
             title: $collection?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
index 0ba31c343..88418f11f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/breadcrumbs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../../store';
     import { database } from '../../store';
     import { collection } from '../store';
     import { doc } from './store';
@@ -11,15 +11,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$project?.$id}/databases/database-${$database?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}`,
             title: $database?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}`,
             title: $collection?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/databases/database-${$database?.$id}/collection-${$collection?.$id}/document-${$doc?.$id}`,
             title: $doc?.$id
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
index 680afb49c..514ebe0eb 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -10,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/functions`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions`,
             title: 'Functions'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
index 5b626d71d..a9279c6b6 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -11,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/functions`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions`,
             title: 'Functions'
         },
         {
-            href: `${base}/project-${$project?.$id}/functions/function-${$func?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func?.$id}`,
             title: $func?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
index 7b9ff99bf..45f96c86b 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/breadcrumbs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../store';
     import { func } from '../store';
     import { deployment } from './store';
 
@@ -10,15 +10,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$project?.$id}/functions`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions`,
             title: 'Functions'
         },
         {
-            href: `${base}/project-${$project?.$id}/functions/function-${$func?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func?.$id}`,
             title: $func?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/functions/function-${$func?.$id}/deployment-${$deployment?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/functions/function-${$func?.$id}/deployment-${$deployment?.$id}`,
             title: 'Deployment'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
index 1d201d373..2e825950c 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -10,11 +11,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/messaging`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/messaging`,
             title: 'Messaging'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
index 2b49f54c9..3a96376c1 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/message-[message]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -11,11 +12,11 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project.name
         },
         {
-            href: `${base}/project-${$project.region}-${$project.$id}/messaging`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/messaging`,
             title:
                 $message.data.title ?? $message.data.subject ?? $message.data.content ?? 'Message'
         }
diff --git a/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
index fad7b3cbc..5fff6c258 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -10,7 +11,7 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
index 426594191..a163a9fe6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/keys/[key]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
@@ -11,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/overview/keys`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/overview/keys`,
             title: 'API keys'
         },
         {
-            href: `${base}/project-${$project?.$id}/overview/keys/${$key?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/overview/keys/${$key?.$id}`,
             title: $key?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
index 0db760fa7..cef3df714 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../store';
@@ -10,11 +11,11 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/settings`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/settings`,
             title: 'Settings'
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
index 13d6f9b1b..e4fc8517c 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/[webhook]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../../store';
@@ -11,15 +12,15 @@
             title: $organization?.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/settings/webhooks`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/settings/webhooks`,
             title: 'Settings'
         },
         {
-            href: `${base}/project-${$project?.$id}/settings/webhooks/webhook/${$webhook?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/settings/webhooks/webhook/${$webhook?.$id}`,
             title: $webhook?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
index dc28fe8a6..054a1811c 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/breadcrumbs.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
     import { organization } from '$lib/stores/organization';
     import { project } from '../../store';
@@ -11,15 +12,15 @@
             title: $organization.name
         },
         {
-            href: `${base}/project-${$project?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}`,
             title: $project.name
         },
         {
-            href: `${base}/project-${$project?.$id}/storage`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage`,
             title: 'Storage'
         },
         {
-            href: `${base}/project-${$project?.$id}/storage/bucket-${$bucket?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket?.$id}`,
             title: $bucket?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index 43454a461..6a0eac10b 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -14,7 +14,6 @@
     let showCustomId = false;
     let fileError: string = null;
     const service = $currentPlan['fileSize'];
-    const projectId = $page.params.project;
 </script>
 
 <WizardStep>
@@ -28,7 +27,7 @@
                 The maximum file upload size for this bucket is {parseInt(size.value)}{size.unit}.
                 You can adjust it in your
                 <a
-                    href={`${base}/project-${projectId}/storage/bucket-${$bucket.$id}/settings`}
+                    href={`${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket.$id}/settings`}
                     style:text-decoration="underline">bucket settings</a
                 >.
             </p>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
index 45bd9c355..c47b79901 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/file-[file]/breadcrumbs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
+    import { page } from '$app/stores';
     import { Breadcrumbs } from '$lib/layout';
-    import { project } from '../../../store';
     import { bucket } from '../store';
     import { file } from './store';
 
@@ -10,15 +10,15 @@
             title: '...'
         },
         {
-            href: `${base}/project-${$project?.$id}/storage`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage`,
             title: 'Storage'
         },
         {
-            href: `${base}/project-${$project?.$id}/storage/bucket-${$bucket?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket?.$id}`,
             title: $bucket?.name
         },
         {
-            href: `${base}/project-${$project?.$id}/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`,
+            href: `${base}/project-${$page.params.region}-${$page.params.project}/storage/bucket-${$bucket?.$id}/file-${$file?.$id}`,
             title: $file?.name
         }
     ];