fix(ui): locate in gallery, galleryview when selecting image/video

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts

@@ -17,8 +17,8 @@ export const addBoardIdSelectedListener = (startAppListening: AppStartListening)
       // Cancel any in-progress instances of this listener, we don't want to select an image from a previous board
       cancelActiveListeners();
 
-      if (boardIdSelected.match(action) && action.payload.selectedImageName) {
-        // This action already has a selected image name, we trust it is valid
+      if (boardIdSelected.match(action) && action.payload.select) {
+        // This action already has a resource selection - skip the below auto-selection logic
         return;
       }
 

invokeai/frontend/web/src/features/gallery/components/ContextMenu/MenuItems/ContextMenuItemLocateInGalery.tsx

@@ -2,6 +2,7 @@ import { MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useItemDTOContext } from 'features/gallery/contexts/ItemDTOContext';
 import { boardIdSelected } from 'features/gallery/store/gallerySlice';
+import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { useGalleryPanel } from 'features/ui/layouts/use-gallery-panel';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
@@ -23,14 +24,32 @@ export const ContextMenuItemLocateInGalery = memo(() => {
   }, [itemDTO]);
 
   const onClick = useCallback(() => {
+    navigationApi.expandRightPanel();
+    galleryPanel.expand();
     if (isImageDTO(itemDTO)) {
-      navigationApi.expandRightPanel();
-      galleryPanel.expand();
       flushSync(() => {
-        dispatch(boardIdSelected({ boardId: itemDTO.board_id ?? 'none', selectedImageName: itemDTO.image_name }));
+        dispatch(
+          boardIdSelected({
+            boardId: itemDTO.board_id ?? 'none',
+            select: {
+              selection: [{ type: 'image', id: itemDTO.image_name }],
+              galleryView: IMAGE_CATEGORIES.includes(itemDTO.image_category) ? 'images' : 'assets',
+            },
+          })
+        );
       });
     } else {
-      // TODO: Implement video locate in gallery
+      flushSync(() => {
+        dispatch(
+          boardIdSelected({
+            boardId: itemDTO.board_id ?? 'none',
+            select: {
+              selection: [{ type: 'video', id: itemDTO.video_id }],
+              galleryView: 'videos',
+            },
+          })
+        );
+      });
     }
   }, [dispatch, galleryPanel, itemDTO]);
 

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx

@@ -11,6 +11,7 @@ import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
 import { useRecallRemix } from 'features/gallery/hooks/useRecallRemix';
 import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
 import { boardIdSelected } from 'features/gallery/store/gallerySlice';
+import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { PostProcessingPopover } from 'features/parameters/components/PostProcessing/PostProcessingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
@@ -47,7 +48,15 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
     navigationApi.expandRightPanel();
     galleryPanel.expand();
     flushSync(() => {
-      dispatch(boardIdSelected({ boardId: imageDTO.board_id ?? 'none', selectedImageName: imageDTO.image_name }));
+      dispatch(
+        boardIdSelected({
+          boardId: imageDTO.board_id ?? 'none',
+          select: {
+            selection: [{ type: 'image', id: imageDTO.image_name }],
+            galleryView: IMAGE_CATEGORIES.includes(imageDTO.image_category) ? 'images' : 'assets',
+          },
+        })
+      );
     });
   }, [dispatch, galleryPanel, imageDTO]);
 

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -86,12 +86,21 @@ const slice = createSlice({
     autoAssignBoardOnClickChanged: (state, action: PayloadAction<boolean>) => {
       state.autoAssignBoardOnClick = action.payload;
     },
-    boardIdSelected: (state, action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }>) => {
-      const { boardId, selectedImageName } = action.payload;
+    boardIdSelected: (
+      state,
+      action: PayloadAction<{
+        boardId: BoardId;
+        select?: {
+          selection: GalleryState['selection'];
+          galleryView: GalleryState['galleryView'];
+        };
+      }>
+    ) => {
+      const { boardId, select } = action.payload;
       state.selectedBoardId = boardId;
-      state.galleryView = 'images';
-      if (selectedImageName) {
-        state.selection = [{ type: 'image', id: selectedImageName }];
+      if (select) {
+        state.selection = select.selection;
+        state.galleryView = select.galleryView;
       }
     },
     autoAddBoardIdChanged: (state, action: PayloadAction<BoardId>) => {

invokeai/frontend/web/src/services/events/onInvocationComplete.tsx

@@ -171,7 +171,10 @@ export const buildOnInvocationComplete = (
       dispatch(
         boardIdSelected({
           boardId: board_id,
-          selectedImageName: image_name,
+          select: {
+            selection: [{ type: 'image', id: image_name }],
+            galleryView: 'images',
+          },
         })
       );
     } else {
@@ -320,7 +323,10 @@ export const buildOnInvocationComplete = (
       dispatch(
         boardIdSelected({
           boardId: board_id,
-          selectedImageName: video_id,
+          select: {
+            selection: [{ type: 'video', id: video_id }],
+            galleryView: 'videos',
+          },
         })
       );
     } else {