Add file tree to menu

svelte/src/wrap/Bookmarks.svelte

@@ -19,21 +19,23 @@ const toggle_edit = () => {
 			<i class="icon">edit</i>
 		</button>
 	</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={menu_collapsed}>{bookmark.label}</span>
-		</a>
-		{#if editing}
-			<button onclick={() => bookmark_del(bookmark.id)}>
-				<i class="icon">delete</i>
-			</button>
-		{/if}
-	</div>
-{/each}
+	{#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={menu_collapsed}>{bookmark.label}</span>
+			</a>
+			{#if editing}
+				<button onclick={() => bookmark_del(bookmark.id)}>
+					<i class="icon">delete</i>
+				</button>
+			{/if}
+		</div>
+	{/each}
+
+	<div class="title"></div>
+{/if}
 
 <style>
 .title {

svelte/src/wrap/MainMenu.svelte

@@ -11,6 +11,7 @@ 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 } from "lib/PixeldrainAPI";
+import Tree from "./Tree.svelte";
 
 let menu_collapsed = false
 
@@ -34,7 +35,7 @@ onMount(async () => {
 
 <div class="nav_container">
 	<div class="scroll_container">
-		<nav class="nav">
+		<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>
@@ -110,6 +111,10 @@ onMount(async () => {
 			<div class="separator"></div>
 
 			<Bookmarks menu_collapsed={menu_collapsed}/>
+
+			{#if !menu_collapsed}
+				<Tree/>
+			{/if}
 		</nav>
 	</div>
 </div>
@@ -154,8 +159,14 @@ onMount(async () => {
 .nav {
 	display: flex;
 	flex-direction: column;
+	width: 15em;
+	min-width: 10em;
 	max-width: 15em;
 }
+.nav.collapse {
+	width: unset;
+	min-width: unset;
+}
 .nav > .button {
 	background: none;
 	box-shadow: none;

svelte/src/wrap/Router.svelte

@@ -37,7 +37,6 @@ let pages: Tab[] = [
 		title: "Filesystem",
 		component: Filesystem,
 		footer: false,
-		login: true,
 	}, {
 		path: "/admin",
 		prefix: "/admin/",

svelte/src/wrap/Tree.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { global_navigator } from "filesystem/FSNavigator";
+import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte";
+import { onMount } from "svelte";
+
+let siblings: FSNode[] = $state([])
+
+onMount(() => {
+	return global_navigator.subscribe(async () => {
+		siblings = await global_navigator.get_siblings()
+	})
+})
+</script>
+
+{#if $global_navigator.path.length > 1}
+	<div class="title">
+		<div>Parent directories</div>
+		<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
+			<i class="icon">north</i>
+		</button>
+	</div>
+
+	{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node}
+		{#if node.type === "dir"}
+			<div class="row">
+				<a class="button" href="/d{fs_encode_path(node.path)}">
+					{#if node.is_shared()}
+						<i class="icon">folder_shared</i>
+					{:else}
+						<i class="icon">folder</i>
+					{/if}
+					<span>{node.name}</span>
+				</a>
+			</div>
+		{/if}
+	{/each}
+
+	<div class="title"></div>
+{/if}
+
+{#if siblings.length !== 0}
+	<div class="title">
+		<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
+			<i class="icon">west</i>
+		</button>
+		<div>Siblings</div>
+		<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
+			<i class="icon">east</i>
+		</button>
+	</div>
+
+	{#each siblings as node}
+		{#if !node.is_hidden()}
+			<div class="row">
+				<a class="button" href="/d{fs_encode_path(node.path)}">
+					{#if node.type === "dir"}
+						<i class="icon">folder</i>
+					{:else}
+						<i class="icon">image</i>
+					{/if}
+					<span>{node.name}</span>
+				</a>
+			</div>
+		{/if}
+	{/each}
+
+	<div class="title"></div>
+{/if}
+
+<style>
+.title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 1px solid var(--separator);
+}
+.title > div {
+	flex: 1 1 auto;
+	text-align: center;
+	margin: 3px;
+}
+.row {
+	display: flex;
+	flex-direction: row;
+}
+.row>a {
+	flex: 1 1 auto;
+}
+.row>a>span {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.button {
+	background: none;
+	box-shadow: none;
+}
+</style>