diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index fae5029d36..28c31935ab 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -38,6 +38,7 @@ "deletedImagesCannotBeRestored": "Deleted images cannot be restored.", "hideBoards": "Hide Boards", "loading": "Loading...", + "locateInGalery": "Locate in Gallery", "menuItemAutoAdd": "Auto-add to this Board", "move": "Move", "movingImagesToBoard_one": "Moving {{count}} image to board:", diff --git a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx index 6e9c323049..9c099cf5e2 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx @@ -7,13 +7,7 @@ import { useGallerySearchTerm } from 'features/gallery/components/ImageGrid/useG import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors'; import { galleryViewChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice'; import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context'; -import { - GALLERY_PANEL_DEFAULT_HEIGHT_PX, - GALLERY_PANEL_ID, - GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX, - GALLERY_PANEL_MIN_HEIGHT_PX, -} from 'features/ui/layouts/shared'; -import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel'; +import { useGalleryPanel } from 'features/ui/layouts/use-gallery-panel'; import type { CSSProperties } from 'react'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -34,16 +28,8 @@ export const GalleryPanel = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const { tab } = useAutoLayoutContext(); - const collapsibleApi = useCollapsibleGridviewPanel( - tab, - GALLERY_PANEL_ID, - 'vertical', - GALLERY_PANEL_DEFAULT_HEIGHT_PX, - GALLERY_PANEL_MIN_HEIGHT_PX, - GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX - ); - const isCollapsed = useStore(collapsibleApi.$isCollapsed); - + const galleryPanel = useGalleryPanel(tab); + const isCollapsed = useStore(galleryPanel.$isCollapsed); const galleryView = useAppSelector(selectGalleryView); const initialSearchTerm = useAppSelector(selectSearchTerm); const searchDisclosure = useDisclosure(!!initialSearchTerm); @@ -58,11 +44,11 @@ export const GalleryPanel = memo(() => { const handleClickSearch = useCallback(() => { onResetSearchTerm(); - if (!searchDisclosure.isOpen && collapsibleApi.$isCollapsed.get()) { - collapsibleApi.expand(); + if (!searchDisclosure.isOpen && galleryPanel.$isCollapsed.get()) { + galleryPanel.expand(); } searchDisclosure.toggle(); - }, [collapsibleApi, onResetSearchTerm, searchDisclosure]); + }, [galleryPanel, onResetSearchTerm, searchDisclosure]); const selectedBoardId = useAppSelector(selectSelectedBoardId); const boardName = useBoardName(selectedBoardId); @@ -73,7 +59,7 @@ export const GalleryPanel = memo(() => {