From f578f2c2c00219961a1874982f5706750c178b33 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Wed, 1 Apr 2026 19:38:15 +0200
Subject: [PATCH] Move search bar into modal

---
 svelte/src/filesystem/Breadcrumbs.svelte      |  30 +--
 svelte/src/filesystem/Filesystem.svelte       |  11 +-
 .../{filemanager => }/SearchBar.svelte        | 162 +++++++------
 svelte/src/filesystem/Toolbar.svelte          |   3 +-
 svelte/src/filesystem/edit_window/Branding.ts |   2 +-
 .../filesystem/filemanager/FileManager.svelte |   9 +-
 .../filesystem/filemanager/FilePicker.svelte  |  26 +-
 .../src/filesystem/viewers/FilePreview.svelte |   5 +-
 svelte/src/util/TabMenu.svelte                |  14 +-
 svelte/src/wrap/BreadcrumbStore.ts            |   4 +
 svelte/src/wrap/MainMenu.svelte               | 224 ++++++++++--------
 svelte/src/wrap/Router.svelte                 |  10 +
 svelte/src/wrap/RouterStore.ts                |   1 +
 13 files changed, 299 insertions(+), 202 deletions(-)
 rename svelte/src/filesystem/{filemanager => }/SearchBar.svelte (60%)
 create mode 100644 svelte/src/wrap/BreadcrumbStore.ts

diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index 01cc1cc..400923d 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { path_link, type FSNavigator } from "./FSNavigator";
-import { menu_is_open } from "wrap/MainMenu.svelte";
 import FileMenu from "./filemanager/FileMenu.svelte";
 import EditWindow from "./edit_window/EditWindow.svelte";
