From e97b7282ffb11bd628a26e43d72b9eab2c133ba8 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Thu, 11 Jun 2026 16:04:11 +0300
Subject: [PATCH] fix(frontend): make Escape dismiss overlays before clearing
 selection

Escape now peels one layer at a time on the files page: an open tag
editor, pool picker, or delete confirm closes first, and only a second
Escape drops the multi-select. Selection-exit handling moves out of
SelectionBar into a single window handler on the page so precedence is
deterministic rather than dependent on window-listener fire order.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/lib/components/layout/SelectionBar.svelte  |  6 ------
 frontend/src/routes/files/+page.svelte             | 14 ++++++++++++++
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/layout/SelectionBar.svelte b/frontend/src/lib/components/layout/SelectionBar.svelte
index a47b181..f760109 100644
--- a/frontend/src/lib/components/layout/SelectionBar.svelte
+++ b/frontend/src/lib/components/layout/SelectionBar.svelte
@@ -8,14 +8,8 @@
 	}
 
 	let { onEditTags, onAddToPool, onDelete }: Props = $props();
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') selectionStore.exit();
-	}
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
 <div class="bar" role="toolbar" aria-label="Selection actions">
 	<div class="row">
 		<!-- Count / deselect all -->
diff --git a/frontend/src/routes/files/+page.svelte b/frontend/src/routes/files/+page.svelte
index 0698679..646d3f5 100644
--- a/frontend/src/routes/files/+page.svelte
+++ b/frontend/src/routes/files/+page.svelte
@@ -27,6 +27,18 @@
 	// ---- Bulk tag editor ----
 	let tagEditorOpen = $state(false);
 
+	// Escape dismisses one layer at a time: an open overlay (tag editor / pool
+	// picker / delete confirm) first, then the selection. The file viewer owns
+	// its own Escape, so we bail out while it's up.
+	function handleEscape(e: KeyboardEvent) {
+		if (e.key !== 'Escape') return;
+		if (tagEditorOpen) tagEditorOpen = false;
+		else if (poolPickerOpen) poolPickerOpen = false;
+		else if (confirmDeleteFiles) confirmDeleteFiles = false;
+		else if (activeFileId) return;
+		else if ($selectionActive) selectionStore.exit();
+	}
+
 	// ---- Add to pool picker ----
 	let poolPickerOpen = $state(false);
 	let pools = $state<Pool[]>([]);
@@ -455,6 +467,8 @@
 	});
 </script>
 
+<svelte:window onkeydown={handleEscape} />
+
 <svelte:head>
 	<title>Files | Tanabata</title>
 </svelte:head>