Fix error popup when canceling a sharing action

Fix navigator not reloading when saving an edited file Remove dead links Remove references to Patreon
Fix:
2026-08-05 22:18:57 +02:00 · 2026-08-05 21:54:49 +02:00 · 2026-08-05 21:52:28 +02:00 · 2026-08-04 14:38:36 +02:00 · 2026-08-04 13:37:59 +02:00 · 2026-08-04 13:37:44 +02:00
34 changed files with 614 additions and 808 deletions
--- a/res/template/email_confirm.html
+++ b/res/template/email_confirm.html
@@ -1,50 +0,0 @@
-{{define "email_confirm"}}<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "E-mail verification"}}
-	</head>
-	<body>
-		{{template "page_top" .}}
-
-		{{if eq .Other "success"}}
-			<header>
-				<h1>Success!</h1>
-			</header>
-			<div id="page_content" class="page_content">
-				<section>
-					<p>
-						Your account's e-mail address has been updated.
-					</p>
-				</section>
-			</div>
-		{{else if eq .Other "not_found"}}
-			<header>
-				<h1>E-mail change failed</h1>
-			</header>
-			<div id="page_content" class="page_content">
-				<section>
-					<p>
-						This e-mail change request does not exist or has expired.
-						Please try again if you still want to change your e-mail
-						address.
-					</p>
-				</section>
-			</div>
-		{{else}}
-			<header>
-				<h1>Error</h1>
-			</header>
-			<div id="page_content" class="page_content">
-				<section>
-					<p>
-						Something went wrong while processing this request. Please
-						try again later.
-					</p>
-				</section>
-			</div>
-		{{end}}
-
-		{{template "page_bottom" .}}
-	</body>
-</html>
-{{end}}
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -1,90 +0,0 @@
-{{define "menu"}}
-<button id="button_toggle_navigation" class="button_toggle_navigation icon" onclick="toggleMenu();">
-	menu
-</button>
-<nav id="page_navigation" class="page_navigation">
-	<a href="/home#">Home</a>
-	{{if eq .User.Subscription.ID ""}}
-		<a href="/home#pro">Get Premium</a>
-	{{end}}
-	<hr />
-	{{if .Authenticated}}
-		<a href="/user">{{.User.Username}}</a>
-		{{if .User.Subscription.FilesystemAccess}}
-			<a href="/d/me">Filesystem</a>
-		{{end}}
-		{{if .User.IsAdmin}}
-			<a href="/admin">Admin Panel</a>
-		{{end}}
-		<a href="/logout">Log out</a>
-	{{else}}
-		<a href="/login">Login</a>
-		<a href="/register">Register</a>
-	{{end}}
-	<hr />
-	<a href="/about">Questions & Answers</a>
-	<a href="/apps">Apps</a>
-	<a href="/appearance">Theme</a>
-	<a href="/speedtest">Speedtest</a>
-	<a href="/api">API</a>
-	<a href="/filesystem">Filesystem Guide</a>
-	<a href="/acknowledgements">Acknowledgements</a>
-	<a href="/abuse">DMCA and abuse</a>
-	<a href="https://stats.uptimerobot.com/p9v2ktzyjm" target="_blank">Server Status</a>
-</nav>
-<script>
-function toggleMenu() {
-	var nav  = document.getElementById("page_navigation");
-	var body = document.getElementById("page_body");
-	if (nav.offsetLeft === 0) {
-		// Menu is visible, hide it
-		nav.style.left = -nav.offsetWidth + "px";
-		body.style.marginLeft = "0";
-	} else {
-		// Menu is hidden, show it
-		nav.style.left = "0";
-		body.style.marginLeft = nav.offsetWidth + "px";
-	}
-}
-function resetMenu() {
-	document.getElementById("page_navigation").style.left = "";
-	document.getElementById("page_body").style.marginLeft = "";
-}
-</script>
-{{end}}
-
-{{define "footer"}}
-<footer>
-	<div class="footer_content">
-		<div style="display: inline-block; margin: 0 8px;">
-			Nova is a product by <a href="//fornaxian.tech" target="_blank">Fornaxian Technologies</a>
-		</div>
-		<br/>
-		<div style="display: inline-block; margin: 0 8px;">
-			<a href="https://github.com/Fornaxian" target="_blank">{{template `github.svg` .}} GitHub</a> |
-			<a href="https://mastodon.social/web/@fornax" target="_blank">{{template `mastodon.svg` .}} Mastodon</a>
-		</div>
-		<br/>
-		<div style="display: inline-block; margin: 0 8px;">
-			{{$speed := .PixelAPI.GetMiscClusterSpeed}}
-			Server speed: {{ formatDataBits $speed.ServerTX }}ps |
-			Cache cluster: {{ formatDataBits $speed.CacheTX }}ps |
-			Storage cluster: {{ formatDataBits $speed.StorageTX }}ps
-		</div>
-		<br/>
-		<span class="small_footer_text" style="font-size: .75em; line-height: .75em;">
-			page rendered by {{.Hostname}}
-		</span>
-	</div>
-</footer>
-{{end}}
-
-{{define "page_top"}}
-{{template "menu" .}}
-<div id="page_body" class="page_body">
-{{end}}
-
-{{define "page_bottom"}}
-{{template "footer" .}}
-</div>
-{{end}}
--- a/res/template/user_logout.html
+++ b/res/template/user_logout.html
@@ -1,40 +0,0 @@
-{{define "logout"}}<!DOCTYPE html>
-<html lang="en">
-	<head>
-		{{template "meta_tags" "Logging out..."}}
-	</head>
-	<body>
-		{{template "page_top" .}}
-		<header>
-			<h1>Logging out of your Nova account</h1>
-		</header>
-		<div id="page_content" class="page_content">
-			<br/>
-			<form method="POST" action="/logout">
-				<button role="submit" class="button_highlight">
-					<i class="icon">logout</i>
-					Log out of Nova on this computer
-				</button>
-			</form>
-			<br/>
-			<section>
-				<h2>Why do I need to confirm my logout?</h2>
-				<p>
-					We need you to confirm your action so we can be sure that you
-					really requested a logout. If we didn't do this, anyone (or any
-					website) would be able to send you to this page and you would
-					automatically get logged out of Nova, which would be very
-					annoying.
-				</p>
-				<p>
-					To prevent this from happening we're verifying that you actually
-					want to log out by making you click this button. Because this
-					logout button triggers a different request type than normal
-					page visit we can confirm that you really want to log out.
-				</p>
-			</section>
-		</div>
-		{{template "page_bottom" .}}
-	</body>
-</html>
-{{end}}
--- a/svelte/src/admin_panel/HostMetrics.svelte
+++ b/svelte/src/admin_panel/HostMetrics.svelte
@@ -26,7 +26,26 @@ const groups: {
 			{metric: "api_error_400", data_type: "number"},
 			{metric: "api_error_500", data_type: "number"},
 			{metric: "api_panic", data_type: "number"},
+			{metric: "api_user_register", data_type: "number"},
+			{metric: "api_user_login", data_type: "number"},
+			{metric: "api_user_delete", data_type: "number"},
 		],
