From f58a29fa1c45bf5fed444e530d8a30cac632adfb Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 25 Oct 2024 14:13:57 +0200
Subject: [PATCH] added context menu to the whole hard

---
 .../src/lib/pr/StackingPullRequestCard.svelte | 138 +++++++++---------
 .../src/lib/shared/DropDownButton.svelte      |   7 +
 2 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/apps/desktop/src/lib/pr/StackingPullRequestCard.svelte b/apps/desktop/src/lib/pr/StackingPullRequestCard.svelte
index 4107ddf78..8c5c90b18 100644
--- a/apps/desktop/src/lib/pr/StackingPullRequestCard.svelte
+++ b/apps/desktop/src/lib/pr/StackingPullRequestCard.svelte
@@ -31,10 +31,8 @@
 		messageStyle?: MessageStyle;
 	};
 
-	let checksContextMenuEl = $state<ReturnType<typeof ContextMenu>>();
-	let prContextMenuEl = $state<ReturnType<typeof ContextMenu>>();
-	let checksContextMenuTarget = $state<HTMLElement>();
-	let prContextMenuTarget = $state<HTMLElement>();
+	let contextMenuEl = $state<ReturnType<typeof ContextMenu>>();
+	let contextMenuTarget = $state<HTMLElement>();
 
 	const vbranchService = getContext(VirtualBranchService);
 	const baseBranchService = getContext(BaseBranchService);
@@ -122,7 +120,52 @@
 </script>
 
 {#if $pr}
-	<div class="pr-header">
+	<ContextMenu bind:this={contextMenuEl} target={contextMenuTarget} openByMouse>
+		<ContextMenuSection>
+			<ContextMenuItem
+				label="Open PR in browser"
+				onclick={() => {
+					openExternalUrl($pr.htmlUrl);
+					contextMenuEl?.close();
+				}}
+			/>
+			<ContextMenuItem
+				label="Copy PR link"
+				onclick={() => {
+					copyToClipboard($pr.htmlUrl);
+					contextMenuEl?.close();
+				}}
+			/>
+		</ContextMenuSection>
+		{#if checksTagInfo && checksTagInfo.text !== 'No PR checks' && checksTagInfo.text === 'Checks'}
+			<ContextMenuSection>
+				<ContextMenuItem
+					label="Open checks"
+					onclick={() => {
+						openExternalUrl(`${$pr.htmlUrl}/checks`);
+						contextMenuEl?.close();
+					}}
+				/>
+				<ContextMenuItem
+					label="Copy checks"
+					onclick={() => {
+						copyToClipboard(`${$pr.htmlUrl}/checks`);
+						contextMenuEl?.close();
+					}}
+				/>
+			</ContextMenuSection>
+		{/if}
+	</ContextMenu>
+
+	<div
+		bind:this={contextMenuTarget}
+		role="article"
+		class="pr-header"
+		oncontextmenu={(e: MouseEvent) => {
+			e.preventDefault();
+			contextMenuEl?.open(e);
+		}}
+	>
 		<div class="text-13 text-semibold pr-header-title">
 			<span style="color: var(--clr-scale-ntrl-50)">PR #{$pr?.number}:</span>
 			<span>{$pr?.title}</span>
@@ -140,72 +183,29 @@
 				{prStatusInfo.text}
 			</Button>
 			{#if !$pr?.closedAt && checksTagInfo}
-				<div bind:this={checksContextMenuTarget}>
-					<Button
-						size="tag"
-						clickable={false}
-						icon={checksTagInfo.icon}
-						style={checksTagInfo.style}
-						kind={checksTagInfo.icon === 'success-small' ? 'solid' : 'soft'}
-						oncontextmenu={(e: MouseEvent) => {
-							e.preventDefault();
-							checksContextMenuEl?.open();
-						}}
-					>
-						{checksTagInfo.text}
-					</Button>
-				</div>
-
-				<ContextMenu bind:this={checksContextMenuEl} target={checksContextMenuTarget}>
-					<ContextMenuSection>
-						<ContextMenuItem
-							label="Open checks"
-							onclick={() => {
-								openExternalUrl(`${$pr.htmlUrl}/checks`);
-								checksContextMenuEl?.close();
-							}}
-						/>
-						<ContextMenuItem
-							label="Copy Checks"
-							onclick={() => {
-								copyToClipboard(`${$pr.htmlUrl}/checks`);
-								checksContextMenuEl?.close();
-							}}
-						/>
-					</ContextMenuSection>
-				</ContextMenu>
+				<Button
+					size="tag"
+					clickable={false}
+					icon={checksTagInfo.icon}
+					style={checksTagInfo.style}
+					kind={checksTagInfo.icon === 'success-small' ? 'solid' : 'soft'}
+				>
+					{checksTagInfo.text}
+				</Button>
 			{/if}
 			{#if $pr?.htmlUrl}
-				<div bind:this={prContextMenuTarget}>
-					<Button
-						icon="open-link"
-						size="tag"
-						style="ghost"
-						outline
-						tooltip="Open in browser"
-						onclick={() => {
-							openExternalUrl($pr.htmlUrl);
-						}}
-						oncontextmenu={(e: MouseEvent) => {
-							e.preventDefault();
-							prContextMenuEl?.open();
-						}}
-					>
-						View PR
-					</Button>
-				</div>
-
-				<ContextMenu bind:this={prContextMenuEl} target={prContextMenuTarget}>
-					<ContextMenuSection>
-						<ContextMenuItem
-							label="Copy PR Link"
-							onclick={() => {
-								copyToClipboard($pr.htmlUrl);
-								prContextMenuEl?.close();
-							}}
-						/>
-					</ContextMenuSection>
-				</ContextMenu>
+				<Button
+					icon="open-link"
+					size="tag"
+					style="ghost"
+					outline
+					tooltip="Open in browser"
+					onclick={() => {
+						openExternalUrl($pr.htmlUrl);
+					}}
+				>
+					View PR
+				</Button>
 			{/if}
 		</div>
 
diff --git a/apps/desktop/src/lib/shared/DropDownButton.svelte b/apps/desktop/src/lib/shared/DropDownButton.svelte
index a53b95805..998faebbf 100644
--- a/apps/desktop/src/lib/shared/DropDownButton.svelte
+++ b/apps/desktop/src/lib/shared/DropDownButton.svelte
@@ -42,6 +42,11 @@
 	let iconEl = $state<HTMLElement>();
 	let visible = $state(false);
 
+	function preventContextMenu(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+	}
+
 	export function show() {
 		visible = true;
 		contextMenu?.open();
@@ -66,6 +71,7 @@
 				disabled={disabled || loading}
 				dropdownChild
 				{onclick}
+				oncontextmenu={preventContextMenu}
 			>
 				{@render children()}
 			</Button>
@@ -82,6 +88,7 @@
 					visible = !visible;
 					contextMenu?.toggle();
 				}}
+				oncontextmenu={preventContextMenu}
 			/>
 		</div>
 		<ContextMenu