Updates routes to use SvelteKit's resolve

Migrates hardcoded routes to use SvelteKit's `resolve` function for improved route management and flexibility.

This change ensures that routes are correctly resolved based on the application's configuration and base path, preventing potential issues with broken links or incorrect navigation, especially after the introduction of route groups.

Additionally, the commit disables the `svelte/no-navigation-without-resolve` eslint rule, as the updated code now consistently uses the `resolve` function.

Author: niemyjski

src/Exceptionless.Web/ClientApp/eslint.config.js

@@ -37,6 +37,11 @@ export default ts.config(
     {
         ignores: ['build/', '.svelte-kit/', 'dist/', 'src/lib/generated/api.ts', 'src/lib/features/shared/components/ui/']
     },
+    {
+        rules: {
+            'svelte/no-navigation-without-resolve': 'off'
+        }
+    },
     {
         rules: {
             'perfectionist/sort-enums': [

src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts

@@ -1,4 +1,5 @@
 import { goto } from '$app/navigation';
+import { resolve } from '$app/paths';
 import { page } from '$app/state';
 import { env } from '$env/dynamic/public';
 import { useFetchClient } from '@exceptionless/fetchclient';
@@ -106,7 +107,7 @@ export async function googleLogin(redirectUrl?: string) {
 export async function gotoLogin() {
     const url = page.url;
     const isAuthPath = url.pathname.startsWith('/next/login') || url.pathname.startsWith('/next/logout');
-    const redirect = url.pathname === '/next/' || isAuthPath ? '/next/login' : `/next/login?redirect=${url.pathname}`;
+    const redirect = url.pathname === resolve('/') || isAuthPath ? resolve('/(auth)/login') : `${resolve('/(auth)/login')}?redirect=${url.pathname}`;
     await goto(redirect, { replaceState: true });
 }
 
@@ -181,7 +182,7 @@ async function oauthLogin(options: OAuthLoginOptions) {
 
     if (response.ok && response.data?.token) {
         accessToken.current = response.data.token;
-        await goto(options.redirectUrl || '/');
+        await goto(options.redirectUrl || resolve('/'));
     }
 }
 

src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-actions-cell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { deleteOrganization, deleteOrganizationUser } from '$features/organizations/api.svelte';
@@ -82,15 +83,15 @@
         {/snippet}
     </DropdownMenu.Trigger>
     <DropdownMenu.Content align="end">
-        <DropdownMenu.Item onclick={() => goto(`/next/organization/${org.id}/manage`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve(`/(app)/organization/[organizationId]/manage`, { organizationId: org.id }))}>
             <Edit />
             Edit
         </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => goto(`/next/organization/${org.id}/billing`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve(`/(app)/organization/[organizationId]/billing`, { organizationId: org.id }))}>
             <ChangePlan />
             Change Plan
         </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => goto(`/next/organization/${org.id}/billing`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve(`/(app)/organization/[organizationId]/billing`, { organizationId: org.id }))}>
             <ViewInvoices />
             View Invoices
         </DropdownMenu.Item>

src/Exceptionless.Web/ClientApp/src/lib/features/projects/components/table/project-actions-cell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { deleteProject } from '$features/projects/api.svelte';
@@ -45,15 +46,15 @@
         {/snippet}
     </DropdownMenu.Trigger>
     <DropdownMenu.Content align="end">
-        <DropdownMenu.Item onclick={() => goto(`/next/issues`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/issues'))}>
             <Issues />
             Issues
         </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => goto(`/next/project/${project.id}/manage`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/project/[projectId]/manage', { projectId: project.id }))}>
             <Edit />
             Edit
         </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => goto(`/next/project/${project.id}/configure`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/project/[projectId]/configure', { projectId: project.id }))}>
             <Configure />
             Download & Configure Client
         </DropdownMenu.Item>
@@ -62,7 +63,7 @@
             Delete
         </DropdownMenu.Item>
         <DropdownMenu.Separator />
-        <DropdownMenu.Item onclick={() => goto(`/organization/${project.organization_id}/manage`)}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/organization/[organizationId]/manage', { organizationId: project.organization_id }))}>
             <Organization />
             View Organization
         </DropdownMenu.Item>

src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import Button from '$comp/ui/button/button.svelte';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import Reference from '@lucide/svelte/icons/link-2';
@@ -86,7 +87,7 @@
     }
 
     async function navigateToProjectIntegrations() {
-        await goto(`/project/${stack.project_id}/manage`);
+        await goto(resolve('/(app)/project/[projectId]/manage', { projectId: stack.project_id }));
     }
 
     async function updateCritical() {

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/navbar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import DarkModeButton from '$comp/dark-mode-button.svelte';
     import Logo from '$comp/logo.svelte';
     import { Button } from '$comp/ui/button';
@@ -27,7 +28,7 @@
             <div class="flex items-center justify-start">
                 <Sidebar.Trigger variant="outline" class="size-9" />
 
-                <a class="mr-14 ml-2 flex md:min-w-[250px] lg:ml-3 dark:text-white" href="./">
+                <a class="mr-14 ml-2 flex md:min-w-[250px] lg:ml-3 dark:text-white" href={resolve('/(app)')}>
                     {#if isMediumScreenQuery.current}
                         <Logo class="absolute top-[9px] mr-3 h-[45px]" />
                     {:else}

src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte

@@ -2,6 +2,7 @@
     import type { Snippet } from 'svelte';
 
     import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import { useSidebar } from '$comp/ui/sidebar';
     import { env } from '$env/dynamic/public';
@@ -168,7 +169,7 @@
 
         if (!organizationsQuery.data.data || organizationsQuery.data.data.length === 0) {
             organization.current = undefined;
-            goto('/next/organization/add');
+            goto(resolve(`/(app)/organization/add`));
             return;
         }
 

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.svelte.ts

@@ -1,3 +1,4 @@
+import { resolve } from '$app/paths';
 import Notifications from '@lucide/svelte/icons/bell';
 import Password from '@lucide/svelte/icons/key-round';
 import Verify from '@lucide/svelte/icons/shield-check';
@@ -11,39 +12,39 @@ export function routes(): NavigationItem[] {
     return [
         {
             group: 'My Account',
-            href: '/next/account/manage',
+            href: resolve('/(app)/account/manage'),
             icon: Account,
             title: 'Account'
         },
         {
             group: 'My Account',
-            href: '/next/account/appearance',
+            href: resolve('/(app)/account/appearance'),
             icon: Appearance,
             title: 'Appearance'
         },
         {
             group: 'My Account',
-            href: '/next/account/notifications',
+            href: resolve('/(app)/account/notifications'),
             icon: Notifications,
             title: 'Notifications'
         },
         {
             group: 'My Account',
-            href: '/next/account/security',
+            href: resolve('/(app)/account/security'),
             icon: Password,
             show: () => false,
             title: 'Password and authentication'
         },
         {
             group: 'My Account',
-            href: '/next/account/sessions',
+            href: resolve('/(app)/account/sessions'),
             icon: Sessions,
             show: () => false,
             title: 'Sessions'
         },
         {
             group: 'My Account',
-            href: '/next/account/verify',
+            href: resolve('/(app)/account/verify'),
             icon: Verify,
             show: () => false,
             title: 'Verify'

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/verify/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import { useFetchClient } from '@exceptionless/fetchclient';
     import { toast } from 'svelte-sonner';
@@ -19,7 +20,7 @@
             }
         }
 
-        await goto('/next/account/manage');
+        await goto(resolve('/(app)/account/manage'));
     }
 
     verifyAccount();

src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[eventId]/+page.svelte

@@ -2,6 +2,7 @@
     import type { ProblemDetails } from '@exceptionless/fetchclient';
 
     import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import * as FacetedFilter from '$comp/faceted-filter';
     import { H3 } from '$comp/typography';
@@ -16,7 +17,7 @@
     watch(
         () => organization.current,
         () => {
-            goto('/next/');
+            goto(resolve('/(app)'));
         },
         { lazy: true }
     );
@@ -31,7 +32,7 @@
         }
 
         toast.error(`The event "${page.params.eventId}" could not be found.`);
-        await goto('/next/');
+        await goto(resolve('/(app)'));
     }
 </script>