From 5ce6b0c417d4cdde4e9659926664b9739245a2df Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Thu, 29 Jan 2026 23:41:30 +0100
Subject: [PATCH] Add file tree to menu

---
 svelte/src/filesystem/FSNavigator.ts          |   2 +
 svelte/src/filesystem/Filesystem.svelte       |   4 +-
 svelte/src/filesystem/edit_window/Branding.ts |   6 +-
 .../filesystem/edit_window/EditWindow.svelte  |  12 +-
 .../filesystem/filemanager/ListView.svelte    |   1 -
 svelte/src/filesystem/viewers/Audio.svelte    |  94 ++++----
 svelte/src/lib/FilesystemAPI.svelte.ts        |   4 +
 svelte/src/lib/HighlightCurrentPage.ts        |   7 +-
 .../src/user_home/dashboard/UploadLib.svelte  | 212 ------------------
 svelte/src/wrap/Bookmarks.svelte              |  30 +--
 svelte/src/wrap/MainMenu.svelte               |  13 +-
 svelte/src/wrap/Router.svelte                 |   1 -
 svelte/src/wrap/Tree.svelte                   |  98 ++++++++
 13 files changed, 199 insertions(+), 285 deletions(-)
 delete mode 100644 svelte/src/user_home/dashboard/UploadLib.svelte
 create mode 100644 svelte/src/wrap/Tree.svelte

diff --git a/svelte/src/filesystem/FSNavigator.ts b/svelte/src/filesystem/FSNavigator.ts
index 689ed95..f3180ac 100644
--- a/svelte/src/filesystem/FSNavigator.ts
+++ b/svelte/src/filesystem/FSNavigator.ts
@@ -273,3 +273,5 @@ const sort_children = (children: FSNode[], field: string, asc: boolean) => {
 		}
 	})
 }
+
+export let global_navigator = new FSNavigator(true)
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 8bfc980..d8887c2 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -7,7 +7,7 @@ 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 { FSNavigator } from "./FSNavigator"
+import { global_navigator } from "./FSNavigator"
 import { css_from_path } from "filesystem/edit_window/Branding";
 import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
 import { current_page_store } from "wrap/RouterStore";
@@ -20,7 +20,7 @@ let edit_window: EditWindow = $state()
 let edit_visible = $state(false)
 let details_window: DetailsWindow = $state()
 
