Remove thick borders on admin panel

Add some borders. Fix style override when switching pages
Create comonent for collapsing menu entries
2026-02-12 20:03:23 +01:00 · 2026-02-12 20:00:43 +01:00 · 2026-02-12 19:42:23 +01:00 · 2026-01-30 17:21:46 +01:00 · 2026-01-30 17:17:03 +01:00 · 2026-01-30 12:26:36 +01:00
18 changed files with 249 additions and 154 deletions
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -393,10 +393,6 @@ table:not(.form) {
 	min-width: 100%;
 }

-tr {
-	border-bottom: 1px var(--separator) solid;
-}
-
 tr>td {
 	padding: 0.2em 0.5em;
 }
@@ -459,8 +455,8 @@ input[type="color"] {
 	border-radius: 6px;
 	margin: 2px;
 	background: var(--input_background);
-	gap: 3px;
-	padding: 3px;
+	gap: 2px;
+	padding: 2px;
 	overflow: hidden;
 	color: var(--input_text);
 	cursor: pointer;
@@ -501,7 +497,7 @@ input[type="color"]:focus {
 	color: var(--input_text);
 	text-decoration: none;
 	background: var(--input_hover_background);
-	box-shadow: 0px 0px 0px 1px var(--highlight_color);
+	box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
 }

 button:active,
@@ -510,13 +506,12 @@ input[type="submit"]:active,
 input[type="button"]:active,
 input[type="color"]:active {
 	box-shadow: inset 4px 4px 6px var(--shadow_color);
-	/* Exactly 3px offset compared to the inactive padding to give a depth effect */
-	padding: 6px 0px 0px 6px;
+	/* Exactly 2px offset compared to the inactive padding to give a depth effect */
+	padding: 4px 0px 0px 4px;
 }

 .button_highlight {
-	background: var(--highlight_background) !important;
-	color: var(--highlight_text_color) !important;
+	box-shadow: 0px 0px 0px 1px var(--highlight_color) !important;
 }

 .button_red {
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -162,7 +162,8 @@ onMount(() => {
 <section>
 	<h3>Bandwidth usage and file views</h3>
 </section>
-<div class="highlight_border" style="margin-bottom: 6px;">
+
+<div>
 	<button onclick={() => loadGraph(1440, 1, true)}>Day 1m</button>
 	<button onclick={() => loadGraph(10080, 10, true)}>Week 10m</button>
 	<button onclick={() => loadGraph(43200, 60, true)}>Month 1h</button>
@@ -172,9 +173,11 @@ onMount(() => {
 	<button onclick={() => loadGraph(1051200, 1440, false)}>Two Years 1d</button>
 	<button onclick={() => loadGraph(2628000, 1440, false)}>Five Years 1d</button>
 </div>
+
 <Chart bind:this={graphEgress} data_type="bytes" />
 <Chart bind:this={graphDownloads} data_type="number" />
-<div class="highlight_border">
+
+<div>
 	Total usage from {start_time} to {end_time}<br/>
 	{formatDataVolume(total_egress, 3)} egress,
 	{formatThousands(total_downloads)} downloads
--- a/svelte/src/filesystem/FSNavigator.ts
+++ b/svelte/src/filesystem/FSNavigator.ts
@@ -53,12 +53,19 @@ export class FSNavigator {
 		}
 	}

+	last_requested_path: string = ""
 	navigate = async (path: string, push_history: boolean) => {
+		if (path === this.last_requested_path) {
+			console.debug("FSNavigator: Requested path is equal to current path. Debouncing")
+			return
+		}
+		this.last_requested_path = path
+
 		if (path[0] !== "/") {
 			path = "/" + path
 		}

-		console.debug("Navigating to path", path, push_history)
+		console.debug("FSNavigator: Navigating to path", path, push_history)

 		try {
 			loading_start()
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -47,13 +47,16 @@ onMount(() => {
 			return
 		}

-		// Custom CSS rules for the whole viewer
-		document.documentElement.style = css_from_path(nav.path)
+		// Custom CSS rules for the whole viewer. The MainMenu applies its
+		// styles to the <html> element. So we apply to the <body> element, our
+		// styles take precedence since they're lower level, and we can clean it
+		// up afterwards without overwriting global style
+		document.body.style = css_from_path(nav.path)
 	})
 	return () => {
 		page_sub()
 		nav_sub()
-		document.documentElement.style = ""
+		document.body.style = ""
 	}
 })

--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -69,7 +69,7 @@ const file_event: FileActionHandler = (action: FileAction, index: number, orig:
 		if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
 			select_node(index)
 		} else {
-			file_menu.open(nav.children[index], orig.target)
+			file_menu.open(nav.children[index], orig.target, orig)
 		}
 		break
 	case FileAction.Edit:
@@ -86,7 +86,7 @@ const file_event: FileActionHandler = (action: FileAction, index: number, orig:
 		select_node(index)
 		break
 	case FileAction.Menu:
-		file_menu.open(nav.children[index], orig.target)
+		file_menu.open(nav.children[index], orig.target, orig)
 		break
 	}
 }
--- a/svelte/src/filesystem/filemanager/FileMenu.svelte
+++ b/svelte/src/filesystem/filemanager/FileMenu.svelte
@@ -19,16 +19,23 @@ let {
 let dialog: Dialog = $state()
 let node: FSNode = $state(null)

-export const open = async (n: FSNode, target: EventTarget) => {
+export const open = async (n: FSNode, target: EventTarget, event: Event) => {
 	node = n
-	let el: HTMLElement = (target as Element).closest("button")
-	if (el === null) {
-		el = (target as Element).closest("a")
-	}
-
 	// Wait for the view to update, so the dialog gets the proper measurements
 	await tick()
+
+	let el: HTMLElement = (target as Element).closest("button")
+	if (el !== null) {
 		dialog.open(el.getBoundingClientRect())
+		return
+	}
+
+	if (event instanceof MouseEvent) {
+		dialog.open(event)
+		return
+	}
+
+	console.error("Cannot find suitable target for spawning dialog window")
 }

 const delete_node = async () => {
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -40,7 +40,8 @@ export const update = async () => {
 	siblings = await nav.get_siblings()

 	for(const sib of siblings) {
-		if (sib.name === "cover.jpg") {
+		const lower = sib.name.toLowerCase()
+		if (lower === "cover.jpg" || lower === "cover.png" || lower === "cover.webp") {
 			console.debug("Found album cover image", sib)
 			background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
 			break
--- a/svelte/src/layout/Dialog.svelte
+++ b/svelte/src/layout/Dialog.svelte
@@ -4,7 +4,7 @@ let { children }: {
 } = $props();
 let dialog: HTMLDialogElement = $state()

-export const open = (button_rect: DOMRect) => {
+export const open = (origin: DOMRect|MouseEvent) => {
 	// Show the window so we can get the location
 	dialog.showModal()

@@ -15,10 +15,18 @@ export const open = (button_rect: DOMRect) => {
 	const max_left = window.innerWidth - dialog_rect.width - edge_offset
 	const max_top = window.innerHeight - dialog_rect.height - edge_offset

+	let min_left: number, min_top: number
+	if (origin instanceof DOMRect) {
 		// Position the dialog in horizontally in the center of the button and
 		// verticially below it
-	const min_left = Math.max((button_rect.left + (button_rect.width/2)) - (dialog_rect.width/2), edge_offset)
-	const min_top = Math.max(button_rect.bottom, edge_offset)
+		min_left = Math.max((origin.left + (origin.width/2)) - (dialog_rect.width/2), edge_offset)
+		min_top = Math.max(origin.bottom, edge_offset)
+	} else if (origin instanceof MouseEvent) {
+		// Place the dialog at the bottom right of the mouse pointer, like
+		// regular context menus
+		min_left = Math.max(origin.clientX, edge_offset)
+		min_top = Math.max(origin.clientY, edge_offset)
+	}

 	// Place the window
 	dialog.style.left = Math.round(Math.min(min_left, max_left)) + "px"
@@ -35,6 +43,7 @@ export const close = () => {
 // the dialog itself then the click was on the dialog background
 const click = (e: MouseEvent) => {
 	if (e.target === dialog) {
+		e.preventDefault()
 		dialog.close()
 	}
 }
@@ -42,7 +51,7 @@ const click = (e: MouseEvent) => {

 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<dialog bind:this={dialog} onclick={click}>
+<dialog bind:this={dialog} onclick={click} oncontextmenu={click}>
 	{@render children?.()}
 </dialog>

--- a/svelte/src/layout/ToggleButton.svelte
+++ b/svelte/src/layout/ToggleButton.svelte
@@ -6,6 +6,7 @@ let {
 	group_first = false,
 	group_middle = false,
 	group_last = false,
+	highlight = true,
 	action,
 	children,
 }: {
@@ -15,6 +16,7 @@ let {
 	group_first?: boolean;
 	group_middle?: boolean;
 	group_last?: boolean;
+	highlight?: boolean;
 	action?: (e: MouseEvent) => void;
 	children?: import('svelte').Snippet;
 } = $props();
@@ -31,7 +33,7 @@ const click = (e: MouseEvent) => {
 	onclick={click}
 	type="button"
 	class="button"
-	class:button_highlight={on}
+	class:button_highlight={on && highlight}
 	class:group_first
 	class:group_middle
 	class:group_last
--- a/svelte/src/lib/HighlightCurrentPage.ts
+++ b/svelte/src/lib/HighlightCurrentPage.ts
@@ -1,5 +1,5 @@
 import { global_navigator } from "filesystem/FSNavigator"
-import { current_page_store, type Tab } from "wrap/RouterStore"
+import { current_page_store } from "wrap/RouterStore"

 export const highlight_current_page = (node: HTMLAnchorElement) => {
 	const set_highlight = () => {
@@ -19,7 +19,7 @@ export const highlight_current_page = (node: HTMLAnchorElement) => {
 	set_highlight()

 	// Set up a listener with the page router to catch navigation events
-	const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() })
+	const unsub = current_page_store.subscribe(() => { set_highlight() })
 	const unsub2 = global_navigator.subscribe(() => { set_highlight() })
 	return {
 		destroy() {
--- a/svelte/src/user_home/dashboard/Dashboard.svelte
+++ b/svelte/src/user_home/dashboard/Dashboard.svelte
@@ -185,7 +185,7 @@ onMount(() => {
 	max-width: 100%;
 	background: var(--body_background);
 	border-radius: 8px;
-	padding: 2px;
+	border: 1px solid var(--separator);
 	text-align: initial;
 }
 .card_component {
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -135,6 +135,7 @@ these padding divs to move it 25% up */
 	border-radius: 18px 18px 8px 8px;
 	overflow: hidden;
 	text-align: left;
+	border: 1px solid var(--separator);
 }
 .header {
 	flex-grow: 0;
--- a/svelte/src/wrap/Bookmarks.svelte
+++ b/svelte/src/wrap/Bookmarks.svelte
@@ -2,6 +2,7 @@
 import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
 import { fs_encode_path } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
+import MenuEntry from "./MenuEntry.svelte";

 let { menu_collapsed }: { menu_collapsed: boolean } = $props();

@@ -13,13 +14,15 @@ const toggle_edit = () => {
 </script>

 {#if $bookmarks_store.length !== 0}
-	<div class="title">
-		<div class:hide={menu_collapsed}>Bookmarks</div>
+	<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
+		{#snippet title()}
+			<div class="title">Bookmarks</div>
 			<button onclick={() => toggle_edit()} class:button_highlight={editing}>
 				<i class="icon">edit</i>
 			</button>
-	</div>
+		{/snippet}

+		{#snippet body()}
 			{#each $bookmarks_store as bookmark}
 				<div class="row">
 					<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
@@ -33,24 +36,15 @@ const toggle_edit = () => {
 					{/if}
 				</div>
 			{/each}
-
-	<div class="title"></div>
+		{/snippet}
+	</MenuEntry>
 {/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;
 }
-.title > button {
-	flex: 0 0 auto;
-}
 .row {
 	display: flex;
 	flex-direction: row;
--- a/svelte/src/wrap/MainMenu.svelte
+++ b/svelte/src/wrap/MainMenu.svelte
@@ -12,17 +12,18 @@ 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";
+import MenuEntry from "./MenuEntry.svelte";

-let menu_collapsed = false
+let menu_collapsed: boolean = $state(false)

 const toggle_menu = (e: MouseEvent) => {
 	menu_collapsed = !menu_collapsed
 }

-onMount(async () => {
+onMount(() => {
 	menu_collapsed = document.documentElement.clientWidth < 1000

-	await loading_run(async () => {
+	loading_run(async () => {
 		const user = await get_user()
 		if (user.username === undefined || user.username === "") {
 			return
@@ -49,12 +50,12 @@ onMount(async () => {
 			{#if $user.username !== undefined && $user.username !== ""}
 				<div class="separator" class:hide={menu_collapsed}></div>

-				<div class="username" class:hide={menu_collapsed}>
-					{$user.username}
-				</div>
-
-				<div class="separator"></div>
+				<MenuEntry id="subscription_info" collapsed={menu_collapsed}>
+					{#snippet title()}
+						<div class="username">{$user.username}</div>
+					{/snippet}

+					{#snippet body()}
 						<div class="stats_table" class:hide={menu_collapsed}>
 							<div>Subscription</div>
 							<div>{$user.subscription.name}</div>
@@ -69,8 +70,8 @@ onMount(async () => {
 							<div>Transfer used</div>
 							<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
 						</div>
-
-				<div class="separator" class:hide={menu_collapsed}></div>
+					{/snippet}
+				</MenuEntry>

 				<a class="button" href="/d/me" use:highlight_current_page>
 					<i class="icon">folder</i>
@@ -111,10 +112,7 @@ onMount(async () => {
 			<div class="separator"></div>

 			<Bookmarks menu_collapsed={menu_collapsed}/>
-
-			{#if !menu_collapsed}
-				<Tree/>
-			{/if}
+			<Tree menu_collapsed={menu_collapsed}/>
 		</nav>
 	</div>
 </div>
@@ -176,17 +174,17 @@ onMount(async () => {
 	overflow-x: hidden;
 	max-width: 100%;
 }
+.username {
+	flex: 1 1 auto;
+	text-align: center;
+	margin: 3px;
+}

 .separator {
 	height: 1px;
-	margin: 2px 0;
 	width: 100%;
 	background-color: var(--separator);
 }
-.username {
-	text-align: center;
-	margin: 3px;
-}
 .stats_table {
 	display: grid;
 	grid-template-columns: auto auto;
--- a/svelte/src/wrap/MenuEntry.svelte
+++ b/svelte/src/wrap/MenuEntry.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+import ToggleButton from "layout/ToggleButton.svelte";
+import { onMount } from "svelte";
+
+type Expandable = {[key: string]: boolean}
+
+let {
+	id,
+	collapsed = false,
+	title,
+	body,
+}: {
+	id: string
+	collapsed: boolean
+	title: import('svelte').Snippet
+	body: import('svelte').Snippet
+} = $props();
+
+let expanded: boolean = $state(true)
+
+const get_status = (): Expandable => {
+	let exp = localStorage.getItem("menu_expanded")
+	if (exp === null) {
+		exp = "{}"
+	}
+
+	return JSON.parse(exp) as Expandable
+}
+
+onMount(() => {
+	let exp = get_status()
+	if (exp[id] !== undefined) {
+		expanded = exp[id]
+	}
+})
+
+const toggle = (e: MouseEvent) => {
+	let exp = get_status()
+
+	exp[id] = expanded
+
+	localStorage.setItem("menu_expanded", JSON.stringify(exp))
+}
+</script>
+
+<div class="title">
+	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false}/>
+
+	{#if !collapsed}
+		{@render title()}
+	{/if}
+</div>
+
+{#if expanded}
+	{@render body()}
+
+	<div class="separator"></div>
+{/if}
+
+
+<style>
+.title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	border-bottom: 1px solid var(--separator);
+}
+.separator {
+	height: 1px;
+	width: 100%;
+	background-color: var(--separator);
+}
+</style>
--- a/svelte/src/wrap/Router.svelte
+++ b/svelte/src/wrap/Router.svelte
@@ -63,7 +63,11 @@ onMount(async () => {
 let current_page: Tab = $state(null)

 const load_page = (pathname: string, history: boolean): boolean => {
-	console.debug("Navigating to page", pathname, "log history:", history)
+	console.debug(
+		"Page router: Navigating to page", pathname,
+		"current path", window.location.pathname,
+		"log history:", history,
+	)

 	const path_decoded = decodeURIComponent(pathname)
 	let page_by_path: Tab = null
--- a/svelte/src/wrap/Tree.svelte
+++ b/svelte/src/wrap/Tree.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
 import { global_navigator } from "filesystem/FSNavigator";
-import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte";
+import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
+import { highlight_current_page } from "lib/HighlightCurrentPage";
 import { onMount } from "svelte";
+import MenuEntry from "./MenuEntry.svelte";

+let { menu_collapsed }: { menu_collapsed: boolean } = $props();
 let siblings: FSNode[] = $state([])

 onMount(() => {
@@ -12,69 +15,55 @@ onMount(() => {
 })
 </script>

-{#if $global_navigator.path.length > 1}
-	<div class="title">
-		<div>Parent directories</div>
+<MenuEntry id="tree_parents" collapsed={menu_collapsed}>
+	{#snippet title()}
+		<div class="title">Parent directories</div>
 		<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
 			<i class="icon">north</i>
 		</button>
-	</div>
+	{/snippet}

-	{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node}
+	{#snippet body()}
+		{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
 			{#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 class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
+						<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
+						<span class:hide={menu_collapsed}>{node.name}</span>
 					</a>
 				</div>
 			{/if}
 		{/each}
+	{/snippet}
+</MenuEntry>

-	<div class="title"></div>
-{/if}
-
-{#if siblings.length !== 0}
-	<div class="title">
+<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
+	{#snippet title()}
+		<div class="title">Siblings</div>
 	<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>
+	{/snippet}

-	{#each siblings as node}
+	{#snippet body()}
+		{#each siblings as node (node.id)}
 			{#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 class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
+						<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
+						<span class:hide={menu_collapsed}>{node.name}</span>
 					</a>
 				</div>
 			{/if}
 		{/each}
-
-	<div class="title"></div>
-{/if}
+	{/snippet}
+</MenuEntry>

 <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;
@@ -95,4 +84,12 @@ onMount(() => {
 	background: none;
 	box-shadow: none;
 }
+.thumbnail {
+	height: 1.5em;
+	width: 1.5em;
+	border-radius: 2px;
+}
+.hide {
+	display: none;
+}
 </style>
--- a/svelte/vite.config.ts
+++ b/svelte/vite.config.ts
@@ -21,6 +21,7 @@ export default defineConfig({
 		outDir: builddir,
 		emptyOutDir: true,
 		minify: production,
+		sourcemap: !production,
 		lib: {
 			entry: "src/wrap.js",
 			name: "fnx_web",
Author	SHA1	Message	Date
Wim Brand	38566389db	Remove thick borders on admin panel	2026-02-12 20:03:23 +01:00
Wim Brand	cc417535fa	Add some borders. Fix style override when switching pages	2026-02-12 20:00:43 +01:00
Wim Brand	ec1c8b0f5b	Create comonent for collapsing menu entries	2026-02-12 19:42:23 +01:00
Wim Brand	6a19b5bc18	Remove username margin	2026-01-30 17:21:46 +01:00
Wim Brand	f487b8cd03	Reduce icon size in menu	2026-01-30 17:17:03 +01:00
Wim Brand	d3d26c6ae1	Rebounce navigation events	2026-01-30 12:26:36 +01:00