RightClickPopover

frontend/src/lib/components/RightClickPopover.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { clickOutside } from '$lib/utils'
+	import { fly } from 'svelte/transition'
+	import Portal from './Portal.svelte'
+
+	let isOpen = $state(false)
+	let mousePos = $state({ x: 0, y: 0 })
+	export function open(e: MouseEvent) {
+		e.preventDefault()
+		isOpen = true
+		mousePos = { x: e.clientX, y: e.clientY }
+		console.log('Opening popover at', mousePos)
+	}
+	export function close() {
+		isOpen = false
+	}
+</script>
+
+<Portal>
+	{#if isOpen}
+		<div
+			transition:fly={{ x: 0, y: -10, duration: 200 }}
+			use:clickOutside={{
+				onClickOutside: (e) => {
+					isOpen = false
+					e.preventDefault()
+					e.stopPropagation()
+				}
+			}}
+			class="absolute left-0 top-0 z-[9999] w-fit"
+			style="transform: translate({mousePos.x}px, {mousePos.y}px)"
+		>
+		</div>
+	{/if}
+</Portal>

frontend/src/lib/components/runs/RunsTable.svelte

@@ -10,6 +10,7 @@
 	import './runs-grid.css'
 	import { useKeyboardModifiers } from '$lib/svelte5Utils.svelte'
 	import { twMerge } from 'tailwind-merge'
+	import RightClickPopover from '../RightClickPopover.svelte'
 
 	interface Props {
 		//import InfiniteLoading from 'svelte-infinite-loading'
@@ -40,6 +41,7 @@
 	}: Props = $props()
 
 	const keyboardModifiers = useKeyboardModifiers()
+	let rightClickPopover: RightClickPopover | undefined = $state(undefined)
 
 	function getTime(job: Job): string | undefined {
 		return job['completed_at'] ?? job['started_at'] ?? job['scheduled_for'] ?? job['created_at']
@@ -272,7 +274,15 @@
 										{jobOrDate.date}
 									</div>
 								{:else}
-									<div class="flex flex-row items-center h-full w-full select-none">
+									<!-- svelte-ignore a11y_click_events_have_key_events -->
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
+									<div
+										class="flex flex-row items-center h-full w-full select-none"
+										oncontextmenu={(e) => {
+											e.preventDefault()
+											rightClickPopover?.open(e)
+										}}
+									>
 										<RunRow
 											{containsLabel}
 											{showTag}
@@ -363,6 +373,8 @@
 	</div>
 </div>
 
+<RightClickPopover bind:this={rightClickPopover}></RightClickPopover>
+
 <style>
 	:global(.virtual-list-wrapper::-webkit-scrollbar) {
 		width: 8px !important;