Add black and white themes

res/static/style/layout.css

@@ -135,8 +135,7 @@ pre>code {
 }
 
 .page_content {
-	background: var(--shaded_background);
+	background: var(--body_background);
-	backdrop-filter: blur(4px);
 	text-align: center;
 }
 
@@ -198,12 +197,12 @@ section {
 	width: auto;
 	height: auto;
 	text-align: center;
-	padding: 4px;
+	padding: 0.5em;
 	border-radius: 8px;
 }
 
 .highlight_border {
-	border: 2px solid var(--separator);
+	border: 1px var(--separator) solid;
 }
 
 .highlight_shaded {
@@ -292,7 +291,7 @@ hr {
 	height: 1px;
 	border: none;
 	background-color: var(--separator);
-	margin: 12px;
+	margin: 0.5em 0;
 }
 
 a {
@@ -315,7 +314,7 @@ ul {
 fieldset {
 	padding: 4px;
 	border-radius: 8px;
-	border: 2px var(--separator) solid;
+	border: 1px var(--separator) solid;
 	margin: 0;
 }
 
@@ -325,7 +324,7 @@ fieldset>legend {
 	margin-right: auto;
 	border-radius: 8px;
 	font-size: 1.1em;
-	border-bottom: 2px var(--separator) solid;
+	border-bottom: 1px var(--separator) solid;
 }
 
 /* Forms*/

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>

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;
+	flex: 1 1 auto; /* auto grow */
-	width: 100%;
 }
 
 .file_preview {

svelte/src/filesystem/SearchBar.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-import { onMount } from "svelte";
+import { onMount, tick } from "svelte";
-import { fs_search, fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI.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,38 +184,33 @@ const window_keydown = (e: KeyboardEvent) => {
 
 <svelte:window onkeydown={window_keydown} />
 
-{#if error === "path_not_found" || error === "node_is_a_directory"}
+
+<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.gz' in your home directory. If you delete this file then
+			'.search_index.zstd' in your home directory. If you delete this file
-		search will not work. The file is regenerated 10 minutes after modifying
+			then search will not work. The file is regenerated 10 minutes after
-		a file in your filesystem.
+			modifying a file in your filesystem.
 		</div>
-{:else if error !== ""}
+	{:else if error !== ""}
 		<div class="highlight_red center">
 			An error ocurred while executing the search request: {error}
 		</div>
-{/if}
+	{/if}
-
+	<div class="center">
-<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}"
+				placeholder="Enter search term"
 				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>
 
 		<div class="results">
@@ -201,7 +228,7 @@ const window_keydown = (e: KeyboardEvent) => {
 					<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)}
+						{result.slice(search_prefix_node.path.length+1)}
 					</span>
 				</a>
 			{/each}
@@ -217,7 +244,8 @@ const window_keydown = (e: KeyboardEvent) => {
 				</div>
 			{/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;
+	text-align: initial;
-	background: var(--body_color);
-	border-radius: 8px;
 }
 .results > * {
 	display: flex;

svelte/src/filesystem/Toolbar.svelte

@@ -21,7 +21,7 @@ let {
 
 let share_dialog: ShareDialog = $state()
 let link_copied = $state(false)
-let toolbar_expanded = $state(false)
+let toolbar_expanded = $state(true)
 
 export const copy_link = () => {
 	const share_url = fs_share_url($nav.path)
@@ -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;

svelte/src/filesystem/edit_window/Branding.ts

@@ -4,6 +4,9 @@ import hsl2rgb from "pure-color/convert/hsl2rgb";
 import rgb2hex from "pure-color/convert/rgb2hex";
 import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
 
+const text_contrast = 75
+const body_alpha = 0.9
+
 type Style = {
 	input_background?: string,
 	input_hover_background?: string,
@@ -69,12 +72,12 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 	if (properties.brand_input_color) {
 		style.input_background = properties.brand_input_color
 		style.input_hover_background = properties.brand_input_color
-		style.input_text = add_contrast(properties.brand_input_color, 75)
+		style.input_text = add_contrast(properties.brand_input_color, text_contrast)
 	}
 	if (properties.brand_highlight_color) {
 		style.highlight_color = properties.brand_highlight_color
 		style.highlight_background = properties.brand_highlight_color
-		style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75)
+		style.highlight_text_color = add_contrast(properties.brand_highlight_color, text_contrast)
 
 		// If we have a body colour to compare it to we use the highlight colour
 		// to generate the link colour
@@ -84,20 +87,20 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 	}
 	if (properties.brand_danger_color) {
 		style.danger_color = properties.brand_danger_color
-		style.danger_text_color = add_contrast(properties.brand_danger_color, 75)
+		style.danger_text_color = add_contrast(properties.brand_danger_color, text_contrast)
 	}
 	if (properties.brand_background_color) {
 		style.background_color = properties.brand_background_color
 		style.background = properties.brand_background_color
-		style.background_text_color = add_contrast(properties.brand_background_color, 75)
+		style.background_text_color = add_contrast(properties.brand_background_color, text_contrast)
 		style.background_pattern_color = properties.brand_background_color
 	}
 	if (properties.brand_body_color) {
 		style.body_color = properties.brand_body_color
-		style.body_background = properties.brand_body_color
+		style.body_background = set_alpha(properties.brand_body_color, body_alpha)
-		style.body_text_color = add_contrast(properties.brand_body_color, 75)
+		style.body_text_color = add_contrast(properties.brand_body_color, text_contrast)
-		style.shaded_background = set_alpha(properties.brand_body_color, 0.75)
+		style.shaded_background = set_alpha(properties.brand_body_color, body_alpha)
-		style.separator = add_contrast(properties.brand_body_color, 8)
+		style.separator = add_contrast(properties.brand_body_color, 15)
 		style.shadow_color = darken(properties.brand_body_color, 0.8)
 	}
 	if (properties.brand_card_color) {

svelte/src/filesystem/edit_window/ThemePresets.svelte

@@ -29,7 +29,7 @@ const themes = [
 		brand_danger_color: "#821b3f",
 		brand_background_color: "#141414",
 		brand_body_color: "#1e1e1e",
-		brand_card_color: "#282828"
+		brand_card_color: "#282828",
 	}, {
 		name: "Nord (dark)",
 		brand_input_color: "#4f596d",
@@ -37,7 +37,7 @@ const themes = [
 		brand_danger_color: "#bd5f69",
 		brand_background_color: "#2f3541",
 		brand_body_color: "#3b4252",
-		brand_card_color: "#434c5f"
+		brand_card_color: "#434c5f",
 	}, {
 		name: "Nord (light)",
 		brand_input_color: "#cad2e1",
@@ -45,7 +45,23 @@ const themes = [
 		brand_danger_color: "#bd5f69",
 		brand_background_color: "#d7dde8",
 		brand_body_color: "#ebeef3",
-		brand_card_color: "#e5e9f0"
+		brand_card_color: "#e5e9f0",
+	}, {
+		name: "Black",
+		brand_input_color: "#202020",
+		brand_highlight_color: "#57e389",
+		brand_danger_color: "#ed333b",
+		brand_background_color: "#000000",
+		brand_body_color: "#080808",
+		brand_card_color: "#101010",
+	}, {
+		name: "White",
+		brand_input_color: "#f4f4f4",
+		brand_highlight_color: "#2ec27e",
+		brand_danger_color: "#c01c28",
+		brand_background_color: "#f8f8f8",
+		brand_body_color: "#ffffff",
+		brand_card_color: "#f0f0f0",
 	}, {
 		name: "Solarized (dark)",
 		brand_input_color: "#084453",
@@ -53,7 +69,7 @@ const themes = [
 		brand_danger_color: "#db302d",
 		brand_background_color: "#002c38",
 		brand_body_color: "#063540",
-		brand_card_color: "#073c49"
+		brand_card_color: "#073c49",
 	}, {
 		name: "Solarized (light)",
 		brand_input_color: "#e7dfc5",
@@ -61,7 +77,7 @@ const themes = [
 		brand_danger_color: "#db302d",
 		brand_background_color: "#ede7d3",
 		brand_body_color: "#fdf5e2",
-		brand_card_color: "#fcf2d8"
+		brand_card_color: "#fcf2d8",
 	}, {
 		name: "Mocha",
 		brand_input_color: "#313244",
@@ -69,7 +85,7 @@ const themes = [
 		brand_danger_color: "#f38ba8",
 		brand_background_color: "#1e1e2e",
 		brand_body_color: "#181825",
-		brand_card_color: "#313244"
+		brand_card_color: "#313244",
 	}
 ]
 </script>

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"/>

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, path_link } from "filesystem/FSNavigator";
-import { FSNavigator } from "filesystem/FSNavigator";
+import { fs_encode_path, type FSNode } from "lib/FilesystemAPI.svelte";
-import 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

svelte/src/filesystem/viewers/Audio.svelte

@@ -64,7 +64,7 @@ onMount(() => {
 {@render children?.()}
 
 <div bind:this={background_div} class="background_div">
-	<TextBlock width="1000px">
+	<TextBlock width="auto">
 		<audio
 			bind:this={player}
 			class="player"

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"}

svelte/src/home_page/HomePage.svelte

@@ -11,9 +11,6 @@ let upload_widget
 </script>
 
 <header class="logo_header">
-	<div class="menu_button_container">
-		<Menu no_login_label="Not logged in" hide_name={false} hide_logo style="border-radius: 0 0 0 8px; margin: 0"/>
-	</div>
 	<div class="header_image_container"></div>
 </header>
 
@@ -139,15 +136,14 @@ header {
 }
 header > h1 {
 	color: #ffffff;
-	text-shadow: 0 0 6px #000000;
+	text-shadow: 1px 1px 5px #000000;
 	margin-top: 30px;
 	margin-bottom: 30px;
 }
 
 .header_image_container {
 	text-align: initial;
-	margin: auto;
+	margin: 50px auto;
-	margin-bottom: 50px;
 	height: 100px;
 	width: 500px;
 	max-width: 100%;
@@ -156,10 +152,6 @@ header > h1 {
 	background-size: contain;
 	background-position: center;
 }
-.menu_button_container {
-	display: flex;
-	justify-content: end;
-}
 .image {
 	max-width: 100%;
 	border-radius: 12px;
@@ -167,7 +159,6 @@ header > h1 {
 .bold {
 	font-weight: bold;
 	color: var(--highlight_color);
-	text-shadow: 1px 1px 3px var(--shadow_color);
 }
 
 .prices {

svelte/src/speedtest/Speedtest.svelte

@@ -186,7 +186,7 @@ onMount(() => {
 })
 </script>
 
-<section class="highlight_border">
+<section>
 	<div style="text-align: center">
 		<Button icon="speed" label="Start test" click={() => start(12000)} disabled={running} highlight={!running}/>
 		<Button icon="speed" label="Long test" click={() => start(30000)} disabled={running}/>

svelte/src/user_home/dashboard/Dashboard.svelte

@@ -168,7 +168,6 @@ onMount(() => {
 
 <style>
 .separator {
-	border-top: 1px solid var(--separator);
 	margin: 0 8px;
 }
 .cards {

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,14 +117,15 @@ onMount(() => {
 {/if}
 
 <style>
-header {
+
-	margin-top: 2em;
+header, .submenu {
-}
-.submenu {
 	border-bottom: 1px solid var(--separator);
 }
 .tab_bar > .button {
 	flex-direction: column;
 	gap: 0;
 }
+.button_highlight {
+	background: var(--body_background);
+}
 </style>

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

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,16 +148,16 @@ const set_offset = (off: number) => {
 
 <svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
 
-<button class="menu_button" onclick={toggle_menu}>
+<div class="wrap">
-	<i class="icon">menu</i>
+	<div class="nav_container" bind:this={menu}>
-	{#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}>
+				{#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>
@@ -226,52 +227,52 @@ const set_offset = (off: number) => {
 				<Tree menu_collapsed={false}/>
 			</nav>
 		</div>
-</div>
+	</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>
 
-<div class="page">
 		<Router/>
-</div>
+	</div>
 
 
-{#if $loading_store !== 0}
+	{#if $loading_store !== 0}
 		<div class="spinner">
 			<Spinner/>
 		</div>
-{/if}
+	{/if}
+
+</div>
 
 <style>
-:global(body) {
+.wrap {
 	display: flex;
 	flex-direction: row;
 
 	color: var(--body_text_color);
 	background-image: var(--background_image);
-	background-color: var(--background_pattern_color);
+	background-color: var(--background_color);
 	background-size: var(--background_image_size, initial);
 	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);
+	background: var(--body_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: 100vw;
-	max-width: 100%;
+	min-width: 0; /* prevents overflow */
+	display: flex;
+	flex-direction: column;
 }
 .username {
 	flex: 1 1 auto;
@@ -314,6 +316,31 @@ 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(--body_background);
+	border-bottom: 1px solid var(--separator);
+	position: sticky;
+	top: 0;
+	z-index: 8; /* below navigation, on top of most other things */
+}
+.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;

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}/>
 

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

webcontroller/filesystem.go

@@ -1,11 +1,13 @@
 package webcontroller
 
 import (
+	"errors"
 	"fmt"
 	"net/http"
 	"strings"
 
 	"fornaxian.tech/log"
+	"fornaxian.tech/pixeldrain_api_client/pixelapi"
 	"fornaxian.tech/util"
 	"github.com/julienschmidt/httprouter"
 )
@@ -25,16 +27,19 @@ func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request,
 
 	node, err := td.PixelAPI.GetFilesystemPath(path)
 	if err != nil {
-		if err.Error() == "not_found" || err.Error() == "path_not_found" {
+		if apiErr, ok := errors.AsType[pixelapi.Error](err); ok {
+			switch apiErr.StatusCode {
+			case "not_found", "path_not_found":
 				wc.serveNotFound(w, r)
-		} else if err.Error() == "forbidden" {
+			case "forbidden":
 				wc.serveForbidden(w, r)
-		} else if err.Error() == "authentication_required" {
+			case "authentication_required":
 				http.Redirect(w, r, "/login", http.StatusSeeOther)
-		} else if err.Error() == "unavailable_for_legal_reasons" {
+			case "unavailable_for_legal_reasons":
 				wc.serveUnavailableForLegalReasons(w, r)
-		} else if err.Error() == "permission_denied" {
+			case "permission_denied":
 				wc.serveForbidden(w, r)
+			}
 		} else {
 			log.Error("Failed to get path: %s", err)
 			wc.templates.Run(w, r, "500", td)

webcontroller/style.go

@@ -262,7 +262,7 @@ func (s styleSheet) String() string {
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.BodyColor.WithAlpha(0.7).CSS(), // shaded_background
+		s.BodyColor.WithAlpha(0.9).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),

webcontroller/templates.go

@@ -33,7 +33,7 @@ type TemplateData struct {
 	Title  string
 	OGData ogData
 
-	Other    interface{}
+	Other    any
 	URLQuery url.Values
 }
 
@@ -232,15 +232,15 @@ func (tm *TemplateManager) pageNr(s string) (nr int) {
 	}
 	return nr
 }
-func (tm *TemplateManager) add(a, b interface{}) float64 { return toFloat(a) + toFloat(b) }
+func (tm *TemplateManager) add(a, b any) float64 { return toFloat(a) + toFloat(b) }
-func (tm *TemplateManager) sub(a, b interface{}) float64 { return toFloat(a) - toFloat(b) }
+func (tm *TemplateManager) sub(a, b any) float64 { return toFloat(a) - toFloat(b) }
-func (tm *TemplateManager) mul(a, b interface{}) float64 { return toFloat(a) * toFloat(b) }
+func (tm *TemplateManager) mul(a, b any) float64 { return toFloat(a) * toFloat(b) }
-func (tm *TemplateManager) div(a, b interface{}) float64 { return toFloat(a) / toFloat(b) }
+func (tm *TemplateManager) div(a, b any) float64 { return toFloat(a) / toFloat(b) }
 
-func (tm *TemplateManager) formatData(i interface{}) string {
+func (tm *TemplateManager) formatData(i any) string {
 	return util.FormatData(detectInt(i))
 }
-func (tm *TemplateManager) formatDataBits(i interface{}) string {
+func (tm *TemplateManager) formatDataBits(i any) string {
 	var size = detectInt(i) * 8
 	var sizef = float64(size)
 
@@ -302,7 +302,7 @@ func (tm *TemplateManager) noEscape(t string) template.HTML { return template.HT
 func (tm *TemplateManager) noEscapeJS(t string) template.JS { return template.JS(t) }
 func (tm *TemplateManager) slashes() template.HTML          { return template.HTML("//") }
 
-func detectInt(i interface{}) int {
+func detectInt(i any) int {
 	switch v := i.(type) {
 	case int:
 		return int(v)
@@ -332,7 +332,7 @@ func detectInt(i interface{}) int {
 	panic(fmt.Sprintf("%v is not an int", i))
 }
 
-func toFloat(i interface{}) float64 {
+func toFloat(i any) float64 {
 	switch v := i.(type) {
 	case int:
 		return float64(v)