From c9b7f0701bdab3293a0931fda896e7f7d62375ed Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Wed, 17 Jun 2026 17:15:12 +0300
Subject: [PATCH] feat(frontend): keyboard control for the add-to-pool dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The file viewer could only open the pool picker via its top-right button —
there was no `p` shortcut there (only the grid had one), so pressing `p`
on the view page did nothing. Add `p` to open the picker from the viewer,
and give the picker itself full keyboard control: `/` focuses the search
box, arrows move a highlight through the pool list, Enter adds to the
highlighted pool, and Escape clears the search first, then closes.

Both the viewer and the grid now yield the keyboard entirely to the open
picker (the picker owns Escape via its own window handler) so the
clear-then-close behaviour isn't pre-empted by the host's own Escape.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/lib/components/file/FileViewer.svelte | 21 +++---
 .../src/lib/components/file/PoolPicker.svelte | 75 ++++++++++++++++++-
 frontend/src/routes/files/+page.svelte        |  2 +-
 3 files changed, 83 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/file/FileViewer.svelte b/frontend/src/lib/components/file/FileViewer.svelte
index 417d86a..3ac5cd5 100644
--- a/frontend/src/lib/components/file/FileViewer.svelte
+++ b/frontend/src/lib/components/file/FileViewer.svelte
@@ -237,17 +237,11 @@
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
-		// While the pool picker is open it owns the keyboard: Escape closes it
-		// (even from its search field), and every other key is swallowed so the
-		// viewer's shortcuts don't fire behind the modal. Typing still works —
-		// non-Escape keys aren't prevented, only ignored here.
-		if (poolPickerOpen) {
-			if (e.key === 'Escape') {
-				e.preventDefault();
-				poolPickerOpen = false;
-			}
-			return;
-		}
+		// While the pool picker is open it owns the keyboard entirely (its own
+		// window handler drives search focus, arrow navigation, Enter to add, and
+		// Escape to clear-then-close). Yield so the viewer's shortcuts don't fire
+		// behind the modal and don't race the picker for Escape.
+		if (poolPickerOpen) return;
 		if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
 		if (e.ctrlKey || e.metaKey || e.altKey) return;
 		// Letter keys are matched by physical position (e.code) so j/k/e work on any
@@ -259,6 +253,11 @@
 		} else if (e.code === 'KeyE') {
 			e.preventDefault();
 			jumpToTags();
+		} else if (e.code === 'KeyP') {
+			if (file) {
+				e.preventDefault();
+				poolPickerOpen = true;
+			}
 		} else if (e.key === 'Escape') {
 			onClose();
 		}
diff --git a/frontend/src/lib/components/file/PoolPicker.svelte b/frontend/src/lib/components/file/PoolPicker.svelte
index 0068653..973bb9c 100644
--- a/frontend/src/lib/components/file/PoolPicker.svelte
+++ b/frontend/src/lib/components/file/PoolPicker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { api } from '$lib/api/client';
+	import { tick } from 'svelte';
 	import type { Pool, PoolOffsetPage } from '$lib/api/types';
 
 	interface Props {
@@ -19,6 +20,10 @@
 	let addError = $state('');
 	let search = $state('');
 	let busy = $state(false);
+	// Index of the keyboard-highlighted pool within `filtered`.
+	let highlight = $state(0);
+	let searchEl = $state<HTMLInputElement | null>(null);
+	let listEl = $state<HTMLUListElement | null>(null);
 
 	$effect(() => {
 		void load();
@@ -43,6 +48,58 @@
 			: pools
 	);
 
+	// Snap the highlight back to the top whenever the result set changes.
+	$effect(() => {
+		filtered;
+		highlight = 0;
+	});
+
+	function moveHighlight(delta: number) {
+		const n = filtered.length;
+		if (n === 0) return;
+		highlight = Math.min(n - 1, Math.max(0, highlight + delta));
+		void tick().then(() =>
+			listEl?.querySelector('.picker-item.highlighted')?.scrollIntoView({ block: 'nearest' })
+		);
+	}
+
+	// Keyboard control for the open picker: arrows move the highlight, Enter adds
+	// to the highlighted pool, "/" jumps to the search box, and Escape clears the
+	// search first, then closes.
+	function onKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'Escape':
+				e.preventDefault();
+				if (search) search = '';
+				else onClose();
+				return;
+			case '/':
+				// Don't steal "/" while typing in the box — let it filter literally.
+				if (document.activeElement !== searchEl) {
+					e.preventDefault();
+					searchEl?.focus();
+					searchEl?.select();
+				}
+				return;
+			case 'ArrowDown':
+				e.preventDefault();
+				moveHighlight(1);
+				return;
+			case 'ArrowUp':
+				e.preventDefault();
+				moveHighlight(-1);
+				return;
+			case 'Enter': {
+				const pool = filtered[highlight];
+				if (pool?.id) {
+					e.preventDefault();
+					void add(pool.id);
+				}
+				return;
+			}
+		}
+	}
+
 	async function add(poolId: string) {
 		if (busy) return;
 		busy = true;
@@ -60,6 +117,8 @@
 	let count = $derived(fileIds.length);
 </script>
 
+<svelte:window onkeydown={onKeydown} />
+
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div class="picker-backdrop" role="presentation" onclick={onClose}></div>
 <div class="picker-sheet" class:busy role="dialog" aria-label="Add to pool">
@@ -83,6 +142,7 @@
 			type="search"
 			placeholder="Search pools…"
 			bind:value={search}
+			bind:this={searchEl}
 			autocomplete="off"
 		/>
 	</div>
@@ -98,10 +158,15 @@
 		{#if filtered.length === 0}
 			<p class="picker-empty">No pools found.</p>
 		{:else}
-			<ul class="picker-list">
-				{#each filtered as pool (pool.id)}
+			<ul class="picker-list" bind:this={listEl}>
+				{#each filtered as pool, i (pool.id)}
 					<li>
-						<button class="picker-item" onclick={() => pool.id && add(pool.id)}>
+						<button
+							class="picker-item"
+							class:highlighted={i === highlight}
+							onmouseenter={() => (highlight = i)}
+							onclick={() => pool.id && add(pool.id)}
+						>
 							<span class="picker-item-name">{pool.name}</span>
 							<span class="picker-item-count">{pool.file_count ?? 0} files</span>
 						</button>
@@ -226,6 +291,10 @@
 		background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
 	}
 
+	.picker-item.highlighted {
+		background-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
+	}
+
 	.picker-item-name {
 		flex: 1;
 		font-size: 0.95rem;
diff --git a/frontend/src/routes/files/+page.svelte b/frontend/src/routes/files/+page.svelte
index 89c2b3e..c715655 100644
--- a/frontend/src/routes/files/+page.svelte
+++ b/frontend/src/routes/files/+page.svelte
@@ -148,7 +148,7 @@
 	function handleKey(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			if (tagEditorOpen) tagEditorOpen = false;
-			else if (poolPickerOpen) poolPickerOpen = false;
+			else if (poolPickerOpen) return; // PoolPicker owns Escape (clear search, then close)
 			else if (confirmDeleteFiles) confirmDeleteFiles = false;
 			else if (activeFileId) return;
 			else if ($selectionActive) selectionStore.exit();