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
26 changed files with 330 additions and 377 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 {
-		await navigator.share({
-			title: base.name,
-			text: "I would like to share '" + base.name + "' with you",
-			url: share_url,
-		})
-	} catch(_) {
-		if (copy_text(share_url)) {
-			toast = "Link copied to clipboard"
-			setTimeout(() => {toast = ""}, 10000)
-		} else {
-			alert("Could not copy text")
-		}
-	}
+const nav_share = async (url: string) => {
+	await navigator.share({
+		title: base.name,
+		text: "I would like to share '" + base.name + "' with you",
+		url: url,
+	})
 }
 </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>
-				<span><u>C</u>opy link</span>
+				{#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()
-		options.branding_enabled = JSON.stringify(branding_enabled)
+		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 (new_name !== file.name) {
-			let parent = file.path.slice(0, -file.name.length)
-			console.log("Moving", file.path, "to", parent+new_name)
+			// 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
-		}
+				await fs_rename(file.path, parent+new_name)
+				file.path = parent+new_name
+			}
+		})
 	} 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
-				</SortButton>
+			{#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>
+			{/each}
+			<td class="node_icons icons_wrap">
+				<Button flat icon="settings" click={e => dialog.open(e)} />
 			</td>
-			<td></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/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -91,16 +91,18 @@ onMount(() => {
 		</div>

 		<h2>Tracklist</h2>
-		{#each siblings as sibling (sibling.path)}
-			<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>
-				{:else}
-					<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
-				{/if}
-					<span>{sibling.name}</span>
-				<br/>
-			</a>
+		{#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>
+					{:else}
+						<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
+					{/if}
+						<span>{sibling.name}</span>
+					<br/>
+				</a>
+			{/if}
 		{/each}
 	</TextBlock>
 </div>
--- 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/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/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
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