Reworked routes so they are dynamic and resolvable by href.

Author: niemyjski

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

@@ -5,7 +5,7 @@
     import * as Sidebar from '$comp/ui/sidebar';
     import { useSidebar } from '$comp/ui/sidebar';
 
-    import type { NavigationItem } from '../../../routes';
+    import type { NavigationItem } from '../../../routes.svelte';
 
     type Props = ComponentProps<typeof Sidebar.Root> & {
         footer?: Snippet;

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/navigation-command.svelte

@@ -2,7 +2,7 @@
     import { A } from '$comp/typography';
     import * as Command from '$comp/ui/command';
 
-    import type { NavigationItem } from '../../routes';
+    import type { NavigationItem } from '../../routes.svelte';
 
     let { open = $bindable(), routes }: { open: boolean; routes: NavigationItem[] } = $props();
 

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte

@@ -3,7 +3,7 @@
 
     import * as Navigation from '$lib/features/shared/components/navigation';
 
-    import type { NavigationItem } from '../../routes';
+    import type { NavigationItem } from '../../routes.svelte';
 
     interface Props extends HTMLAttributes<HTMLElement> {
         routes: NavigationItem[];

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

@@ -18,7 +18,7 @@
     import { useQueryClient } from '@tanstack/svelte-query';
     import { fade } from 'svelte/transition';
 
-    import { type NavigationItemContext, routes } from '../routes';
+    import { type NavigationItemContext, routes } from '../routes.svelte';
     import Footer from './(components)/layouts/footer.svelte';
     import Navbar from './(components)/layouts/navbar.svelte';
     import SidebarOrganizationSwitcher from './(components)/layouts/sidebar-organization-switcher.svelte';
@@ -173,7 +173,7 @@
 
     const filteredRoutes = $derived.by(() => {
         const context: NavigationItemContext = { authenticated: isAuthenticated, user: userResponse.data };
-        return routes.filter((route) => (route.show ? route.show(context) : true));
+        return routes().filter((route) => (route.show ? route.show(context) : true));
     });
 </script>
 

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

@@ -5,18 +5,18 @@
     import * as SplitLayout from '$features/shared/components/layouts/split-layout';
     import { getMeQuery } from '$features/users/api.svelte';
 
-    import type { NavigationItemContext } from '../../routes';
+    import type { NavigationItemContext } from '../../routes.svelte';
 
     import SidebarNav from '../(components)/sidebar-nav.svelte';
-    import { routes } from './routes';
+    import { routes } from './routes.svelte';
 
     let { children } = $props();
 
     const userResponse = getMeQuery();
     let isAuthenticated = $derived(accessToken.current !== null);
     const filteredRoutes = $derived.by(() => {
         const context: NavigationItemContext = { authenticated: isAuthenticated, user: userResponse.data };
-        return routes.filter((route) => (route.show ? route.show(context) : true));
+        return routes().filter((route) => (route.show ? route.show(context) : true));
     });
 </script>
 

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

@@ -0,0 +1,53 @@
+import Notifications from 'lucide-svelte/icons/bell';
+import Password from 'lucide-svelte/icons/key-round';
+import Verify from 'lucide-svelte/icons/shield-check';
+import Appearance from 'lucide-svelte/icons/sun-moon';
+import Account from 'lucide-svelte/icons/user';
+import Sessions from 'lucide-svelte/icons/users';
+
+import type { NavigationItem } from '../../routes.svelte';
+
+export function routes(): NavigationItem[] {
+    return [
+        {
+            group: 'My Account',
+            href: '/next/account/manage',
+            icon: Account,
+            title: 'Account'
+        },
+        {
+            group: 'My Account',
+            href: '/next/account/appearance',
+            icon: Appearance,
+            title: 'Appearance'
+        },
+        {
+            group: 'My Account',
+            href: '/next/account/notifications',
+            icon: Notifications,
+            show: () => false,
+            title: 'Notifications'
+        },
+        {
+            group: 'My Account',
+            href: '/next/account/security',
+            icon: Password,
+            show: () => false,
+            title: 'Password and authentication'
+        },
+        {
+            group: 'My Account',
+            href: '/next/account/sessions',
+            icon: Sessions,
+            show: () => false,
+            title: 'Sessions'
+        },
+        {
+            group: 'My Account',
+            href: '/next/account/verify',
+            icon: Verify,
+            show: () => false,
+            title: 'Verify'
+        }
+    ];
+}

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

@@ -34,7 +34,7 @@
             // TODO: Show a message to the user that they need to upgrade their subscription.
         }
 
-        toast.error(`The event "${page.params.id}" could not be found.`);
+        toast.error(`The event "${page.params.eventId}" could not be found.`);
         await goto('/next/');
     }
 </script>
@@ -45,7 +45,7 @@
             <Card.Title class="text-2xl" level={2}>Event Details</Card.Title></Card.Header
         >
         <Card.Content class="pt-4">
-            <EventsOverview {filterChanged} id={page.params.id || ''} {handleError}></EventsOverview>
+            <EventsOverview {filterChanged} id={page.params.eventId || ''} {handleError}></EventsOverview>
         </Card.Content>
     </Card.Root>
 </div>

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

@@ -0,0 +1,20 @@
+import { page } from '$app/state';
+import Events from 'lucide-svelte/icons/calendar-days';
+
+import type { NavigationItem } from '../../routes.svelte';
+
+export function routes(): NavigationItem[] {
+    if (!page.params.eventId) {
+        return [];
+    }
+
+    return [
+        {
+            group: 'Event',
+            href: `/next/event/${page.params.eventId}`,
+            icon: Events,
+            show: () => false,
+            title: 'Event Details'
+        }
+    ];
+}

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

@@ -0,0 +1,60 @@
+import { page } from '$app/state';
+import ClientConfig from 'lucide-svelte/icons/braces';
+import Configure from 'lucide-svelte/icons/cloud-download';
+import ApiKey from 'lucide-svelte/icons/key';
+import Integration from 'lucide-svelte/icons/plug-2';
+import Settings from 'lucide-svelte/icons/settings';
+import Webhook from 'lucide-svelte/icons/webhook';
+
+import type { NavigationItem } from '../../../routes.svelte';
+
+export function routes(): NavigationItem[] {
+    if (!page.params.projectId) {
+        return [];
+    }
+
+    return [
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/manage`,
+            icon: Settings,
+            title: 'General'
+        },
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/api-keys`,
+            icon: ApiKey,
+            title: 'API Keys'
+        },
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/settings`,
+            icon: Settings,
+            title: 'Settings'
+        },
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/config`,
+            icon: ClientConfig,
+            title: 'Client Configuration'
+        },
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/configure`,
+            icon: Configure,
+            title: 'Download & Configure Client'
+        },
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/webhooks`,
+            icon: Webhook,
+            title: 'Webhooks'
+        },
+        {
+            group: 'Project Settings',
+            href: `/next/project/${page.params.projectId}/integrations`,
+            icon: Integration,
+            title: 'Integrations'
+        }
+    ];
+}