+	}, {
+		title: "Filesystem API", expanded: false,
+		graphs: [
+			{metric: "filesystem_write", data_type: "number"},
+			{metric: "filesystem_write_size", data_type: "bytes"},
+			{metric: "filesystem_read", data_type: "number"},
+			{metric: "filesystem_read_size", data_type: "bytes"},
+			{metric: "filesystem_index_update", data_type: "number"},
+			{metric: "filesystem_index_update_duration", data_type: "duration"},
+			{
+				metric: "filesystem_index_update_duration_avg",
+				agg_base: "filesystem_index_update_duration",
+				agg_divisor: "filesystem_index_update",
+				data_type: "duration",
+			},
+		]
 	}, {
 		title: "Task scheduler", expanded: false,
 		graphs: [
--- a/svelte/src/admin_panel/PeerTable.svelte
+++ b/svelte/src/admin_panel/PeerTable.svelte
@@ -2,6 +2,8 @@
 import { flip } from "svelte/animate";
 import { formatDataVolume } from "util/Formatting";
 import SortButton from "layout/SortButton.svelte";
+import { loading_run } from "lib/Loading";
+import { admin_decommission_node } from "lib/AdminAPI";

 let {
 	peers = $bindable([])
@@ -33,6 +35,11 @@ let {
 	}[]
 } = $props();

+// If not all peers are online we show the decommission button
+let all_reachable = $derived(peers.reduce((acc, val) => {
+	return val.reachable ? acc : false
+}, true))
+
 $effect(() => {
 	for (let peer of peers) {
 		peer.avg_network_total = peer.avg_network_tx + peer.avg_network_rx
@@ -74,6 +81,16 @@ let sort = (field: string) => {
 	})
 	peers = peers
 }
+
+const decommission = (id: string) => {
+	loading_run(async () => {
+		try {
+		await admin_decommission_node(id)
+		} catch (err) {
+			alert(JSON.stringify(err))
+		}
+	})
+}
 </script>

 <div class="table_scroll">
@@ -92,16 +109,17 @@ let sort = (field: string) => {
 				<td><SortButton field="cache_threshold" active_field={sort_field} asc={asc} sort_func={sort}>CThresh</SortButton></td>
 				<td><SortButton field="free_space" active_field={sort_field} asc={asc} sort_func={sort}>Free</SortButton></td>
 				<td><SortButton field="min_free_space" active_field={sort_field} asc={asc} sort_func={sort}>Min free</SortButton></td>
+				{#if !all_reachable}<td></td>{/if}
 			</tr>
 		</thead>
 		<tbody>
-			{#each peers as peer (peer.ip)}
+			{#each peers as peer (peer.id)}
 				<tr style="border: none;"
 					class:highlight_red={!peer.reachable}
 					class:highlight_yellow={peer.free_space < peer.min_free_space / 2}
 					class:highlight_blue={peer.free_space < peer.min_free_space}
 					class:highlight_green={peer.reachable}
-					animate:flip={{duration: 1000}}
+					animate:flip={{duration: 500}}
 				>
 					<td>{peer.hostname}</td>
 					<td>{peer.unreachable_count}</td>
@@ -115,6 +133,13 @@ let sort = (field: string) => {
 					<td>{formatDataVolume(peer.cache_threshold, 3)}</td>
 					<td>{formatDataVolume(peer.free_space, 3)}</td>
 					<td>{formatDataVolume(peer.min_free_space, 3)}</td>
+					{#if !all_reachable}
+						<td>
+							<button class="button flat delete" onclick={() => decommission(peer.id)}>
+								<i class="icon small">delete</i>
+							</button>
+						</td>
+					{/if}
 				</tr>
 			{/each}

@@ -135,6 +160,7 @@ let sort = (field: string) => {
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0), 4)}</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0), 4)}</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0), 3)}</td>
+				{#if !all_reachable}<td></td>{/if}
 			</tr>
 			<tr>
 				<td>Average</td>
@@ -153,6 +179,7 @@ let sort = (field: string) => {
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.cache_threshold, 0) / peers.length, 4)}</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.free_space, 0) / peers.length, 4)}</td>
 				<td>{formatDataVolume(peers.reduce((acc, val) => acc += val.min_free_space, 0) / peers.length, 3)}</td>
