From d17c27393983ca5c60fd6097d9ff6ba0ee9aa059 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 18 Aug 2025 19:48:51 +1000
Subject: [PATCH] feat(ui): add locate in gallery button to current image
 buttons toolbar

---
 .../ImageViewer/CurrentImageButtons.tsx       | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
index b6e52deed1..8a1d0ef427 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx
@@ -1,5 +1,5 @@
 import { Button, Divider, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton';
 import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
 import { useDeleteImage } from 'features/gallery/hooks/useDeleteImage';
@@ -10,14 +10,18 @@ import { useRecallDimensions } from 'features/gallery/hooks/useRecallDimensions'
 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 { PostProcessingPopover } from 'features/parameters/components/PostProcessing/PostProcessingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { navigationApi } from 'features/ui/layouts/navigation-api';
+import { useGalleryPanel } from 'features/ui/layouts/use-gallery-panel';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
+  PiCrosshairBold,
   PiDotsThreeOutlineFill,
   PiFlowArrowBold,
   PiPencilBold,
@@ -30,8 +34,23 @@ import type { ImageDTO } from 'services/api/types';
 export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
   const { t } = useTranslation();
   const tab = useAppSelector(selectActiveTab);
+  const dispatch = useAppDispatch();
+  const activeTab = useAppSelector(selectActiveTab);
+  const galleryPanel = useGalleryPanel(activeTab);
+
+  const isGalleryImage = useMemo(() => {
+    return !imageDTO.is_intermediate;
+  }, [imageDTO]);
+
+  const locateInGallery = useCallback(() => {
+    navigationApi.expandRightPanel();
+    galleryPanel.expand();
+    dispatch(boardIdSelected({ boardId: imageDTO.board_id ?? 'none', selectedImageName: imageDTO.image_name }));
+  }, [dispatch, galleryPanel, imageDTO]);
+
   const isCanvasOrGenerateTab = tab === 'canvas' || tab === 'generate';
   const isCanvasOrGenerateOrUpscalingTab = tab === 'canvas' || tab === 'generate' || tab === 'upscaling';
+  const doesTabHaveGallery = tab === 'canvas' || tab === 'generate' || tab === 'workflows' || tab === 'upscaling';
 
   const isUpscalingEnabled = useFeatureStatus('upscaling');
 
@@ -75,6 +94,17 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
 
       <Divider orientation="vertical" h={8} mx={2} />
 
+      {doesTabHaveGallery && isGalleryImage && (
+        <IconButton
+          icon={<PiCrosshairBold />}
+          aria-label={t('boards.locateInGalery')}
+          tooltip={t('boards.locateInGalery')}
+          onClick={locateInGallery}
+          variant="link"
+          size="sm"
+          alignSelf="stretch"
+        />
+      )}
       <IconButton
         icon={<PiFlowArrowBold />}
         tooltip={`${t('nodes.loadWorkflow')} (W)`}