Merge pull request #167 from maxdorninger/enhance-frontend

[CHORE] replace all usages of base with resolve() and pin python version to 3.13

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

web/src/lib/utils.ts

@@ -1,7 +1,7 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { goto } from '$app/navigation';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import { toast } from 'svelte-sonner';
 import client from '$lib/api';
 
@@ -60,7 +60,7 @@ export function convertTorrentSeasonRangeToIntegerRange(torrent: {
 
 export async function handleLogout() {
 	await client.POST('/api/v1/auth/cookie/logout');
-	await goto(base + '/login');
+	await goto(resolve('/login', {}));
 }
 
 export async function handleOauth() {

web/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import '../app.css';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	let { children } = $props();
 </script>
@@ -10,7 +10,7 @@
 <svelte:head>
 	<title>MediaManager</title>
 	<meta content="Smart PVR for movies and TV shows" name="description" />
-	<link href="{base}/logo.svg" rel="icon" type="image/svg" />
+	<link href={resolve('/logo.svg', {})} rel="icon" type="image/svg" />
 </svelte:head>
 
 <ModeWatcher />

web/src/routes/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { browser } from '$app/environment';
 	import { redirect } from '@sveltejs/kit';
 
-	if (browser) goto(base + '/dashboard');
-	else throw redirect(307, base + '/login');
+	if (browser) goto(resolve('/dashboard', {}));
+	else throw redirect(307, resolve('/login', {}));
 </script>
 
 <svelte:head>

web/src/routes/dashboard/+layout.svelte

@@ -4,14 +4,14 @@
 	import type { LayoutProps } from './$types';
 	import { setContext } from 'svelte';
 	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { toast } from 'svelte-sonner';
 
 	let { data, children }: LayoutProps = $props();
 	console.log('Received User Data: ', data.user);
 	if (!data.user?.is_verified) {
 		toast.info('Your account requires verification. Redirecting...');
-		goto(base + '/login/verify');
+		goto(resolve('/login/verify', {}));
 	}
 	setContext('user', () => data.user);
 </script>

web/src/routes/dashboard/+layout.ts

@@ -1,6 +1,6 @@
 import type { LayoutLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
-import { base } from '$app/paths';
+import { resolve } from '$app/paths';
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
 import client from '$lib/api';
@@ -11,9 +11,9 @@ export const load: LayoutLoad = async ({ fetch }) => {
 	if (!response.ok) {
 		console.log('unauthorized, redirecting to login');
 		if (browser) {
-			await goto(base + '/login');
+			await goto(resolve('/login', {}));
 		} else {
-			throw redirect(303, base + '/login');
+			throw redirect(303, resolve('/login', {}));
 		}
 	}
 	return { user: data };

web/src/routes/dashboard/+page.svelte

@@ -3,7 +3,7 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import RecommendedMediaCarousel from '$lib/components/recommended-media-carousel.svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { onMount } from 'svelte';
 	import client from '$lib/api';
 	import type { components } from '$lib/api/api.d.ts';
@@ -41,7 +41,7 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>

web/src/routes/dashboard/movies/+page.svelte

@@ -7,7 +7,7 @@
 	import MediaPicture from '$lib/components/media-picture.svelte';
 	import { onMount } from 'svelte';
 	import { Skeleton } from '$lib/components/ui/skeleton';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import client from '$lib/api';
 	import type { components } from '$lib/api/api.d.ts';
 
@@ -35,11 +35,11 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
@@ -71,7 +71,7 @@
 			{@render loadingbar()}
 		{:else}
 			{#each movies as movie (movie.id)}
-				<a href={base + '/dashboard/movies/' + movie.id}>
+				<a href={resolve('/dashboard/movies/[movieId]', { movieId: movie.id! })}>
 					<Card.Root class="col-span-full max-w-[90vw] ">
 						<Card.Header>
 							<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(movie)}</Card.Title>

web/src/routes/dashboard/tv/+page.svelte

@@ -6,7 +6,7 @@
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import { getFullyQualifiedMediaName } from '$lib/utils';
 	import MediaPicture from '$lib/components/media-picture.svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 
 	let tvShows = page.data.tvShows;
 </script>
@@ -23,11 +23,11 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
@@ -45,7 +45,7 @@
 		class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
 	>
 		{#each tvShows as show (show.id)}
-			<a href={base + '/dashboard/tv/' + show.id}>
+			<a href={resolve('/dashboard/tv/[showId]', { showId: show.id })}>
 				<Card.Root class="col-span-full max-w-[90vw] ">
 					<Card.Header>
 						<Card.Title class="h-6 truncate">{getFullyQualifiedMediaName(show)}</Card.Title>

web/src/routes/dashboard/tv/[showId=uuid]/+page.svelte

@@ -19,7 +19,7 @@
 	import { Label } from '$lib/components/ui/label';
 	import LibraryCombobox from '$lib/components/library-combobox.svelte';
 	import * as Card from '$lib/components/ui/card/index.js';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import client from '$lib/api';
 
 	let show: () => components['schemas']['PublicShow'] = getContext('show');
@@ -68,15 +68,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard/tv', {})}>Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
@@ -174,7 +174,13 @@
 						{#if show().seasons.length > 0}
 							{#each show().seasons as season (season.id)}
 								<Table.Row
-									onclick={() => goto(base + '/dashboard/tv/' + show().id + '/' + season.id)}
+									onclick={() =>
+										goto(
+											resolve('/dashboard/tv/[showId]/[seasonId]', {
+												showId: show().id,
+												seasonId: season.id
+											})
+										)}
 								>
 									<Table.Cell class="min-w-[10px] font-medium">{season.number}</Table.Cell>
 									<Table.Cell class="min-w-[10px] font-medium">

web/src/routes/dashboard/tv/[showId=uuid]/[SeasonId=uuid]/+page.svelte

@@ -9,7 +9,7 @@
 	import CheckmarkX from '$lib/components/checkmark-x.svelte';
 	import { getFullyQualifiedMediaName, getTorrentQualityString } from '$lib/utils';
 	import MediaPicture from '$lib/components/media-picture.svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import * as Card from '$lib/components/ui/card/index.js';
 
 	let seasonFiles: components['schemas']['PublicSeasonFile'][] = $state(page.data.files);
@@ -36,19 +36,19 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard/tv', {})}>Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard/tv/{show().id}">
+					<Breadcrumb.Link href={resolve('/dashboard/tv/[showId]', { showId: show().id! })}>
 						{show().name}
 						{show().year == null ? '' : '(' + show().year + ')'}
 					</Breadcrumb.Link>

web/src/routes/dashboard/tv/add-show/+page.svelte

@@ -15,7 +15,7 @@
 	let searchTerm: string = $state('');
 	let metadataProvider: 'tmdb' | 'tvdb' = $state('tmdb');
 	let data: components['schemas']['MetaDataProviderSearchResult'][] | null = $state(null);
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import client from '$lib/api';
 	import type { components } from '$lib/api/api';
 
@@ -57,15 +57,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard/tv', {})}>Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>

web/src/routes/dashboard/tv/requests/+page.svelte

@@ -4,7 +4,7 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import RequestsTable from '$lib/components/season-requests-table.svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import type { components } from '$lib/api/api';
 
 	let requests: components['schemas']['RichSeasonRequest'][] = $state(page.data.requestsData);
@@ -22,15 +22,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard/tv', {})}>Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>

web/src/routes/dashboard/tv/torrents/+page.svelte

@@ -7,7 +7,7 @@
 	import * as Accordion from '$lib/components/ui/accordion/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import TorrentTable from '$lib/components/torrent-table.svelte';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import type { components } from '$lib/api/api';
 	let showsPromise: Promise<components['schemas']['RichShowTorrent'][]> = $state(page.data.shows);
 </script>
@@ -24,15 +24,15 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard">Home</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard', {})}>Home</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>
-					<Breadcrumb.Link href="{base}/dashboard/tv">Shows</Breadcrumb.Link>
+					<Breadcrumb.Link href={resolve('/dashboard/tv', {})}>Shows</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block" />
 				<Breadcrumb.Item>

web/src/routes/login/+layout.svelte

@@ -4,7 +4,7 @@
 
 	import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
 	import { PUBLIC_VERSION } from '$env/static/public';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { setContext } from 'svelte';
 
@@ -15,7 +15,7 @@
 <div class="grid min-h-svh lg:grid-cols-2">
 	<div class="flex flex-col gap-4 p-6 md:p-10">
 		<header class="flex justify-center gap-2 md:justify-start">
-			<a class="flex items-center gap-2" href="{base}/">
+			<a class="flex items-center gap-2" href={resolve('/', {})}>
 				<div class="text-primary-foreground flex size-16 items-center justify-center rounded-md">
 					<img alt="MediaManager Logo" class="size-12" src={logo} />
 				</div>

web/src/routes/login/forgot-password/+page.svelte

@@ -10,7 +10,7 @@
 		CardTitle
 	} from '$lib/components/ui/card';
 	import { toast } from 'svelte-sonner';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 	import client from '$lib/api';
 
 	let email = $state('');
@@ -106,7 +106,9 @@
 			</form>
 		{/if}
 		<div class="mt-4 text-center text-sm">
-			<a class="text-primary font-semibold hover:underline" href="{base}/login"> Back to Login </a>
+			<a class="text-primary font-semibold hover:underline" href={resolve('/login', {})}>
+				Back to Login
+			</a>
 		</div>
 	</CardContent>
 </Card>

web/src/routes/login/reset-password/+page.svelte

@@ -13,8 +13,8 @@
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
-	import { base } from '$app/paths';
 	import client from '$lib/api';
+	import { resolve } from '$app/paths';
 
 	let newPassword = $state('');
 	let confirmPassword = $state('');
@@ -24,7 +24,7 @@
 	onMount(() => {
 		if (!resetToken) {
 			toast.error('Invalid or missing reset token.');
-			goto(base + '/login');
+			goto(resolve('/login', {}));
 		}
 	});
 
@@ -50,7 +50,7 @@
 
 		if (response.ok) {
 			toast.success('Password reset successfully! You can now log in with your new password.');
-			goto(base + '/login');
+			goto(resolve('/login', {}));
 		} else {
 			toast.error(`Failed to reset password`);
 		}
@@ -108,9 +108,11 @@
 			</Button>
 		</form>
 		<div class="mt-4 text-center text-sm">
-			<a class="text-primary font-semibold hover:underline" href="{base}/login"> Back to Login </a>
+			<a class="text-primary font-semibold hover:underline" href={resolve('/login', {})}>
+				Back to Login
+			</a>
 			<span class="text-muted-foreground mx-2">•</span>
-			<a class="text-primary hover:underline" href="{base}/login/forgot-password">
+			<a class="text-primary hover:underline" href={resolve('/login/forgot-password', {})}>
 				Request New Reset Link
 			</a>
 		</div>

web/src/routes/login/verify/+page.svelte

@@ -2,7 +2,7 @@
 	import { UserCheck } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { handleLogout } from '$lib/utils.ts';
-	import { base } from '$app/paths';
+	import { resolve } from '$app/paths';
 </script>
 
 <svelte:head>
@@ -24,7 +24,7 @@
 		Your account has been successfully created, but activation by an administrator is required.
 	</p>
 	<div class="mt-8">
-		<Button href="{base}/dashboard">Go to Dashboard</Button>
+		<Button href={resolve('/dashboard', {})}>Go to Dashboard</Button>
 	</div>
 	<p class="text-muted-foreground mt-10 text-sm">
 		The above button will only work once your account is verified.