Add configurable columns to directory view

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>

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>

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

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

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

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 {