add contextmenu actions to edit menu

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -35,7 +35,15 @@
 	} from './Selection';
 	import { getContext } from 'svelte';
 	import { get } from 'svelte/store';
-	import { gpxLayers, hideSelection, map, showSelection } from '$lib/stores';
+	import {
+		anyHidden,
+		editMetadata,
+		editStyle,
+		gpxLayers,
+		hideSelection,
+		map,
+		showSelection
+	} from '$lib/stores';
 	import {
 		GPXTreeElement,
 		Track,
@@ -54,7 +62,6 @@
 		| Readonly<Waypoint>;
 	export let item: ListItem;
 	export let label: string | undefined;
-	let hidden = false;
 
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
@@ -62,9 +69,6 @@
 
 	$: singleSelection = $selection.size === 1;
 
-	let openEditMetadata: boolean = false;
-	let openEditStyle: boolean = false;
-
 	let nodeColors: string[] = [];
 
 	$: if (node && $map) {
@@ -98,6 +102,15 @@
 			}
 		}
 	}
+
+	let openEditMetadata: boolean = false;
+	let openEditStyle: boolean = false;
+
+	$: openEditMetadata = $editMetadata && singleSelection && $selection.has(item);
+	$: openEditStyle =
+		$editStyle &&
+		$selection.has(item) &&
+		$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -108,10 +121,6 @@
 			if (!get(selection).has(item)) {
 				selectItem(item);
 			}
-			let layer = gpxLayers.get(item.getFileId());
-			if (layer) {
-				hidden = layer.hidden;
-			}
 		}
 	}}
 >
@@ -185,25 +194,25 @@
 	</ContextMenu.Trigger>
 	<ContextMenu.Content>
 		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
-			<ContextMenu.Item disabled={!singleSelection} on:click={() => (openEditMetadata = true)}>
+			<ContextMenu.Item disabled={!singleSelection} on:click={() => ($editMetadata = true)}>
 				<Info size="16" class="mr-1" />
 				{$_('menu.metadata.button')}
 			</ContextMenu.Item>
-			<ContextMenu.Item on:click={() => (openEditStyle = true)}>
+			<ContextMenu.Item on:click={() => ($editStyle = true)}>
 				<PaintBucket size="16" class="mr-1" />
 				{$_('menu.style.button')}
 			</ContextMenu.Item>
 			{#if item instanceof ListFileItem}
 				<ContextMenu.Item
 					on:click={() => {
-						if (hidden) {
+						if ($anyHidden) {
 							showSelection();
 						} else {
 							hideSelection();
 						}
 					}}
 				>
-					{#if hidden}
+					{#if $anyHidden}
 						<Eye size="16" class="mr-1" />
 						{$_('menu.unhide')}
 					{:else}
@@ -252,14 +261,12 @@
 				<ContextMenu.Separator />
 			{/if}
 		{/if}
-		{#if $verticalFileView || item.level !== ListLevel.WAYPOINTS}
-			{#if item.level !== ListLevel.WAYPOINTS}
-				<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
-					<Copy size="16" class="mr-1" />
-					{$_('menu.duplicate')}
-					<Shortcut key="D" ctrl={true} /></ContextMenu.Item
-				>
-			{/if}
+		{#if $verticalFileView}
+			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
+				<Copy size="16" class="mr-1" />
+				{$_('menu.duplicate')}
+				<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+			>
 			{#if $verticalFileView}
 				<ContextMenu.Item on:click={copySelection}>
 					<ClipboardCopy size="16" class="mr-1" />

website/src/lib/components/file-list/MetadataDialog.svelte

@@ -9,6 +9,7 @@
 	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
 	import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
 	import { _ } from 'svelte-i18n';
+	import { editMetadata } from '$lib/stores';
 
 	export let node:
 		| GPXTreeElement<AnyGPXTreeElement>
@@ -29,6 +30,10 @@
 			: node instanceof Track
 				? node.desc ?? ''
 				: '';
+
+	$: if (!open) {
+		$editMetadata = false;
+	}
 </script>
 
 <Popover.Root bind:open>

website/src/lib/components/file-list/StyleDialog.svelte

@@ -8,7 +8,7 @@
 	import { Save } from 'lucide-svelte';
 	import { ListFileItem, ListTrackItem, type ListItem } from './FileList';
 	import { selection } from './Selection';
-	import { gpxLayers } from '$lib/stores';
+	import { editStyle, gpxLayers } from '$lib/stores';
 	import { _ } from 'svelte-i18n';
 
 	export let item: ListItem;
@@ -89,6 +89,10 @@
 	$: if ($selection && open) {
 		setStyleInputs();
 	}
+
+	$: if (!open) {
+		$editStyle = false;
+	}
 </script>
 
 <Popover.Root bind:open>