refactor: use resolve for paths

src/lib/commands/built-in/join.ts

@@ -1,4 +1,5 @@
 import { goto } from "$app/navigation";
+import { resolve } from "$app/paths";
 import { app } from "$lib/app.svelte";
 import { ApiError } from "$lib/errors/api-error";
 import { CommandError } from "$lib/errors/command-error";
@@ -32,6 +33,10 @@ export default defineCommand({
 			}
 		}
 
-		await goto(`/channels/${args[0]}`);
+		await goto(
+			resolve("/(main)/channels/[username]", {
+				username: args[0],
+			}),
+		);
 	},
 });

src/lib/commands/built-in/leave.ts

@@ -1,4 +1,5 @@
 import { goto } from "$app/navigation";
+import { resolve } from "$app/paths";
 import { defineCommand } from "../util";
 
 export default defineCommand({
@@ -7,6 +8,6 @@ export default defineCommand({
 	description: "Leave the current channel",
 	async exec(_, channel) {
 		await channel.leave();
-		await goto("/");
+		await goto(resolve("/"));
 	},
 });

src/lib/components/JoinDialog.svelte

@@ -12,6 +12,7 @@
 	import * as Dialog from "./ui/dialog";
 	import * as Field from "./ui/field";
 	import { Input } from "./ui/input";
+	import { resolve } from "$app/paths";
 
 	interface Props {
 		children: Snippet;
@@ -69,7 +70,11 @@
 				app.channels.set(channel.id, channel);
 			}
 
-			await goto(`/channels/${channel.user.username}`);
+			await goto(
+				resolve("/(main)/channels/[username]", {
+					username: channel.user.username,
+				}),
+			);
 
 			open = false;
 			reset();

src/lib/components/Sidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import { ScrollArea } from "bits-ui";
 	import { MediaQuery } from "svelte/reactivity";
 	import { crossfade } from "svelte/transition";
@@ -48,7 +49,7 @@
 >
 	<ScrollArea.Viewport class="h-full">
 		<div id="sidebar-actions" class="flex flex-col gap-1 px-1.5 py-1">
-			<Button class="relative" href="/whispers" variant="ghost">
+			<Button class="relative" href={resolve("/whispers")} variant="ghost">
 				<Chats class={[context.collapsed && unread && "animate-pulse"]} />
 
 				<span class="group-data-[state=collapsed]:sr-only">Whispers</span>
@@ -83,7 +84,7 @@
 					if (page.route.id === "/(main)/channels/[username]" && !app.splits.root) {
 						app.splits.activate();
 					} else {
-						goto("/channels/split");
+						goto(resolve("/channels/split"));
 					}
 				}}
 			>

src/lib/components/StreamTooltip.svelte

@@ -7,6 +7,7 @@
 	import GuestList from "./GuestList.svelte";
 	import StreamInfo from "./StreamInfo.svelte";
 	import * as Tooltip from "./ui/tooltip";
+	import { resolve } from "$app/paths";
 
 	interface Props {
 		channel: Channel;
@@ -27,7 +28,9 @@
 			>
 				<a
 					class="absolute inset-0 z-10"
-					href="/channels/{channel.user.username}"
+					href={resolve("/(main)/channels/[username]", {
+						username: channel.user.username,
+					})}
 					draggable="false"
 					aria-label="Join {channel.user.displayName}"
 					data-sveltekit-preload-data="off"

src/lib/components/TitleBar.svelte

@@ -14,6 +14,7 @@
 	import { app } from "$lib/app.svelte";
 	import GuestList from "./GuestList.svelte";
 	import { Button } from "./ui/button";
+	import { resolve } from "$app/paths";
 
 	type ControlType = "minimize" | "maximize" | "close";
 
@@ -59,7 +60,7 @@
 		if (settingsWindow) {
 			await settingsWindow.setFocus();
 		} else {
-			await goto("/settings");
+			await goto(resolve("/settings"));
 		}
 	}
 </script>