+import { onMount } from "svelte";
+import { breadcrumbs_store } from "wrap/BreadcrumbStore";
 
 let {
 	nav,
@@ -14,9 +15,15 @@ let {
 } = $props();
 
 let file_menu: FileMenu = $state()
+
+onMount(() => {
+	return nav.subscribe(nav => {
+		breadcrumbs_store.set(breadcrumbs)
+	})
+})
 </script>
 
-<div class="breadcrumbs" class:menu_closed={!$menu_is_open}>
+{#snippet breadcrumbs()}
 	{#each $nav.path as node, i (node.path)}
 		<a
 			href={"/d"+fs_encode_path(node.path)}
@@ -37,23 +44,11 @@ let file_menu: FileMenu = $state()
 			<i class="icon">chevron_right</i>
 		{/if}
 	{/each}
-</div>
 
-<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
+	<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
+{/snippet}
 
 <style>
-.breadcrumbs {
-	flex: 0 0 auto;
-	display: flex;
-	align-items: center;
-	justify-content: left;
-	flex-wrap: wrap;
-	flex-direction: row;
-	overflow: hidden;
-	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
-	border-bottom: 1px solid var(--separator);
-}
 .breadcrumb {
 	min-width: 1em;
 	text-align: center;
@@ -73,7 +68,4 @@ let file_menu: FileMenu = $state()
 	/* The base name uses all available space */
 	max-width: unset;
 }
-.menu_closed {
-	padding-left: 2em;
-}
 </style>
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 1d707c6..7931e0d 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -10,6 +10,7 @@ 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";
+import SearchBar from "./SearchBar.svelte";
 
 let file_preview: FilePreview = $state()
 let toolbar: Toolbar = $state()
@@ -18,6 +19,7 @@ let details_visible = $state(false)
 let edit_window: EditWindow = $state()
 let edit_visible = $state(false)
 let details_window: DetailsWindow = $state()
+let search_bar: SearchBar = $state()
 
 const nav = global_navigator
 
@@ -85,6 +87,9 @@ const keydown = (e: KeyboardEvent) => {
 		case "r":
 			nav.shuffle = !nav.shuffle
 			break;
+		case "/":
+			search_bar.open()
+			break;
 		case "a":
 		case "ArrowLeft":
 			nav.open_sibling(-1)
@@ -146,6 +151,7 @@ const keydown = (e: KeyboardEvent) => {
 			upload_widget={upload_widget}
 			edit_window={edit_window}
 			details_window={details_window}
+			search_bar={search_bar}
 		/>
 	</div>
 
@@ -158,6 +164,8 @@ const keydown = (e: KeyboardEvent) => {
 	/>
 </div>
 
+<SearchBar bind:this={search_bar} nav={nav}/>
+
 <DetailsWindow nav={nav} bind:this={details_window} bind:visible={details_visible} />
 
 <EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />
@@ -183,8 +191,7 @@ const keydown = (e: KeyboardEvent) => {
 .filesystem {
 	display: flex;
 	flex-direction: column;
-	height: 100vh;
-	width: 100%;
+	flex: 1 1 auto; /* auto grow */
 }
 
 .file_preview {
diff --git a/svelte/src/filesystem/filemanager/SearchBar.svelte b/svelte/src/filesystem/SearchBar.svelte
similarity index 60%
rename from svelte/src/filesystem/filemanager/SearchBar.svelte
rename to svelte/src/filesystem/SearchBar.svelte
index 9ef197b..d8a933a 100644
--- a/svelte/src/filesystem/filemanager/SearchBar.svelte
+++ b/svelte/src/filesystem/SearchBar.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-import { onMount } from "svelte";
-import { fs_search, fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
+import { onMount, tick } from "svelte";
+import { fs_search, fs_encode_path, fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import { loading_finish, loading_start } from "lib/Loading";
+import Modal from "util/Modal.svelte";
 
 let { nav }: {
 	nav: FSNavigator;
 } = $props();
 
+let modal: Modal
 let search_bar: HTMLInputElement = $state()
 let error = $state("")
 let search_term = $state("")
@@ -17,6 +19,10 @@ let searching = false
 let last_searched_term = ""
 let last_limit = $state(10)
 
+// The path in which we're searching. This is used for stripping the path prefix
+// of search results, and showing the title of the Modal
+let search_prefix_node: FSNode = $state({} as FSNode)
+
 onMount(() => {
 	// Clear results when the user moves to a new directory
 	return nav.subscribe(nav => {
@@ -26,6 +32,13 @@ onMount(() => {
 	})
 })
 
+export const open = async () => {
+	search_prefix_node = nav.base
+	modal.show()
+	await tick()
+	search_bar.focus()
+}
+
 const search = async (limit = 10) => {
 	if (search_term.length < 2 || search_term.length > 100) {
 		// These are the length limits defined by the API
@@ -49,7 +62,23 @@ const search = async (limit = 10) => {
 
 	try {
 		loading_start()
-		search_results = await fs_search(nav.base.path, search_term, limit)
+		let search_node = nav.base
+		// If the base is not a directory, we use the parent
+		if (search_node.type !== "dir") {
+			search_node = nav.path[nav.path.length-2]
+		}
+
+		let search_results_tmp = await fs_search(search_node.path, search_term, limit)
+
+		// If there are no results, and we are not searching the filesystem
+		// root, we will search the filesystem root
+		if (search_results_tmp.length === 0 && search_node.path != nav.path[0].path) {
+			search_node = nav.path[0]
+			search_results_tmp = await fs_search(search_node.path, search_term, limit)
+		}
+
+		search_prefix_node = search_node
+		search_results = search_results_tmp
 	} catch (err) {
 		if (err.value) {
 			error = err.value
@@ -68,7 +97,7 @@ const search = async (limit = 10) => {
 	searching = false
 
 	// It's possible that the user entered another letter while we were
-	// performing the search reqeust. If this happens we run the search function
+	// performing the search request. If this happens we run the search function
 	// again
 	if (last_searched_term !== search_term) {
 		console.debug("Search term changed during search. Searching again")
@@ -90,6 +119,8 @@ const clear_search = (blur: boolean) => {
 	if (blur) {
 		search_bar.blur()
 	}
+
+	modal.hide()
 }
 
 // Cursor navigation events can only be prevented with keydown. But we want to
@@ -144,7 +175,8 @@ const window_keydown = (e: KeyboardEvent) => {
 	} else if (e.key === "/" || e.key === "f") {
 		e.preventDefault()
 		e.stopPropagation()
-		search_bar.focus()
+		// search_bar.focus()
+		open()
 		return
 	}
 }
@@ -152,72 +184,68 @@ const window_keydown = (e: KeyboardEvent) => {
 
 <svelte:window onkeydown={window_keydown} />
 
-{#if error === "path_not_found" || error === "node_is_a_directory"}
-	<div class="highlight_yellow center">
-		Search index not found. The search index is a file called
-		'.search_index.gz' in your home directory. If you delete this file then
-		search will not work. The file is regenerated 10 minutes after modifying
-		a file in your filesystem.
-	</div>
-{:else if error !== ""}
-	<div class="highlight_red center">
-		An error ocurred while executing the search request: {error}
-	</div>
-{/if}
 
-<div class="center">
-	<form class="search_form" onsubmit={submit_search}>
-		<i class="icon">search</i>
-		<input
-			bind:this={search_bar}
-			class="term"
-			type="text"
-			placeholder="Press / to search in {$nav.base.name}"
-			style="width: 100%;"
-			bind:value={search_term}
-			onkeydown={input_keydown}
-			onkeyup={input_keyup}
-		/>
-		{#if search_term !== ""}
-			<!-- Button needs to be of button type in order to not submit the form -->
-			<button onclick={() => clear_search(false)} type="button">
-				<i class="icon">close</i>
-			</button>
-		{/if}
-	</form>
+<Modal bind:this={modal} title="Searching in {search_prefix_node.name}">
+	{#if error === "path_not_found" || error === "node_is_a_directory"}
+		<div class="highlight_yellow center">
+			Search index not found. The search index is a file called
+			'.search_index.zstd' in your home directory. If you delete this file
+			then search will not work. The file is regenerated 10 minutes after
+			modifying a file in your filesystem.
+		</div>
+	{:else if error !== ""}
+		<div class="highlight_red center">
+			An error ocurred while executing the search request: {error}
+		</div>
+	{/if}
+	<div class="center">
+		<form class="search_form" onsubmit={submit_search}>
+			<i class="icon">search</i>
+			<input
+				bind:this={search_bar}
+				class="term"
+				type="text"
+				placeholder="Enter search term"
+				style="width: 100%;"
+				bind:value={search_term}
+				onkeydown={input_keydown}
+				onkeyup={input_keyup}
+			/>
+		</form>
 
-	<div class="results">
-		{#if search_term !== "" && search_results.length === 0}
-			No results found
-		{/if}
+		<div class="results">
+			{#if search_term !== "" && search_results.length === 0}
+				No results found
+			{/if}
 
-		{#each search_results as result, index}
-			<a
-				href={"/d"+fs_encode_path(result)}
-				onclick={(e) => open_result(index, e)}
-				class="node"
-				class:node_selected={selected_result === index}
-			>
-				<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
-				<span class="node_name">
-					<!-- Remove the search directory from the result -->
-					{result.slice($nav.base.path.length+1)}
-				</span>
-			</a>
-		{/each}
+			{#each search_results as result, index}
+				<a
+					href={"/d"+fs_encode_path(result)}
+					onclick={(e) => open_result(index, e)}
+					class="node"
+					class:node_selected={selected_result === index}
+				>
+					<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
+					<span class="node_name">
+						<!-- Remove the search directory from the result -->
+						{result.slice(search_prefix_node.path.length+1)}
+					</span>
+				</a>
+			{/each}
 
-		{#if search_results.length === last_limit}
-			<div class="node">
-				<div class="node_name" style="text-align: center;">
-					<button onclick={() => {search(last_limit + 100)}}>
-						<i class="icon">expand_more</i>
-						More results
-					</button>
+			{#if search_results.length === last_limit}
+				<div class="node">
+					<div class="node_name" style="text-align: center;">
+						<button onclick={() => {search(last_limit + 100)}}>
+							<i class="icon">expand_more</i>
+							More results
+						</button>
+					</div>
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
-</div>
+</Modal>
 
 <style>
 .center {
@@ -247,9 +275,7 @@ const window_keydown = (e: KeyboardEvent) => {
 	overflow-x: hidden;
 	overflow-y: auto;
 	max-height: 80vh;
-	text-align: left;
-	background: var(--body_color);
-	border-radius: 8px;
+	text-align: initial;
 }
 .results > * {
 	display: flex;
diff --git a/svelte/src/filesystem/Toolbar.svelte b/svelte/src/filesystem/Toolbar.svelte
index 76a4f4c..acf2233 100644
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -113,7 +113,8 @@ export const copy_link = () => {
 	border-top: 1px solid var(--separator);
 
 	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	position: sticky;
+	bottom: 0;
 }
 .grid {
 	display: grid;
diff --git a/svelte/src/filesystem/edit_window/Branding.ts b/svelte/src/filesystem/edit_window/Branding.ts
index 6238666..da95807 100644
--- a/svelte/src/filesystem/edit_window/Branding.ts
+++ b/svelte/src/filesystem/edit_window/Branding.ts
@@ -96,7 +96,7 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 		style.body_color = properties.brand_body_color
 		style.body_background = properties.brand_body_color
 		style.body_text_color = add_contrast(properties.brand_body_color, 75)
-		style.shaded_background = set_alpha(properties.brand_body_color, 0.75)
+		style.shaded_background = set_alpha(properties.brand_body_color, 0.9)
 		style.separator = add_contrast(properties.brand_body_color, 8)
 		style.shadow_color = darken(properties.brand_body_color, 0.8)
 	}
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index 50139af..acac6ac 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -8,24 +8,26 @@ import CompactView from "./CompactView.svelte"
 import Button from "layout/Button.svelte";
 import { formatDate } from "util/Formatting";
 import { drop_target } from "lib/DropTarget"
-import SearchBar from "./SearchBar.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
 import EditWindow from "filesystem/edit_window/EditWindow.svelte";
 import { FileAction, type FileActionHandler } from "./FileManagerLib";
 import FileMenu from "./FileMenu.svelte";
 import { loading_finish, loading_start } from "lib/Loading";
+import SearchBar from "../SearchBar.svelte";
 
 let {
 	nav = $bindable(),
 	upload_widget,
 	edit_window = $bindable(),
+	search_bar = $bindable(),
 	directory_view = $bindable(""),
 	children
 }: {
 	nav: FSNavigator;
 	upload_widget: FsUploadWidget;
 	edit_window: EditWindow;
+	search_bar: SearchBar;
 	directory_view?: string;
 	children?: import('svelte').Snippet;
 } = $props();
@@ -306,6 +308,9 @@ onMount(() => {
 		{#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>
@@ -356,8 +361,6 @@ onMount(() => {
 				</div>
 			</div>
 
-			<SearchBar nav={nav}/>
-
 		{:else if mode === "selecting"}
 			<div class="toolbar toolbar_edit">
 				<Button click={viewing_mode} icon="close"/>
diff --git a/svelte/src/filesystem/filemanager/FilePicker.svelte b/svelte/src/filesystem/filemanager/FilePicker.svelte
index 6380175..9605a47 100644
--- a/svelte/src/filesystem/filemanager/FilePicker.svelte
+++ b/svelte/src/filesystem/filemanager/FilePicker.svelte
@@ -4,9 +4,8 @@ import ListView from "./ListView.svelte"
 import GalleryView from "./GalleryView.svelte"
 import CompactView from "./CompactView.svelte"
 import Modal from "util/Modal.svelte";
-import Breadcrumbs from "filesystem/Breadcrumbs.svelte"
-import { FSNavigator } from "filesystem/FSNavigator";
-import type { FSNode } from "lib/FilesystemAPI.svelte";
+import { FSNavigator, path_link } from "filesystem/FSNavigator";
+import { fs_encode_path, type FSNode } from "lib/FilesystemAPI.svelte";
 import { FileAction, type FileActionHandler } from "./FileManagerLib";
 
 let nav = $state(new FSNavigator(false))
@@ -171,7 +170,26 @@ onMount(() => {
 		</div>
 	{/snippet}
 
-	<Breadcrumbs nav={nav}/>
+	{#each $nav.path as node, i (node.path)}
+		<a
+			href={"/d"+fs_encode_path(node.path)}
+			class="breadcrumb button flat"
+			use:path_link={{nav: nav, node: node}}
+		>
+			{#if node.abuse_type !== undefined}
+				<i class="icon small">block</i>
+			{:else if node.is_shared()}
+				<i class="icon small">share</i>
+			{/if}
+			<div class="node_name" class:base={$nav.base_index === i}>
+				{node.name}
+			</div>
+		</a>
+		{#if $nav.base_index !== i}
+			<i class="icon">chevron_right</i>
+		{/if}
+	{/each}
+
 
 	{#if directory_view === "list"}
 		<ListView
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte
index 779c19c..cbeb632 100644
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -16,17 +16,20 @@ import type { FSNavigator } from "filesystem/FSNavigator";
 import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
 import EditWindow from "filesystem/edit_window/EditWindow.svelte";
 import DetailsWindow from "filesystem/DetailsWindow.svelte";
+import SearchBar from "filesystem/SearchBar.svelte";
 
 let {
 	nav,
 	upload_widget,
 	edit_window,
 	details_window,
+	search_bar,
 }: {
 	nav: FSNavigator
 	upload_widget: FsUploadWidget
 	edit_window: EditWindow
 	details_window: DetailsWindow
+	search_bar: SearchBar
 } = $props();
 
 let viewer: any = $state()
@@ -86,7 +89,7 @@ export const seek = (delta: number) => {
 		<Spinner/>
 	</div>
 {:else if viewer_type === "dir"}
-	<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window}>
+	<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
 		<CustomBanner path={$nav.path}/>
 	</FileManager>
 {:else if viewer_type === "audio"}
diff --git a/svelte/src/util/TabMenu.svelte b/svelte/src/util/TabMenu.svelte
index 92c00bf..ec34b6b 100644
--- a/svelte/src/util/TabMenu.svelte
+++ b/svelte/src/util/TabMenu.svelte
@@ -12,6 +12,7 @@ export type Tab = {
 </script>
 <script lang="ts">
 import { onMount, type Component } from "svelte";
+import { breadcrumbs_store } from "wrap/BreadcrumbStore";
 import { current_page_store } from "wrap/RouterStore";
 
 let { title = $bindable(""), pages = $bindable([]) }: {
@@ -50,6 +51,8 @@ const get_page = () => {
 
 	title = current_subpage === null ? current_page.title : current_subpage.title
 	window.document.title = title+" / Nova"
+
+	breadcrumbs_store.set(breadcrumbs)
 }
 
 let current_page: Tab = $state(null)
@@ -61,6 +64,14 @@ onMount(() => {
 })
 </script>
 
+{#snippet breadcrumbs()}
+	{current_page.title}
+	{#if current_subpage !== null}
+		<i class="icon">chevron_right</i>
+		{current_subpage.title}
+	{/if}
+{/snippet}
+
 {#if current_page !== null && current_page.hide_frame !== true}
 	<header>
 		<div class="tab_bar">
@@ -106,9 +117,6 @@ onMount(() => {
 {/if}
 
 <style>
-header {
-	margin-top: 2em;
-}
 .submenu {
 	border-bottom: 1px solid var(--separator);
 }
diff --git a/svelte/src/wrap/BreadcrumbStore.ts b/svelte/src/wrap/BreadcrumbStore.ts
new file mode 100644
index 0000000..275c7e2
--- /dev/null
+++ b/svelte/src/wrap/BreadcrumbStore.ts
@@ -0,0 +1,4 @@
+import type { Snippet } from "svelte";
+import { writable } from "svelte/store";
+
+export let breadcrumbs_store = writable(null as Snippet);
diff --git a/svelte/src/wrap/MainMenu.svelte b/svelte/src/wrap/MainMenu.svelte
index 187740a..7520be0 100644
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -17,6 +17,7 @@ import { get_user } from "lib/PixeldrainAPI";
 import Tree from "./Tree.svelte";
 import MenuEntry from "./MenuEntry.svelte";
 import { writable } from "svelte/store";
+import { breadcrumbs_store } from "./BreadcrumbStore";
 
 // The menu swipe will be detected if it was less than this much pixels from the
 // screen edge
@@ -147,100 +148,114 @@ const set_offset = (off: number) => {
 
 <svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
 
-<button class="menu_button" onclick={toggle_menu}>
-	<i class="icon">menu</i>
-	{#if $menu_is_open}
-		<span>Menu</span>
-	{/if}
-</button>
-
-<div class="nav_container" bind:this={menu}>
-	<div class="scroll_container">
-		<nav class="nav" bind:this={nav}>
-			<a class="button" href="/" use:highlight_current_page>
-				<i class="icon">home</i>
-				<span>Home</span>
-			</a>
-
-			{#if $user.username !== undefined && $user.username !== ""}
-				<MenuEntry id="subscription_info" collapsed={false}>
-					{#snippet title()}
-						<div class="username">{$user.username}</div>
-					{/snippet}
-
-					{#snippet body()}
-						<div class="stats_table">
-							<div>Subscription</div>
-							<div>{$user.subscription.name}</div>
-
-							{#if $user.subscription.type === "prepaid"}
-								<div>Credit</div>
-								<div><Euro amount={$user.balance_micro_eur}/></div>
-							{/if}
-
-							<div>Storage used</div>
-							<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
-							<div>Transfer used</div>
-							<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
-						</div>
-					{/snippet}
-				</MenuEntry>
-
-				<a class="button" href="/d/me" use:highlight_current_page>
-					<i class="icon">folder</i>
-					<span>Filesystem</span>
+<div class="wrap">
+	<div class="nav_container" bind:this={menu}>
+		<div class="scroll_container">
+			<nav class="nav" bind:this={nav}>
+				{#if document.documentElement.clientWidth < min_screen_size_menu_open}
+					<button class="button" onclick={toggle_menu}>
+						<i class="icon">menu</i>
+						Menu
+					</button>
+				{/if}
+				<a class="button" href="/" use:highlight_current_page>
+					<i class="icon">home</i>
+					<span>Home</span>
 				</a>
-				<a class="button" href="/user" use:highlight_current_page>
-					<i class="icon">person</i>
-					<span>Account</span>
-				</a>
-				{#if $user.is_admin}
-					<a class="button" href="/admin" use:highlight_current_page>
-						<i class="icon">admin_panel_settings</i>
-						<span>Admin Panel</span>
+
+				{#if $user.username !== undefined && $user.username !== ""}
+					<MenuEntry id="subscription_info" collapsed={false}>
+						{#snippet title()}
+							<div class="username">{$user.username}</div>
+						{/snippet}
+
+						{#snippet body()}
+							<div class="stats_table">
+								<div>Subscription</div>
+								<div>{$user.subscription.name}</div>
+
+								{#if $user.subscription.type === "prepaid"}
+									<div>Credit</div>
+									<div><Euro amount={$user.balance_micro_eur}/></div>
+								{/if}
+
+								<div>Storage used</div>
+								<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
+								<div>Transfer used</div>
+								<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
+							</div>
+						{/snippet}
+					</MenuEntry>
+
+					<a class="button" href="/d/me" use:highlight_current_page>
+						<i class="icon">folder</i>
+						<span>Filesystem</span>
+					</a>
+					<a class="button" href="/user" use:highlight_current_page>
+						<i class="icon">person</i>
+						<span>Account</span>
+					</a>
+					{#if $user.is_admin}
+						<a class="button" href="/admin" use:highlight_current_page>
+							<i class="icon">admin_panel_settings</i>
+							<span>Admin Panel</span>
+						</a>
+					{/if}
+				{:else}
+					<a class="button" href="/login" use:highlight_current_page>
+						<i class="icon">login</i>
+						<span>Login</span>
+					</a>
+					<a class="button" href="/register" use:highlight_current_page>
+						<i class="icon">how_to_reg</i>
+						<span>Register</span>
 					</a>
 				{/if}
-			{:else}
-				<a class="button" href="/login" use:highlight_current_page>
-					<i class="icon">login</i>
-					<span>Login</span>
+
+				<div class="separator"></div>
+
+				<a class="button" href="/speedtest" use:highlight_current_page>
+					<i class="icon">speed</i>
+					<span>Speedtest</span>
 				</a>
-				<a class="button" href="/register" use:highlight_current_page>
-					<i class="icon">how_to_reg</i>
-					<span>Register</span>
+				<a class="button" href="/appearance" use:highlight_current_page>
+					<i class="icon">palette</i>
+					<span>Themes</span>
 				</a>
-			{/if}
 
-			<div class="separator"></div>
-
-			<a class="button" href="/speedtest" use:highlight_current_page>
-				<i class="icon">speed</i>
-				<span>Speedtest</span>
-			</a>
-			<a class="button" href="/appearance" use:highlight_current_page>
-				<i class="icon">palette</i>
-				<span>Themes</span>
-			</a>
-
-			<Bookmarks menu_collapsed={false}/>
-			<Tree menu_collapsed={false}/>
-		</nav>
+				<Bookmarks menu_collapsed={false}/>
+				<Tree menu_collapsed={false}/>
+			</nav>
+		</div>
 	</div>
-</div>
 
-<div class="page">
-	<Router/>
-</div>
+	<div class="page">
+		<div class="header">
+			<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>
+		</div>
 
-{#if $loading_store !== 0}
-	<div class="spinner">
-		<Spinner/>
+		<Router/>
 	</div>
-{/if}
+
+
+	{#if $loading_store !== 0}
+		<div class="spinner">
+			<Spinner/>
+		</div>
+	{/if}
+
+</div>
 
 <style>
-:global(body) {
+.wrap {
 	display: flex;
 	flex-direction: row;
 
@@ -251,27 +266,13 @@ const set_offset = (off: number) => {
 	background-position: var(--background_image_position, initial);
 	background-repeat: var(--background_image_repeat, repeat);
 	background-attachment: fixed;
+	width: 100%;
+	min-height: 100vh;
 }
-.menu_button {
-	position: fixed;
-	backface-visibility: hidden;
-	z-index: 10;
-	top: 0;
-	left: 0;
-	background: none;
-	box-shadow: none;
-	margin: 0;
-	padding: 4px;
-	border-radius: 0;
-	border-bottom-right-radius: 4px;
-	backdrop-filter: blur(6px);
-}
-
 .nav_container {
 	flex: 0 0 auto;
 	border-right: 1px solid var(--separator);
 	background: var(--shaded_background);
-	backdrop-filter: blur(6px);
 	z-index: 9;
 }
 .scroll_container {
@@ -286,7 +287,6 @@ const set_offset = (off: number) => {
 	display: flex;
 	flex-direction: column;
 	width: 15em;
-	padding-top: 2em;
 }
 .nav > .button {
 	background: none;
@@ -294,8 +294,10 @@ const set_offset = (off: number) => {
 }
 .page {
 	flex: 1 1 auto;
-	overflow-x: hidden;
-	max-width: 100%;
+	max-width: 100vw;
+	min-width: 0; /* prevents overflow */
+	display: flex;
+	flex-direction: column;
 }
 .username {
 	flex: 1 1 auto;
@@ -314,6 +316,28 @@ const set_offset = (off: number) => {
 	margin: 5px;
 }
 
+.header {
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: left;
+	background: var(--shaded_background);
+	border-bottom: 1px solid var(--separator);
+}
+.menu_button {
+	flex: 0 0 auto;
+	background: none;
+	box-shadow: none;
+}
+.breadcrumbs {
+	flex: 1 1 auto;
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	align-items: center;
+}
+
 .spinner {
 	position: fixed;
 	top: 10px;
diff --git a/svelte/src/wrap/Router.svelte b/svelte/src/wrap/Router.svelte
index d8b9e68..1032b31 100644
--- a/svelte/src/wrap/Router.svelte
+++ b/svelte/src/wrap/Router.svelte
@@ -11,6 +11,7 @@ import Appearance from "pages/Appearance.svelte";
 import Footer from "layout/Footer.svelte";
 import { current_page_store, type Tab } from "./RouterStore";
 import { get_user, type User } from "lib/PixeldrainAPI";
+import { breadcrumbs_store } from "./BreadcrumbStore";
 
 let pages: Tab[] = [
 	{
@@ -37,6 +38,7 @@ let pages: Tab[] = [
 		title: "Filesystem",
 		component: Filesystem,
 		footer: false,
+		custom_breadcrumbs: true,
 	}, {
 		path: "/admin",
 		prefix: "/admin/",
@@ -107,6 +109,10 @@ const load_page = (pathname: string, history: boolean): boolean => {
 		window.history.pushState({}, window.document.title, pathname)
 	}
 
+	if (current_page.custom_breadcrumbs !== true) {
+		breadcrumbs_store.set(breadcrumbs)
+	}
+
 	// The current_page_store updates all the listening pages for navigation
 	// events. We first wait for a tick so that the current page gets unmounted
 	// before sending the event. That way a stale page will not get events which
@@ -144,6 +150,10 @@ const popstate = (e: PopStateEvent) => {
 }
 </script>
 
+{#snippet breadcrumbs()}
+	{current_page.title}
+{/snippet}
+
 <svelte:document onclick={click}/>
 <svelte:window onpopstate={popstate}/>
 
diff --git a/svelte/src/wrap/RouterStore.ts b/svelte/src/wrap/RouterStore.ts
index 241e70d..9c0eb8e 100644
--- a/svelte/src/wrap/RouterStore.ts
+++ b/svelte/src/wrap/RouterStore.ts
@@ -8,5 +8,6 @@ export type Tab = {
 	component?: Component,
 	footer?: boolean,
 	login?: boolean,
+	custom_breadcrumbs?: boolean,
 };
 export let current_page_store = writable({} as Tab);