From e37702d1aadc66763378091fe5608a5ef7be31a7 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Thu, 1 Oct 2026 11:14:34 +0200
Subject: [PATCH] Move the filemanager toolbar into the header to save vertical
 space

---
 svelte/src/filesystem/Breadcrumbs.svelte      |   2 +-
 svelte/src/filesystem/ErrorPage.svelte        |   4 +-
 .../filesystem/filemanager/FileManager.svelte | 212 +++++++++---------
 .../filesystem/filemanager/ListView.svelte    |  14 +-
 .../filesystem/filemanager/TrashBin.svelte    |   2 +-
 svelte/src/util/TabMenu.svelte                |   2 +-
 svelte/src/wrap/BreadcrumbStore.ts            |   4 -
 svelte/src/wrap/HeaderStore.ts                |   7 +
 svelte/src/wrap/MainMenu.svelte               |  18 +-
 svelte/src/wrap/Router.svelte                 |   2 +-
 10 files changed, 136 insertions(+), 131 deletions(-)
 delete mode 100644 svelte/src/wrap/BreadcrumbStore.ts
 create mode 100644 svelte/src/wrap/HeaderStore.ts

diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index ad0be00..c79a233 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -4,7 +4,7 @@ import { path_link, type FSNavigator } from "./FSNavigator";
 import FileMenu from "./filemanager/FileMenu.svelte";
 import EditWindow from "./edit_window/EditWindow.svelte";
 import { onMount } from "svelte";
