tab context menu and shortcuts

website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
+	import Shortcut from '$lib/components/Shortcut.svelte';
 	import { Trash2 } from 'lucide-svelte';
 
 	import { _ } from 'svelte-i18n';
@@ -15,8 +16,11 @@
 				class="w-full px-2 py-1 h-6 justify-start"
 				variant="ghost"
 				on:click={() => element.dispatchEvent(new CustomEvent('delete'))}
-				><Trash2 size="16" class="mr-1" /> {$_('menu.delete')}</Button
 			>
+				<Trash2 size="16" class="mr-1" />
+				{$_('menu.delete')}
+				<Shortcut key="" shift={true} click={true} />
+			</Button>
 		</Card.Content>
 	</Card.Root>
 </div>

website/src/lib/components/toolbar/tools/routing/RoutingControls.ts

@@ -130,13 +130,19 @@ export class RoutingControls {
         });
         marker.on('dragend', this.moveAnchor.bind(this));
         marker.getElement().addEventListener('click', (e) => {
+            e.stopPropagation();
+
             if (Date.now() - lastDragEvent < 100) { // Prevent click event during drag
                 return;
             }
 
+            if (e.shiftKey) {
+                this.deleteAnchor(anchor);
+                return;
+            }
+
             marker.setPopup(this.popup);
             marker.togglePopup();
-            e.stopPropagation();
 
             let deleteThisAnchor = this.getDeleteAnchor(anchor);
             this.popupElement.addEventListener('delete', deleteThisAnchor); // Register the delete event for this anchor