From 0723cb5331b99b8a46677cb6a3eb1051a986fd6a Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Tue, 27 Jan 2026 15:33:25 +0100
Subject: [PATCH] Fix double navigation bug in breadcrumbs

---
 svelte/src/filesystem/Breadcrumbs.svelte      |  7 +-----
 svelte/src/filesystem/Filesystem.svelte       | 10 +++++---
 .../filesystem/edit_window/FileOptions.svelte |  7 ++----
 .../upload_widget/FSUploadWidget.svelte       |  8 +++++--
 .../filesystem/upload_widget/UploadFunc.ts    |  2 +-
 svelte/src/filesystem/util/PathLink.svelte    | 18 --------------
 svelte/src/filesystem/viewers/Audio.svelte    | 24 ++++++++++++-------
 svelte/src/lib/HighlightCurrentPage.ts        |  7 +++++-
 svelte/src/wrap/Router.svelte                 |  2 +-
 9 files changed, 40 insertions(+), 45 deletions(-)
 delete mode 100644 svelte/src/filesystem/util/PathLink.svelte

diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index ce1e42b..8dd7b7c 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { preventDefault } from 'svelte/legacy';
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import type { FSNavigator } from "./FSNavigator";
 
@@ -10,11 +9,7 @@ let { nav }: {
 
 <div class="breadcrumbs">
 	{#each $nav.path as node, i (node.path)}
-		<a
-			href={"/d"+fs_encode_path(node.path)}
-			class="breadcrumb button flat"
-			onclick={preventDefault(() => {nav.navigate(node.path, true)})}
-		>
+		<a href={"/d"+fs_encode_path(node.path)} class="breadcrumb button flat">
 			{#if node.abuse_type !== undefined}
 				<i class="icon small">block</i>
 			{:else if node.is_shared()}
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 6236ac2..8bfc980 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -28,12 +28,16 @@ onMount(() => {
 		nav.open_node((window as any).initial_node as FSPath, false)
 	} else {
 		console.debug("No initial node, fetching path", window.location.pathname)
-		nav.navigate(decodeURI(window.location.pathname).replace(/^\/d/, ""), false)
+		nav.navigate(decodeURIComponent(window.location.pathname).replace(/^\/d/, ""), false)
 	}
 
+	// There is a global natigation handler which captures link clicks and loads
+	// the right svelte components. When a filesystem link is clicked this store
+	// is updated. Catch it and use the filesystem navigator to navigate to the
+	// right file
 	const page_sub = current_page_store.subscribe(() => {
-		console.debug("Caught page transition to", window.location.pathname)
-		nav.navigate(decodeURI(window.location.pathname).replace(/^\/d/, ""), false)
+		console.debug("Caught page transition to", window.location.pathname, "calling navigator")
+		nav.navigate(decodeURIComponent(window.location.pathname).replace(/^\/d/, ""), false)
 	})
 
 	// Subscribe to navigation updates. This function returns a deconstructor
diff --git a/svelte/src/filesystem/edit_window/FileOptions.svelte b/svelte/src/filesystem/edit_window/FileOptions.svelte
index 32eb532..6a5b6cc 100644
--- a/svelte/src/filesystem/edit_window/FileOptions.svelte
+++ b/svelte/src/filesystem/edit_window/FileOptions.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import Button from "layout/Button.svelte";
 import { fs_delete_all, type FSNode } from "lib/FilesystemAPI.svelte";
-import PathLink from "filesystem/util/PathLink.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import { loading_finish, loading_start } from "lib/Loading";
 
@@ -48,10 +47,8 @@ const delete_file = async (e: MouseEvent) => {
 	<legend>File settings</legend>
 	{#if is_root_dir}
 		<div class="highlight_yellow">
-			Filesystem root cannot be renamed. If this shared directory
-			is in
-			<PathLink nav={nav} path="/me">your filesystem</PathLink>
-			you can rename it from there
+			Filesystem root cannot be renamed. If this shared directory is in <a
+			href="/d/me">your filesystem</a> you can rename it from there
 		</div>
 	{/if}
 	<div class="form_grid">
diff --git a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
index 7417539..5ea752f 100644
--- a/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
@@ -176,9 +176,13 @@ const leave_confirmation = (e: BeforeUnloadEvent) => {
 			{/if}
 		</div>
 		<div class="body">
-			{#each upload_queue as job}
+			{#each upload_queue as job, i}
 				{#if job.status !== "finished"}
-					<UploadProgress bind:this={job.component} job={job} finish={finish_upload}/>
+					<UploadProgress
+						bind:this={upload_queue[i].component}
+						bind:job={upload_queue[i]}
+						finish={finish_upload}
+					/>
 				{/if}
 			{/each}
 		</div>
diff --git a/svelte/src/filesystem/upload_widget/UploadFunc.ts b/svelte/src/filesystem/upload_widget/UploadFunc.ts
index 03e4218..e521542 100644
--- a/svelte/src/filesystem/upload_widget/UploadFunc.ts
+++ b/svelte/src/filesystem/upload_widget/UploadFunc.ts
@@ -32,7 +32,7 @@ export const upload_file = (
 		return
 	}
 
-	console.log("Uploading file to ", fs_path_url(path))
+	console.debug("Uploading file to", fs_path_url(path))
 
 	let xhr = new XMLHttpRequest();
 	xhr.open("PUT", fs_path_url(path) + "?make_parents=true", true);
diff --git a/svelte/src/filesystem/util/PathLink.svelte b/svelte/src/filesystem/util/PathLink.svelte
deleted file mode 100644
index a862c34..0000000
--- a/svelte/src/filesystem/util/PathLink.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-import { preventDefault } from 'svelte/legacy';
-import type { FSNavigator } from "filesystem/FSNavigator";
-
-let {
-	nav,
-	path = "",
-	children
-}: {
-	nav: FSNavigator;
-	path?: string;
-	children?: import('svelte').Snippet;
-} = $props();
-</script>
-
-<a href={"/d"+path} onclick={preventDefault(() => {nav.navigate(path, true)})}>
-	{@render children?.()}
-</a>
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index 953cd5f..3475d8c 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-import { preventDefault } from 'svelte/legacy';
 import { onMount } from 'svelte'
-import { fs_path_url, fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
+import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte"
 import TextBlock from "layout/TextBlock.svelte"
 import type { FSNavigator } from 'filesystem/FSNavigator';
+import { branding_from_props } from 'filesystem/edit_window/Branding';
 
 let { nav, children }: {
 	nav: FSNavigator;
@@ -13,7 +13,7 @@ let { nav, children }: {
 let player: HTMLAudioElement = $state()
 let playing = $state(false)
 let media_session = false
-let siblings = $state([])
+let siblings: FSNode[] = $state([])
 
 export const toggle_playback = () => playing ? player.pause() : player.play()
 export const toggle_mute = () => player.muted = !player.muted
@@ -38,6 +38,18 @@ export const update = async () => {
 	}
 
 	siblings = await nav.get_siblings()
+
+	for(const sib of siblings) {
+		if (sib.name === "cover.jpg") {
+			console.log("found sibling", sib)
+			if (sib.properties === undefined) {
+				sib.properties = {}
+			}
+			sib.properties.brand_background_image = sib.path
+			document.documentElement.style = branding_from_props(sib.properties)
+			break
+		}
+	}
 }
 
 onMount(() => {
@@ -82,11 +94,7 @@ onMount(() => {
 
 	<h2>Tracklist</h2>
 	{#each siblings as sibling (sibling.path)}
-		<a
-			href={"/d"+fs_encode_path(sibling.path)}
-			onclick={preventDefault(() => nav.navigate(sibling.path, true))}
-			class="node"
-		>
+		<a href={"/d"+fs_encode_path(sibling.path)} class="node">
 			{#if sibling.path === $nav.base.path}
 				<i class="play_arrow icon">play_arrow</i>
 			{:else}
diff --git a/svelte/src/lib/HighlightCurrentPage.ts b/svelte/src/lib/HighlightCurrentPage.ts
index 1aef02f..fa692eb 100644
--- a/svelte/src/lib/HighlightCurrentPage.ts
+++ b/svelte/src/lib/HighlightCurrentPage.ts
@@ -2,7 +2,12 @@ import { current_page_store, type Tab } from "wrap/RouterStore"
 
 export const highlight_current_page = (node: HTMLAnchorElement) => {
 	const set_highlight = () => {
-		if (window.location.pathname === URL.parse(node.href).pathname) {
+		const currentpath = window.location.pathname
+		const hrefpath = URL.parse(node.href).pathname
+		if (
+			currentpath === hrefpath ||
+			(hrefpath !== "" && hrefpath !== "/" && currentpath.startsWith(hrefpath))
+		) {
 			node.classList.add("button_highlight")
 		} else {
 			node.classList.remove("button_highlight")
diff --git a/svelte/src/wrap/Router.svelte b/svelte/src/wrap/Router.svelte
index 43b7f35..7a2a995 100644
--- a/svelte/src/wrap/Router.svelte
+++ b/svelte/src/wrap/Router.svelte
@@ -66,7 +66,7 @@ let current_page: Tab = $state(null)
 const load_page = (pathname: string, history: boolean): boolean => {
 	console.debug("Navigating to page", pathname, "log history:", history)
 
-	const path_decoded = decodeURI(pathname)
+	const path_decoded = decodeURIComponent(pathname)
 	let page_by_path: Tab = null
 	let page_by_prefix: Tab = null
 	for (const page of pages) {