From cc21fb216c33969a7bb655176a6cb4cc3a87c9c1 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 16 May 2023 10:43:26 +1000
Subject: [PATCH] chore(ui): clean up GalleryPanel

---
 .../frontend/web/src/app/components/App.tsx   |   3 +-
 ...ImageGalleryPanel.tsx => GalleryPanel.tsx} | 101 +-----------------
 2 files changed, 4 insertions(+), 100 deletions(-)
 rename invokeai/frontend/web/src/features/gallery/components/{ImageGalleryPanel.tsx => GalleryPanel.tsx} (52%)

diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index e1727eee64..40554356b1 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -6,7 +6,7 @@ import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton'
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
 import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
-import GalleryDrawer from 'features/gallery/components/ImageGalleryPanel';
+import GalleryDrawer from 'features/gallery/components/GalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { memo, ReactNode, useCallback, useEffect, useState } from 'react';
@@ -22,7 +22,6 @@ import { languageSelector } from 'features/system/store/systemSelectors';
 import i18n from 'i18n';
 import Toaster from './Toaster';
 import GlobalHotkeys from './GlobalHotkeys';
-import AuxiliaryProgressIndicator from './AuxiliaryProgressIndicator';
 
 const DEFAULT_CONFIG = {};
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryPanel.tsx
similarity index 52%
rename from invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
rename to invokeai/frontend/web/src/features/gallery/components/GalleryPanel.tsx
index cfb6ba0914..f4bfee3ae1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryPanel.tsx
@@ -1,10 +1,6 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { gallerySelector } from 'features/gallery/store/gallerySelectors';
-import {
-  // selectNextImage,
-  // selectPrevImage,
-  setGalleryImageMinimumWidth,
-} from 'features/gallery/store/gallerySlice';
+import { setGalleryImageMinimumWidth } from 'features/gallery/store/gallerySlice';
 
 import { clamp, isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -23,20 +19,7 @@ import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvas
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { memo } from 'react';
 
-// const GALLERY_TAB_WIDTHS: Record<
-//   InvokeTabName,
-//   { galleryMinWidth: number; galleryMaxWidth: number }
-// > = {
-// txt2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// img2img: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// generate: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// unifiedCanvas: { galleryMinWidth: 200, galleryMaxWidth: 200 },
-// nodes: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// postprocessing: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
-// };
-
-const galleryPanelSelector = createSelector(
+const selector = createSelector(
   [
     activeTabNameSelector,
     uiSelector,
@@ -76,41 +59,13 @@ const GalleryDrawer = () => {
     // isStaging,
     // isResizable,
     // isLightboxOpen,
-  } = useAppSelector(galleryPanelSelector);
-
-  // const handleSetShouldPinGallery = () => {
-  //   dispatch(togglePinGalleryPanel());
-  //   dispatch(requestCanvasRescale());
-  // };
-
-  // const handleToggleGallery = () => {
-  //   dispatch(toggleGalleryPanel());
-  //   shouldPinGallery && dispatch(requestCanvasRescale());
-  // };
+  } = useAppSelector(selector);
 
   const handleCloseGallery = () => {
     dispatch(setShouldShowGallery(false));
     shouldPinGallery && dispatch(requestCanvasRescale());
   };
 
-  // const resolution = useResolution();
-
-  // useHotkeys(
-  //   'g',
-  //   () => {
-  //     handleToggleGallery();
-  //   },
-  //   [shouldPinGallery]
-  // );
-
-  // useHotkeys(
-  //   'shift+g',
-  //   () => {
-  //     handleSetShouldPinGallery();
-  //   },
-  //   [shouldPinGallery]
-  // );
-
   useHotkeys(
     'esc',
     () => {
@@ -155,54 +110,6 @@ const GalleryDrawer = () => {
     [galleryImageMinimumWidth]
   );
 
-  // const calcGalleryMinHeight = () => {
-  //   if (resolution === 'desktop') return;
-  //   return 300;
-  // };
-
-  // const imageGalleryContent = () => {
-  //   return (
-  //     <Flex
-  //       w="100vw"
-  //       h={{ base: 300, xl: '100vh' }}
-  //       paddingRight={{ base: 8, xl: 0 }}
-  //       paddingBottom={{ base: 4, xl: 0 }}
-  //     >
-  //       <ImageGalleryContent />
-  //     </Flex>
-  //   );
-  // };
-
-  // const resizableImageGalleryContent = () => {
-  //   return (
-  //     <ResizableDrawer
-  //       direction="right"
-  //       isResizable={isResizable || !shouldPinGallery}
-  //       isOpen={shouldShowGallery}
-  //       onClose={handleCloseGallery}
-  //       isPinned={shouldPinGallery && !isLightboxOpen}
-  //       minWidth={
-  //         shouldPinGallery
-  //           ? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
-  //           : 200
-  //       }
-  //       maxWidth={
-  //         shouldPinGallery
-  //           ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
-  //           : undefined
-  //       }
-  //       minHeight={calcGalleryMinHeight()}
-  //     >
-  //       <ImageGalleryContent />
-  //     </ResizableDrawer>
-  //   );
-  // };
-
-  // const renderImageGallery = () => {
-  //   if (['mobile', 'tablet'].includes(resolution)) return imageGalleryContent();
-  //   return resizableImageGalleryContent();
-  // };
-
   if (shouldPinGallery) {
     return null;
   }
@@ -218,8 +125,6 @@ const GalleryDrawer = () => {
       <ImageGalleryContent />
     </ResizableDrawer>
   );
-
-  // return renderImageGallery();
 };
 
 export default memo(GalleryDrawer);