[frontend] contentmenu tweaks

Author: velzie

frontend/src/components/Menu.tsx

@@ -6,9 +6,12 @@ export const Menu: Component<{
 	y: number;
 	items: { label: string; action?: () => void }[];
 }> = function (cx) {
-	const close = () => {
+	const close = (e: MouseEvent) => {
 		cx.root.remove();
 		browser.unfocusframes = false;
+
+		e.stopImmediatePropagation();
+		e.preventDefault();
 	};
 
 	cx.mount = () => {
@@ -20,8 +23,11 @@ export const Menu: Component<{
 		if (this.x > maxX) this.x = maxX;
 		if (this.y > maxY) this.y = maxY;
 
-		document.body.addEventListener("click", close, { once: true });
-		document.body.addEventListener("contextmenu", close, { once: true });
+		window.addEventListener("click", close, { once: true, capture: true });
+		window.addEventListener("contextmenu", close, {
+			once: true,
+			capture: true,
+		});
 
 		cx.root.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -33,7 +39,7 @@ export const Menu: Component<{
 				<button
 					on:click={(e: MouseEvent) => {
 						item.action?.();
-						close();
+						close(e);
 						e.stopPropagation();
 					}}
 				>

frontend/src/components/TabStrip.tsx

@@ -117,6 +117,10 @@ export const DragTab: Component<
 							e.stopPropagation();
 							this.destroy();
 						}}
+						on:contextmenu={(e: MouseEvent) => {
+							e.preventDefault();
+							e.stopPropagation();
+						}}
 					>
 						<Icon icon={iconClose} />
 					</button>
@@ -209,6 +213,10 @@ DragTab.style = css`
 		padding: 0;
 		margin-left: 8px;
 	}
+	.close:hover {
+		background: grey;
+		border-radius: 0.5em;
+	}
 
 	.main:not(.active):hover {
 		transition: background 250ms;
@@ -475,7 +483,14 @@ export const Tabs: Component<
 					tabcache
 				)
 			)}
-			<div class="extra after" this={use(this.afterEl)}>
+			<div
+				class="extra after"
+				this={use(this.afterEl)}
+				on:contextmenu={(e: MouseEvent) => {
+					e.preventDefault();
+					e.stopPropagation();
+				}}
+			>
 				<IconButton icon={iconAdd} click={this.addTab}></IconButton>
 			</div>
 			<div class="extra right" this={use(this.rightEl)}></div>