fnx_web/svelte/src/wrap/Tree.svelte

<script lang="ts">
import { global_navigator } from "filesystem/FSNavigator";
import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
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 small">north</i>
		</button>
	</div>

	{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
		{#if node.type === "dir"}
			<div class="row">
				<a class="button" href="/d{fs_encode_path(node.path)}">
					{#if node.is_shared()}
						<i class="icon small">folder_shared</i>
					{:else}
						<i class="icon small">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 small">west</i>
		</button>
		<div>Siblings</div>
		<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
			<i class="icon small">east</i>
		</button>
	</div>

	{#each siblings as node (node.id)}
		{#if !node.is_hidden()}
			<div class="row">
				<a class="button" href="/d{fs_encode_path(node.path)}" use:highlight_current_page>
					{#if node.is_shared()}
						<i class="icon small">folder_shared</i>
					{:else if node.type === "dir"}
						<i class="icon small">folder</i>
					{:else}
						<i class="icon small">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>