@@ -122,7 +123,9 @@
 			{#if app.user}
 				<Button
 					class="hover:text-foreground size-min p-1"
-					href="/channels/{app.user.username}"
+					href={resolve("/(main)/channels/[username]", {
+						username: app.user.username,
+					})}
 					size="icon"
 					variant="ghost"
 					aria-label="Go to your channel"

src/lib/menus/channel-menu.ts

@@ -5,6 +5,7 @@ import type { Channel } from "$lib/models/channel.svelte";
 import { settings } from "$lib/settings";
 import type { SplitBranch, SplitDirection } from "$lib/split-layout";
 import { storage } from "$lib/stores";
+import { resolve } from "$app/paths";
 
 async function splitItem(channel: Channel, direction: SplitDirection) {
 	const enabled =
@@ -38,7 +39,7 @@ async function splitItem(channel: Channel, direction: SplitDirection) {
 			app.splits.insert(app.splits.focused, channel.id, node);
 
 			if (!app.splits.active) {
-				await goto("/channels/split");
+				await goto(resolve("/channels/split"));
 			}
 		},
 	});
@@ -56,7 +57,11 @@ export async function createChannelMenu(channel: Channel) {
 		text: "Join",
 		enabled: !channel.joined,
 		async action() {
-			await goto(`/channels/${channel.user.username}`);
+			await goto(
+				resolve("/(main)/channels/[username]", {
+					username: channel.user.username,
+				}),
+			);
 		},
 	});
 
@@ -74,7 +79,7 @@ export async function createChannelMenu(channel: Channel) {
 			) {
 				app.splits.replace(channel.id, `split-${crypto.randomUUID()}`);
 			} else if (app.focused === channel) {
-				await goto("/");
+				await goto(resolve("/"));
 			}
 		},
 	});
@@ -123,7 +128,7 @@ export async function createChannelMenu(channel: Channel) {
 			async action() {
 				await channel.leave();
 				app.channels.delete(channel.id);
-				await goto("/");
+				await goto(resolve("/"));
 			},
 		});
 

src/lib/split-layout.ts

@@ -4,6 +4,7 @@ import { goto } from "$app/navigation";
 import { page } from "$app/state";
 import { app } from "./app.svelte";
 import { layout } from "./stores";
+import { resolve } from "$app/paths";
 
 export type SplitDirection = "up" | "down" | "left" | "right";
 
@@ -183,7 +184,7 @@ export class SplitLayout {
 	public async activate() {
 		if (!this.active && app.focused) {
 			app.splits.root = app.focused.id;
-			await goto("/channels/split");
+			await goto(resolve("/channels/split"));
 		}
 	}
 

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

@@ -14,6 +14,7 @@
 	import Sidebar from "$lib/components/Sidebar.svelte";
 	import * as Tooltip from "$lib/components/ui/tooltip";
 	import { storage } from "$lib/stores";
+	import { resolve } from "$app/paths";
 
 	const { children } = $props();
 </script>
@@ -22,7 +23,7 @@
 	onkeydown={async (event) => {
 		if ((event.metaKey || event.ctrlKey) && event.key === ",") {
 			event.preventDefault();
-			await goto("/settings");
+			await goto(resolve("/settings"));
 		}
 	}}
 />

src/routes/(main)/+page.svelte

@@ -10,6 +10,7 @@
 	import { log } from "$lib/log";
 	import { settings } from "$lib/settings";
 	import { layout, storage } from "$lib/stores";
+	import { resolve } from "$app/paths";
 
 	let loading = $state(true);
 
@@ -26,7 +27,7 @@
 
 			if (isBranch || restoreBehavior === "preserve") {
 				app.splits.root = layout.state.root;
-				await goto("/channels/split");
+				await goto(resolve("/channels/split"));
 
 				return;
 			}
@@ -46,7 +47,11 @@
 		}
 
 		if (storage.state.lastJoined) {
-			await goto(`/channels/${storage.state.lastJoined}`);
+			await goto(
+				resolve("/(main)/channels/[username]", {
+					username: storage.state.lastJoined,
+				}),
+			);
 		}
 
 		loading = false;
