vertical and horizontal file list with same component

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

@@ -1,4 +1,12 @@
 <script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import Shortcut from '$lib/components/Shortcut.svelte';
+	import { dbUtils } from '$lib/db';
+	import { Copy, Trash2 } from 'lucide-svelte';
+
+	import { _ } from 'svelte-i18n';
+
 	import { getContext } from 'svelte';
 	import { type Writable } from 'svelte/store';
 
@@ -6,30 +14,56 @@
 	export let label: string | undefined;
 
 	let selected = getContext<Writable<Set<string>>>('selected');
+	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<span
-	class="w-full text-left truncate py-1"
-	on:click={(e) => {
-		e.stopPropagation(); // Avoid toggling the collapsible element
-	}}
-	on:contextmenu={(e) => {
-		if (e.ctrlKey) {
-			// Add to selection instead of opening context menu
-			e.preventDefault();
-			e.stopPropagation();
-			selected.update((value) => {
-				if (value.has(id)) {
-					value.delete(id);
-				} else {
-					value.add(id);
-				}
-				return value;
-			});
-		}
-	}}
->
-	{label}
-</span>
+<ContextMenu.Root>
+	<ContextMenu.Trigger class="grow truncate">
+		<Button
+			variant="ghost"
+			class="w-full p-0 px-1 border-none focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+			'vertical'
+				? 'h-fit'
+				: 'h-9 px-1.5 shadow-md'}"
+		>
+			<span
+				class="w-full text-left truncate py-1"
+				on:click={(e) => {
+					e.stopPropagation(); // Avoid toggling the collapsible element
+				}}
+				on:contextmenu={(e) => {
+					if (e.ctrlKey) {
+						// Add to selection instead of opening context menu
+						e.preventDefault();
+						e.stopPropagation();
+						selected.update((value) => {
+							if (value.has(id)) {
+								value.delete(id);
+							} else {
+								value.add(id);
+							}
+							return value;
+						});
+					}
+				}}
+			>
+				{label}
+			</span>
+		</Button>
+	</ContextMenu.Trigger>
+	<ContextMenu.Content>
+		<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
+			<Copy size="16" class="mr-1" />
+			{$_('menu.duplicate')}
+			<Shortcut key="D" ctrl={true} /></ContextMenu.Item
+		>
+		<ContextMenu.Separator />
+		<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
+			><Trash2 size="16" class="mr-1" />
+			{$_('menu.delete')}
+			<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item
+		>
+	</ContextMenu.Content>
+</ContextMenu.Root>