replace base with resolve

web/src/lib/components/add-media-card.svelte

@@ -3,7 +3,7 @@
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { ImageOff } from 'lucide-svelte';
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import type { components } from '$lib/api/api';
 	import client from '$lib/api';
 
@@ -39,7 +39,11 @@
 			});
 			data = response.data;
 		}
-		await goto(`${base}/dashboard/${isShow ? 'tv' : 'movies'}/` + data?.id);
+		if (isShow) {
+			await goto(resolve('/dashboard/tv/[showId]', { showId: data?.id ?? '' }));
+		} else {
+			await goto(resolve('/dashboard/movies/[movieId]', { movieId: data?.id ?? '' }));
+		}
 		loading = false;
 	}
 </script>

web/src/lib/components/app-sidebar.svelte

@@ -9,7 +9,7 @@
 		Settings,
 		TvIcon
 	} from 'lucide-svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	import { PUBLIC_VERSION } from '$env/static/public';
 
@@ -17,47 +17,47 @@
 		navMain: [
 			{
 				title: 'Dashboard',
-				url: base + '/dashboard',
+				url: resolve('/dashboard', {}),
 				icon: Home,
 				isActive: true
 			},
 			{
 				title: 'TV',
-				url: base + '/dashboard/tv',
+				url: resolve('/dashboard/tv', {}),
 				icon: TvIcon,
 				isActive: true,
 				items: [
 					{
 						title: 'Add a show',
-						url: base + '/dashboard/tv/add-show'
+						url: resolve('/dashboard/tv/add-show', {})
 					},
 					{
 						title: 'Torrents',
-						url: base + '/dashboard/tv/torrents'
+						url: resolve('/dashboard/tv/torrents', {})
 					},
 					{
 						title: 'Requests',
-						url: base + '/dashboard/tv/requests'
+						url: resolve('/dashboard/tv/requests', {})
 					}
 				]
 			},
 			{
 				title: 'Movies',
-				url: base + '/dashboard/movies',
+				url: resolve('/dashboard/movies', {}),
 				icon: Clapperboard,
 				isActive: true,
 				items: [
 					{
 						title: 'Add a movie',
-						url: base + '/dashboard/movies/add-movie'
+						url: resolve('/dashboard/movies/add-movie', {})
 					},
 					{
 						title: 'Torrents',
-						url: base + '/dashboard/movies/torrents'
+						url: resolve('/dashboard/movies/torrents', {})
 					},
 					{
 						title: 'Requests',
-						url: base + '/dashboard/movies/requests'
+						url: resolve('/dashboard/movies/requests', {})
 					}
 				]
 			}
@@ -65,12 +65,12 @@
 		navSecondary: [
 			{
 				title: 'Notifications',
-				url: base + '/dashboard/notifications',
+				url: resolve('/dashboard/notifications', {}),
 				icon: Bell
 			},
 			{
 				title: 'Settings',
-				url: base + '/dashboard/settings',
+				url: resolve('/dashboard/settings', {}),
 				icon: Settings
 			},
 			{
@@ -85,7 +85,7 @@
 			},
 			{
 				title: 'About',
-				url: base + '/dashboard/about',
+				url: resolve('/dashboard/about', {}),
 				icon: Info
 			}
 		]
@@ -109,7 +109,7 @@
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton size="lg">
 					{#snippet child({ props })}
-						<a href="{base}/dashboard" {...props}>
+						<a href={resolve('/dashboard', {})} {...props}>
 							<img class="size-12" src={logo} alt="Media Manager Logo" />
 							<div class="grid flex-1 text-left text-sm leading-tight">
 								<span class="truncate font-semibold">Media Manager</span>

web/src/lib/components/login-card.svelte

@@ -11,6 +11,7 @@
 	import LoadingBar from '$lib/components/loading-bar.svelte';
 	import client from '$lib/api';
 	import { handleOauth } from '$lib/utils.ts';
+	import { resolve } from '$app/paths';
 
 	let {
 		oauthProviderNames
@@ -46,7 +47,7 @@
 			console.log('Received User Data: ', response);
 			errorMessage = 'Login successful! Redirecting...';
 			toast.success(errorMessage);
-			goto(base + '/dashboard');
+			goto(resolve('/dashboard', {}));
 		} else {
 			toast.error('Login failed!');
 			errorMessage = `Login failed! Please check your credentials and try again.`;
@@ -75,7 +76,10 @@
 			<div class="grid gap-2">
 				<div class="flex items-center">
 					<Label for="password">Password</Label>
-					<a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
+					<a
+						class="ml-auto inline-block text-sm underline"
+						href={resolve('/login/forgot-password', {})}
+					>
 						Forgot your password?
 					</a>
 				</div>

web/src/lib/components/nav-main.svelte

@@ -2,6 +2,7 @@
 	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { resolve } from '$app/paths';
 
 	let {
 		items
@@ -33,7 +34,7 @@
 								{mainItem.title}
 							{/snippet}
 							{#snippet child({ props })}
-								<a href={mainItem.url} {...props}>
+								<a href={resolve(mainItem.url, {})} {...props}>
 									<mainItem.icon />
 									<span>{mainItem.title}</span>
 								</a>

web/src/lib/components/nav-projects.svelte

@@ -6,7 +6,7 @@
 	import Folder from '@lucide/svelte/icons/folder';
 	import Share from '@lucide/svelte/icons/share';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
-
+	import { resolve } from '$app/paths';
 	let {
 		projects
 	}: {
@@ -29,7 +29,7 @@
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton>
 					{#snippet child({ props })}
-						<a href={item.url} {...props}>
+						<a href={resolve(item.url, {})} {...props}>
 							<item.icon />
 							<span>{item.name}</span>
 						</a>

web/src/lib/components/nav-secondary.svelte

@@ -3,7 +3,7 @@
 	import type { ComponentProps } from 'svelte';
 	import Sun from '@lucide/svelte/icons/sun';
 	import Moon from '@lucide/svelte/icons/moon';
-
+	import { resolve } from '$app/paths';
 	import { toggleMode } from 'mode-watcher';
 
 	let {
@@ -41,7 +41,7 @@
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton size="sm">
 						{#snippet child({ props })}
-							<a href={item.url} {...props}>
+							<a href={resolve(item.url, {})} {...props}>
 								<item.icon />
 								<span>{item.title}</span>
 							</a>

web/src/lib/components/nav-user.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
 	import LogOut from '@lucide/svelte/icons/log-out';
-
 	import * as Avatar from '$lib/components/ui/avatar/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
@@ -10,7 +9,7 @@
 	import UserRound from '@lucide/svelte/icons/user-round';
 	import { handleLogout } from '$lib/utils.ts';
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	const sidebar = useSidebar();
 </script>
 
@@ -57,7 +56,7 @@
 					</div>
 				</DropdownMenu.Label>
 				<DropdownMenu.Separator />
-				<DropdownMenu.Item onclick={() => goto(base + '/dashboard/settings#me')}>
+				<DropdownMenu.Item onclick={() => goto(resolve('/dashboard/settings#me', {}))}>
 					My Account
 				</DropdownMenu.Item>
 				<DropdownMenu.Separator />

web/src/lib/components/season-requests-table.svelte

@@ -8,7 +8,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import client from '$lib/api';
 
 	let {
@@ -28,7 +28,6 @@
 		isShow: boolean;
 	} = $props();
 	const user: () => components['schemas']['UserRead'] = getContext('user');
-
 	async function approveRequest(requestId: string, currentAuthorizedStatus: boolean) {
 		let response;
 		if (isShow) {
@@ -183,9 +182,9 @@
 									variant="outline"
 									onclick={() =>
 										goto(
-											base +
-												'/dashboard/tv/' +
-												(request as components['schemas']['RichSeasonRequest']).show.id
+											resolve('/dashboard/tv/[showId]', {
+												showId: (request as components['schemas']['RichSeasonRequest']).show.id!
+											})
 										)}
 								>
 									Download manually
@@ -197,9 +196,9 @@
 									variant="outline"
 									onclick={() =>
 										goto(
-											base +
-												'/dashboard/movies/' +
-												(request as components['schemas']['RichMovieRequest']).movie.id
+											resolve('/dashboard/movies/[movieId]', {
+												movieId: (request as components['schemas']['RichMovieRequest']).movie.id!
+											})
 										)}
 								>
 									Download manually