@@ -77,7 +82,7 @@
 				<JoinDialog class={buttonVariants()}>Search channels</JoinDialog>
 
 				<Button
-					href="/channels/split"
+					href={resolve("/channels/split")}
 					disabled={settings.state["advanced.singleConnection"]}
 					variant="secondary"
 				>

src/routes/(main)/channels/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
 	import { app } from "$lib/app.svelte";
 	import { settings } from "$lib/settings";
 
@@ -32,7 +33,7 @@
 					event.preventDefault();
 
 					await app.focused.leave();
-					await goto("/");
+					await goto(resolve("/"));
 				}
 
 				break;

src/routes/(main)/channels/split/SplitHeader.svelte

@@ -8,6 +8,7 @@
 	import { Button } from "$lib/components/ui/button";
 	import { settings } from "$lib/settings";
 	import { SplitLayout } from "$lib/split-layout";
+	import { resolve } from "$app/paths";
 
 	interface Props {
 		id: string;
@@ -36,9 +37,13 @@
 			}
 
 			if (channel && settings.state["splits.goToChannelAfterClose"]) {
-				await goto(`/channels/${channel.user.username}`);
+				await goto(
+					resolve("/(main)/channels/[username]", {
+						username: channel.user.username,
+					}),
+				);
 			} else {
-				await goto("/");
+				await goto(resolve("/"));
 			}
 
 			app.splits.root = null;

src/routes/(main)/whispers/+page.svelte

@@ -4,6 +4,7 @@
 	import type { Attachment } from "svelte/attachments";
 	import ChatDots from "~icons/ph/chat-dots";
 	import * as Empty from "$lib/components/ui/empty";
+	import { resolve } from "$app/paths";
 
 	dayjs.extend(relativeTime);
 
@@ -41,7 +42,7 @@
 		>
 			<a
 				class="absolute inset-0 z-1"
-				href="/whispers/{id}"
+				href={resolve("/(main)/whispers/[id]", { id })}
 				aria-label="Go to whisper with {whisper.sender.displayName}"
 				data-sveltekit-preload-data="off"
 			></a>

src/routes/auth/login/+page.svelte

@@ -13,6 +13,7 @@
 	import { storage } from "$lib/stores";
 	import { SCOPES } from "$lib/twitch";
 	import { TwitchClient } from "$lib/twitch/client";
+	import { resolve } from "$app/paths";
 
 	interface TokenInfo {
 		user_id: string;
@@ -52,7 +53,7 @@
 			app.user = new CurrentUser(user);
 
 			await storage.saveNow();
-			await goto("/");
+			await goto(resolve("/"));
 		});
 	});
 

src/routes/auth/logout/+page.svelte

@@ -4,6 +4,7 @@
 	import { goto } from "$app/navigation";
 	import { Label } from "$lib/components/ui/label";
 	import { Progress } from "$lib/components/ui/progress";
+	import { resolve } from "$app/paths";
 
 	const id = $props.id();
 
@@ -12,7 +13,7 @@
 
 	$effect(() => {
 		if (progress.current === 0) {
-			goto("/auth/login");
+			goto(resolve("/auth/login"));
 		}
 	});
 </script>

src/routes/settings/+page.svelte

@@ -12,6 +12,7 @@
 	import Category from "./Category.svelte";
 	import SidebarActions from "./SidebarActions.svelte";
 	import type { SettingsCategory } from "./types";
+	import { resolve } from "$app/paths";
 
 	const imports = import.meta.glob<SettingsCategory>(
 		["./categories/*.ts", "!./categories/util.ts"],
@@ -60,7 +61,11 @@
 
 		<Separator />
 
-		<Button class="text-muted-foreground" variant="ghost" onclick={() => goto("/auth/logout")}>
+		<Button
+			class="text-muted-foreground"
+			variant="ghost"
+			onclick={() => goto(resolve("/auth/logout"))}
+		>
 			<SignOut />
 			<span class="text-sm">Log out</span>
 		</Button>