Add commit context menu

Add a context menu to the commit card

apps/desktop/src/lib/commit/CommitCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import CommitContextMenu from './CommitContextMenu.svelte';
 	import CommitDragItem from './CommitDragItem.svelte';
 	import { Project } from '$lib/backend/projects';
 	import { BaseBranch } from '$lib/baseBranch/baseBranch';
@@ -51,6 +52,7 @@
 	const currentCommitMessage = persistedCommitMessage(project.id, branch?.id || '');
 
 	let draggableCommitElement: HTMLElement | null = null;
+	let contextMenu: CommitContextMenu;
 	let files: RemoteFile[] = [];
 	let showDetails = false;
 
@@ -193,6 +195,13 @@
 	{/snippet}
 </Modal>
 
+<CommitContextMenu
+	bind:this={contextMenu}
+	targetElement={draggableCommitElement}
+	{commit}
+	{commitUrl}
+/>
+
 <div
 	class="commit-row"
 	class:is-commit-open={showDetails}
@@ -226,6 +235,9 @@
 				on:keyup={onKeyup}
 				role="button"
 				tabindex="0"
+				on:contextmenu={(e) => {
+					contextMenu.open(e);
+				}}
 				on:dragenter={() => {
 					isDragTargeted = true;
 				}}

apps/desktop/src/lib/commit/CommitContextMenu.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import ContextMenu from '$lib/components/contextmenu/ContextMenu.svelte';
+	import ContextMenuItem from '$lib/components/contextmenu/ContextMenuItem.svelte';
+	import ContextMenuSection from '$lib/components/contextmenu/ContextMenuSection.svelte';
+	import { copyToClipboard } from '$lib/utils/clipboard';
+	import { openExternalUrl } from '$lib/utils/url';
+	import type { Commit, DetailedCommit } from '$lib/vbranches/types';
+
+	interface Props {
+		targetElement: HTMLElement | null;
+		commit: DetailedCommit | Commit;
+		commitUrl: string | undefined;
+	}
+
+	const { targetElement, commit, commitUrl }: Props = $props();
+
+	const target = $derived(targetElement ?? undefined);
+
+	let contextMenu = $state<ContextMenu>();
+
+	export function open(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		contextMenu?.open(e);
+	}
+
+	function copySha() {
+		copyToClipboard(commit.id);
+		contextMenu?.close();
+	}
+
+	function openInBrowser() {
+		if (commitUrl) openExternalUrl(commitUrl);
+		contextMenu?.close();
+	}
+
+	function copyCommitMessage() {
+		copyToClipboard(commit.description);
+		contextMenu?.close();
+	}
+</script>
+
+<ContextMenu bind:this={contextMenu} {target} openByMouse>
+	<ContextMenuSection>
+		<ContextMenuItem label="Copy SHA" on:click={copySha} />
+		{#if commitUrl}
+			<ContextMenuItem label="Open in browser" on:click={openInBrowser} />
+		{/if}
+		<ContextMenuItem label="Copy commit message" on:click={copyCommitMessage} />
+	</ContextMenuSection>
+</ContextMenu>