Fix double navigation bug in breadcrumbs

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
+		<a href={"/d"+fs_encode_path(node.path)} class="breadcrumb button flat">
-			href={"/d"+fs_encode_path(node.path)}
-			class="breadcrumb button flat"
-			onclick={preventDefault(() => {nav.navigate(node.path, true)})}
-		>
 			{#if node.abuse_type !== undefined}
 				<i class="icon small">block</i>
 			{:else if node.is_shared()}

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)
+		console.debug("Caught page transition to", window.location.pathname, "calling navigator")
-		nav.navigate(decodeURI(window.location.pathname).replace(/^\/d/, ""), false)
+		nav.navigate(decodeURIComponent(window.location.pathname).replace(/^\/d/, ""), false)
 	})
 
 	// Subscribe to navigation updates. This function returns a deconstructor

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
+			Filesystem root cannot be renamed. If this shared directory is in <a
-			is in
+			href="/d/me">your filesystem</a> you can rename it from there
-			<PathLink nav={nav} path="/me">your filesystem</PathLink>
-			you can rename it from there
 		</div>
 	{/if}
 	<div class="form_grid">

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>

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);

svelte/src/filesystem/util/PathLink.svelte

@@ -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>

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
+		<a href={"/d"+fs_encode_path(sibling.path)} class="node">
-			href={"/d"+fs_encode_path(sibling.path)}
-			onclick={preventDefault(() => nav.navigate(sibling.path, true))}
-			class="node"
-		>
 			{#if sibling.path === $nav.base.path}
 				<i class="play_arrow icon">play_arrow</i>
 			{:else}

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")

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) {