Refactor: URL management for project route

src/lib/components/backupRestoreBox.svelte

@@ -9,8 +9,7 @@
     import { goto, invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
-    import { base } from '$app/paths';
-    import { getProjectId } from '$lib/helpers/project';
+    import { getProjectId, getProjectRoute } from '$lib/helpers/project';
     import { toLocaleDate } from '$lib/helpers/date';
     import { Typography } from '@appwrite.io/pink-svelte';
 
@@ -34,8 +33,6 @@
 
     function showRestoreNotification(newDatabaseId: string, newDatabaseName: string) {
         if (newDatabaseId && newDatabaseName && lastDatabaseRestorationId !== newDatabaseId) {
-            const region = page.params.region;
-            const project = page.params.project;
             lastDatabaseRestorationId = newDatabaseId;
 
             addNotification({
@@ -46,9 +43,7 @@
                     {
                         name: 'View restored data',
                         method: () => {
-                            goto(
-                                `${base}/project-${region}-${project}/databases/database-${newDatabaseId}`
-                            );
+                            goto(getProjectRoute(`/databases/database-${newDatabaseId}`));
                         }
                     }
                 ]

src/lib/components/breadcrumbs.svelte

@@ -15,6 +15,7 @@
     import { newOrgModal } from '$lib/stores/organization';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { page } from '$app/stores';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     type Project = {
         name: string;
@@ -141,7 +142,7 @@
                                     if (index < 4) {
                                         return {
                                             name: project.name,
-                                            href: `${base}/project-${project.region}-${project.$id}/overview`
+                                            href: getProjectRoute(project, '/overview')
                                         };
                                     } else if (index === 4) {
                                         return {
@@ -317,8 +318,7 @@
                         {#if index < 4}
                             <div use:melt={$itemProjects}>
                                 <ActionMenu.Root>
-                                    <ActionMenu.Item.Anchor
-                                        href={`${base}/project-${project.region}-${project.$id}`}>
+                                    <ActionMenu.Item.Anchor href={getProjectRoute(project)}>
                                         {project.name}
                                     </ActionMenu.Item.Anchor>
                                 </ActionMenu.Root>

src/lib/components/csvImportBox.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { goto, invalidate } from '$app/navigation';
-    import { getProjectId } from '$lib/helpers/project';
+    import { getProjectId, getProjectRoute } from '$lib/helpers/project';
     import { writable, type Writable } from 'svelte/store';
     import { addNotification } from '$lib/stores/notifications';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
@@ -32,7 +31,7 @@
         importData: Payload
     ) {
         await invalidate(Dependencies.DOCUMENTS);
-        const url = `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}`;
+        const url = getProjectRoute(`/databases/database-${databaseId}/collection-${collectionId}`);
 
         // extract clean message from nested backend error.
         const match = importData.errors.join('').match(/message: '(.*)' Message:/i);

src/lib/components/filePicker.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { EmptySearch, Id } from '.';
     import { onMount } from 'svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { goto } from '$app/navigation';
@@ -30,6 +29,7 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
     import { showCreateBucket } from '$routes/(console)/project-[region]-[project]/storage/+page.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
@@ -531,9 +531,7 @@
                                         <Button
                                             secondary
                                             on:click={async () => {
-                                                await goto(
-                                                    `${base}/project-${page.params.region}-${page.params.project}/storage`
-                                                );
+                                                await goto(getProjectRoute('/storage'));
                                                 $showCreateBucket = true;
                                             }}>
                                             Create bucket

src/lib/components/logs/loggingAlert.svelte

@@ -1,25 +1,23 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Link } from '$lib/elements';
     import { Alert } from '@appwrite.io/pink-svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let product: 'site' | 'function';
 </script>
 
 {#if product === 'site'}
     <Alert.Inline status="info" title="Your logs are disabled">
         To view logs and errors, enable them in your
-        <Link
-            href={`${base}/project-${page.params.region}-${page.params.project}/sites/site-${page.params.site}/settings`}>
+        <Link href={getProjectRoute(`/sites/site-${page.params.site}/settings`)}>
             site settings</Link
         >.
     </Alert.Inline>
 {:else if product === 'function'}
     <Alert.Inline status="info" title="Your execution logs are disabled">
         To view execution logs and errors, enable them in your
-        <Link
-            href={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/settings`}>
+        <Link href={getProjectRoute(`/functions/function-${page.params.function}/settings`)}>
             function settings</Link
         >.
     </Alert.Inline>

src/lib/components/navbar.svelte

@@ -55,6 +55,7 @@
     import { user } from '$lib/stores/user';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import type { HTMLAttributes } from 'svelte/elements';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let showSupport = false;
 
@@ -135,9 +136,9 @@
         {#if selectedProject && selectedProject.pingCount === 0}
             <div class="only-desktop" style:margin-inline-start="-16px">
                 <Button.Anchor
-                    href={`${base}/project-${selectedProject.region}-${selectedProject.$id}/get-started`}
+                    size="xs"
                     variant="secondary"
-                    size="xs">Connect</Button.Anchor>
+                    href={getProjectRoute(selectedProject, '/get-started')}>Connect</Button.Anchor>
             </div>
         {/if}
     </div>

src/lib/components/permissions/row.svelte

@@ -14,8 +14,8 @@
     } from '@appwrite.io/pink-svelte';
     import Avatar from '../avatar.svelte';
     import { IconAnonymous, IconExternalLink, IconMinusSm } from '@appwrite.io/pink-icons-svelte';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let role: string;
 
@@ -88,7 +88,7 @@
                             {/if}
                             <div>
                                 <Button.Anchor
-                                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/user-${data?.$id}`}
+                                    href={getProjectRoute(`/auth/user-${data?.$id}`)}
                                     size="xs"
                                     target="_blank"
                                     variant="secondary">
@@ -100,7 +100,7 @@
                             <Typography.Text>Members: {data?.total}</Typography.Text>
                             <div>
                                 <Button.Anchor
-                                    href={`${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${data?.$id}`}
+                                    href={getProjectRoute(`/auth/teams/team-${data?.$id}`)}
                                     size="s"
                                     target="_blank"
                                     variant="secondary">

src/lib/helpers/project.ts

@@ -1,6 +1,8 @@
+import { base } from '$app/paths';
 import { page } from '$app/state';
 import { get } from 'svelte/store';
 import { sdk } from '$lib/stores/sdk';
+import type { Models } from '@appwrite.io/console';
 import { projectRegion } from '$routes/(console)/project-[region]-[project]/store';
 
 /**
@@ -42,3 +44,48 @@ export function getProjectEndpoint(): string {
 
     return currentProjectRegion ? `${protocol}//${currentProjectRegion.$id}.${hostname}/v1` : href;
 }
+
+/**
+ * A minimal project shape with -
+ * 1. `$id` and
+ * 2. optional `region`.
+ *
+ * Compatible with full `Models.Project`.
+ */
+type CompatibleProjectInstance =
+    | Models.Project
+    | {
+          $id: string;
+          region?: string;
+      };
+
+/**
+ * Generates the project route URL, optionally using a custom project and/or path.
+ * Falls back to the current route's project and region if not provided.
+ *
+ * @param projectOrPath Either a project object or a path string (e.g., "/databases").
+ * @param maybePath Optional path string if the first argument is a project.
+ *
+ * @returns Project route URL (e.g., "/project-fra-console/databases").
+ */
+export function getProjectRoute(
+    projectOrPath?: string | CompatibleProjectInstance,
+    maybePath?: string
+): string {
+    let withPath: string | undefined;
+    let projectInstance: CompatibleProjectInstance | undefined;
+
+    if (typeof projectOrPath === 'string') {
+        withPath = projectOrPath;
+        projectInstance = undefined;
+    } else {
+        withPath = maybePath;
+        projectInstance = projectOrPath;
+    }
+
+    const projectId = projectInstance?.$id ?? page?.params?.project;
+    const projectRegion = projectInstance?.region ?? page?.params?.region ?? 'default';
+    const suffix = withPath?.trim() ? (withPath.startsWith('/') ? withPath : `/${withPath}`) : '';
+
+    return `${base}/project-${projectRegion}-${projectId}${suffix}`;
+}

src/routes/(console)/(migration-wizard)/wizard.svelte

@@ -23,7 +23,6 @@
     import { regions } from '$lib/stores/organization';
     import { addNotification } from '$lib/stores/notifications';
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { migrationFormToResources } from '$lib/stores/migration';
     import { EyebrowHeading } from '$lib/components';
     import {
@@ -35,6 +34,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { Dependencies } from '$lib/constants';
     import { filterRegions } from '$lib/helpers/regions';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     const onExit = () => {
         formData.reset();
@@ -123,9 +123,7 @@
             });
             onExit();
             await invalidate(Dependencies.PROJECTS);
-            await goto(
-                `${base}/project-${currentSelectedProject.region}-${currentSelectedProject.$id}/settings/migrations`
-            );
+            await goto(`${getProjectRoute(currentSelectedProject, '/settings/migrations')}`);
         } catch (error) {
             addNotification({
                 type: 'error',

src/routes/(console)/+layout.svelte

@@ -54,6 +54,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { LayoutData } from './$types';
     import type { NavbarProject } from '$lib/components/navbar.svelte';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     function kebabToSentenceCase(str: string) {
         return str
@@ -175,9 +176,7 @@
                 ({
                     label: kebabToSentenceCase(heading),
                     async callback() {
-                        await goto(
-                            `${base}/project-${$project.region}-${$project.$id}/auth/security#${heading}`
-                        );
+                        await goto(getProjectRoute($project, `/auth/security#${heading}`));
                         scrollBy({ top: -100 });
                     },
                     disabled: !$project?.$id,
@@ -191,7 +190,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'o'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings`);
+                goto(getProjectRoute('/settings'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.endsWith('settings')),
@@ -203,7 +202,7 @@
 
             keys: isOnSettingsLayout ? ['g', 'd'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/domains`);
+                goto(getProjectRoute('/settings/domains'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('domains')),
@@ -214,7 +213,7 @@
             label: 'Go to webhooks',
             keys: isOnSettingsLayout ? ['g', 'w'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/webhooks`);
+                goto(getProjectRoute('/settings/webhooks'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('webhooks')),
@@ -226,7 +225,7 @@
             label: 'Go to migrations',
             keys: isOnSettingsLayout ? ['g', 'm'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/migrations`);
+                goto(getProjectRoute('/settings/migrations'));
             },
             disabled:
                 !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('migrations')),
@@ -238,7 +237,7 @@
             label: 'Go to SMTP settings',
             keys: isOnSettingsLayout ? ['g', 's'] : undefined,
             callback: () => {
-                goto(`${base}/project-${$project.region}-${$project.$id}/settings/smtp`);
+                goto(getProjectRoute('/settings/smtp'));
             },
             disabled: !$project?.$id || (isOnSettingsLayout && page.url.pathname.includes('smtp')),
             group: isOnSettingsLayout ? 'navigation' : 'settings',

src/routes/(console)/onboarding/create-project/+page.svelte

@@ -7,11 +7,11 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { addNotification } from '$lib/stores/notifications';
     import CreateProject from '$lib/layout/createProject.svelte';
     import { loadAvailableRegions } from '$routes/(console)/regions';
     import { regions as regionsStore } from '$lib/stores/organization';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     let isLoading = false;
     let id: string;
@@ -40,7 +40,7 @@
 
             setTimeout(async () => {
                 await invalidate(Dependencies.ACCOUNT);
-                goto(`${base}/project-${project.region ?? 'default'}-${project.$id}`);
+                goto(getProjectRoute(project));
             }, 3000);
         } catch (e) {
             trackError(e, Submit.ProjectCreate);

src/routes/(console)/organization-[organization]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateProject from './createProject.svelte';
@@ -39,6 +38,7 @@
     import { getPlatformInfo } from '$lib/helpers/platform';
     import CreateProjectCloud from './createProjectCloud.svelte';
     import { regions as regionsStore } from '$lib/stores/organization';
+    import { getProjectRoute } from '$lib/helpers/project';
 
     export let data;
 
@@ -104,7 +104,7 @@
             trackEvent(Submit.ProjectCreate, {
                 teamId: page.params.organization
             });
-            await goto(`${base}/project-${project.region}-${project.$id}/settings/migrations`);
+            await goto(getProjectRoute(project, '/settings/migrations'));
             openImportWizard();
             loading.set(false);
         } catch (e) {
@@ -155,7 +155,7 @@
                 {@const platforms = filterPlatforms(
                     project.platforms.map((platform) => getPlatformInfo(platform.type))
                 )}
-                <GridItem1 href={`${base}/project-${project.region}-${project.$id}`}>
+                <GridItem1 href={getProjectRoute(project)}>
                     <svelte:fragment slot="eyebrow">
                         {project?.platforms?.length ? project?.platforms?.length : 'No'} apps
                     </svelte:fragment>