+				{#if !all_reachable}<td></td>{/if}
 			</tr>
 		</tbody>
 	</table>
@@ -167,4 +194,7 @@ let sort = (field: string) => {
 tr {
 	text-align: initial;
 }
+.delete {
+	margin: 0;
+}
 </style>
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -36,7 +36,7 @@ onMount(() => {
 			{:else if node.is_shared()}
 				<i class="icon small">share</i>
 			{/if}
-			<div class="node_name" class:base={$nav.base_index === i}>
+			<div class="node_name" class:base={$nav.base_index === i} class:small={$nav.path.length > 10}>
 				{node.name}
 			</div>
 		</a>
@@ -64,6 +64,9 @@ onMount(() => {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+.small {
+	max-width: 10vw;
+}
 .base {
 	/* The base name uses all available space */
 	max-width: unset;
--- a/svelte/src/filesystem/DetailsWindow.svelte
+++ b/svelte/src/filesystem/DetailsWindow.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { run } from 'svelte/legacy';
 import Chart from "util/Chart.svelte";
 import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
 import Modal from "util/Modal.svelte";
@@ -19,12 +18,13 @@ let {

 export const toggle = () => visible = !visible

-const visibility_change = visible => {
+$effect(() => {
+	// Only update the chart if the details modal is open. Else the chart is
+	// rendered for nothing
 	if (visible) {
-		update_chart(nav.base, 0, 0)
+		update_chart($nav.base, chart_timespan, chart_interval)
 	}
-}
-
+})

 let chart: Chart = $state()
 let chart_timespan = $state(0)
@@ -134,15 +134,9 @@ let update_chart = async (base: FSNode, timespan: number, interval: number) => {
 		console.error("Failed to get time series data:", err)
 	}
 }
-run(() => {
-	visibility_change(visible)
-});
 let direct_url = $derived($nav.base.path ? window.location.origin+fs_path_url($nav.base.path) : "")
 let share_url = $derived(fs_share_url($nav.path))
 let direct_share_url = $derived(fs_share_hotlink_url($nav.path))
-run(() => {
-	update_chart($nav.base, chart_timespan, chart_interval)
-});
 </script>

 <Modal bind:visible={visible} title="Details" width={($nav.base.type === "file" ? 1000 : 750) + "px"}>
@@ -172,13 +166,6 @@ run(() => {
 				<td>Mode</td>
 				<td>{$nav.base.mode_string}</td>
 			</tr>
-			<tr>
-				<td>Node ID</td>
-				<td>
-					<CopyButton text={$nav.base.id}>Copy</CopyButton>
-					<a href="/d/{$nav.base.id}">{$nav.base.id}</a>
-				</td>
-			</tr>
 			{#if $nav.base.type === "file"}
 				<tr>
 					<td>File type</td>
@@ -201,7 +188,23 @@ run(() => {
 					</td>
 				</tr>
 				<tr><td>SHA256 sum</td><td>{$nav.base.sha256_sum}</td></tr>
+			{:else if $nav.base.type === "dir"}
+				<tr>
+					<td>Total directory size</td>
+					<td>{formatDataVolume($nav.base.recursive_size, 4)}</td>
+				</tr>
+				<tr>
+					<td>Total directory children</td>
+					<td>{formatThousands($nav.base.recursive_children)}</td>
+				</tr>
 			{/if}
+			<tr>
+				<td>Node ID</td>
+				<td>
+					<CopyButton text={$nav.base.id}>Copy</CopyButton>
+					<a href="/d/{$nav.base.id}">{$nav.base.id}</a>
+				</td>
+			</tr>
 			<tr>
 				<td>Direct link</td>
 				<td>
--- a/svelte/src/filesystem/ErrorPage.svelte
+++ b/svelte/src/filesystem/ErrorPage.svelte
@@ -39,6 +39,12 @@ onMount(() => {
 		<p>
 			This content has been removed for breaking the law.
 		</p>
+	{:else if $nav.navigation_error === "out_of_transfer"}
+		<h1>Traffic limit exceeded</h1>
+		<p>
+			The host user has exceeded the traffic limit of their subscription.
+			They need to upgrade to a higher subscription tier.
+		</p>
 	{:else}
 		<h1>Unknown error code</h1>
 		<p>
--- a/svelte/src/filesystem/FSNavigator.ts
+++ b/svelte/src/filesystem/FSNavigator.ts
@@ -270,9 +270,14 @@ const sort_children = (children: FSNode[], field: string, asc: boolean) => {
 			[a, b] = [b, a]
 		}

-		// If the two values are equal then we force sort by name, since names
-		// are always unique
-		if (a[field] === b[field]) {
+		if (field === "size") {
+			// When doing a size comparison we also take the recursive directory
+			// size into account
+			return (a.type === "dir" ? a.recursive_size : a.file_size) -
+				(b.type === "dir" ? b.recursive_size : b.file_size)
+		} else if (a[field] === b[field]) {
+			// If the two values are equal then we force sort by name, since
+			// names are always unique
 			return a.name.localeCompare(b.name, undefined, { numeric: true })
 		} else if (typeof (a[field]) === "number") {
 			// Sort ints from high to low
--- a/svelte/src/filesystem/ShareDialog.svelte
+++ b/svelte/src/filesystem/ShareDialog.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 import type { FSNavigator } from "./FSNavigator";
 import { fs_check_is_error, fs_node_icon, fs_share_hotlink_url, fs_share_url, fs_update, type FSNode, type FSPermissions } from "lib/FilesystemAPI.svelte";
-import { copy_text } from "util/Util";
 import CopyButton from "layout/CopyButton.svelte";
 import Dialog from "layout/Dialog.svelte";
 import { fade } from "svelte/transition";
 import { get_user } from "lib/NovaAPI";
+import Button from "layout/Button.svelte";

 let { nav }: {
 	nav: FSNavigator;
@@ -13,10 +13,8 @@ let { nav }: {

 let path: FSNode[]
 let base: FSNode = $state()
-let toast = $state("")
 let share_url = $state("")
 let direct_share_url = $state("")
-let is_parent = $state(false)
 let parent_node: FSNode = $state()

 let dialog: Dialog = $state()
@@ -71,15 +69,19 @@ const make_public = async () => {
 	}
 }

+let share_parent = $state(false)
+let navigator_share = $state(false)
 const share = async () => {
-	// If the base node does not have a public ID then the file is shared
-	// through a parent node. In that case we ask the user if it was their
-	// intention to share the parent directory
-	is_parent = base.id === undefined
-	if (is_parent) {
+	// If the base node is not shared then the file is shared through a parent
+	// node. In that case we ask the user if it was their intention to share the
+	// parent directory
+	share_parent = !base.is_shared()
+	navigator_share = navigator.share !== undefined
+
+	if (!base.is_shared()) {
 		// Walk path backwards looking for the last public ID
 		for (let i = path.length - 1; i >= 0; i--) {
-			if (path[i].id !== undefined && path[i].id !== "me") {
+			if (path[i].is_shared()) {
 				parent_node = path[i]
 				break
 			}
@@ -88,25 +90,17 @@ const share = async () => {

 	share_url = fs_share_url(path)
 	direct_share_url = fs_share_hotlink_url(path)
+}

-	try {
+const nav_share = async (url: string) => {
 	await navigator.share({
 		title: base.name,
 		text: "I would like to share '" + base.name + "' with you",
-			url: share_url,
+		url: url,
 	})
-	} catch(_) {
-		if (copy_text(share_url)) {
-			toast = "Link copied to clipboard"
-			setTimeout(() => {toast = ""}, 10000)
-		} else {
-			alert("Could not copy text")
-		}
-	}
 }
 </script>

-
 <Dialog bind:this={dialog_not_allowed}>
 	<div class="dialog_inner">
 		<div class="highlight_yellow" transition:fade>
@@ -118,15 +112,13 @@ const share = async () => {

 <Dialog bind:this={dialog}>
 	<div class="dialog_inner">
-		{#if toast !== ""}
-			<div class="highlight_green" transition:fade>{toast}</div>
-			<div class="separator" transition:fade></div>
-		{/if}
-
 		<div>Sharing link</div>
 		<div class="link_copy">
 			<div class="button_container">
 				<CopyButton text={share_url}>Copy</CopyButton>
+				{#if navigator_share}
+					<Button icon="share" label="Share" click={() => {nav_share(share_url)}}/>
+				{/if}
 			</div>
 			<a href="{share_url}">{share_url}</a>
 		</div>
@@ -135,11 +127,14 @@ const share = async () => {
 		<div class="link_copy">
 			<div class="button_container">
 				<CopyButton text={direct_share_url}>Copy</CopyButton>
+				{#if navigator_share}
+					<Button icon="share" label="Share" click={() => {nav_share(direct_share_url)}}/>
+				{/if}
 			</div>
 			<a href="{direct_share_url}">{direct_share_url}</a>
 		</div>

-		{#if is_parent}
+		{#if share_parent}
 			<div class="separator"></div>
 			<div>
 				This link also gives access to
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -40,7 +40,6 @@ export const copy_link = () => {
 	<FileStats nav={nav} bind:expanded={toolbar_expanded}/>

 	<div class="grid" class:hide={!toolbar_expanded}>
-
 		<div class="button_row">
 			<button onclick={() => {nav.open_sibling(-1)}}>
 				<i class="icon">skip_previous</i>
@@ -73,7 +72,11 @@ export const copy_link = () => {
 		{#if path_is_shared($nav.path)}
 			<button onclick={copy_link} class:button_highlight={link_copied}>
 				<i class="icon">content_copy</i>
+				{#if link_copied}
+					<span>Link copied!</span>
+				{:else}
 					<span><u>C</u>opy link</span>
+				{/if}
 			</button>
 		{/if}

--- a/svelte/src/filesystem/edit_window/EditWindow.svelte
+++ b/svelte/src/filesystem/edit_window/EditWindow.svelte
@@ -6,7 +6,7 @@ import { branding_from_props } from "./Branding";
 import FileOptions from "./FileOptions.svelte";
 import SharingOptions from "./SharingOptions.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
-import { loading_finish, loading_start } from "lib/Loading";
+import { loading_run } from "lib/Loading";

 let file: FSNode = $state({} as FSNode)
 let options: NodeOptions = $state({} as NodeOptions)
@@ -72,23 +72,22 @@ const save = async (e: SubmitEvent) => {
 	e.preventDefault()
 	console.debug("Saving file", file.path)

-	let new_file: FSNode
 	try {
-		loading_start()
+		await loading_run(async () => {
 			options.branding_enabled = JSON.stringify(branding_enabled)

-		new_file = await fs_update(file.path, options)
+			await fs_update(file.path, options)

+			// If the file name has changed we need to call fs_rename. This is a
+			// separate operation because a rename also moves the file
 			if (new_name !== file.name) {
 				let parent = file.path.slice(0, -file.name.length)
 				console.log("Moving", file.path, "to", parent+new_name)

 				await fs_rename(file.path, parent+new_name)
 				file.path = parent+new_name
-
-			new_file.name = new_name
-			new_file.path = file.path
 			}
+		})
 	} catch (err) {
 		if (err.message) {
 			alert(err.message)
@@ -97,11 +96,11 @@ const save = async (e: SubmitEvent) => {
 			alert(err)
 		}
 		return
-	} finally {
-		loading_finish()
 	}

-	if (open_after_edit) {
+	// The navigate call will be debounced if the new path is equal to the
+	// current path. So we call reload() instead if that's the case
+	if (open_after_edit && $nav.base.path !== file.path) {
 		nav.navigate(file.path, false)
 	} else {
 		nav.reload()
--- a/svelte/src/filesystem/edit_window/SharingOptions.svelte
+++ b/svelte/src/filesystem/edit_window/SharingOptions.svelte
@@ -4,7 +4,6 @@ import CopyButton from "layout/CopyButton.svelte";
 import { formatDate } from "util/Formatting";
 import { type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
 import AccessControl from "./AccessControl.svelte";
-import { onMount } from 'svelte';
 import { user } from "lib/UserStore";

 let {
@@ -15,27 +14,24 @@ let {
 	options: NodeOptions;
 } = $props();

-let embed_html: string = $state()
-let preview_area: HTMLDivElement = $state()
-
-const embed_iframe = (file: FSNode, options: NodeOptions) => {
-	if (!file.is_shared()) {
-		example = false
-		embed_html = "File is not shared, can't generate embed code"
-		return
+let is_shared = $derived(file.is_shared() || options.link_permissions?.read)
+let embed_html: string = $derived.by(() => {
+	if (!is_shared) {
+		return "File is not shared, can't generate embed code"
 	}

 	let url = domain_url()+"/d/"+file.id
-	embed_html = `<iframe ` +
+	return `<iframe ` +
 		`src="${url}" ` +
 		`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
 		`allowfullscreen` +
 		`></iframe>`
-}
+})
+let preview_area: HTMLDivElement = $state()

 let example = $state(false)
 const toggle_example = () => {
-	if (file.is_shared()) {
+	if (is_shared) {
 		example = !example
 		if (example) {
 			preview_area.innerHTML = embed_html
@@ -46,9 +42,6 @@ const toggle_example = () => {
 }

 let share_link = $derived(window.location.protocol+"//"+window.location.host+"/d/"+file.id)
-onMount(() => {
-	embed_iframe(file, options)
-});
 </script>

 {#if $user.subscription.file_sharing === false}
@@ -93,8 +86,8 @@ onMount(() => {
 	<div class="center">
 		<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
 		<br/>
-		<CopyButton text={embed_html}>Copy HTML</CopyButton>
-		<button onclick={toggle_example} class:button_highlight={example} disabled={!file.is_shared()}>
+		<CopyButton text={embed_html} disabled={!is_shared}>Copy HTML</CopyButton>
+		<button onclick={toggle_example} class:button_highlight={example} disabled={!is_shared}>
 			<i class="icon">visibility</i> Show example
 		</button>
 	</div>
--- a/svelte/src/filesystem/edit_window/ThemePresets.svelte
+++ b/svelte/src/filesystem/edit_window/ThemePresets.svelte
@@ -86,6 +86,14 @@ const themes = [
 		brand_background_color: "#1e1e2e",
 		brand_body_color: "#181825",
 		brand_card_color: "#313244",
+	}, {
+		name: "Dracula",
+		brand_input_color: "#424450",
+		brand_highlight_color: "#50FA7B",
+		brand_danger_color: "#FF5555",
+		brand_background_color: "#191A21",
+		brand_body_color: "#21222C",
+		brand_card_color: "#343746",
 	}, {
 		name: "Nova",
 		brand_input_color: "#28033f",
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -101,21 +101,6 @@ const navigate_back = () => {
 // Deletion function

 const delete_selected = async () => {
-	let count = nav.children.reduce((acc, cur) => {
-		if (cur.fm_selected) {
-			acc++
-		}
-		return acc
-	}, 0)
-
-	let confirmSingle = `Are you sure you want to delete this file? This action is irreversible.`
-	let confirmMulti = `Are you sure you want to delete these ${count} files? This action is irreversible.`
-	if (count === 0 ||
-		(count === 1 && !confirm(confirmSingle)) ||
-		(count > 1 && !confirm(confirmMulti))) {
-		return
-	}
-
 	try {
 		loading_start()

--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
-import { formatDataVolume } from "util/Formatting";
+import { formatDataVolume, formatDate, formatThousands } from "util/Formatting";
 import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
 import type { FSNavigator } from "filesystem/FSNavigator";
 import SortButton from "layout/SortButton.svelte";
 import { FileAction, type FileActionHandler } from "./FileManagerLib";
+import Dialog from "layout/Dialog.svelte";
+import Button from "layout/Button.svelte";
+import { onMount } from "svelte";
+import CopyButton from "layout/CopyButton.svelte";

 let {
 	nav,
@@ -20,23 +24,70 @@ let {
 	hide_edit?: boolean
 	hide_branding?: boolean
 } = $props();
+
+let dialog: Dialog = $state()
+const columns: {field: string, label: string}[] = [
+	{field: "modified", label: "Modified on"},
+	{field: "created", label: "Created on"},
+	{field: "created_by", label: "Created by"},
+	{field: "mode", label: "Mode"},
+	{field: "recursive_children", label: "Children"},
+	{field: "file_type", label: "File type"},
+	{field: "size", label: "Size"},
+	{field: "id", label: "Node ID"},
+]
+let config: {
+	modified?: boolean
+	created?: boolean
+	created_by?: boolean
+	mode?: boolean
+	recursive_children?: boolean
+	file_type?: boolean
+	size?: boolean
+	id?: boolean
+} = $state({
+	size: true, // Only size is visible by default
+})
+
+const prevent = (e: MouseEvent) => {
+	e.stopPropagation()
+}
+
+const submit_settings = (e: SubmitEvent) => {
+	e.preventDefault()
+	dialog.close()
+}
+const save_settings = () => {
+	window.localStorage.setItem("list_view_columns", JSON.stringify(config))
+}
+const load_settings = () => {
+	let item = window.localStorage.getItem("list_view_columns")
+	if (item !== null) {
+		config = JSON.parse(item)
+	}
+}
+onMount(load_settings)
 </script>

 <table class="directory">
 	<thead>
-		<tr>
+		<tr class="header_row">
 			<td></td>
 			<td>
 				<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="name">
 					Name
 				</SortButton>
 			</td>
-			<td class="hide_small">
-				<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field="file_size">
-					Size
+			{#each columns as col}
+				<td class="hide_small" class:hidden={!config[col.field]}>
+					<SortButton active_field={$nav.sort_last_field} asc={$nav.sort_asc} sort_func={nav.sort_children} field={col.field}>
+						{col.label}
 					</SortButton>
 				</td>
-			<td></td>
+			{/each}
+			<td class="node_icons icons_wrap">
+				<Button flat icon="settings" click={e => dialog.open(e)} />
+			</td>
 		</tr>
 	</thead>
 	<tbody>
@@ -56,11 +107,35 @@ let {
 						{child.name}
 					</a>
 				</td>
-				<td class="node_size hide_small">
+				<td class="node_size hide_small" class:hidden={!config.modified}>
+					{formatDate(child.modified, true, true, false)}
+				</td>
+				<td class="node_size hide_small" class:hidden={!config.created}>
+					{formatDate(child.created, true, true, false)}
+				</td>
+				<td class="node_size hide_small" class:hidden={!config.created_by}>
+					{child.created_by}
+				</td>
+				<td class="node_size hide_small" class:hidden={!config.mode}>
+					{child.mode_string}
+				</td>
+				<td class="node_size hide_small" class:hidden={!config.recursive_children}>
+					{formatThousands(child.recursive_children)}
+				</td>
+				<td class="node_size hide_small" class:hidden={!config.file_type}>
+					{child.file_type}
+				</td>
+				<td class="node_size hide_small" class:hidden={!config.size}>
 					{#if child.type === "file"}
 						{formatDataVolume(child.file_size, 3)}
+					{:else if child.type === "dir"}
+						{formatDataVolume(child.recursive_size, 3)}
 					{/if}
 				</td>
+				<td class="node_size hide_small" class:hidden={!config.id}>
+					<CopyButton text={$nav.base.id} onclick={prevent} />
+					<a href="/d/{child.id}" onclick={prevent}>{child.id}</a>
+				</td>
 				<td class="node_icons">
 					<div class="icons_wrap">
 						{#if child.abuse_type !== undefined}
@@ -91,15 +166,39 @@ let {
 	</tbody>
 </table>

+
+<Dialog bind:this={dialog} onclose={save_settings}>
+	<form class="column_config" onsubmit={submit_settings}>
+		{#each columns as col}
+			<div>
+				<input type="checkbox" id="show_{col.field}" name="show_{col.field}" bind:checked={config[col.field]}/>
+				<label for="show_{col.field}">{col.label}</label>
+			</div>
+		{/each}
+		<button type="submit">
+			<i class="icon">save</i>
+			Save
+		</button>
+	</form>
+</Dialog>
+
 <style>
 .directory {
 	background: var(--body_background);
 	border-collapse: collapse;
-	/* backdrop-filter: blur(4px); */
+	backdrop-filter: blur(4px);
 	max-width: 1200px;
 	margin: auto; /* center */
 }
 td {
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0;
+}
+.header_row {
+	white-space: nowrap;
+}
+.node_icons {
 	padding: 0;
 }
 .node {
@@ -151,6 +250,12 @@ td {
 	display: none;
 }

+.column_config {
+	display: flex;
+	flex-direction: column;
+	white-space: nowrap;
+}
+
 /* Large icon mode only supported on wide screens */
@media (min-width: 500px) {
 	.node_icon.large_icons {
--- a/svelte/src/filesystem/filemanager/TrashBin.svelte
+++ b/svelte/src/filesystem/filemanager/TrashBin.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
 import { formatDataVolume, formatDate } from "util/Formatting";
 import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
-import { loading_finish, loading_start } from "lib/Loading";
+import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
 import { onMount } from "svelte";
+import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+import { FSNavigator } from "filesystem/FSNavigator";

-let { root_path = "/me" }: { root_path?: string } = $props();
+let {
+	nav,
+	root_path = "/me",
+}: {
+	nav: FSNavigator
+	root_path?: string
+} = $props();

 let entries: TrashEntry[] = $state([]);
 let error: string = $state("");
-let loaded = $state(false);

 const load = async () => {
-	loaded = false;
-	entries = [];
+	loading_run(async () => {
 		try {
-		loading_start();
 			entries = await fs_get_trash(root_path)
 			error = "";
 		} catch (err: any) {
 			error = err?.message ?? JSON.stringify(err);
-	} finally {
-		loaded = true;
-		loading_finish();
 		}
+	})
 };

 const delete_entry = async (entry: TrashEntry) => {
@@ -76,30 +79,46 @@ const empty_trash = async () => {
 	}
 };

-onMount(load);
+onMount(() => {
+	breadcrumbs_store.set(breadcrumbs)
+
+	load()
+});
 </script>

-<div class="trash_container">
-	<div class="header">
-		<h2 class="title"><i class="icon">delete</i> Trash</h2>
-		<div class="actions">
-			<button onclick={load}>
-				<i class="icon">refresh</i>
-				<span>Refresh</span>
-			</button>
-			{#if entries.length > 0}
-				<button class="danger" onclick={empty_trash}>
-					<i class="icon">delete_forever</i>
-					<span>Empty trash</span>
-				</button>
+
+{#snippet breadcrumbs()}
+		<i class="icon">delete</i>
+		<div>
+			Trash bin
+			{#if $loading_store === 0 && entries.length === 0}
+				(empty)
+			{:else if entries.length !== 0}
+				({formatDataVolume(entries.reduce(
+					(acc, entry) => acc + entry.node.file_size, 0
+				), 3)})
 			{/if}
 		</div>
-	</div>
+		<div class="separator"></div>
+		<button onclick={() => window.history.back()} title="Back">
+			<i class="icon">arrow_back</i>
+		</button>
+		<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
+			<i class="icon">north</i>
+		</button>
+		<button onclick={() => nav.reload()} title="Refresh directory listing">
+			<i class="icon">refresh</i>
+		</button>
+		{#if entries.length !== 0}
+			<button class="button button_red" onclick={empty_trash}>
+				<i class="icon">delete_forever</i>
+				<span>Delete all</span>
+			</button>
+		{/if}
+{/snippet}

 {#if error}
 	<p class="error">{error}</p>
-	{:else if loaded && entries.length === 0}
-		<p class="empty">The trash is empty.</p>
 {:else if entries.length > 0}
 	<table class="trash_table">
 		<thead>
@@ -107,7 +126,7 @@ onMount(load);
 				<td></td>
 				<td>Name</td>
 				<td class="hide_small">Original location</td>
-					<td class="hide_small">Deleted</td>
+				<td class="hide_small">Deleted at</td>
 				<td class="hide_small">Size</td>
 				<td></td>
 			</tr>
@@ -127,23 +146,23 @@ onMount(load);
 							{entry.node.name}
 						</a>
 					</td>
-						<td class="hide_small original_path">
-							{entry.original_path || "—"}
+					<td class="hide_small">
+						{entry.original_path ? entry.original_path.slice(0, -entry.node.name.length) : "—"}
 					</td>
-						<td class="hide_small date_cell">
+					<td class="hide_small">
 						{entry.deletion_date ? formatDate(entry.deletion_date) : "—"}
 					</td>
-						<td class="hide_small size_cell">
+					<td class="hide_small">
 						{#if entry.node.type === "file"}
 							{formatDataVolume(entry.node.file_size, 3)}
 						{/if}
 					</td>
-						<td class="button_cell">
+					<td>
 						<div class="row_actions">
 							<button title="Restore to original location" onclick={() => restore_entry(entry)}>
 								<i class="icon">restore_from_trash</i>
 							</button>
-								<button class="danger" title="Delete permanently" onclick={() => delete_entry(entry)}>
+							<button class="button button_red" title="Delete permanently" onclick={() => delete_entry(entry)}>
 								<i class="icon">delete_forever</i>
 							</button>
 						</div>
@@ -153,45 +172,19 @@ onMount(load);
 		</tbody>
 	</table>
 {/if}
-</div>

 <style>
-.trash_container {
-	max-width: 1200px;
-	margin: auto;
-	padding: 1em;
-}
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	gap: 0.5em;
-	margin-bottom: 1em;
-}
-.title {
-	display: flex;
-	align-items: center;
-	gap: 0.3em;
-	margin: 0;
-	font-size: 1.2em;
-	border: none;
-}
-.actions {
-	display: flex;
-	gap: 0.5em;
+.separator {
+	flex: 1 1 auto;
 }
 .error {
 	color: var(--danger_color, #c0392b);
 }
-.empty {
-	color: var(--body_text_color);
-	opacity: 0.6;
-}
 .trash_table {
 	width: 100%;
 	border-collapse: collapse;
 	background: var(--body_background);
+	border-radius: 8px;
 }
 .trash_table td {
 	padding: 0;
@@ -205,7 +198,6 @@ onMount(load);
 }
 .icon_cell {
 	width: 2.5em;
-	padding: 0.3em 0.3em 0.3em 0.5em;
 }
 .node_icon {
 	display: block;
@@ -214,7 +206,6 @@ onMount(load);
 	object-fit: contain;
 }
 .name_cell {
-	padding: 0.3em 0.5em;
 	word-break: break-all;
 }
 .entry_link {
@@ -224,34 +215,10 @@ onMount(load);
 .entry_link:hover {
 	text-decoration: underline;
 }
-.original_path {
-	padding: 0.3em 0.5em;
-	color: var(--body_text_color);
-	opacity: 0.7;
-	font-size: 0.85em;
-	word-break: break-all;
-}
-.date_cell {
-	padding: 0.3em 0.5em;
-	white-space: nowrap;
-	font-size: 0.85em;
-}
-.size_cell {
-	padding: 0.3em 0.5em;
-	white-space: nowrap;
-	font-size: 0.85em;
-	text-align: right;
-}
-.button_cell {
-	padding: 0.3em 0.5em;
-}
 .row_actions {
 	display: flex;
 	gap: 0.25em;
 }
-.danger {
-	color: var(--danger_color, #c0392b);
-}
@media (max-width: 600px) {
 	.hide_small {
 		display: none;
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -91,7 +91,8 @@ onMount(() => {
 		</div>

 		<h2>Tracklist</h2>
-		{#each siblings as sibling (sibling.path)}
+		{#each siblings as sibling (sibling.id)}
+			{#if !sibling.is_hidden()}
 				<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
 					{#if sibling.path === $nav.base.path}
 						<i class="play_arrow icon">play_arrow</i>
@@ -101,6 +102,7 @@ onMount(() => {
 						<span>{sibling.name}</span>
 					<br/>
 				</a>
+			{/if}
 		{/each}
 	</TextBlock>
 </div>
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -90,7 +90,7 @@ export const seek = (delta: number) => {
 		<Spinner/>
 	</div>
 {:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
-	<TrashBin root_path={$nav.path[$nav.path.length - 2].path}/>
+	<TrashBin nav={nav} root_path={$nav.path[$nav.path.length - 2].path}/>
 {:else if viewer_type === "dir"}
 	<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
 		<CustomBanner path={$nav.path}/>
--- a/svelte/src/layout/CopyButton.svelte
+++ b/svelte/src/layout/CopyButton.svelte
@@ -6,20 +6,24 @@ let {
 	style = "",
 	large_icon = false,
 	small_icon = false,
-	children
+	disabled = false,
+	children,
+	onclick,
 }: {
 	text?: string;
 	style?: string;
 	large_icon?: boolean;
 	small_icon?: boolean;
+	disabled?: boolean;
 	children?: import('svelte').Snippet;
+	onclick?: (e: MouseEvent) => void;
 } = $props();

 let failed = $state(false)
 let success = $state(false)

 // Exported so it can be called manually
-export const copy = () => {
+export const copy = (e: MouseEvent) => {
 	try {
 		copy_text(text)
 		success = true
@@ -32,6 +36,10 @@ export const copy = () => {
 		success = false
 		failed = false
 	}, 10000)
+
+	if (onclick !== undefined) {
+		onclick(e)
+	}
 }
 </script>

@@ -44,7 +52,7 @@ export const copy = () => {
 	class:large_icon
 	class:small_icon
 	title="Copy text to clipboard"
-	disabled={text === ""}
+	disabled={disabled}
 >
 	<i class="icon">content_copy</i>
 	<span>
--- a/svelte/src/layout/Dialog.svelte
+++ b/svelte/src/layout/Dialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-let { children }: {
+let { children, onclose }: {
 	children?: import('svelte').Snippet;
+	onclose?: () => void
 } = $props();
 let dialog: HTMLDialogElement = $state()

@@ -8,12 +9,12 @@ export const open = (origin: DOMRect|MouseEvent) => {
 	// Show the window so we can get the location
 	dialog.showModal()

-	const edge_offset = 2
+	const edge_offset = 10

 	// Get the egdes of the screen, so the window does not spawn off-screen
 	const dialog_rect = dialog.getBoundingClientRect()
-	const max_left = window.innerWidth - dialog_rect.width - edge_offset
-	const max_top = window.innerHeight - dialog_rect.height - edge_offset
+	const max_left = document.documentElement.clientWidth - dialog_rect.width - edge_offset
+	const max_top = document.documentElement.clientHeight - dialog_rect.height - edge_offset

 	let min_left: number, min_top: number
 	if (origin instanceof DOMRect) {
@@ -35,6 +36,9 @@ export const open = (origin: DOMRect|MouseEvent) => {

 export const close = () => {
 	dialog.close()
+	if (onclose !== undefined) {
+		onclose()
+	}
 }

 // Attach a click handler so that the dialog is closed when the user clicks
@@ -44,7 +48,7 @@ export const close = () => {
 const click = (e: MouseEvent) => {
 	if (e.target === dialog) {
 		e.preventDefault()
-		dialog.close()
+		close()
 	}
 }
 </script>
--- a/svelte/src/layout/SortButton.svelte
+++ b/svelte/src/layout/SortButton.svelte
@@ -4,7 +4,7 @@ let {
 	active_field = "",
 	asc = true,
 	sort_func,
-	children
+	children,
 }: {
 	field?: string;
 	active_field?: string;
@@ -14,7 +14,7 @@ let {
 } = $props();
 </script>

-<button onclick={() => sort_func(field)}>
+<button onclick={() => sort_func(field)} class="button flat">
 	{#if active_field === field}
 		{#if asc}↓{:else}↑{/if}
 	{/if}
@@ -25,8 +25,6 @@ let {
 button {
 	display: block;
 	margin: 0;
-	line-height: 1em;
 	width: 100%;
-	text-align: initial;
 }
 </style>
--- a/svelte/src/lib/AdminAPI.ts
+++ b/svelte/src/lib/AdminAPI.ts
@@ -1,5 +1,5 @@
 import { countries } from "country-data-list"
-import { check_response, get_endpoint } from "./NovaAPI"
+import { check_response, get_endpoint, type GenericResponse } from "./NovaAPI"

 export const country_name = (country: string) => {
 	if (country !== "" && countries[country] !== undefined) {
@@ -27,3 +27,15 @@ export const get_admin_invoices = async (year: number, month: number) => {
 		)
 	) as Invoice[]
 };
+
+export const admin_decommission_node = async (peer_id: string) => {
+	let form = new FormData()
+	form.set("peer_id", peer_id)
+
+	return await check_response(
+		await fetch(
+			get_endpoint() + "/admin/decommission_node",
+			{ method: "POST", body: form }
+		)
+	) as GenericResponse
+};
--- a/svelte/src/lib/FilesystemAPI.svelte.ts
+++ b/svelte/src/lib/FilesystemAPI.svelte.ts
@@ -34,6 +34,8 @@ export class FSNode {
 	mode_string: string
 	mode_octal: string
 	created_by: string
+	recursive_size: number
+	recursive_children: number

 	abuse_type?: string
 	abuse_report_time?: string
@@ -188,7 +190,7 @@ export const fs_get_node = async (path: string) => {
 //  - shared, boolean. If true the node will receive a public ID
 //
 // Returns the modified filesystem node object
-export const fs_update = async (path: string, opts: NodeOptions) => {
+export const fs_update = async (path: string, opts: NodeOptions): Promise<FSNode> => {
 	const form = new FormData()
 	form.append("action", "update")

--- a/svelte/src/lib/NovaAPI.ts
+++ b/svelte/src/lib/NovaAPI.ts
@@ -11,6 +11,7 @@ export type GenericResponse = {
 }

 export type User = {
+	id: string,
 	username: string,
 	email: string,
 	otp_enabled: boolean,
@@ -20,12 +21,10 @@ export type User = {
 	filesystem_node_count: number,
 	is_admin: boolean,
 	balance_micro_eur: number,
-	hotlinking_enabled: boolean,
 	monthly_transfer_cap: number,
 	monthly_transfer_used: number,
 	file_viewer_branding: Map<string, string>,
-	file_embed_domains: string,
-	skip_file_viewer: boolean,
+	embed_domains: string,
 	affiliate_user_name: string,
 	checkout_country: string,
 	checkout_name: string,
@@ -158,10 +157,12 @@ export const put_user = async (data: Object) => {
 	))

 	// Update the user store
+	user.update((user: User) => {
 		for (let key of Object.keys(data)) {
-		cached_user[key] = data[key]
+			user[key] = data[key]
 		}
-	user.set(cached_user)
+		return user
+	})
 }

 export const logout_user = async (redirect_path: string) => {
--- a/svelte/src/user_home/BandwidthSharing.svelte
+++ b/svelte/src/user_home/BandwidthSharing.svelte
@@ -1,148 +0,0 @@
-<script>
-import { preventDefault } from 'svelte/legacy';
-import { onMount } from "svelte";
-import Pro from "icons/Pro.svelte";
-import { formatDataVolume } from "util/Formatting";
-import ProgressBar from "util/ProgressBar.svelte";
-import SuccessMessage from "util/SuccessMessage.svelte";
-import { loading_finish, loading_start } from "lib/Loading";
-import { put_user } from 'lib/NovaAPI';
-import { user } from 'lib/UserStore';
-
-let success_message = $state()
-let hotlinking = $state($user === null ? false : $user.hotlinking_enabled)
-let transfer_cap = $state($user === null ? 0 : $user.monthly_transfer_cap / 1e12)
-let skip_viewer = $state($user === null ? false : $user.skip_file_viewer)
-
-const update = async () => {
-	loading_start()
-	try {
-		await put_user({
-			hotlinking_enabled: hotlinking,
-			transfer_cap: transfer_cap*1e12,
-			skip_file_viewer: skip_viewer,
-		})
-
-		success_message.set(true, "Sharing settings updated")
-	} catch (err) {
-		success_message.set(false, "Failed to update subscription: "+err)
-	} finally {
-		loading_finish()
-	}
-}
-
-let toggle_hotlinking = () => {
-	hotlinking = !hotlinking
-	update()
-}
-
-let transfer_used = $state(0)
-let load_transfer_used = () => {
-	let today = new Date()
-	let start = new Date()
-	start.setDate(start.getDate() - 30)
-
-	fetch(
-		window.api_endpoint + "/user/time_series/egress" +
-		"?start=" + start.toISOString() +
-		"&end=" + today.toISOString() +
-		"&interval=60"
-	).then(resp => {
-		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
-		return resp.json();
-	}).then(resp => {
-		transfer_used = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
-	}).catch(e => {
-		console.error("Error requesting time series: " + e);
-	})
-}
-
-let toggle_skip_viewer = () => {
-	skip_viewer = !skip_viewer
-	update()
-}
-
-onMount(() => {
-	load_transfer_used()
-})
-
-</script>
-
-<section>
-	<h2><Pro/>Hotlinking (bandwidth sharing)</h2>
-	<SuccessMessage bind:this={success_message}></SuccessMessage>
-
-	<button onclick={toggle_hotlinking}>
-		{#if hotlinking}
-			<i class="icon green">check</i> ON (click to turn off)
-		{:else}
-			<i class="icon red">close</i> OFF (click to turn on)
-		{/if}
-	</button>
-	<p>
-		When hotlinking is enabled all the bandwidth that your files use will be
-		subtracted from your data cap. Advertisements will be disabled on the
-		download pages for your files and download speed will be unlimited. The
-		rate limiting captcha for files is also disabled when hotlinking is on.
-		You can directly embed your file's download link anywhere, you don't
-		need to use the file viewer page.
-	</p>
-
-	<h2><Pro/>Bill shock limit</h2>
-	<p>
-		Billshock limit in terabytes per month (1 TB = 1000 GB). Set to 0 to
-		disable.
-	</p>
-	<form onsubmit={preventDefault(update)} class="billshock_container">
-		<input type="number" bind:value={transfer_cap} step="0.1" min="0" style="width: 5em;"/>
-		<div style="margin: 0.5em;">TB</div>
-		<button type="submit">
-			<i class="icon">save</i> Save
-		</button>
-	</form>
-
-	<p>
-		Bandwidth used in the last 30 days: {formatDataVolume(transfer_used, 3)},
-		new limit: {formatDataVolume(transfer_cap*1e12, 3)}
-	</p>
-	<ProgressBar used={transfer_used} total={transfer_cap*1e12}></ProgressBar>
-	<p>
-		The billshock limit limits how much bandwidth your account can use in a
-		30 day window. When this limit is reached hotlinking will be disabled
-		and you will no longer be charged for bandwidth usage. This is mostly
-		useful for the Prepaid subscription, but it works for Patreon plans too.
-		Set to 0 to disable the limit.
-	</p>
-
-	<h2><Pro/>Skip download page</h2>
-	<button onclick={toggle_skip_viewer}>
-		{#if skip_viewer}
-			<i class="icon green">check</i> ON (click to turn off)
-		{:else}
-			<i class="icon red">close</i> OFF (click to turn on)
-		{/if}
-	</button>
-	<p>
-		This setting only applies to your account, others will still see the
-		download page when visiting your files. When this is enabled you will be
-		redirected to the file download API when clicking a Nova link.
-		This means that images, videos and PDF files will be opened directly in
-		your browser, and other files are immediately downloaded to your device.
-		This only works for single file links, not albums. You will need a Pro
-		subscription to use this feature.
-	</p>
-</section>
-
-<style>
-.green {
-	color: var(--highlight_color);
-}
-.red {
-	color: var(--danger_color);
-}
-.billshock_container {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-</style>
--- a/svelte/src/user_home/EmbeddingControls.svelte
+++ b/svelte/src/user_home/EmbeddingControls.svelte
@@ -1,118 +0,0 @@
-<script lang="ts">
-import { onMount } from "svelte";
-import SuccessMessage from "util/SuccessMessage.svelte";
-import { get_endpoint, get_user, type User } from "lib/NovaAPI";
-import { loading_run } from "lib/Loading";
-
-let success_message: SuccessMessage
-
-// Embedding settings
-let embed_domains: string[] = []
-
-const save_embed = async () => {
-	await loading_run(async () => {
-		const domain_list = embed_domains.join(" ")
-		const form = new FormData()
-		form.append("embed_domains", domain_list)
-
-		try {
-			const resp = await fetch(
-				get_endpoint()+"/user",
-				{ method: "PUT", body: form }
-			);
-			if(resp.status >= 400) {
-				let json = await resp.json()
-				console.debug(json)
-				throw json.message
-			}
-
-			success_message.set(true, "Changes saved")
-		} catch(err) {
-			success_message.set(false, err)
-		}
-	})
-}
-
-let new_domain: string = ""
-const add = () => {
-	console.debug("Adding domain", new_domain)
-	embed_domains.push(new_domain)
-	embed_domains = embed_domains
-	new_domain = ""
-	save_embed()
-}
-const remove = (index: number) => {
-	embed_domains.splice(index, 1)
-	embed_domains = embed_domains
-	save_embed()
-}
-
-let user: User
-onMount(async () => {
-	user = await get_user()
-	if (user.file_embed_domains !== "") {
-		embed_domains = user.file_embed_domains.split(" ")
-	}
-})
-</script>
-
-<section>
-	<h2>Embedding controls</h2>
-	<SuccessMessage bind:this={success_message}></SuccessMessage>
-	{#if user !== undefined && !user.hotlinking_enabled}
-		<div class="highlight_yellow">
-			To use embedding restrictions hotlinking needs to be enabled.
-			Enable hotlinking on the
-			<a href="/user/sharing/bandwidth">sharing settings page</a>.
-		</div>
-	{/if}
-	<p>
-		Here you can control which websites are allowed to embed your files in
-		their web pages. If a website that is not on this list tries to embed
-		one of your files the request will be blocked. This applies to both
-		hotlink and iframe embeds. If the list is empty, all domains are allowed
-		to embed your files.
-	</p>
-	<div class="highlight_border">
-		<form on:submit|preventDefault={() => add()}>
-			<div class="form_row">
-				<span>Add domain name</span>
-				<input class="grow" bind:value={new_domain} type="text"/>
-				<button class="shrink" type="submit"><i class="icon">add</i> Add</button>
-			</div>
-		</form>
-		<hr/>
-		{#if embed_domains.length === 0}
-			<span>
-				No domains specified. All websites are allowed to embed your files
-			</span>
-		{/if}
-		{#each embed_domains as domain, index}
-			<div class="form_row">
-				<button class="shrink" type="button" on:click={() => remove(index)}>
-					<i class="icon">delete</i>
-				</button>
-				<div>{domain}</div>
-			</div>
-		{/each}
-	</div>
-</section>
-
-<style>
-.highlight_border {
-	text-align: initial;
-}
-.form_row {
-	display: inline-flex;
-	flex-direction: row;
-	width: 100%;
-	align-items: center;
-	gap: 0.5em;
-}
-.grow {
-	flex: 1 1 auto;
-}
-.shrink {
-	flex: 0 0 auto;
-}
-</style>
--- a/svelte/src/user_home/HotlinkProgressBar.svelte
+++ b/svelte/src/user_home/HotlinkProgressBar.svelte
@@ -37,7 +37,7 @@ let frac = $derived(used / total)
 		{#if $user !== null && $user.monthly_transfer_cap > 0}
 			<p>
 				You have a billshock limit configured. <a
-				href="/user/sharing/bandwidth">increase or disable the limit</a> to
+				href="/user/sharing">increase or disable the limit</a> to
 				continue sharing files.
 			</p>
 		{/if}
@@ -59,7 +59,7 @@ let frac = $derived(used / total)
 		{#if $user !== null && $user.monthly_transfer_cap > 0}
 			<p>
 				You have a billshock limit configured. <a
-				href="/user/sharing/bandwidth">increase or disable the limit</a> to
+				href="/user/sharing">increase or disable the limit</a> to
 				continue sharing files.
 			</p>
 		{/if}
--- a/svelte/src/user_home/Router.svelte
+++ b/svelte/src/user_home/Router.svelte
@@ -7,12 +7,11 @@ import ConnectApp from "./ConnectApp.svelte";
 import ActivityLog from "./ActivityLog.svelte";
 import DepositCredit from "./DepositCredit.svelte";
 import TabMenu, { type Tab } from "util/TabMenu.svelte";
-import BandwidthSharing from "./BandwidthSharing.svelte";
-import EmbeddingControls from "./EmbeddingControls.svelte";
 import Dashboard from "./dashboard/Dashboard.svelte";
 import AffiliatePrompt from "./AffiliatePrompt.svelte";
 import { onMount } from "svelte";
 import { get_user, type User } from "lib/NovaAPI";
+import SharingSettings from "./SharingSettings.svelte";

 let pages: Tab[] = [
 	{
@@ -50,21 +49,9 @@ let pages: Tab[] = [
 		],
 	}, {
 		path: "/user/sharing",
-		title: "Sharing",
-		icon: "share",
-		subpages: [
-			{
-				path: "/user/sharing/bandwidth",
 		title: "Sharing settings",
 		icon: "share",
-				component: BandwidthSharing,
-			}, {
-				path: "/user/sharing/embedding",
-				title: "Embedding Controls",
-				icon: "code",
-				component: EmbeddingControls,
-			},
-		],
+		component: SharingSettings,
 	}, {
 		path: "/user/connect_app",
 		title: "Apps",
--- a/svelte/src/user_home/SharingSettings.svelte
+++ b/svelte/src/user_home/SharingSettings.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+import { onMount } from "svelte";
+import { formatDataVolume } from "util/Formatting";
+import ProgressBar from "util/ProgressBar.svelte";
+import { loading_run } from "lib/Loading";
+import { get_endpoint, put_user } from 'lib/NovaAPI';
+import SuccessMessage from 'util/SuccessMessage.svelte';
+import { user } from "lib/UserStore";
+
+let success_message: SuccessMessage = $state()
+let transfer_cap = $state($user === null ? 0 : $user.monthly_transfer_cap / 1e12)
+
+const update_user = async (e: SubmitEvent) => {
+	if (e !== null) {
+		e.preventDefault()
+	}
+	loading_run(async () => {
+		try {
+			await put_user({
+				transfer_cap: transfer_cap*1e12,
+				embed_domains: embed_domains.join(" "),
+			})
+
+			success_message.set(true, "Sharing settings updated")
+		} catch (err) {
+			success_message.set(false, "Failed to update user: "+err)
+		}
+	})
+}
+
+let transfer_used = $state(0)
+let load_transfer_used = () => {
+	let today = new Date()
+	let start = new Date()
+	start.setDate(start.getDate() - 30)
+
+	fetch(
+		get_endpoint() + "/user/time_series/egress" +
+		"?start=" + start.toISOString() +
+		"&end=" + today.toISOString() +
+		"&interval=60"
+	).then(resp => {
+		if (!resp.ok) { return Promise.reject("Error: " + resp.status); }
+		return resp.json();
+	}).then(resp => {
+		transfer_used = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
+	}).catch(e => {
+		console.error("Error requesting time series: " + e);
+	})
+}
+
+// Embedding settings
+let embed_domains: string[] = $state($user === null ? [] : $user.embed_domains.split(" "))
+let new_domain: string = $state("")
+
+const add_domain = (e: SubmitEvent) => {
+	e.preventDefault()
+	console.debug("Adding domain", new_domain)
+	embed_domains.push(new_domain)
+	embed_domains = embed_domains
+	new_domain = ""
+	update_user(e)
+}
+const del_domain = (index: number) => {
+	embed_domains.splice(index, 1)
+	embed_domains = embed_domains
+	update_user(null)
+}
+
+onMount(async () => {
+	load_transfer_used()
+})
+</script>
+
+<section>
+	<SuccessMessage bind:this={success_message}/>
+
+	<h2>Bill shock limit</h2>
+	<p>
+		Billshock limit in terabytes per month (1 TB = 1000 GB). Set to 0 to
+		disable.
+	</p>
+	<form onsubmit={update_user} class="billshock_container">
+		<input type="number" bind:value={transfer_cap} step="0.1" min="0" style="width: 5em;"/>
+		<div style="margin: 0.5em;">TB</div>
+		<button type="submit">
+			<i class="icon">save</i> Save
+		</button>
+	</form>
+
+	<p>
+		Bandwidth used in the last 30 days: {formatDataVolume(transfer_used, 3)},
+		new limit: {formatDataVolume(transfer_cap*1e12, 3)}
+	</p>
+	<ProgressBar used={transfer_used} total={transfer_cap*1e12}></ProgressBar>
+	<p>
+		The billshock limit limits how much bandwidth your account can use in a
+		30 day window. When this limit is reached hotlinking will be disabled
+		and you will no longer be charged for bandwidth usage. This is mostly
+		useful for the Prepaid subscription, but it works for Patreon plans too.
+		Set to 0 to disable the limit.
+	</p>
+
+	<h2>Embedding controls</h2>
+	<p>
+		Here you can control which websites are allowed to embed your files in
+		their web pages. If a website that is not on this list tries to embed
+		one of your files the request will be blocked. This applies to both
+		hotlink and iframe embeds. If the list is empty, all domains are allowed
+		to embed your files.
+	</p>
+	<div class="highlight_border">
+		<form onsubmit={add_domain}>
+			<div class="form_row">
+				<span>Add domain name</span>
+				<input class="grow" bind:value={new_domain} type="text"/>
+				<button class="shrink" type="submit"><i class="icon">add</i> Add</button>
+			</div>
+		</form>
+		<hr/>
+		{#if embed_domains.length === 0}
+			<span>
+				No domains specified. All websites are allowed to embed your files
+			</span>
+		{/if}
+		{#each embed_domains as domain, index}
+			<div class="form_row">
+				<button class="shrink" type="button" onclick={() => del_domain(index)}>
+					<i class="icon">delete</i>
+				</button>
+				<div>{domain}</div>
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+.billshock_container {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.highlight_border {
+	text-align: initial;
+}
+.form_row {
+	display: inline-flex;
+	flex-direction: row;
+	width: 100%;
+	align-items: center;
+	gap: 0.5em;
+}
+.grow {
+	flex: 1 1 auto;
+}
+.shrink {
+	flex: 0 0 auto;
+}
+</style>
--- a/svelte/src/user_home/Subscription.svelte
+++ b/svelte/src/user_home/Subscription.svelte
@@ -7,7 +7,6 @@ import { user } from "lib/UserStore";
 import { put_user } from "lib/NovaAPI";

 let subscription: string = $state($user === null ? "" : $user.subscription.id)
-let subscription_type: string = $state($user === null ? "" : $user.subscription.type)
 let success_message: SuccessMessage = $state()

 const update = async (plan: string) => {
@@ -71,13 +70,6 @@ const update = async (plan: string) => {
 	<p>
 		Here you can switch between different subscription plans.
 	</p>
-	<p>
-		The Patreon subscription is managed by Patreon. Nova cannot modify
-		or end your subsciption. If you would like to cancel your Patreon plan
-		you can do that <a
-		href="https://www.patreon.com/settings/memberships/nova"
-		target="_blank">on Patreon</a>.
-	</p>
 	<p>
 		The Prepaid subscription is charged daily based on usage. When you reach
 		negative balance the subscription will automatically end. You need at
@@ -91,41 +83,6 @@ const update = async (plan: string) => {
 	<SuccessMessage bind:this={success_message}/>

 	<div class="feat_table">
-		<div>
-			<div class="feat_label" class:feat_highlight={subscription_type === "patreon"}>
-				Patreon<br/>
-				{#if subscription_type === "patreon"}
-					Currently active<br/>
-					<a class="button" href="https://www.patreon.com/settings/memberships/nova" target="_blank">
-						<i class="icon">settings</i>
-						Manage
-					</a>
-				{:else}
-					<a class="button" href="/api/patreon_auth/start">
-						<i class="icon">add_link</i>
-						Link Patreon
-					</a>
-				{/if}
-			</div>
-			<div class="feat_normal round_tr" class:feat_highlight={subscription_type === "patreon"}>
-				<p>
-					This subscription is managed by Patreon. You will need to <a
-					href="https://www.patreon.com/nova/membership"
-					target="_blank">purchase a plan on Patreon</a> before you
-					can activate this subscription. After your purchase you can
-					click the "Link Patreon" button and your account will be
-					upgraded.
-				</p>
-				<ul>
-					<li>€4 per month</li>
-					<li>No storage limit for file sharing</li>
-					<li>4 TB transfer limit (higher plans available)</li>
-					<li>Access to the <a href="/filesystem">filesystem</a></li>
-					<li>2 TB filesytem storage limit (higher plans available)</li>
-				</ul>
-			</div>
-		</div>
-
 		<div>
 			<div class="feat_label" class:feat_highlight={subscription === "prepaid"}>
 				Prepaid<br/>
@@ -141,11 +98,7 @@ const update = async (plan: string) => {
 			<div class="feat_normal round_tr" class:feat_highlight={subscription === "prepaid"}>
 				<p>
 					You will need a positive account balance to activate this
-					plan. If you currently have a Patreon subscription active,
-					then enabling prepaid will not cancel that subscription. You
-					can end your subscription <a
-					href="https://www.patreon.com/settings/memberships/nova"
-					target="_blank">on Patreon.com</a>.
+					plan. The plan deactivates when your credit runs out.
 				</p>
 				<ul>
 					<li>
@@ -157,12 +110,12 @@ const update = async (plan: string) => {
 					</li>
 					<li>
 						€1 per TB for data transfer (with <a
-						href="/user/sharing/bandwidth">hotlinking</a>
+						href="/user/sharing">hotlinking</a>
 						enabled)
 					</li>
 					<li>
-						File <a href="/user/sharing/embedding">embedding
-						control</a> options
+						File <a href="/user/sharing">embedding control</a>
+						options
 					</li>
 				</ul>
 			</div>
@@ -177,8 +130,8 @@ const update = async (plan: string) => {
 			</div>
 			<div class="feat_normal round_br" class:feat_highlight={subscription === ""}>
 				<ul>
-					<li>Standard free plan, files expire after 120 days.</li>
-					<li>Download limit of 6 GB per day</li>
+					<li>Storage limit: 50 GB</li>
+					<li>Download limit: 50 GB per 30 days (sliding window)</li>
 				</ul>
 			</div>
 		</div>
--- a/svelte/src/user_home/dashboard/CardUsage.svelte
+++ b/svelte/src/user_home/dashboard/CardUsage.svelte
@@ -58,6 +58,6 @@ onMount(async () => {
 	<br/><br/>

 	Egress used (30 days):
-	(<a href="/user/sharing/bandwidth">set custom limit</a>)
+	(<a href="/user/sharing">set custom limit</a>)
 	<HotlinkProgressBar used={transfer_used} total={transfer_cap}></HotlinkProgressBar>
 {/if}
--- a/svelte/src/user_home/dashboard/Dashboard.svelte
+++ b/svelte/src/user_home/dashboard/Dashboard.svelte
@@ -32,7 +32,7 @@ const min_card_size = 0
 const def_card_size = 1
 const max_card_size = 3

-const expand = i => {
+const expand = (i: number) => {
 	if (cards[i].size === undefined) {
 		cards[i].size = def_card_size
 	}
@@ -41,7 +41,7 @@ const expand = i => {
 	}
 	save()
 }
-const shrink = i => {
+const shrink = (i: number) => {
 	if (cards[i].size === undefined) {
 		cards[i].size = def_card_size
 	}
@@ -51,7 +51,7 @@ const shrink = i => {
 	save()
 }

-const swap_card = (idx1, idx2) => {
+const swap_card = (idx1: number, idx2: number) => {
 	const card1 = cards[idx1]
 	cards[idx1] = cards[idx2]
 	cards[idx2] = card1
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -236,6 +236,10 @@ const set_offset = (off: number) => {
 							<i class="icon">palette</i>
 							<span>Themes</span>
 						</a>
+						<a class="button" href="https://docs.nova.storage" use:highlight_current_page>
+							<i class="icon">text_snippet</i>
+							<span>Documentation</span>
+						</a>
 					{/snippet}
 				</MenuEntry>
Author	SHA1	Message	Date
Wim Brand	99ab34c76d	Fix error popup when canceling a sharing action Fix navigator not reloading when saving an edited file Remove dead links Remove references to Patreon	2026-08-05 22:18:57 +02:00
Wim Brand	4c57a363b2	Fix: * Breadcrumbs too wide in deeply nested directories * Sharedialog copies link and calls navigator.share at the same time * Link copy feedback is not clear * Show embed code when public read * Hide hidden files from audio playlist	2026-08-05 21:54:49 +02:00
Wim Brand	00b40ab900	Add filesystem indexing metrics	2026-08-05 21:52:28 +02:00
Wim Brand	b02e88eb1b	Add button to remove peers	2026-08-04 14:38:36 +02:00
Wim Brand	196845d739	Remove unused Go templates	2026-08-04 13:37:59 +02:00
Wim Brand	a12424ef66	Add configurable columns to directory view	2026-08-04 13:37:44 +02:00
Wim Brand	f3522f370f	Overhaul trash page	2026-08-03 23:45:37 +02:00
Wim Brand	912fe06ff6	Add documentation link in menu	2026-08-03 23:31:54 +02:00
Wim Brand	0acc6a91bb	Update sharing settings	2026-08-03 23:31:43 +02:00