Refactor: URL management for project route

src/lib/commandCenter/searchers/buckets.ts

@@ -1,12 +1,9 @@
 import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
-import { project } from '$routes/(console)/project-[region]-[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';
-import { base } from '$app/paths';
 import {
     IconFolder,
     IconKey,
@@ -15,21 +12,19 @@ import {
     IconSearch
 } from '@appwrite.io/pink-icons-svelte';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 const getBucketCommand = (bucket: Models.Bucket, region: string, projectId: string) => {
     return {
         label: `${bucket.name}`,
-        callback() {
-            goto(`${base}/project-${region}-${projectId}/storage/bucket-${bucket.$id}`);
-        },
+        callback: () =>
+            goto(getProjectRoute({ $id: projectId, region }, `/storage/bucket-${bucket.$id}`)),
         group: 'buckets',
         icon: IconFolder
     } satisfies Command;
 };
 
 export const bucketSearcher = (async (query: string) => {
-    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')]);
@@ -39,13 +34,11 @@ export const bucketSearcher = (async (query: string) => {
     if (filtered.length === 1) {
         const bucket = filtered[0];
         return [
-            getBucketCommand(bucket, region, $project.$id),
+            getBucketCommand(bucket, page.params.region, page.params.project),
             {
                 label: 'Find files',
                 async callback() {
-                    await goto(
-                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${bucket.$id}`
-                    );
+                    await goto(getProjectRoute(`/storage/bucket-${bucket.$id}`));
                     addSubPanel(FilesPanel);
                 },
                 group: 'buckets',
@@ -57,7 +50,7 @@ export const bucketSearcher = (async (query: string) => {
                 label: 'Permissions',
                 async callback() {
                     await goto(
-                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${bucket.$id}/settings#permissions`
+                        getProjectRoute(`/storage/bucket-${bucket.$id}/settings#permissions`)
                     );
                     scrollBy({ top: -100 });
                 },
@@ -69,7 +62,7 @@ export const bucketSearcher = (async (query: string) => {
                 label: 'Extensions',
                 async callback() {
                     await goto(
-                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${bucket.$id}/settings#extensions`
+                        getProjectRoute(`/storage/bucket-${bucket.$id}/settings#extensions`)
                     );
                 },
                 group: 'buckets',
@@ -80,7 +73,7 @@ export const bucketSearcher = (async (query: string) => {
                 label: 'File Security',
                 async callback() {
                     await goto(
-                        `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${bucket.$id}/settings#file-security`
+                        getProjectRoute(`/storage/bucket-${bucket.$id}/settings#file-security`)
                     );
                     scrollBy({ top: -100 });
                 },
@@ -91,5 +84,7 @@ export const bucketSearcher = (async (query: string) => {
         ];
     }
 
-    return filtered.map((bucket) => getBucketCommand(bucket, $project.region, $project.$id));
+    return filtered.map((bucket) =>
+        getBucketCommand(bucket, page.params.region, page.params.project)
+    );
 }) satisfies Searcher;

src/lib/commandCenter/searchers/collections.ts

@@ -3,8 +3,8 @@ import { database } from '$routes/(console)/project-[region]-[project]/databases
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
-import { base } from '$app/paths';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 export const collectionsSearcher = (async (query: string) => {
     const databaseId = get(database).$id;
@@ -19,11 +19,12 @@ export const collectionsSearcher = (async (query: string) => {
                 ({
                     group: 'collections',
                     label: col.name,
-                    callback: () => {
+                    callback: () =>
                         goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${col.$id}`
-                        );
-                    }
+                            getProjectRoute(
+                                `/databases/database-${databaseId}/collection-${col.$id}`
+                            )
+                        )
                 }) as const
         );
 }) satisfies Searcher;

src/lib/commandCenter/searchers/databases.ts

@@ -1,9 +1,9 @@
 import { goto } from '$app/navigation';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
-import { base } from '$app/paths';
 import { IconDatabase } from '@appwrite.io/pink-icons-svelte';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 export const dbSearcher = (async (query: string) => {
     const { databases } = await sdk
@@ -17,11 +17,7 @@ export const dbSearcher = (async (query: string) => {
                 ({
                     group: 'databases',
                     label: db.name,
-                    callback: () => {
-                        goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${db.$id}`
-                        );
-                    },
+                    callback: () => goto(getProjectRoute(`/databases/database-${db.$id}`)),
                     icon: IconDatabase
                 }) as const
         );

src/lib/commandCenter/searchers/files.ts

@@ -4,26 +4,20 @@ import type { Searcher } from '../commands';
 import { bucket } from '$routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/store';
 import { Query } from '@appwrite.io/console';
 import { goto } from '$app/navigation';
-import { project } from '$routes/(console)/project-[region]-[project]/store';
-import { base } from '$app/paths';
 import { IconDocument } from '@appwrite.io/pink-icons-svelte';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 export const fileSearcher = (async (query: string) => {
     const $bucket = get(bucket);
-    const $project = get(project);
 
     const { files } = await sdk
         .forProject(page.params.region, page.params.project)
         .storage.listFiles($bucket.$id, [Query.orderDesc('')], query || undefined);
 
     return files.map((file) => ({
         label: file.name,
-        callback: () => {
-            goto(
-                `${base}/project-${$project.region}-${$project.$id}/storage/bucket-${$bucket.$id}/file-${file.$id}`
-            );
-        },
+        callback: () => goto(getProjectRoute(`/storage/bucket-${$bucket.$id}/file-${file.$id}`)),
         icon: IconDocument,
         group: 'files'
     }));

src/lib/commandCenter/searchers/functions.ts

@@ -1,27 +1,23 @@
 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 { Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { page } from '$app/state';
-import { showCreateDeployment } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
-import { base } from '$app/paths';
 import { IconLightningBolt, IconPlus } from '@appwrite.io/pink-icons-svelte';
+import { getProjectRoute } from '$lib/helpers/project';
+import { showCreateDeployment } from '$routes/(console)/project-[region]-[project]/functions/function-[function]/store';
 
 const getFunctionCommand = (fn: Models.Function, region: string, projectId: string) => {
     return {
         label: fn.name,
-        callback: () => {
-            goto(`${base}/project-${region}-${projectId}/functions/function-${fn.$id}`);
-        },
+        callback: () =>
+            goto(getProjectRoute({ $id: projectId, region }, `/functions/function-${fn.$id}`)),
         group: 'functions',
         icon: IconLightningBolt
     } as const;
 };
 
 export const functionsSearcher = (async (query: string) => {
-    const projectId = get(project).$id;
     const { functions } = await sdk
         .forProject(page.params.region, page.params.project)
         .functions.list();
@@ -31,15 +27,13 @@ export const functionsSearcher = (async (query: string) => {
     if (filtered.length === 1) {
         const func = filtered[0];
         return [
-            getFunctionCommand(func, page.params.region, projectId),
+            getFunctionCommand(func, page.params.region, page.params.project),
             {
                 label: 'Create deployment',
                 nested: true,
                 async callback() {
                     if (!page.url.pathname.endsWith(func.$id)) {
-                        await goto(
-                            `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}`
-                        );
+                        await goto(getProjectRoute(`/functions/function-${func.$id}`));
                     }
                     showCreateDeployment.set(true);
                 },
@@ -50,44 +44,36 @@ export const functionsSearcher = (async (query: string) => {
                 label: 'Go to deployments',
                 nested: true,
                 callback() {
-                    goto(
-                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}`
-                    );
+                    goto(getProjectRoute(`/functions/function-${func.$id}`));
                 },
                 group: 'functions'
             },
             {
                 label: 'Go to usage',
                 nested: true,
                 callback() {
-                    goto(
-                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}/usage`
-                    );
+                    goto(getProjectRoute(`/functions/function-${func.$id}/usage`));
                 },
                 group: 'functions'
             },
             {
                 label: 'Go to executions',
                 nested: true,
                 callback() {
-                    goto(
-                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}/executions`
-                    );
+                    goto(getProjectRoute(`/functions/function-${func.$id}/executions`));
                 },
                 group: 'functions'
             },
             {
                 label: 'Go to settings',
                 nested: true,
                 callback() {
-                    goto(
-                        `${base}/project-${page.params.region}-${projectId}/functions/function-${func.$id}/settings`
-                    );
+                    goto(getProjectRoute(`/functions/function-${func.$id}/settings`));
                 },
                 group: 'functions'
             }
         ];
     }
 
-    return filtered.map((fn) => getFunctionCommand(fn, page.params.region, projectId));
+    return filtered.map((fn) => getFunctionCommand(fn, page.params.region, page.params.project));
 }) satisfies Searcher;

src/lib/commandCenter/searchers/messages.ts

@@ -2,9 +2,9 @@ import { goto } from '$app/navigation';
 import { type Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { MessagingProviderType, type Models } from '@appwrite.io/console';
-import { base } from '$app/paths';
 import { IconAnnotation, IconDeviceMobile, IconMail } from '@appwrite.io/pink-icons-svelte';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 const getLabel = (message: Models.Message) => {
     switch (message.providerType) {
@@ -44,11 +44,7 @@ export const messagesSearcher = (async (query: string) => {
                 ({
                     group: 'messages',
                     label: getLabel(message),
-                    callback: () => {
-                        goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/messaging/message-${message.$id}`
-                        );
-                    },
+                    callback: () => goto(getProjectRoute(`/messaging/message-${message.$id}`)),
                     icon: getIcon(message)
                 }) as const
         );

src/lib/commandCenter/searchers/projects.ts

@@ -4,7 +4,7 @@ import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
-import { base } from '$app/paths';
+import { getProjectRoute } from '$lib/helpers/project';
 
 export const projectsSearcher = (async (query: string) => {
     const { projects } = await sdk.forConsole.projects.list([
@@ -17,9 +17,7 @@ export const projectsSearcher = (async (query: string) => {
         .map((project) => {
             return {
                 label: project.name,
-                callback: () => {
-                    goto(`${base}/project-${project.region}-${project.$id}`);
-                },
+                callback: () => goto(getProjectRoute(project)),
                 group: 'projects'
             } as const;
         });

src/lib/commandCenter/searchers/providers.ts

@@ -2,8 +2,8 @@ import { goto } from '$app/navigation';
 import type { Searcher } from '../commands';
 import { sdk } from '$lib/stores/sdk';
 import { getProviderDisplayNameAndIcon } from '$routes/(console)/project-[region]-[project]/messaging/provider.svelte';
-import { base } from '$app/paths';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 const getIcon = (provider: string) => {
     const { icon } = getProviderDisplayNameAndIcon(provider);
@@ -22,11 +22,8 @@ export const providersSearcher = (async (query: string) => {
                 ({
                     group: 'providers',
                     label: provider.name,
-                    callback: () => {
-                        goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/messaging/providers/provider-${provider.$id}`
-                        );
-                    },
+                    callback: () =>
+                        goto(getProjectRoute(`/messaging/providers/provider-${provider.$id}`)),
                     image: getIcon(provider.provider)
                 }) as const
         );

src/lib/commandCenter/searchers/teams.ts

@@ -2,16 +2,15 @@ import { goto } from '$app/navigation';
 import { sdk } from '$lib/stores/sdk';
 import type { Command, Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
-import { base } from '$app/paths';
 import { IconUserCircle } from '@appwrite.io/pink-icons-svelte';
 import { page } from '$app/state';
+import { getProjectRoute } from '$lib/helpers/project';
 
 const getTeamCommand = (team: Models.Team<Models.Preferences>, region: string, projectId: string) =>
     ({
         label: team.name,
-        callback: () => {
-            goto(`${base}/project-${region}-${projectId}/auth/teams/team-${team.$id}`);
-        },
+        callback: () =>
+            goto(getProjectRoute({ $id: projectId, region }, `/auth/teams/team-${team.$id}`)),
         group: 'teams',
         icon: IconUserCircle
     }) satisfies Command;
@@ -26,22 +25,14 @@ export const teamSearcher = (async (query: string) => {
             getTeamCommand(teams[0], page.params.region, page.params.project),
             {
                 label: 'Go to members',
-                callback: () => {
-                    goto(
-                        `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${teams[0].$id}/members`
-                    );
-                },
+                callback: () => goto(getProjectRoute(`/auth/teams/team-${teams[0].$id}/members`)),
                 group: 'teams',
                 nested: true
             },
 
             {
                 label: 'Go to activity',
-                callback: () => {
-                    goto(
-                        `${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${teams[0].$id}/activity`
-                    );
-                },
+                callback: () => goto(getProjectRoute(`/auth/teams/team-${teams[0].$id}/activity`)),
                 group: 'teams',
                 nested: true
             }