From 9f94c5a8bdb5d99f3785031178cab22296daaf5f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:41:24 +1000
Subject: [PATCH] fix(ui): staging area interaction scopes

---
 invokeai/frontend/web/src/common/hooks/interactionScopes.ts   | 2 +-
 .../components/StagingArea/StagingAreaToolbar.tsx             | 3 ++-
 .../web/src/features/gallery/hooks/useGalleryHotkeys.ts       | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/common/hooks/interactionScopes.ts b/invokeai/frontend/web/src/common/hooks/interactionScopes.ts
index 0e4aa906a4..9140b616c4 100644
--- a/invokeai/frontend/web/src/common/hooks/interactionScopes.ts
+++ b/invokeai/frontend/web/src/common/hooks/interactionScopes.ts
@@ -9,7 +9,7 @@ import { useEffect, useMemo } from 'react';
 
 const log = logger('system');
 
-const _INTERACTION_SCOPES = ['gallery', 'canvas', 'workflows', 'imageViewer'] as const;
+const _INTERACTION_SCOPES = ['gallery', 'canvas', 'stagingArea', 'workflows', 'imageViewer'] as const;
 
 type InteractionScope = (typeof _INTERACTION_SCOPES)[number];
 
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx
index 2893e66711..45e51f59fc 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonGroup, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { INTERACTION_SCOPES } from 'common/hooks/interactionScopes';
+import { INTERACTION_SCOPES, useScopeOnMount } from 'common/hooks/interactionScopes';
 import {
   $shouldShowStagedImage,
   sessionNextStagedImageSelected,
@@ -35,6 +35,7 @@ export const StagingAreaToolbar = memo(() => {
   }, [images, session.selectedStagedImageIndex]);
   const isCanvasActive = useStore(INTERACTION_SCOPES.canvas.$isActive);
   const [changeIsImageIntermediate] = useChangeImageIsIntermediateMutation();
+  useScopeOnMount('stagingArea');
 
   const { t } = useTranslation();
 
diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
index b8e9ed5b7e..ec71b84462 100644
--- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
+++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
@@ -12,12 +12,12 @@ import { useListImagesQuery } from 'services/api/endpoints/images';
 
 const $leftRightHotkeysEnabled = computed($activeScopes, (activeScopes) => {
   // The left and right hotkeys can be used when the gallery is focused and the canvas is not focused, OR when the image viewer is focused.
-  return (!activeScopes.has('staging-area') && !activeScopes.has('canvas')) || activeScopes.has('imageViewer');
+  return !activeScopes.has('canvas') || activeScopes.has('imageViewer');
 });
 
 const $upDownHotkeysEnabled = computed([$activeScopes, $isGalleryPanelOpen], (activeScopes, isGalleryPanelOpen) => {
   // The up and down hotkeys can be used when the gallery is focused and the canvas is not focused, and the gallery panel is open.
-  return !activeScopes.has('staging-area') && !activeScopes.has('canvas') && isGalleryPanelOpen;
+  return !activeScopes.has('canvas') && isGalleryPanelOpen;
 });
 
 /**