revert(ui): miniviewer

toodles

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/Gallery.tsx

@@ -14,14 +14,12 @@ import {
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGallerySearchTerm } from 'features/gallery/components/ImageGrid/useGallerySearchTerm';
-import CurrentImageButtons from 'features/gallery/components/ImageViewer/CurrentImageButtons';
-import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
-import { selectIsMiniViewerOpen, selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
-import { galleryViewChanged, isMiniViewerOpenToggled, selectGallerySlice } from 'features/gallery/store/gallerySlice';
+import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
+import { galleryViewChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import type { CSSProperties } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiEyeBold, PiEyeClosedBold, PiMagnifyingGlassBold } from 'react-icons/pi';
+import { PiMagnifyingGlassBold } from 'react-icons/pi';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@@ -52,11 +50,6 @@ export const Gallery = () => {
   const initialSearchTerm = useAppSelector(selectSearchTerm);
   const searchDisclosure = useDisclosure({ defaultIsOpen: initialSearchTerm.length > 0 });
   const [searchTerm, onChangeSearchTerm, onResetSearchTerm] = useGallerySearchTerm();
-  const isMiniViewerOpen = useAppSelector(selectIsMiniViewerOpen);
-
-  const toggleMiniViewer = useCallback(() => {
-    dispatch(isMiniViewerOpenToggled());
-  }, [dispatch]);
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
   }, [dispatch]);
@@ -87,27 +80,15 @@ export const Gallery = () => {
           <Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
             {t('gallery.assets')}
           </Tab>
-          <Flex h="full">
-            <IconButton
-              size="sm"
-              variant="link"
-              alignSelf="stretch"
-              onClick={toggleMiniViewer}
-              tooltip={t('gallery.toggleMiniViewer')}
-              aria-label={t('gallery.toggleMiniViewer')}
-              icon={isMiniViewerOpen ? <PiEyeBold /> : <PiEyeClosedBold />}
-              colorScheme={isMiniViewerOpen ? 'invokeBlue' : 'base'}
-            />
-            <IconButton
-              size="sm"
-              variant="link"
-              alignSelf="stretch"
-              onClick={handleClickSearch}
-              tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`}
-              aria-label={t('gallery.displaySearch')}
-              icon={<PiMagnifyingGlassBold />}
-            />
-          </Flex>
+          <IconButton
+            size="sm"
+            variant="link"
+            alignSelf="stretch"
+            onClick={handleClickSearch}
+            tooltip={searchDisclosure.isOpen ? `${t('gallery.exitSearch')}` : `${t('gallery.displaySearch')}`}
+            aria-label={t('gallery.displaySearch')}
+            icon={<PiMagnifyingGlassBold />}
+          />
         </TabList>
       </Tabs>
 
@@ -120,21 +101,6 @@ export const Gallery = () => {
           />
         </Box>
       </Collapse>
-      <Collapse in={isMiniViewerOpen} style={COLLAPSE_STYLES}>
-        <Box position="relative" w="full" mt={2} aspectRatio="1/1">
-          <CurrentImagePreview />
-          <Flex
-            position="absolute"
-            top={2}
-            gap={2}
-            justifyContent="space-between"
-            left="50%"
-            transform="translateX(-50%)"
-          >
-            <CurrentImageButtons />
-          </Flex>
-        </Box>
-      </Collapse>
       <GalleryImageGrid />
       <GalleryPagination />
     </Flex>

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

@@ -57,4 +57,3 @@ export const selectImageToCompare = createSelector(selectGallerySlice, (gallery)
 export const selectHasImageToCompare = createSelector(selectImageToCompare, (imageToCompare) =>
   Boolean(imageToCompare)
 );
-export const selectIsMiniViewerOpen = createSelector(selectGallerySlice, (gallery) => gallery.isMiniViewerOpen);

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

@@ -25,7 +25,6 @@ const initialGalleryState: GalleryState = {
   comparisonMode: 'slider',
   comparisonFit: 'fill',
   shouldShowArchivedBoards: false,
-  isMiniViewerOpen: false,
 };
 
 export const gallerySlice = createSlice({
@@ -88,9 +87,6 @@ export const gallerySlice = createSlice({
     alwaysShowImageSizeBadgeChanged: (state, action: PayloadAction<boolean>) => {
       state.alwaysShowImageSizeBadge = action.payload;
     },
-    isMiniViewerOpenToggled: (state) => {
-      state.isMiniViewerOpen = !state.isMiniViewerOpen;
-    },
     comparedImagesSwapped: (state) => {
       if (state.imageToCompare) {
         const oldSelection = state.selection;
@@ -146,7 +142,6 @@ export const {
   starredFirstChanged,
   shouldShowArchivedBoardsChanged,
   searchTermChanged,
-  isMiniViewerOpenToggled,
 } = gallerySlice.actions;
 
 export const selectGallerySlice = (state: RootState) => state.gallery;

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

@@ -28,5 +28,4 @@ export type GalleryState = {
   comparisonMode: ComparisonMode;
   comparisonFit: ComparisonFit;
   shouldShowArchivedBoards: boolean;
-  isMiniViewerOpen: boolean;
 };