Swipable menu, draggable bookmarks

res/static/style/layout.css

@@ -119,25 +119,6 @@ pre>code {
 
 /* Page layout elements */
 
-.button_toggle_navigation {
-	position: fixed;
-	backface-visibility: hidden;
-	z-index: 10;
-	top: 0;
-	left: 0;
-	padding: 8px 16px 16px 8px;
-	font-size: 2em;
-	margin: 0;
-	background: #3f3f3f;
-	background: var(--input_background);
-	border-radius: 0;
-	border-bottom-right-radius: 90%;
-}
-
-.button_toggle_navigation:active {
-	padding: 12px 14px 14px 12px;
-}
-
 .page_navigation {
 	position: fixed;
 	backface-visibility: hidden;

svelte/src/admin_panel/Home.svelte

@@ -174,8 +174,8 @@ onMount(() => {
 	<button onclick={() => loadGraph(2628000, 1440, false)}>Five Years 1d</button>
 </div>
 
-<Chart bind:this={graphEgress} data_type="bytes" />
+<Chart bind:this={graphEgress} data_type="bytes" ticks={false}/>
-<Chart bind:this={graphDownloads} data_type="number" />
+<Chart bind:this={graphDownloads} data_type="number" ticks={false}/>
 
 <div>
 	Total usage from {start_time} to {end_time}<br/>

svelte/src/filesystem/Breadcrumbs.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
-import type { FSNavigator } from "./FSNavigator";
+import { path_link, type FSNavigator } from "./FSNavigator";
+import { menu_is_open } from "wrap/MainMenu.svelte";
 
 let { nav }: {
 	nav: FSNavigator;
 } = $props();
 </script>
 
-<div class="breadcrumbs">
+<div class="breadcrumbs" class:menu_closed={!$menu_is_open}>
 	{#each $nav.path as node, i (node.path)}
-		<a href={"/d"+fs_encode_path(node.path)} class="breadcrumb button flat">
+		<a href={"/d"+fs_encode_path(node.path)} class="breadcrumb button flat" use:path_link={{nav: nav, node: node}}>
 			{#if node.abuse_type !== undefined}
 				<i class="icon small">block</i>
 			{:else if node.is_shared()}
@@ -57,4 +58,7 @@ let { nav }: {
 	/* The base name uses all available space */
 	max-width: unset;
 }
+.menu_closed {
+	padding-left: 2em;
+}
 </style>

svelte/src/filesystem/FSNavigator.ts

@@ -56,7 +56,7 @@ export class FSNavigator {
 	last_requested_path: string = ""
 	navigate = async (path: string, push_history: boolean) => {
 		if (path === this.last_requested_path) {
-			console.debug("FSNavigator: Requested path is equal to current path. Debouncing")
+			console.debug("FSNavigator: Requested path ", path, " is equal to current path. Debouncing")
 			return
 		}
 		this.last_requested_path = path
@@ -96,6 +96,7 @@ export class FSNavigator {
 	}
 
 	reload = async () => {
+		this.last_requested_path = ""
 		await this.navigate(this.base.path, false)
 	}
 
@@ -282,3 +283,23 @@ const sort_children = (children: FSNode[], field: string, asc: boolean) => {
 }
 
 export let global_navigator = new FSNavigator(true)
+
+
+
+export const path_link = (node: HTMLAnchorElement, data: { nav: FSNavigator, node: FSNode }) => {
+	// Set url
+	node.href = "/d" + fs_encode_path(data.node.path)
+
+	// Override click handler
+	const click = (e: MouseEvent) => {
+		e.preventDefault()
+		data.nav.navigate(data.node.path, true)
+	}
+
+	node.addEventListener("click", click)
+	return {
+		destroy() {
+			node.removeEventListener("click", click)
+		}
+	}
+}

svelte/src/filesystem/Filesystem.svelte

@@ -6,7 +6,6 @@ import Breadcrumbs from "./Breadcrumbs.svelte";
 import DetailsWindow from "./DetailsWindow.svelte";
 import FilePreview from "./viewers/FilePreview.svelte";
 import FSUploadWidget from "./upload_widget/FSUploadWidget.svelte";
-import { type FSPath } from "lib/FilesystemAPI.svelte";
 import { global_navigator } from "./FSNavigator"
 import { css_from_path } from "filesystem/edit_window/Branding";
 import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
@@ -23,15 +22,7 @@ let details_window: DetailsWindow = $state()
 const nav = global_navigator
 
 onMount(() => {
-	if ((window as any).intial_node !== undefined) {
+	// There is a global navigation handler which captures link clicks and loads
-		console.debug("Loading initial node")
-		nav.open_node((window as any).initial_node as FSPath, false)
-	} else {
-		console.debug("No initial node, fetching path", window.location.pathname)
-		nav.navigate(decodeURIComponent(window.location.pathname).replace(/^\/d/, ""), false)
-	}
-
-	// There is a global natigation handler which captures link clicks and loads
 	// the right svelte components. When a filesystem link is clicked this store
 	// is updated. Catch it and use the filesystem navigator to navigate to the
 	// right file

svelte/src/filesystem/filemanager/CreateDirectory.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { preventDefault } from 'svelte/legacy';
 import { onMount } from "svelte";
 import { fs_mkdir } from "lib/FilesystemAPI.svelte";
 import Button from "layout/Button.svelte";
@@ -11,7 +10,9 @@ let { nav }: { nav: FSNavigator } = $props();
 let name_input: HTMLInputElement = $state();
 let new_dir_name = $state("")
 let error_msg = $state("")
-let create_dir = async () => {
+let create_dir = async (e: SubmitEvent) => {
+	e.preventDefault()
+
 	let form = new FormData()
 	form.append("type", "dir")
 
@@ -43,7 +44,7 @@ onMount(() => {
 	</div>
 {/if}
 
-<form id="create_dir_form" class="create_dir" onsubmit={preventDefault(create_dir)}>
+<form id="create_dir_form" class="create_dir" onsubmit={create_dir}>
 	<img src="/res/img/mime/folder.png" class="icon" alt="icon"/>
 	<input class="dirname" type="text" bind:this={name_input} bind:value={new_dir_name} />
 	<Button form="create_dir_form" type="submit" icon="create_new_folder" label="Create"/>

svelte/src/util/TabMenu.svelte

@@ -106,6 +106,9 @@ onMount(() => {
 {/if}
 
 <style>
+header {
+	margin-top: 2em;
+}
 .submenu {
 	border-bottom: 1px solid var(--separator);
 }

svelte/src/wrap/Bookmarks.svelte

@@ -1,38 +1,124 @@
 <script lang="ts">
-import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
+import { bookmarks_save, bookmarks_store } from "lib/Bookmarks";
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 import MenuEntry from "./MenuEntry.svelte";
+import { flip } from "svelte/animate";
 
 let { menu_collapsed }: { menu_collapsed: boolean } = $props();
 
 let editing = $state(false)
 
-const toggle_edit = () => {
+const toggle_edit = async () => {
+	if (editing) {
+		try {
+			await bookmarks_save($bookmarks_store)
+		} catch (err) {
+			alert("Failed to save bookmarks:\n"+err)
+		}
+	}
+
 	editing = !editing
 }
+
+const delete_bookmark = (id: string) => {
+	console.debug("Deleting bookmark", id)
+	$bookmarks_store = $bookmarks_store.filter((bm) => bm.id !== id)
+}
+
+let hovering: number = $state(-1);
+const enable_drag = (e: MouseEvent) => {
+	(e.target as HTMLElement).closest("div").setAttribute("draggable", "true");
+}
+const disable_drag = (e: MouseEvent) => {
+	(e.target as HTMLElement).closest("div").setAttribute("draggable", "false");
+}
+const drag = (e: DragEvent, index: number) => {
+	if (!editing) {
+		e.preventDefault()
+		return
+	}
+
+	e.dataTransfer.effectAllowed = 'move';
+	e.dataTransfer.dropEffect = 'move';
+	e.dataTransfer.setData('text/plain', index.toString());
+}
+const drop = (e: DragEvent, drop_idx: number) => {
+	hovering = -1
+
+	if (e.dataTransfer.files.length !== 0) {
+		// This is not a rearrangement, this is a file upload
+		return
+	}
+
+	e.dataTransfer.dropEffect = 'move';
+	let drag_idx = parseInt(e.dataTransfer.getData("text/plain"));
+	if ($bookmarks_store[drag_idx] === undefined) {
+		return
+	}
+
+	e.preventDefault()
+
+	// If the drag is up, we will place the item before the drop target. If the
+	// drag is down, we place it after the drop target
+	if (drag_idx < drop_idx) {
+		$bookmarks_store.splice(drop_idx + 1, 0, $bookmarks_store[drag_idx]);
+		$bookmarks_store.splice(drag_idx, 1);
+	} else if (drag_idx > drop_idx) {
+		$bookmarks_store.splice(drop_idx, 0, $bookmarks_store[drag_idx]);
+		$bookmarks_store.splice(drag_idx + 1, 1);
+	} else {
+		return; // Nothing changed
+	}
+
+	$bookmarks_store = $bookmarks_store
+}
 </script>
 
 {#if $bookmarks_store.length !== 0}
 	<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
 		{#snippet title()}
 			<div class="title">Bookmarks</div>
-			<button onclick={() => toggle_edit()} class:button_highlight={editing}>
+			<button onclick={toggle_edit} class:button_highlight={editing}>
-				<i class="icon">edit</i>
+				{#if editing}
+					<i class="icon">save</i>
+				{:else}
+					<i class="icon">edit</i>
+				{/if}
 			</button>
 		{/snippet}
 
 		{#snippet body()}
-			{#each $bookmarks_store as bookmark}
+			{#each $bookmarks_store as bookmark, index (bookmark.id)}
-				<div class="row">
+				<div class="row"
-					<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
+					role="button"
-						<i class="icon">{bookmark.icon}</i>
+					tabindex="0"
-						<span class:hide={menu_collapsed}>{bookmark.label}</span>
+					ondragstart={e => drag(e, index)}
-					</a>
+					ondrop={e => drop(e, index)}
+					ondragover={e => {e.preventDefault(); e.stopPropagation()}}
+					ondragenter={() => hovering = index}
+					ondragend={() => {hovering = -1}}
+					class:highlight={hovering === index}
+					animate:flip={{duration: 300}}
+				>
 					{#if editing}
-						<button onclick={() => bookmark_del(bookmark.id)}>
+						<button
+							class="button flat"
+							style="cursor: grab;"
+							onmousedown={enable_drag}
+							onmouseup={disable_drag}
+						>
+							<i class="icon">drag_indicator</i>
+						</button>
+						<input type="text" bind:value={bookmark.label}/>
+						<button onclick={() => delete_bookmark(bookmark.id)}>
 							<i class="icon">delete</i>
 						</button>
+					{:else}
+						<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
+							<i class="icon">{bookmark.icon}</i>
+							<span class:hide={menu_collapsed}>{bookmark.label}</span>
+						</a>
 					{/if}
 				</div>
 			{/each}
@@ -48,6 +134,7 @@ const toggle_edit = () => {
 .row {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 }
 .row>a {
 	flex: 1 1 auto;
@@ -62,4 +149,8 @@ const toggle_edit = () => {
 .hide {
 	display: none;
 }
+.highlight {
+	box-shadow: 0 0 0px 1px var(--highlight_color);
+	text-decoration: none;
+}
 </style>

svelte/src/wrap/MainMenu.svelte

@@ -1,3 +1,6 @@
+<script lang="ts" module>
+export let menu_is_open = writable(true)
+</script>
 <script lang="ts">
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 import { user } from "lib/UserStore";
@@ -13,15 +16,12 @@ import Spinner from "util/Spinner.svelte";
 import { get_user } from "lib/PixeldrainAPI";
 import Tree from "./Tree.svelte";
 import MenuEntry from "./MenuEntry.svelte";
-
+import { writable } from "svelte/store";
-let menu_collapsed: boolean = $state(false)
-
-const toggle_menu = (e: MouseEvent) => {
-	menu_collapsed = !menu_collapsed
-}
 
 onMount(() => {
-	menu_collapsed = document.documentElement.clientWidth < 1000
+	if (document.documentElement.clientWidth < 1000) {
+		menu_close()
+	}
 
 	loading_run(async () => {
 		const user = await get_user()
@@ -32,31 +32,117 @@ onMount(() => {
 		document.documentElement.style = css_from_path(root.path)
 	})
 })
+
+// Dead zone before the swipe action gets detected
+const swipe_initial_offset = 50
+const min_screen_size_fullscreen_menu = 500
+
+let menu: HTMLDivElement
+let nav: HTMLElement
+let dragging: boolean = false
+let start_x: number
+let render_offset: number
+let initial_offset: number
+const touchstart = (e: TouchEvent) => {
+	start_x = e.touches[0].clientX
+	const rect = menu.getBoundingClientRect()
+	if (start_x < Math.max(swipe_initial_offset, (rect.width+rect.left))) {
+		dragging = true
+	}
+
+	render_offset = rect.left
+	initial_offset = rect.left
+}
+
+const touchmove = (e: TouchEvent) => {
+	if (!dragging) {
+		return
+	}
+	set_offset(initial_offset+(e.touches[0].clientX - start_x))
+}
+
+const touchend = (e: TouchEvent) => {
+	if (!dragging) {
+		return
+	}
+	dragging = false
+
+	const menu_width = menu.getBoundingClientRect().width
+	if (render_offset > -(menu_width/2)) {
+		menu_open()
+	} else {
+		menu_close()
+	}
+}
+
+const toggle_menu = (e: MouseEvent) => {
+	if (menu.style.transform === "") {
+		menu_close()
+	} else {
+		menu_open()
+	}
+}
+const menu_open = () => {
+	set_offset(0)
+	menu_is_open.set(true)
+	if (document.documentElement.clientWidth < min_screen_size_fullscreen_menu) {
+		menu.style.position = "fixed"
+		menu.style.width = "100%"
+		nav.style.width = "100%"
+		nav.style.maxWidth = "100%"
+	} else {
+		menu.style.position = "relative"
+		menu.style.width = ""
+		nav.style.width = ""
+		nav.style.maxWidth = ""
+	}
+}
+const menu_close = () => {
+	set_offset(-menu.getBoundingClientRect().width)
+	menu_is_open.set(false)
+	menu.style.position = "fixed"
+
+	if (document.documentElement.clientWidth >= min_screen_size_fullscreen_menu) {
+		menu.style.width = ""
+		nav.style.width = ""
+		nav.style.maxWidth = ""
+	}
+}
+
+const set_offset = (off: number) => {
+	render_offset = off
+
+	if (off > -swipe_initial_offset) {
+		// Clear the transformation if the offset is zero
+		menu.style.transform = ""
+	} else {
+		menu.style.transform = "translateX(" + off + "px)"
+	}
+}
 </script>
 
-<div class="nav_container">
+<svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
-	<div class="scroll_container">
-		<nav class="nav" class:collapse={menu_collapsed}>
-			<button class="button" onclick={toggle_menu}>
-				<i class="icon">menu</i>
-				<span class:hide={menu_collapsed}>Collapse menu</span>
-			</button>
 
+<button class="button_toggle_navigation" onclick={toggle_menu}>
+	<i class="icon">menu</i>
+</button>
+
+<div class="nav_container" bind:this={menu}>
+	<div class="scroll_container">
+		<nav class="nav" bind:this={nav}>
 			<a class="button" href="/" use:highlight_current_page>
 				<i class="icon">home</i>
-				<span class:hide={menu_collapsed}>Home</span>
+				<span>Home</span>
 			</a>
 
 			{#if $user.username !== undefined && $user.username !== ""}
-				<div class="separator" class:hide={menu_collapsed}></div>
+				<MenuEntry id="subscription_info" collapsed={false}>
-
-				<MenuEntry id="subscription_info" collapsed={menu_collapsed}>
 					{#snippet title()}
 						<div class="username">{$user.username}</div>
 					{/snippet}
 
 					{#snippet body()}
-						<div class="stats_table" class:hide={menu_collapsed}>
+						<div class="stats_table">
 							<div>Subscription</div>
 							<div>{$user.subscription.name}</div>
 
@@ -75,26 +161,26 @@ onMount(() => {
 
 				<a class="button" href="/d/me" use:highlight_current_page>
 					<i class="icon">folder</i>
-					<span class:hide={menu_collapsed}>Filesystem</span>
+					<span>Filesystem</span>
 				</a>
 				<a class="button" href="/user" use:highlight_current_page>
-					<i class="icon">dashboard</i>
+					<i class="icon">person</i>
-					<span class:hide={menu_collapsed}>Dashboard</span>
+					<span>Account</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={menu_collapsed}>Admin Panel</span>
+						<span>Admin Panel</span>
 					</a>
 				{/if}
 			{:else}
 				<a class="button" href="/login" use:highlight_current_page>
 					<i class="icon">login</i>
-					<span class:hide={menu_collapsed}>Login</span>
+					<span>Login</span>
 				</a>
 				<a class="button" href="/register" use:highlight_current_page>
 					<i class="icon">how_to_reg</i>
-					<span class:hide={menu_collapsed}>Register</span>
+					<span>Register</span>
 				</a>
 			{/if}
 
@@ -102,17 +188,15 @@ onMount(() => {
 
 			<a class="button" href="/speedtest" use:highlight_current_page>
 				<i class="icon">speed</i>
-				<span class:hide={menu_collapsed}>Speedtest</span>
+				<span>Speedtest</span>
 			</a>
 			<a class="button" href="/appearance" use:highlight_current_page>
 				<i class="icon">palette</i>
-				<span class:hide={menu_collapsed}>Themes</span>
+				<span>Themes</span>
 			</a>
 
-			<div class="separator"></div>
+			<Bookmarks menu_collapsed={false}/>
-
+			<Tree menu_collapsed={false}/>
-			<Bookmarks menu_collapsed={menu_collapsed}/>
-			<Tree menu_collapsed={menu_collapsed}/>
 		</nav>
 	</div>
 </div>
@@ -141,18 +225,35 @@ onMount(() => {
 	background-repeat: var(--background_image_repeat, repeat);
 	background-attachment: fixed;
 }
+.button_toggle_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	z-index: 10;
+	top: 0;
+	left: 0;
+	background: none;
+	box-shadow: none;
+	margin: 0;
+	padding: 4px;
+	border-radius: 0;
+	border-bottom-right-radius: 0px;
+	border-bottom-right-radius: 2px;
+	backdrop-filter: blur(6px);
+}
 .nav_container {
 	flex: 0 0 auto;
 	border-right: 1px solid var(--separator);
 	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	backdrop-filter: blur(6px);
+	z-index: 9;
 }
 .scroll_container {
 	position: sticky;
 	top: 0;
-	max-height: 100vh;
 	overflow-x: hidden;
 	overflow-y: auto;
+	max-height: 100vh;
+	height: 100vh;
 }
 .nav {
 	display: flex;
@@ -160,10 +261,7 @@ onMount(() => {
 	width: 15em;
 	min-width: 10em;
 	max-width: 15em;
-}
+	padding-top: 2em;
-.nav.collapse {
-	width: unset;
-	min-width: unset;
 }
 .nav > .button {
 	background: none;
@@ -192,10 +290,6 @@ onMount(() => {
 	margin: 5px;
 }
 
-.hide {
-	display: none;
-}
-
 .spinner {
 	position: fixed;
 	top: 10px;

svelte/src/wrap/MenuEntry.svelte

@@ -53,8 +53,6 @@ const toggle = (e: MouseEvent) => {
 
 {#if expanded}
 	{@render body()}
-
-	<div class="separator"></div>
 {/if}
 
 
@@ -63,11 +61,6 @@ const toggle = (e: MouseEvent) => {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	border-bottom: 1px solid var(--separator);
+	border-top: 1px solid var(--separator);
-}
-.separator {
-	height: 1px;
-	width: 100%;
-	background-color: var(--separator);
 }
 </style>