fix: guard menus while dialogs are active

scripts/menuModalGuards.test.ts

@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+
+const viewer = readFileSync(new URL('../src/lib/MarkdownViewer.svelte', import.meta.url), 'utf8');
+const titleBar = readFileSync(new URL('../src/lib/components/TitleBar.svelte', import.meta.url), 'utf8');
+const modal = readFileSync(new URL('../src/lib/components/Modal.svelte', import.meta.url), 'utf8');
+
+test('document context menus do not open while a modal is active', () => {
+	assert.match(
+		viewer,
+		/function handleContextMenu\(e: MouseEvent\) \{\n\t\tif \(modalState\.show\) return;/,
+	);
+});
+
+test('titlebar menus close before a document context menu opens', () => {
+	assert.match(titleBar, /window\.addEventListener\('contextmenu', handleGlobalDismiss\)/);
+	assert.match(titleBar, /window\.addEventListener\('blur', handleGlobalDismiss\)/);
+});
+
+test('modal backdrop consumes context-menu events', () => {
+	assert.match(modal, /oncontextmenu=\{\(e\) => \{ e\.preventDefault\(\); e\.stopPropagation\(\); \}\}/);
+});

src/lib/MarkdownViewer.svelte

@@ -2093,6 +2093,7 @@ import { t } from './utils/i18n.js';
 	}
 
 	function handleContextMenu(e: MouseEvent) {
+		if (modalState.show) return;
 		if (mode !== 'app') return;
 		e.preventDefault();
 

src/lib/components/Modal.svelte

@@ -97,7 +97,12 @@
 </script>
 
 {#if show}
-	<div class="modal-backdrop" transition:fade={{ duration: 150 }} onclick={handleBackdropClick} role="presentation">
+	<div
+		class="modal-backdrop"
+		transition:fade={{ duration: 150 }}
+		onclick={handleBackdropClick}
+		oncontextmenu={(e) => { e.preventDefault(); e.stopPropagation(); }}
+		role="presentation">
 		<div
 			class="modal-content {kind}"
 			bind:this={modalContent}

src/lib/components/TitleBar.svelte

@@ -275,17 +275,22 @@
 		themeMenuOpen = false;
 	}
 
+	function handleGlobalDismiss() {
+		themeMenuOpen = false;
+		kebabMenuOpen = false;
+		homeMenuOpen = false;
+	}
+
 	$effect(() => {
-		const handleGlobalClick = () => {
-			themeMenuOpen = false;
-			kebabMenuOpen = false;
-			homeMenuOpen = false;
-		};
 		if (themeMenuOpen || kebabMenuOpen || homeMenuOpen) {
-			window.addEventListener('click', handleGlobalClick);
+			window.addEventListener('click', handleGlobalDismiss);
+			window.addEventListener('contextmenu', handleGlobalDismiss);
+			window.addEventListener('blur', handleGlobalDismiss);
 		}
 		return () => {
-			window.removeEventListener('click', handleGlobalClick);
+			window.removeEventListener('click', handleGlobalDismiss);
+			window.removeEventListener('contextmenu', handleGlobalDismiss);
+			window.removeEventListener('blur', handleGlobalDismiss);
 		};
 	});
 </script>