feat(ui): simplify image display

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

@@ -1,23 +1,11 @@
-import { Box, Collapse, Flex, Icon, useDisclosure } from '@chakra-ui/react';
+import { Flex, Icon } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import IAIButton from 'common/components/IAIButton';
-import ImageToImageSettings from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageSettings';
 import { isEqual } from 'lodash';
-import { useState } from 'react';
-import {
-  AnimatePresence,
-  motion,
-  useMotionValue,
-  useTransform,
-} from 'framer-motion';
 
 import { MdPhoto } from 'react-icons/md';
-import {
+import { selectedImageSelector } from '../store/gallerySelectors';
-  gallerySelector,
-  selectedImageSelector,
-} from '../store/gallerySelectors';
 import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
 
@@ -42,9 +30,6 @@ export const currentImageDisplaySelector = createSelector(
  */
 const CurrentImageDisplay = () => {
   const { hasAnImageToDisplay } = useAppSelector(currentImageDisplaySelector);
-  const [shouldHideImageToImage, setShouldHideImageToImage] = useState(false);
-  const w = useMotionValue(0);
-  const width = useTransform(w, [0, 100], [`0px`, `100px`]);
 
   return (
     <Flex
@@ -65,27 +50,23 @@ const CurrentImageDisplay = () => {
           w: 'full',
           h: 'full',
           alignItems: 'center',
+          justifyContent: 'center',
           gap: 4,
         }}
       >
-        <CurrentImageButtons />
         {hasAnImageToDisplay ? (
-          <CurrentImagePreview />
+          <>
+            <CurrentImageButtons />
+            <CurrentImagePreview />
+          </>
         ) : (
-          <Flex
+          <Icon
-            width="full"
+            as={MdPhoto}
-            height="full"
+            sx={{
-            alignItems="center"
+              boxSize: 24,
-            justifyContent="center"
+              color: 'base.500',
-          >
+            }}
-            <Icon
+          />
-              as={MdPhoto}
-              sx={{
-                boxSize: 24,
-                color: 'base.500',
-              }}
-            />
-          </Flex>
         )}
       </Flex>
     </Flex>

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

@@ -5,8 +5,6 @@ import { useGetUrl } from 'common/util/getUrl';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash';
-import { ReactEventHandler } from 'react';
-import { APP_METADATA_HEIGHT } from 'theme/util/constants';
 
 import { selectedImageSelector } from '../store/gallerySelectors';
 import CurrentImageFallback from './CurrentImageFallback';
@@ -110,7 +108,6 @@ export default function CurrentImagePreview() {
               height: '100%',
               borderRadius: 'base',
               overflow: 'scroll',
-              maxHeight: APP_METADATA_HEIGHT,
             }}
           >
             <ImageMetadataViewer image={imageToDisplay.image} />