From 00b432f3dc79131cce0745d59354fe2cd1240890 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Thu, 26 Feb 2026 14:47:01 +0100
Subject: [PATCH] Add context menu to breadcrumbs

---
 svelte/src/filesystem/Breadcrumbs.svelte      | 19 ++++++++++++++--
 svelte/src/filesystem/Filesystem.svelte       |  8 +++++--
 .../filesystem/filemanager/FileManager.svelte | 22 ++++++++-----------
 .../filesystem/filemanager/FileMenu.svelte    | 15 ++++++++-----
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index cbb1fd1..01cc1cc 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -2,15 +2,28 @@
 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";
 
-let { nav }: {
+let {
+	nav,
+	edit_window = null
+}: {
 	nav: FSNavigator;
+	edit_window?: EditWindow;
 } = $props();
+
+let file_menu: FileMenu = $state()
 </script>
 
 <div class="breadcrumbs" class:menu_closed={!$menu_is_open}>
 	{#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}}>
+		<a
+			href={"/d"+fs_encode_path(node.path)}
+			class="breadcrumb button flat"
+			use:path_link={{nav: nav, node: node}}
+			oncontextmenu={e => file_menu.open(node, e.target, e)}
+		>
 			{#if node.abuse_type !== undefined}
 				<i class="icon small">block</i>
 			{:else if node.is_shared()}
@@ -26,6 +39,8 @@ let { nav }: {
 	{/each}
 </div>
 
+<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
+
 <style>
 .breadcrumbs {
 	flex: 0 0 auto;
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index db7a77c..3ace60a 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -54,7 +54,11 @@ onMount(() => {
 const keydown = (e: KeyboardEvent) => {
 	if (e.ctrlKey || e.altKey || e.metaKey) {
 		return // prevent custom shortcuts from interfering with system shortcuts
-	} else if ((document.activeElement as any).type !== undefined && (document.activeElement as any).type === "text") {
+	} else if (
+		(document.activeElement as any).type !== undefined &&
+		(document.activeElement as any).type === "text" &&
+		(document.activeElement as any).type === "textarea"
+	) {
 		return // Prevent shortcuts from interfering with input fields
 	}
 
@@ -131,7 +135,7 @@ const keydown = (e: KeyboardEvent) => {
 <svelte:window onkeydown={keydown} />
 
 <div class="filesystem">
-	<Breadcrumbs nav={nav}/>
+	<Breadcrumbs nav={nav} edit_window={edit_window}/>
 
 	<div class="file_preview">
 		<FilePreview
diff --git a/svelte/src/filesystem/filemanager/FileManager.svelte b/svelte/src/filesystem/filemanager/FileManager.svelte
index a10d823..50139af 100644
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-import { run } from 'svelte/legacy';
-import { fs_delete_all, fs_rename, type FSNode } from "lib/FilesystemAPI.svelte"
+import { fs_delete_all, fs_rename } from "lib/FilesystemAPI.svelte"
 import { onMount } from "svelte"
 import CreateDirectory from "./CreateDirectory.svelte"
 import ListView from "./ListView.svelte"
@@ -225,18 +224,21 @@ const select_node = (index: number) => {
 	last_selected_node = index
 }
 
-const update = (children: FSNode[]) => {
+// When the directory is reloaded we want to keep our selection, so this
+// function watches the children array for changes and updates the selection
+// when it changes
+$effect.pre(() => {
 	creating_dir = false
 
 	// Highlight the files which were previously selected
-	for (let i = 0; i < children.length; i++) {
+	for (let i = 0; i < $nav.children.length; i++) {
 		for (let j = 0; j < moving_items.length; j++) {
-			if (moving_items[j].path === children[i].path) {
-				children[i].fm_selected = true
+			if (moving_items[j].path === $nav.children[i].path) {
+				$nav.children[i].fm_selected = true
 			}
 		}
 	}
-}
+})
 
 let moving_files = $state(0)
 let moving_directories = $state(0)
@@ -289,12 +291,6 @@ onMount(() => {
 		directory_view = "list"
 	}
 })
-// When the directory is reloaded we want to keep our selection, so this
-// function watches the children array for changes and updates the selection
-// when it changes
-run(() => {
-		update($nav.children)
-	});
 </script>
 
 <svelte:window onkeydown={keypress} onkeyup={keypress} />
diff --git a/svelte/src/filesystem/filemanager/FileMenu.svelte b/svelte/src/filesystem/filemanager/FileMenu.svelte
index 70c9f45..ad8821d 100644
--- a/svelte/src/filesystem/filemanager/FileMenu.svelte
+++ b/svelte/src/filesystem/filemanager/FileMenu.svelte
@@ -10,16 +10,19 @@ import { tick } from "svelte";
 
 let {
 	nav,
-	edit_window
+	edit_window = null
 }: {
 	nav: FSNavigator;
-	edit_window: EditWindow;
+	edit_window?: EditWindow;
 } = $props();
 
 let dialog: Dialog = $state()
 let node: FSNode = $state(null)
 
 export const open = async (n: FSNode, target: EventTarget, event: Event) => {
+	event.preventDefault()
+	event.stopPropagation()
+
 	node = n
 	// Wait for the view to update, so the dialog gets the proper measurements
 	await tick()
@@ -61,9 +64,11 @@ const delete_node = async () => {
 		{/if}
 		{#if $nav.permissions.write}
 			<Button click={() => {dialog.close(); delete_node()}} icon="delete" label="Delete"/>
-			<Button click={() => {dialog.close(); edit_window.edit(node, false, "file")}} icon="edit" label="Edit"/>
-			<Button click={() => {dialog.close(); edit_window.edit(node, false, "share")}} icon="share" label="Share"/>
-			<Button click={() => {dialog.close(); edit_window.edit(node, false, "branding")}} icon="palette" label="Branding"/>
+			{#if edit_window !== null}
+				<Button click={() => {dialog.close(); edit_window.edit(node, false, "file")}} icon="edit" label="Edit"/>
+				<Button click={() => {dialog.close(); edit_window.edit(node, false, "share")}} icon="share" label="Share"/>
+				<Button click={() => {dialog.close(); edit_window.edit(node, false, "branding")}} icon="palette" label="Branding"/>
+			{/if}
 		{/if}
 	</div>
 </Dialog>