diff --git a/docker/frontend/src/Library.tsx b/docker/frontend/src/Library.tsx index 4b14855..3bba480 100644 --- a/docker/frontend/src/Library.tsx +++ b/docker/frontend/src/Library.tsx @@ -228,6 +228,7 @@ export function Library() { // one more folder; `root` means it landed on a row at the top level — the head // of a tree — which also carries folding the whole tree. const [menu, setMenu] = useState<{ folder: LibraryFolder | null; root?: boolean; rel?: string; node?: string; x: number; y: number } | null>(null); + const [photoMenu, setPhotoMenu] = useState<{ photo: LibraryPhoto; x: number; y: number } | null>(null); // A reading of this roll that is still waiting its turn. The menu is where // that wait is called off, so it has to know one exists. const queued = menu?.folder ? scanQueue().some((j) => j.folder === menu.folder!.name) : false; @@ -574,13 +575,17 @@ export function Library() { // behind a full-screen scrim: a scrim would eat the click that opens the next // folder, which is half of how this screen is used. useEffect(() => { - if (!menu) return; + if (!menu && !photoMenu) return; const away = (e: Event) => { if (e.target instanceof Element && e.target.closest('.lib-menu')) return; setMenu(null); + setPhotoMenu(null); }; const key = (e: KeyboardEvent) => { - if (e.key === 'Escape') setMenu(null); + if (e.key === 'Escape') { + setMenu(null); + setPhotoMenu(null); + } }; document.addEventListener('pointerdown', away); document.addEventListener('keydown', key); @@ -588,7 +593,7 @@ export function Library() { document.removeEventListener('pointerdown', away); document.removeEventListener('keydown', key); }; - }, [menu]); + }, [menu, photoMenu]); // A reading asked for here is a request, not a reading: one walk runs at a time, // and a folder asked for while another is being read waits its turn — which is @@ -1517,7 +1522,19 @@ export function Library() {