Merge branch 'fix/macos-escape-overlay-fullscreen' into 'main'

Prevent Escape from exiting fullscreen when closing overlays

See merge request ArkHost/HelixNotes!4

src/lib/components/AppLayout.svelte

@@ -578,6 +578,11 @@
 		}
 
 		if (e.key === 'Escape') {
+			const dismissesAppUi = $showSettings || $showInfo || $focusMode || $showSearch || $showCommandPalette;
+			if (!dismissesAppUi) return;
+
+			e.preventDefault();
+			e.stopPropagation();
 			if ($showSettings) $showSettings = false;
 			else if ($showInfo) $showInfo = false;
 			else if ($focusMode) $focusMode = false;

src/lib/components/CommandPalette.svelte

@@ -164,10 +164,15 @@
 		}
 	});
 
+	function handleEscape(e: KeyboardEvent) {
+		if (e.key !== 'Escape') return;
+		e.preventDefault();
+		e.stopPropagation();
+		$showCommandPalette = false;
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			$showCommandPalette = false;
-		} else if (e.key === 'ArrowDown') {
+		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, filteredCommands.length - 1);
 		} else if (e.key === 'ArrowUp') {
@@ -194,7 +199,7 @@
 
 {#if $showCommandPalette}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="palette-overlay" onclick={() => ($showCommandPalette = false)} onkeydown={handleKeydown}>
+	<div class="palette-overlay" onclick={() => ($showCommandPalette = false)} onkeydowncapture={handleEscape} onkeydown={handleKeydown}>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="palette-panel" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
 			<div class="palette-input-wrapper">

src/lib/components/InfoPanel.svelte

@@ -95,6 +95,13 @@
 		if (event.target === event.currentTarget) close();
 	}
 
+	function handleEscape(event: KeyboardEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		close();
+	}
+
 	function openLink(url: string) {
 		openUrl(url).catch(console.error);
 	}
@@ -104,7 +111,7 @@
 
 {#if $showInfo}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="info-overlay" onclick={closeFromOverlay} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
+	<div class="info-overlay" onclick={closeFromOverlay} onkeydowncapture={handleEscape} onkeydown={handleEscape}>
 		<div class="info-panel">
 			<div class="info-header">
 				<h2>Info</h2>

src/lib/components/SearchPanel.svelte

@@ -44,10 +44,15 @@
 		if (item) item.scrollIntoView({ block: 'nearest' });
 	}
 
+	function handleEscape(e: KeyboardEvent) {
+		if (e.key !== 'Escape') return;
+		e.preventDefault();
+		e.stopPropagation();
+		$showSearch = false;
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			$showSearch = false;
-		} else if (e.key === 'ArrowDown') {
+		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
 			scrollToSelected();
@@ -128,7 +133,7 @@
 
 {#if $showSearch}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="search-overlay" onclick={close} onkeydown={handleKeydown}>
+	<div class="search-overlay" onclick={close} onkeydowncapture={handleEscape} onkeydown={handleKeydown}>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="search-panel" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
 			<div class="search-input-wrapper">

src/lib/components/SettingsPanel.svelte

@@ -1068,6 +1068,15 @@
 		if (event.target === event.currentTarget) close();
 	}
 
+	function handleEscape(event: KeyboardEvent) {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (restoreConfirm) restoreConfirm = null;
+		else if (customThemeEditorOpen) cancelCustomThemeEditor();
+		else close();
+	}
+
 	function dismissRestoreConfirm(event: MouseEvent) {
 		if (event.target === event.currentTarget) restoreConfirm = null;
 	}
@@ -1148,7 +1157,7 @@
 
 {#if $showSettings}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="settings-overlay" class:mobile={isMobile} onclick={closeSettingsFromOverlay} onkeydown={(e) => { if (e.key === 'Escape') close(); }}>
+	<div class="settings-overlay" class:mobile={isMobile} onclick={closeSettingsFromOverlay} onkeydowncapture={handleEscape} onkeydown={handleEscape}>
 		<div class="settings-panel" class:mobile={isMobile} role="dialog" aria-modal="true" aria-labelledby="settings-title" tabindex="-1">
 			<div class="settings-header">
 				<h2 id="settings-title">Settings</h2>
@@ -1813,7 +1822,7 @@
 							<!-- Custom Theme Editor Modal -->
 							{#if customThemeEditorOpen && customThemeEditing}
 								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div class="custom-theme-modal-overlay" onclick={cancelCustomThemeFromOverlay} onkeydown={(e) => e.key === 'Escape' && cancelCustomThemeEditor()}>
+								<div class="custom-theme-modal-overlay" onclick={cancelCustomThemeFromOverlay} onkeydown={handleEscape}>
 									<div class="custom-theme-modal" role="dialog" aria-modal="true" aria-labelledby="custom-theme-title" tabindex="-1">
 										<div class="custom-theme-modal-header">
 											<h3 id="custom-theme-title">{customThemeEditing.id.startsWith('custom-') && $customThemes.some(c => c.id === customThemeEditing!.id) ? 'Edit Theme' : 'New Custom Theme'}</h3>
@@ -2121,7 +2130,7 @@
 
 							{#if restoreConfirm}
 								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div class="restore-confirm-overlay" onclick={dismissRestoreConfirm} onkeydown={(e) => { if (e.key === 'Escape') restoreConfirm = null; }}>
+								<div class="restore-confirm-overlay" onclick={dismissRestoreConfirm} onkeydown={handleEscape}>
 									<div class="restore-confirm" role="alertdialog" aria-modal="true" aria-labelledby="restore-confirm-title" tabindex="-1">
 										<h4 id="restore-confirm-title">Restore Backup?</h4>
 										<p>This will replace all notes in your vault with the backup from <strong>{formatBackupDate(restoreConfirm.created)}</strong>. This action cannot be undone.</p>