-const nav = $state(new FSNavigator(true))
+const nav = global_navigator
 
 onMount(() => {
 	if ((window as any).intial_node !== undefined) {
diff --git a/svelte/src/filesystem/edit_window/Branding.ts b/svelte/src/filesystem/edit_window/Branding.ts
index cc1ba37..6238666 100644
--- a/svelte/src/filesystem/edit_window/Branding.ts
+++ b/svelte/src/filesystem/edit_window/Branding.ts
@@ -113,9 +113,9 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 
 const add_contrast = (color: string, amt: number) => {
 	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
-	// If the lightness is less than 40 it is considered a dark colour. This
-	// threshold is 40 instead of 50 because overall dark text is more legible
-	if (hsl[2] < 40) {
+	// If the lightness is less than 30 it is considered a dark colour. This
+	// threshold is 30 instead of 50 because overall dark text is more legible
+	if (hsl[2] < 30) {
 		hsl[2] = hsl[2] + amt // Dark color, add lightness
 	} else {
 		hsl[2] = hsl[2] - amt // Light color, remove lightness
diff --git a/svelte/src/filesystem/edit_window/EditWindow.svelte b/svelte/src/filesystem/edit_window/EditWindow.svelte
index 1f6f762..e561aa3 100644
--- a/svelte/src/filesystem/edit_window/EditWindow.svelte
+++ b/svelte/src/filesystem/edit_window/EditWindow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_rename, fs_update, type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte";
+import { fs_rename, fs_update, type FSNode, type FSPermissions, type NodeOptions } from "lib/FilesystemAPI.svelte";
 import Modal from "util/Modal.svelte";
 import BrandingOptions from "./BrandingOptions.svelte";
 import { branding_from_props } from "./Branding";
@@ -22,6 +22,10 @@ let {
 	visible: boolean;
 } = $props();
 
+const default_permissions: FSPermissions = {
+	owner: false, read: false, write: false, delete: false
+}
+
 // Open the edit window. Argument 1 is the file to edit, 2 is whether the file
 // should be opened after the user finishes editing and 3 is the default tab
 // that should be open when the window shows
@@ -45,9 +49,9 @@ export const edit = (f: FSNode, oae = false, open_tab = "") => {
 	}
 
 	options.custom_domain_name = file.custom_domain_name
-	options.link_permissions = file.link_permissions
-	options.user_permissions = file.user_permissions
-	options.password_permissions = file.password_permissions
+	options.link_permissions = file.link_permissions === undefined ? default_permissions : file.link_permissions
+	options.user_permissions = file.user_permissions === undefined ? {} : file.user_permissions
+	options.password_permissions = file.password_permissions === undefined ? {} : file.password_permissions
 
 	branding_enabled = options.branding_enabled === "true"
 	if (branding_enabled) {
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index 52a3b7f..10fb83f 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -112,7 +112,6 @@ td {
 	color: var(--highlight_text_color);
 }
 td {
-	padding: 2px;
 	vertical-align: middle;
 }
 .node_icon {
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index 3475d8c..6b7739c 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -3,7 +3,6 @@ import { onMount } from 'svelte'
 import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte"
 import TextBlock from "layout/TextBlock.svelte"
 import type { FSNavigator } from 'filesystem/FSNavigator';
-import { branding_from_props } from 'filesystem/edit_window/Branding';
 
 let { nav, children }: {
 	nav: FSNavigator;
@@ -28,6 +27,7 @@ export const seek = (delta: number) => {
 	}
 }
 
+var background_div: HTMLDivElement
 export const update = async () => {
 	if (media_session) {
 		navigator.mediaSession.metadata = new MediaMetadata({
@@ -41,12 +41,8 @@ export const update = async () => {
 
 	for(const sib of siblings) {
 		if (sib.name === "cover.jpg") {
-			console.log("found sibling", sib)
-			if (sib.properties === undefined) {
-				sib.properties = {}
-			}
-			sib.properties.brand_background_image = sib.path
-			document.documentElement.style = branding_from_props(sib.properties)
+			console.debug("Found album cover image", sib)
+			background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
 			break
 		}
 	}
@@ -66,47 +62,55 @@ onMount(() => {
 
 {@render children?.()}
 
-<TextBlock width="1000px">
-	<audio
-		bind:this={player}
-		class="player"
-		src={fs_path_url($nav.base.path)}
-		autoplay
-		controls
-		onpause={() => playing = false}
-		onplay={() => playing = true}
-		onended={() => nav.open_sibling(1)}>
-		<track kind="captions"/>
-	</audio>
-	<div style="text-align: center;">
-		<button onclick={() => nav.open_sibling(-1)}><i class="icon">skip_previous</i></button>
-		<button onclick={() => seek(-10)}><i class="icon">replay_10</i></button>
-		<button onclick={toggle_playback}>
-			{#if playing}
-				<i class="icon">pause</i>
-			{:else}
-				<i class="icon">play_arrow</i>
-			{/if}
-		</button>
-		<button onclick={() => seek(10)}><i class="icon">forward_10</i></button>
-		<button onclick={() => nav.open_sibling(1)}><i class="icon">skip_next</i></button>
-	</div>
+<div bind:this={background_div} class="background_div">
+	<TextBlock width="1000px">
+		<audio
+			bind:this={player}
+			class="player"
+			src={fs_path_url($nav.base.path)}
+			autoplay
+			controls
+			onpause={() => playing = false}
+			onplay={() => playing = true}
+			onended={() => nav.open_sibling(1)}>
+			<track kind="captions"/>
+		</audio>
+		<div style="text-align: center;">
+			<button onclick={() => nav.open_sibling(-1)}><i class="icon">skip_previous</i></button>
+			<button onclick={() => seek(-10)}><i class="icon">replay_10</i></button>
+			<button onclick={toggle_playback}>
+				{#if playing}
+					<i class="icon">pause</i>
+				{:else}
+					<i class="icon">play_arrow</i>
+				{/if}
+			</button>
+			<button onclick={() => seek(10)}><i class="icon">forward_10</i></button>
+			<button onclick={() => nav.open_sibling(1)}><i class="icon">skip_next</i></button>
+		</div>
 
-	<h2>Tracklist</h2>
-	{#each siblings as sibling (sibling.path)}
-		<a href={"/d"+fs_encode_path(sibling.path)} class="node">
-			{#if sibling.path === $nav.base.path}
-				<i class="play_arrow icon">play_arrow</i>
-			{:else}
-				<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
-			{/if}
-				<span>{sibling.name}</span>
-			<br/>
-		</a>
-	{/each}
-</TextBlock>
+		<h2>Tracklist</h2>
+		{#each siblings as sibling (sibling.path)}
+			<a href={"/d"+fs_encode_path(sibling.path)} class="node">
+				{#if sibling.path === $nav.base.path}
+					<i class="play_arrow icon">play_arrow</i>
+				{:else}
+					<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
+				{/if}
+					<span>{sibling.name}</span>
+				<br/>
+			</a>
+		{/each}
+	</TextBlock>
+</div>
 
 <style>
+.background_div {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	min-height: 100%;
+}
 .player {
 	width: 100%;
 }
diff --git a/svelte/src/lib/FilesystemAPI.svelte.ts b/svelte/src/lib/FilesystemAPI.svelte.ts
index 28d6f2f..ba02ede 100644
--- a/svelte/src/lib/FilesystemAPI.svelte.ts
+++ b/svelte/src/lib/FilesystemAPI.svelte.ts
@@ -59,6 +59,10 @@ export class FSNode {
 			(this.password_permissions !== undefined && Object.keys(this.password_permissions).length > 0)
 	}
 
+	is_hidden = (): boolean => {
+		return this.name.startsWith(".")
+	}
+
 	download = () => {
 		const a = document.createElement("a")
 
diff --git a/svelte/src/lib/HighlightCurrentPage.ts b/svelte/src/lib/HighlightCurrentPage.ts
index fa692eb..a9b67b8 100644
--- a/svelte/src/lib/HighlightCurrentPage.ts
+++ b/svelte/src/lib/HighlightCurrentPage.ts
@@ -1,9 +1,10 @@
+import { global_navigator } from "filesystem/FSNavigator"
 import { current_page_store, type Tab } from "wrap/RouterStore"
 
 export const highlight_current_page = (node: HTMLAnchorElement) => {
 	const set_highlight = () => {
-		const currentpath = window.location.pathname
-		const hrefpath = URL.parse(node.href).pathname
+		const currentpath = window.location.pathname + "/"
+		const hrefpath = URL.parse(node.href).pathname + "/"
 		if (
 			currentpath === hrefpath ||
 			(hrefpath !== "" && hrefpath !== "/" && currentpath.startsWith(hrefpath))
@@ -19,9 +20,11 @@ export const highlight_current_page = (node: HTMLAnchorElement) => {
 
 	// Set up a listener with the page router to catch navigation events
 	const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() })
+	const unsub2 = global_navigator.subscribe(() => { set_highlight() })
 	return {
 		destroy() {
 			unsub()
+			unsub2()
 		}
 	}
 }
diff --git a/svelte/src/user_home/dashboard/UploadLib.svelte b/svelte/src/user_home/dashboard/UploadLib.svelte
deleted file mode 100644
index d423a6a..0000000
--- a/svelte/src/user_home/dashboard/UploadLib.svelte
+++ /dev/null
@@ -1,212 +0,0 @@
-<script>
-import { preventDefault } from 'svelte/legacy';
-import UploadProgressBar from "home_page/UploadProgressBar.svelte"
-import { tick } from "svelte"
-import UploadStats from "home_page/UploadStats.svelte";
-
-export const pick_files = () => {
-	file_input_field.click()
-}
-
-// === UPLOAD LOGIC ===
-
-let file_input_field = $state()
-const file_input_change = (event) => {
-	// Start uploading the files async
-	upload_files(event.target.files)
-
-	// This resets the file input field
-	file_input_field.nodeValue = ""
-}
-const paste = (e) => {
-	if (e.clipboardData.files[0]) {
-		e.preventDefault();
-		e.stopPropagation();
-		upload_files(e.clipboardData.files)
-	}
-}
-
-let active_uploads = 0
-let upload_queue = $state([])
-let status = $state("idle") // idle, uploading, finished
-let upload_stats = $state()
-
-export const upload_files = async (files) => {
-	if (files.length === 0) {
-		return
-	}
-
-	// Add files to the queue
-	for (let i = 0; i < files.length; i++) {
-		if (files[i].type === "" && files[i].size === 0) {
-			continue
-		}
-
-		upload_queue.push({
-			file: files[i],
-			name: files[i].name,
-			status: "queued",
-			component: null,
-			id: "",
-			total_size: files[i].size,
-			loaded_size: 0,
-			on_finished: finish_upload,
-		})
-	}
-
-	// Reassign array and wait for tick to complete. After the tick is completed
-	// each upload progress bar will have bound itself to its array item
-	upload_queue = upload_queue
-	await tick()
-
-	start_upload()
-}
-
-const start_upload = () => {
-	let finished_count = 0
-
-	for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
-		if (upload_queue[i].status == "queued") {
-			active_uploads++
-			upload_queue[i].component.start()
-		} else if (
-			upload_queue[i].status == "finished" ||
-			upload_queue[i].status == "error"
-		) {
-			finished_count++
-		}
-	}
-
-	if (active_uploads === 0 && finished_count != 0) {
-		status = "finished"
-		upload_stats.finish()
-	} else {
-		status = "uploading"
-		upload_stats.start()
-	}
-}
-
-const finish_upload = (file) => {
-	active_uploads--
-	start_upload()
-}
-
-const leave_confirmation = e => {
-	if (status === "uploading") {
-		e.preventDefault()
-		e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
-		return e.returnValue
-	} else {
-		return null
-	}
-}
-
-// === SHARING BUTTONS ===
-
-let share_link = ""
-let input_album_name = $state("")
-
-let btn_create_list
-
-const create_list = async (title, anonymous) => {
-	let files = upload_queue.reduce(
-		(acc, curr) => {
-			if (curr.status === "finished") {
-				acc.push({"id": curr.id})
-			}
-			return acc
-		},
-		[],
-	)
-
-	const resp = await fetch(
-		window.api_endpoint+"/list",
-		{
-			method: "POST",
-			headers: { "Content-Type": "application/json; charset=UTF-8" },
-			body: JSON.stringify({
-				"title": title,
-				"anonymous": anonymous,
-				"files": files
-			})
-		}
-	)
-	if(!resp.ok) {
-		return Promise.reject("HTTP error: "+resp.status)
-	}
-	return await resp.json()
-}
-
-const share_mail = () => window.open("mailto:please@set.address?subject=File%20on%20pixeldrain&body=" + share_link)
-const share_twitter = () => window.open("https://twitter.com/share?url=" + share_link)
-const share_facebook = () => window.open('https://www.facebook.com/sharer.php?u=' + share_link)
-const share_reddit = () => window.open('https://www.reddit.com/submit?url=' + share_link)
-const share_tumblr = () => window.open('https://www.tumblr.com/share/link?url=' + share_link)
-
-const create_album = () => {
-	if (!input_album_name) {
-		return
-	}
-	create_list(input_album_name, false).then(resp => {
-		window.location = '/l/' + resp.id
-	}).catch(err => {
-		alert("Failed to create list. Server says this:\n"+err)
-	})
-}
-
-const keydown = (e) => {
-	if (e.ctrlKey || e.altKey || e.metaKey) {
-		return // prevent custom shortcuts from interfering with system shortcuts
-	}
-	if (document.activeElement.type && document.activeElement.type === "text") {
-		return // Prevent shortcuts from interfering with input fields
-	}
-	switch (e.key) {
-	case "u": file_input_field.click();   break
-	case "l": btn_create_list.click();    break
-	case "e": share_mail();     break
-	case "w": share_twitter();  break
-	case "f": share_facebook(); break
-	case "r": share_reddit();   break
-	case "m": share_tumblr();   break
-	}
-}
-</script>
-
-<svelte:window onpaste={paste} onkeydown={keydown} onbeforeunload={leave_confirmation} />
-
-<input bind:this={file_input_field} onchange={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
-
-<UploadStats bind:this={upload_stats} upload_queue={upload_queue}/>
-
-{#if upload_queue.length > 1}
-	<div class="album_widget">
-		Create an album<br/>
-		<form class="album_name_form" onsubmit={preventDefault(create_album)}>
-			<div>Name:</div>
-			<input bind:value={input_album_name} type="text" placeholder="My album"/>
-			<button type="submit" disabled={status !== "finished"}>
-				<i class="icon">create_new_folder</i> Create
-			</button>
-		</form>
-	</div>
-{/if}
-
-{#each upload_queue as file}
-	<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
-{/each}
-
-<style>
-.album_widget {
-	display: block;
-	border-bottom: 1px solid var(--separator);
-}
-.album_name_form {
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-}
-.hide {
-	display: none;
-}
-</style>
diff --git a/svelte/src/wrap/Bookmarks.svelte b/svelte/src/wrap/Bookmarks.svelte
index 2c2532a..3895aaa 100644
--- a/svelte/src/wrap/Bookmarks.svelte
+++ b/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 {
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index 3981c82..ad263a4 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/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;
diff --git a/svelte/src/wrap/Router.svelte b/svelte/src/wrap/Router.svelte
index 7a2a995..6775791 100644
--- a/svelte/src/wrap/Router.svelte
+++ b/svelte/src/wrap/Router.svelte
@@ -37,7 +37,6 @@ let pages: Tab[] = [
 		title: "Filesystem",
 		component: Filesystem,
 		footer: false,
-		login: true,
 	}, {
 		path: "/admin",
 		prefix: "/admin/",
diff --git a/svelte/src/wrap/Tree.svelte b/svelte/src/wrap/Tree.svelte
new file mode 100644
index 0000000..0b11a4b
--- /dev/null
+++ b/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>