Add configurable columns to directory view

2026-08-04 13:37:44 +02:00
parent f3522f370f
commit a12424ef66
11 changed files with 181 additions and 59 deletions
--- 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/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/layout/CopyButton.svelte
+++ b/svelte/src/layout/CopyButton.svelte
@@ -6,20 +6,22 @@ let {
 	style = "",
 	large_icon = false,
 	small_icon = false,
-	children
+	children,
+	onclick,
 }: {
 	text?: string;
 	style?: string;
 	large_icon?: boolean;
 	small_icon?: 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 +34,10 @@ export const copy = () => {
 		success = false
 		failed = false
 	}, 10000)
+
+	if (onclick !== undefined) {
+		onclick(e)
+	}
 }
 </script>

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