Add context menu to breadcrumbs

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;

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

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

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,10 +64,12 @@ const delete_node = async () => {
 		{/if}
 		{#if $nav.permissions.write}
 			<Button click={() => {dialog.close(); delete_node()}} icon="delete" label="Delete"/>
+			{#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>