-import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+import { breadcrumbs_store } from "wrap/HeaderStore";
 
 let {
 	nav,
diff --git a/svelte/src/filesystem/ErrorPage.svelte b/svelte/src/filesystem/ErrorPage.svelte
index d47f342..07fe19c 100644
--- a/svelte/src/filesystem/ErrorPage.svelte
+++ b/svelte/src/filesystem/ErrorPage.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import TextBlock from "layout/TextBlock.svelte";
+import TextBlock from "layout/TextBlock.svelte";
 import { type FSNavigator } from "./FSNavigator";
 import { onMount } from "svelte";
-import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+import { breadcrumbs_store } from "wrap/HeaderStore";
 
 let {
 	nav
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index 7f77929..3e97559 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -21,6 +21,8 @@ import FileMenu from "./FileMenu.svelte";
 import { loading_finish, loading_start } from "lib/Loading";
 import SearchBar from "../SearchBar.svelte";
 import type { GenericResponse } from "lib/NovaAPI";
+import { onMount } from "svelte";
+import { toolbar_store } from "wrap/HeaderStore";
 
 let {
 	nav = $bindable(),
@@ -278,6 +280,12 @@ const move_here = async () => {
 	}
 }
 
+// The toolbar is shown in the bar at the top of the page, under the breadcrumbs.
+// Other pages don't have it
+onMount(() => {
+	toolbar_store.set(toolbar)
+	return () => toolbar_store.set(null)
+})
 </script>
 
 <svelte:window
@@ -286,6 +294,98 @@ const move_here = async () => {
 	onscroll={() => scroll_positions.set(nav.base.path, window.scrollY)}
 />
 
+{#snippet toolbar()}
+	{#if mode === "viewing"}
+		<div class="toolbar">
+			<div class="toolbar_left">
+				<button onclick={() => {search_bar.open()}} title="Press / to search">
+					<i class="icon">search</i>
+				</button>
+				<button onclick={navigate_back} title="Back">
+					<i class="icon">arrow_back</i>
+				</button>
+				<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
+					<i class="icon">north</i>
+				</button>
+				<button onclick={() => nav.reload()} title="Refresh directory listing">
+					<i class="icon">refresh</i>
+				</button>
+				{#if $nav.children.some(c => c.name === ".Trash" && c.type === "dir")}
+					<button
+						onclick={() => nav.navigate($nav.children.find(c => c.name === ".Trash").path, true)}
+						title="Open trash bin"
+					>
+						<i class="icon">delete</i>
+					</button>
+				{/if}
+			</div>
+
+			<div class="toolbar_middle">
+				<button onclick={() => toggle_view()} title="Switch between gallery, list and compact view">
+					<i class="icon" class:button_highlight={directory_view === "list"}>list</i>
+					<i class="icon" class:button_highlight={directory_view === "gallery"}>collections</i>
+					<i class="icon" class:button_highlight={directory_view === "compact"}>view_compact</i>
+				</button>
+
+				<button class="button_large_icons" onclick={() => toggle_large_icons()} title="Switch between large and small icons">
+					{#if large_icons}
+						<i class="icon">zoom_out</i>
+					{:else}
+						<i class="icon">zoom_in</i>
+					{/if}
+				</button>
+
+				<button onclick={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
+					{#if show_hidden}
+						<i class="icon">visibility_off</i>
+					{:else}
+						<i class="icon">visibility</i>
+					{/if}
+				</button>
+			</div>
+
+			<div class="toolbar_right">
+				{#if $nav.permissions.write}
+					<button onclick={() => upload_widget.pick_files()} title="Upload files to this directory">
+						<i class="icon">cloud_upload</i>
+					</button>
+
+					<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
+
+					<button onclick={selecting_mode} title="Select and delete files">
+						<i class="icon">select_all</i>
+					</button>
+				{/if}
+			</div>
+		</div>
+
+	{:else if mode === "selecting"}
+		<div class="toolbar toolbar_edit">
+			<Button click={viewing_mode} icon="close"/>
+			<div class="toolbar_spacer">Selecting files</div>
+			<Button click={move_start} icon="drive_file_move" label="Move"/>
+			<button onclick={delete_selected} class="button_red">
+				<i class="icon">delete</i>
+				Delete
+			</button>
+		</div>
+	{:else if mode === "moving"}
+		<div class="toolbar toolbar_edit">
+			<Button click={viewing_mode} icon="close"/>
+			<Button click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} icon="north"/>
+			<div class="toolbar_spacer">
+				Moving {moving_files} files and {moving_directories} directories
+			</div>
+			<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
+			<Button click={move_here} highlight icon="done" label="Move here"/>
+		</div>
+	{/if}
+
+	{#if creating_dir}
+		<CreateDirectory nav={nav} />
+	{/if}
+{/snippet}
+
 <div
 	class="container"
 	use:drop_target={{
@@ -293,98 +393,6 @@ const move_here = async () => {
 		shadow: "var(--accent_color) 0 0 10px 2px inset",
 	}}
 >
-	<div class="width_container bubble">
-		{#if mode === "viewing"}
-			<div class="toolbar">
-				<div class="toolbar_left">
-					<button onclick={() => {search_bar.open()}} title="Press / to search">
-						<i class="icon">search</i>
-					</button>
-					<button onclick={navigate_back} title="Back">
-						<i class="icon">arrow_back</i>
-					</button>
-					<button onclick={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
-						<i class="icon">north</i>
-					</button>
-					<button onclick={() => nav.reload()} title="Refresh directory listing">
-						<i class="icon">refresh</i>
-					</button>
-					{#if $nav.children.some(c => c.name === ".Trash" && c.type === "dir")}
-						<button
-							onclick={() => nav.navigate($nav.children.find(c => c.name === ".Trash").path, true)}
-							title="Open trash bin"
-						>
-							<i class="icon">delete</i>
-						</button>
-					{/if}
-				</div>
-
-				<div class="toolbar_middle">
-					<button onclick={() => toggle_view()} title="Switch between gallery, list and compact view">
-						<i class="icon" class:button_highlight={directory_view === "list"}>list</i>
-						<i class="icon" class:button_highlight={directory_view === "gallery"}>collections</i>
-						<i class="icon" class:button_highlight={directory_view === "compact"}>view_compact</i>
-					</button>
-
-					<button class="button_large_icons" onclick={() => toggle_large_icons()} title="Switch between large and small icons">
-						{#if large_icons}
-							<i class="icon">zoom_out</i>
-						{:else}
-							<i class="icon">zoom_in</i>
-						{/if}
-					</button>
-
-					<button onclick={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
-						{#if show_hidden}
-							<i class="icon">visibility_off</i>
-						{:else}
-							<i class="icon">visibility</i>
-						{/if}
-					</button>
-				</div>
-
-				<div class="toolbar_right">
-					{#if $nav.permissions.write}
-						<button onclick={() => upload_widget.pick_files()} title="Upload files to this directory">
-							<i class="icon">cloud_upload</i>
-						</button>
-
-						<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
-
-						<button onclick={selecting_mode} title="Select and delete files">
-							<i class="icon">select_all</i>
-						</button>
-					{/if}
-				</div>
-			</div>
-
-		{:else if mode === "selecting"}
-			<div class="toolbar toolbar_edit">
-				<Button click={viewing_mode} icon="close"/>
-				<div class="toolbar_spacer">Selecting files</div>
-				<Button click={move_start} icon="drive_file_move" label="Move"/>
-				<button onclick={delete_selected} class="button_red">
-					<i class="icon">delete</i>
-					Delete
-				</button>
-			</div>
-		{:else if mode === "moving"}
-			<div class="toolbar toolbar_edit">
-				<Button click={viewing_mode} icon="close"/>
-				<Button click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} icon="north"/>
-				<div class="toolbar_spacer">
-					Moving {moving_files} files and {moving_directories} directories
-				</div>
-				<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
-				<Button click={move_here} highlight icon="done" label="Move here"/>
-			</div>
-		{/if}
-
-		{#if creating_dir}
-			<CreateDirectory nav={nav} />
-		{/if}
-	</div>
-
 	{#if $nav.base.abuse_type !== undefined}
 		<div class="highlight_red">
 			This directory has received an abuse report. It cannot be
@@ -410,28 +418,20 @@ const move_here = async () => {
 <style>
 .container {
 	padding: 0;
-	display: block;
+	/* Keeps the margins of the views inside the container. As a normal block
+	   they would collapse through it and push it out of the file preview, which
+	   gives that a scrollbar */
+	display: flow-root;
 	min-height: 100%; /* Used for drop target */
 }
-.width_container {
-	position: sticky;
-	top: 0;
-	display: block;
-	margin-top: 0;
-	padding: 0;
-	background: var(--body_background);
-}
 .toolbar {
 	display: flex;
+	flex: 1 1 auto;
 	flex-direction: row;
 	flex-wrap: wrap;
-	width: 100%;
-	max-width: 1000px;
-	margin: auto;
-	padding-top: 2px;
-	padding-bottom: 2px;
 	justify-content: space-between;
 	align-items: center;
+	border-top: 1px solid var(--separator);
 }
 .toolbar > * {
 	flex: 0 0 content;
diff --git a/svelte/src/filesystem/filemanager/ListView.svelte b/svelte/src/filesystem/filemanager/ListView.svelte
index 7e6d813..f01b6b4 100644
--- a/svelte/src/filesystem/filemanager/ListView.svelte
+++ b/svelte/src/filesystem/filemanager/ListView.svelte
@@ -69,7 +69,7 @@ const load_settings = () => {
 onMount(load_settings)
 </script>
 
-<table class="directory">
+<table class="directory bubble">
 	<thead>
 		<tr class="header_row">
 			<td></td>
@@ -184,10 +184,13 @@ onMount(load_settings)
 
 <style>
 .directory {
-	background: var(--body_background);
-	border-collapse: collapse;
+	/* A table with collapsed borders can't have rounded corners */
+	border-collapse: separate;
+	border-spacing: 0;
+	/* Tables are 100% wide, this leaves room for the bubble's margin */
+	width: calc(100% - 8px);
 	backdrop-filter: blur(4px);
-	margin: auto; /* center */
+	overflow: hidden;
 }
 td {
 	padding-top: 0;
@@ -205,9 +208,6 @@ td {
 	color: var(--body_text_color);
 	cursor: pointer;
 }
-.node:not(:last-child) {
-	border-bottom: 1px solid var(--separator);
-}
 .node:hover:not(.node_selected) {
 	background: var(--input_hover_background);
 	color: var(--input_text);
diff --git a/svelte/src/filesystem/filemanager/TrashBin.svelte b/svelte/src/filesystem/filemanager/TrashBin.svelte
index 6f3688c..e5f0dad 100644
--- a/svelte/src/filesystem/filemanager/TrashBin.svelte
+++ b/svelte/src/filesystem/filemanager/TrashBin.svelte
@@ -3,7 +3,7 @@ import { formatDataVolume, formatDate } from "util/Formatting";
 import { fs_check_response, fs_encode_path, fs_get_trash, fs_node_icon, fs_path_url, type TrashEntry } from "lib/FilesystemAPI.svelte";
 import { loading_finish, loading_run, loading_start, loading_store } from "lib/Loading";
 import { onMount } from "svelte";
-import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+import { breadcrumbs_store } from "wrap/HeaderStore";
 import { FSNavigator } from "filesystem/FSNavigator";
 
 let {
diff --git a/svelte/src/util/TabMenu.svelte b/svelte/src/util/TabMenu.svelte
index 72eeea4..0786174 100644
--- a/svelte/src/util/TabMenu.svelte
+++ b/svelte/src/util/TabMenu.svelte
@@ -12,7 +12,7 @@ export type Tab = {
 </script>
 <script lang="ts">
 import { onMount, type Component } from "svelte";
-import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+import { breadcrumbs_store } from "wrap/HeaderStore";
 import { current_page_store } from "wrap/RouterStore";
 
 let { title = $bindable(""), pages = $bindable([]) }: {
diff --git a/svelte/src/wrap/BreadcrumbStore.ts b/svelte/src/wrap/BreadcrumbStore.ts
deleted file mode 100644
index 275c7e2..0000000
--- a/svelte/src/wrap/BreadcrumbStore.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type { Snippet } from "svelte";
-import { writable } from "svelte/store";
-
-export let breadcrumbs_store = writable(null as Snippet);
diff --git a/svelte/src/wrap/HeaderStore.ts b/svelte/src/wrap/HeaderStore.ts
new file mode 100644
index 0000000..8b970cf
--- /dev/null
+++ b/svelte/src/wrap/HeaderStore.ts
@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+import { writable } from "svelte/store";
+
+// The contents of the bar at the top of the page. The breadcrumbs show where
+// the user is, the toolbar holds actions for the page, like the file manager's
+export let breadcrumbs_store = writable(null as Snippet);
+export let toolbar_store = writable(null as Snippet);
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index 2bb09ae..0689ec8 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -17,7 +17,7 @@ import { get_user } from "lib/NovaAPI";
 import Tree from "./Tree.svelte";
 import MenuEntry from "./MenuEntry.svelte";
 import { writable } from "svelte/store";
-import { breadcrumbs_store } from "./BreadcrumbStore";
+import { breadcrumbs_store, toolbar_store } from "./HeaderStore";
 import ProgressBar from "util/ProgressBar.svelte";
 import NovaLogo, { update_favicon } from "util/NovaLogo.svelte";
 
@@ -279,15 +279,19 @@ const set_offset = (off: number) => {
 
 	<div class="page">
 		<div class="header bubble">
-			<button class="menu_button" onclick={toggle_menu}>
-				<i class="icon">menu</i>
-			</button>
-
 			<div class="breadcrumbs">
+				<button class="menu_button" onclick={toggle_menu}>
+					<i class="icon">menu</i>
+				</button>
+
 				{#if $breadcrumbs_store !== null}
 					{@render $breadcrumbs_store()}
 				{/if}
 			</div>
+
+			{#if $toolbar_store !== null}
+				{@render $toolbar_store()}
+			{/if}
 		</div>
 
 		<Router/>
@@ -365,9 +369,7 @@ const set_offset = (off: number) => {
 .header {
 	flex: 0 0 auto;
 	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: left;
+	flex-direction: column;
 	backdrop-filter: blur(3px);
 	position: sticky;
 	top: 4px;
diff --git a/svelte/src/wrap/Router.svelte b/svelte/src/wrap/Router.svelte
index 7a39db6..decaa6b 100644
--- a/svelte/src/wrap/Router.svelte
+++ b/svelte/src/wrap/Router.svelte
@@ -4,7 +4,7 @@ import NotFound from "./NotFound.svelte";
 import Footer from "layout/Footer.svelte";
 import { current_page_store, type Tab } from "./RouterStore";
 import { get_user, type User } from "lib/NovaAPI";
-import { breadcrumbs_store } from "./BreadcrumbStore";
+import { breadcrumbs_store } from "./HeaderStore";
 import { loading_run } from "lib/Loading";
 
 // Pages are downloaded when they are opened for the first time. Someone who