Add file tree to menu

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>