Make toolbar and main menu collapsible

svelte/src/filesystem/FileStats.svelte

@@ -4,8 +4,12 @@ import { formatDataVolume, formatThousands } from "util/Formatting"
 import { fs_path_url } from "lib/FilesystemAPI.svelte";
 import type { FSNavigator } from "./FSNavigator";
 
-let { nav }: {
+let {
-	nav: FSNavigator;
+	nav,
+	expanded = $bindable(false)
+}: {
+	nav: FSNavigator
+	expanded: boolean
 } = $props();
 
 let loading = $state(true)
@@ -92,9 +96,31 @@ const close_socket = () => {
 		socket = null
 	}
 }
+
+const toggle_expand = (e: MouseEvent) => {
+	e.stopPropagation()
+	e.preventDefault()
+	expanded = !expanded
+}
+const toggle_expand_keyboard = (e: KeyboardEvent) => {
+	if (e.key === " " || e.key === "Enter") {
+		e.stopPropagation()
+		e.preventDefault()
+		expanded = !expanded
+	}
+}
 </script>
 
-{#if $nav.base.type === "file"}
+<div class="container" onclick={toggle_expand} onkeypress={toggle_expand_keyboard} role="presentation">
+	<button class="button_expand hidden_vertical" onclick={toggle_expand}>
+		{#if expanded}
+			<i class="icon">expand_more</i>
+		{:else}
+			<i class="icon">expand_less</i>
+		{/if}
+	</button>
+
+	{#if $nav.base.type === "file"}
 		{#if error_msg !== ""}
 			{error_msg}
 		{:else}
@@ -103,7 +129,6 @@ const close_socket = () => {
 				<div class="stat">
 					{loading ? "Loading..." : formatThousands(downloads)}
 				</div>
-
 			</div>
 			<div class="group">
 				<div class="label">Egress</div>
@@ -118,7 +143,7 @@ const close_socket = () => {
 			<div class="stat">{formatDataVolume($nav.base.file_size, 3)}</div>
 		</div>
 
-{:else if $nav.base.type === "dir" || $nav.base.type === "bucket"}
+	{:else if $nav.base.type === "dir" || $nav.base.type === "bucket"}
 
 		<div class="group">
 			<div class="label">Directories</div>
@@ -134,9 +159,14 @@ const close_socket = () => {
 			<div class="label">Total size</div>
 			<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
 		</div>
-{/if}
+	{/if}
+</div>
 
 <style>
+.container {
+	display: flex;
+	flex-direction: row;
+}
 .group {
 	flex: 1 1 auto;
 	text-align: center;

svelte/src/filesystem/Toolbar.svelte

@@ -21,6 +21,8 @@ let {
 
 let share_dialog: ShareDialog = $state()
 let link_copied = $state(false)
+let toolbar_expanded = $state(false)
+
 export const copy_link = () => {
 	const share_url = fs_share_url($nav.path)
 	if (share_url === "") {
@@ -35,8 +37,9 @@ export const copy_link = () => {
 </script>
 
 <div class="toolbar">
-	<div class="grid">
+	<FileStats nav={nav} bind:expanded={toolbar_expanded}/>
-		<FileStats nav={nav}/>
+
+	<div class="grid" class:hide={!toolbar_expanded}>
 
 		<div class="button_row">
 			<button onclick={() => {nav.open_sibling(-1)}}>
@@ -99,6 +102,9 @@ export const copy_link = () => {
 <ShareDialog nav={nav} bind:this={share_dialog}/>
 
 <style>
+.hide {
+	display: none !important;
+}
 .toolbar {
 	flex: 0 0 auto;
 	overflow-x: hidden;

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -134,6 +134,7 @@ const delete_selected = async () => {
 	} finally {
 		viewing_mode()
 		loading_finish()
+		await nav.reload()
 	}
 }
 

svelte/src/filesystem/filemanager/ListView.svelte

@@ -85,24 +85,16 @@ let {
 
 <style>
 .directory {
-	display: table;
 	background: var(--body_background);
 	border-collapse: collapse;
 	/* backdrop-filter: blur(4px); */
 	max-width: 1200px;
 	margin: auto; /* center */
 }
-.directory > * {
-	display: table-row;
-}
-.directory > * > * {
-	display: table-cell;
-}
 td {
 	padding: 0;
 }
 .node {
-	display: table-row;
 	text-decoration: none;
 	color: var(--body_text-color);
 	cursor: pointer;

svelte/src/filesystem/upload_widget/FSUploadWidget.svelte

@@ -86,6 +86,9 @@ export const upload_file = async (file: File) => {
 	}
 }
 
+const min_uploads = 2
+const max_uploads = 20
+
 let active_uploads = 0
 let status = $state("idle")
 
@@ -109,7 +112,10 @@ const start_upload = async () => {
 			// If the size threshold or the concurrent upload limit is reached
 			// we break the loop. The system tries to keep an upload queue of
 			// 100 MB and a minimum of two concurrent uploads.
-			if ((uploading_size >= 100e6 && active_uploads >= 2) || active_uploads >= 10) {
+			if (
+				(uploading_size >= 100e6 && active_uploads >= min_uploads) ||
+				active_uploads >= max_uploads
+			) {
 				console.debug("Current uploads", active_uploads, "uploads size", uploading_size)
 				break
 			}

svelte/src/wrap/Bookmarks.svelte

@@ -3,6 +3,8 @@ import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 
+let { menu_collapsed }: { menu_collapsed: boolean } = $props();
+
 let editing = $state(false)
 
 const toggle_edit = () => {
@@ -10,18 +12,20 @@ const toggle_edit = () => {
 }
 </script>
 
-<div class="title">
+{#if $bookmarks_store.length !== 0}
-	<div class="hide_small">Bookmarks</div>
+	<div class="title">
+		<div class:hide={menu_collapsed}>Bookmarks</div>
 		<button onclick={() => toggle_edit()} class:button_highlight={editing}>
 			<i class="icon">edit</i>
 		</button>
-</div>
+	</div>
+{/if}
 
 {#each $bookmarks_store as bookmark}
 	<div class="row">
 		<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
 			<i class="icon">{bookmark.icon}</i>
-			<span class="hide_small">{bookmark.label}</span>
+			<span class:hide={menu_collapsed}>{bookmark.label}</span>
 		</a>
 		{#if editing}
 			<button onclick={() => bookmark_del(bookmark.id)}>
@@ -59,9 +63,7 @@ const toggle_edit = () => {
 	background: none;
 	box-shadow: none;
 }
-@media(max-width: 1000px) {
+.hide {
-	.hide_small {
 	display: none;
-	}
 }
 </style>

svelte/src/wrap/MainMenu.svelte

@@ -10,9 +10,17 @@ import { fs_get_node } from "lib/FilesystemAPI.svelte";
 import { css_from_path } from "filesystem/edit_window/Branding";
 import { loading_run, loading_store } from "lib/Loading";
 import Spinner from "util/Spinner.svelte";
-import { get_user, logout_user } from "lib/PixeldrainAPI";
+import { get_user } from "lib/PixeldrainAPI";
+
+let menu_collapsed = false
+
+const toggle_menu = (e: MouseEvent) => {
+	menu_collapsed = !menu_collapsed
+}
 
 onMount(async () => {
+	menu_collapsed = document.documentElement.clientWidth < 1000
+
 	await loading_run(async () => {
 		const user = await get_user()
 		if (user.username === undefined || user.username === "") {
@@ -27,21 +35,26 @@ onMount(async () => {
 <div class="nav_container">
 	<div class="scroll_container">
 		<nav class="nav">
+			<button class="button" onclick={toggle_menu}>
+				<i class="icon">menu</i>
+				<span class:hide={menu_collapsed}>Collapse menu</span>
+			</button>
+
 			<a class="button" href="/" use:highlight_current_page>
 				<i class="icon">home</i>
-				<span class="hide_small">Home</span>
+				<span class:hide={menu_collapsed}>Home</span>
 			</a>
 
 			{#if $user.username !== undefined && $user.username !== ""}
-				<div class="separator hide_small"></div>
+				<div class="separator" class:hide={menu_collapsed}></div>
 
-				<div class="username hide_small">
+				<div class="username" class:hide={menu_collapsed}>
 					{$user.username}
 				</div>
 
 				<div class="separator"></div>
 
-				<div class="stats_table hide_small">
+				<div class="stats_table" class:hide={menu_collapsed}>
 					<div>Subscription</div>
 					<div>{$user.subscription.name}</div>
 
@@ -56,34 +69,30 @@ onMount(async () => {
 					<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
 				</div>
 
-				<div class="separator hide_small"></div>
+				<div class="separator" class:hide={menu_collapsed}></div>
 
 				<a class="button" href="/d/me" use:highlight_current_page>
 					<i class="icon">folder</i>
-					<span class="hide_small">Filesystem</span>
+					<span class:hide={menu_collapsed}>Filesystem</span>
 				</a>
 				<a class="button" href="/user" use:highlight_current_page>
 					<i class="icon">dashboard</i>
-					<span class="hide_small">Dashboard</span>
+					<span class:hide={menu_collapsed}>Dashboard</span>
 				</a>
 				{#if $user.is_admin}
 					<a class="button" href="/admin" use:highlight_current_page>
 						<i class="icon">admin_panel_settings</i>
-						<span class="hide_small">Admin Panel</span>
+						<span class:hide={menu_collapsed}>Admin Panel</span>
 					</a>
 				{/if}
-				<button class="button" onclick={()=> logout_user("/")}>
-					<i class="icon">logout</i>
-					<span class="hide_small">Log out</span>
-				</button>
 			{:else}
 				<a class="button" href="/login" use:highlight_current_page>
 					<i class="icon">login</i>
-					<span class="hide_small">Login</span>
+					<span class:hide={menu_collapsed}>Login</span>
 				</a>
 				<a class="button" href="/register" use:highlight_current_page>
 					<i class="icon">how_to_reg</i>
-					<span class="hide_small">Register</span>
+					<span class:hide={menu_collapsed}>Register</span>
 				</a>
 			{/if}
 
@@ -91,16 +100,16 @@ onMount(async () => {
 
 			<a class="button" href="/speedtest" use:highlight_current_page>
 				<i class="icon">speed</i>
-				<span class="hide_small">Speedtest</span>
+				<span class:hide={menu_collapsed}>Speedtest</span>
 			</a>
 			<a class="button" href="/appearance" use:highlight_current_page>
 				<i class="icon">palette</i>
-				<span class="hide_small">Themes</span>
+				<span class:hide={menu_collapsed}>Themes</span>
 			</a>
 
 			<div class="separator"></div>
 
-			<Bookmarks/>
+			<Bookmarks menu_collapsed={menu_collapsed}/>
 		</nav>
 	</div>
 </div>
@@ -174,10 +183,8 @@ onMount(async () => {
 	margin: 5px;
 }
 
-@media(max-width: 1000px) {
+.hide {
-	.hide_small {
 	display: none;
-	}
 }
 
 .spinner {