Move the filemanager toolbar into the header to save vertical space

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,

svelte/src/filesystem/ErrorPage.svelte

@@ -2,7 +2,7 @@
 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

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,14 +294,7 @@ const move_here = async () => {
 	onscroll={() => scroll_positions.set(nav.base.path, window.scrollY)}
 />
 
-<div
-	class="container"
-	use:drop_target={{
-		upload: (files) => upload_widget.upload_files(files),
-		shadow: "var(--accent_color) 0 0 10px 2px inset",
-	}}
->
-	<div class="width_container bubble">
+{#snippet toolbar()}
 	{#if mode === "viewing"}
 		<div class="toolbar">
 			<div class="toolbar_left">
@@ -383,8 +384,15 @@ const move_here = async () => {
 	{#if creating_dir}
 		<CreateDirectory nav={nav} />
 	{/if}
-	</div>
+{/snippet}
 
+<div
+	class="container"
+	use:drop_target={{
+		upload: (files) => upload_widget.upload_files(files),
+		shadow: "var(--accent_color) 0 0 10px 2px inset",
+	}}
+>
 	{#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;

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);

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 {

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([]) }: {

svelte/src/wrap/BreadcrumbStore.ts

@@ -1,4 +0,0 @@
-import type { Snippet } from "svelte";
-import { writable } from "svelte/store";
-
-export let breadcrumbs_store = writable(null as Snippet);

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);

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">
+			<div class="breadcrumbs">
 				<button class="menu_button" onclick={toggle_menu}>
 					<i class="icon">menu</i>
 				</button>
 
-			<div class="breadcrumbs">
 				{#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;

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