From ee6df5852ada9122dc809ac1edd5b74cb78c435b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 12 Mar 2023 19:16:11 +1100
Subject: [PATCH] fix(ui): fix lightbox

---
 invokeai/frontend/web/src/app/App.tsx         |   2 +-
 invokeai/frontend/web/src/app/store.ts        |  11 +-
 .../components/CurrentImagePreview.tsx        |  23 +-
 .../gallery/components/ImageGalleryPanel.tsx  |  16 +-
 .../ImageMetadataViewer.tsx                   | 540 +++++++++---------
 .../features/lightbox/components/Lightbox.tsx | 173 +++---
 .../lightbox/components/ReactPanZoomImage.tsx |   5 +-
 .../src/features/ui/components/InvokeTabs.tsx |   2 +-
 .../ui/components/ParametersPanel.tsx         |  20 +-
 9 files changed, 409 insertions(+), 383 deletions(-)

diff --git a/invokeai/frontend/web/src/app/App.tsx b/invokeai/frontend/web/src/app/App.tsx
index c8faa2724e..4be90f0892 100644
--- a/invokeai/frontend/web/src/app/App.tsx
+++ b/invokeai/frontend/web/src/app/App.tsx
@@ -30,6 +30,7 @@ const App = () => {
 
   return (
     <Grid w="100vw" h="100vh">
+      <Lightbox />
       <ImageUploader>
         <ProgressBar />
         <Grid
@@ -55,7 +56,6 @@ const App = () => {
       <Portal>
         <FloatingGalleryButton />
       </Portal>
-      <Lightbox />
     </Grid>
   );
 };
diff --git a/invokeai/frontend/web/src/app/store.ts b/invokeai/frontend/web/src/app/store.ts
index ac6400a8c4..29dbff3fba 100644
--- a/invokeai/frontend/web/src/app/store.ts
+++ b/invokeai/frontend/web/src/app/store.ts
@@ -60,6 +60,10 @@ const galleryBlacklist = [
   'intermediateImage',
 ].map((blacklistItem) => `gallery.${blacklistItem}`);
 
+const lightboxBlacklist = ['isLightboxOpen'].map(
+  (blacklistItem) => `lightbox.${blacklistItem}`
+);
+
 const rootReducer = combineReducers({
   generation: generationReducer,
   postprocessing: postprocessingReducer,
@@ -74,7 +78,12 @@ const rootPersistConfig = getPersistConfig({
   key: 'root',
   storage,
   rootReducer,
-  blacklist: [...canvasBlacklist, ...systemBlacklist, ...galleryBlacklist],
+  blacklist: [
+    ...canvasBlacklist,
+    ...systemBlacklist,
+    ...galleryBlacklist,
+    ...lightboxBlacklist,
+  ],
   debounce: 300,
 });
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
index 74468febd1..84f92da53b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
@@ -1,9 +1,10 @@
-import { Flex, Image } from '@chakra-ui/react';
+import { Box, Flex, Image } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/storeHooks';
 import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash';
+import { APP_METADATA_HEIGHT } from 'theme/util/constants';
 
 import { gallerySelector } from '../store/gallerySelectors';
 import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
@@ -60,10 +61,22 @@ export default function CurrentImagePreview() {
       )}
       {!shouldShowImageDetails && <NextPrevImageButtons />}
       {shouldShowImageDetails && imageToDisplay && (
-        <ImageMetadataViewer
-          image={imageToDisplay}
-          styleClass="current-image-metadata"
-        />
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '0',
+            width: '100%',
+            height: '100%',
+            borderRadius: 'base',
+            overflow: 'scroll',
+            maxHeight: APP_METADATA_HEIGHT,
+          }}
+        >
+          <ImageMetadataViewer
+            image={imageToDisplay}
+            styleClass="current-image-metadata"
+          />
+        </Box>
       )}
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
index 6c574f2be3..da97dea9bf 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
@@ -25,6 +25,7 @@ import {
 } from 'features/ui/store/uiSelectors';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
+import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 
 const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
@@ -39,10 +40,17 @@ const GALLERY_TAB_WIDTHS: Record<
 };
 
 const galleryPanelSelector = createSelector(
-  [activeTabNameSelector, uiSelector, gallerySelector, isStagingSelector],
-  (activeTabName, ui, gallery, isStaging) => {
+  [
+    activeTabNameSelector,
+    uiSelector,
+    gallerySelector,
+    isStagingSelector,
+    lightboxSelector,
+  ],
+  (activeTabName, ui, gallery, isStaging, lightbox) => {
     const { shouldPinGallery, shouldShowGallery } = ui;
     const { galleryImageMinimumWidth } = gallery;
+    const { isLightboxOpen } = lightbox;
 
     return {
       activeTabName,
@@ -51,6 +59,7 @@ const galleryPanelSelector = createSelector(
       shouldShowGallery,
       galleryImageMinimumWidth,
       isResizable: activeTabName !== 'unifiedCanvas',
+      isLightboxOpen,
     };
   },
   {
@@ -69,6 +78,7 @@ export default function ImageGalleryPanel() {
     activeTabName,
     isStaging,
     isResizable,
+    isLightboxOpen,
   } = useAppSelector(galleryPanelSelector);
 
   const handleSetShouldPinGallery = () => {
@@ -174,7 +184,7 @@ export default function ImageGalleryPanel() {
       isResizable={isResizable || !shouldPinGallery}
       isOpen={shouldShowGallery}
       onClose={handleCloseGallery}
-      isPinned={shouldPinGallery}
+      isPinned={shouldPinGallery && !isLightboxOpen}
       minWidth={
         shouldPinGallery
           ? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
index 3e747a1235..4d8e870f34 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
@@ -170,304 +170,290 @@ const ImageMetadataViewer = memo(
     const metadataJSON = JSON.stringify(image.metadata, null, 2);
 
     return (
-      <Box
-        className={styleClass}
+      <Flex
         sx={{
-          position: 'absolute',
-          top: '0',
-          width: '100%',
-          borderRadius: 'base',
           padding: 4,
-          overflow: 'scroll',
-          maxHeight: APP_METADATA_HEIGHT,
-          height: '100%',
-          backdropFilter: 'blur(10px)',
+          gap: 1,
+          flexDirection: 'column',
+          width: 'full',
+          height: 'full',
+          backdropFilter: 'blur(20px)',
           bg: 'whiteAlpha.600',
           _dark: {
             bg: 'blackAlpha.600',
           },
         }}
       >
-        <Flex gap={1} direction="column" width="100%">
-          <Flex gap={2}>
-            <Text fontWeight="semibold">File:</Text>
-            <Link href={image.url} isExternal maxW="calc(100% - 3rem)">
-              {image.url.length > 64
-                ? image.url.substring(0, 64).concat('...')
-                : image.url}
-              <ExternalLinkIcon mx="2px" />
-            </Link>
-          </Flex>
-          {Object.keys(metadata).length > 0 ? (
-            <>
-              {type && <MetadataItem label="Generation type" value={type} />}
-              {image.metadata?.model_weights && (
-                <MetadataItem
-                  label="Model"
-                  value={image.metadata.model_weights}
-                />
-              )}
-              {['esrgan', 'gfpgan'].includes(type) && (
-                <MetadataItem label="Original image" value={orig_path} />
-              )}
-              {prompt && (
-                <MetadataItem
-                  label="Prompt"
-                  labelPosition="top"
-                  value={
-                    typeof prompt === 'string' ? prompt : promptToString(prompt)
-                  }
-                  onClick={() => setBothPrompts(prompt)}
-                />
-              )}
-              {seed !== undefined && (
-                <MetadataItem
-                  label="Seed"
-                  value={seed}
-                  onClick={() => dispatch(setSeed(seed))}
-                />
-              )}
-              {threshold !== undefined && (
-                <MetadataItem
-                  label="Noise Threshold"
-                  value={threshold}
-                  onClick={() => dispatch(setThreshold(threshold))}
-                />
-              )}
-              {perlin !== undefined && (
-                <MetadataItem
-                  label="Perlin Noise"
-                  value={perlin}
-                  onClick={() => dispatch(setPerlin(perlin))}
-                />
-              )}
-              {sampler && (
-                <MetadataItem
-                  label="Sampler"
-                  value={sampler}
-                  onClick={() => dispatch(setSampler(sampler))}
-                />
-              )}
-              {steps && (
-                <MetadataItem
-                  label="Steps"
-                  value={steps}
-                  onClick={() => dispatch(setSteps(steps))}
-                />
-              )}
-              {cfg_scale !== undefined && (
-                <MetadataItem
-                  label="CFG scale"
-                  value={cfg_scale}
-                  onClick={() => dispatch(setCfgScale(cfg_scale))}
-                />
-              )}
-              {variations && variations.length > 0 && (
-                <MetadataItem
-                  label="Seed-weight pairs"
-                  value={seedWeightsToString(variations)}
-                  onClick={() =>
-                    dispatch(setSeedWeights(seedWeightsToString(variations)))
-                  }
-                />
-              )}
-              {seamless && (
-                <MetadataItem
-                  label="Seamless"
-                  value={seamless}
-                  onClick={() => dispatch(setSeamless(seamless))}
-                />
-              )}
-              {hires_fix && (
-                <MetadataItem
-                  label="High Resolution Optimization"
-                  value={hires_fix}
-                  onClick={() => dispatch(setHiresFix(hires_fix))}
-                />
-              )}
-              {width && (
-                <MetadataItem
-                  label="Width"
-                  value={width}
-                  onClick={() => dispatch(setWidth(width))}
-                />
-              )}
-              {height && (
-                <MetadataItem
-                  label="Height"
-                  value={height}
-                  onClick={() => dispatch(setHeight(height))}
-                />
-              )}
-              {init_image_path && (
-                <MetadataItem
-                  label="Initial image"
-                  value={init_image_path}
-                  isLink
-                  onClick={() => dispatch(setInitialImage(init_image_path))}
-                />
-              )}
-              {mask_image_path && (
-                <MetadataItem
-                  label="Mask image"
-                  value={mask_image_path}
-                  isLink
-                  onClick={() => dispatch(setMaskPath(mask_image_path))}
-                />
-              )}
-              {type === 'img2img' && strength && (
-                <MetadataItem
-                  label="Image to image strength"
-                  value={strength}
-                  onClick={() => dispatch(setImg2imgStrength(strength))}
-                />
-              )}
-              {fit && (
-                <MetadataItem
-                  label="Image to image fit"
-                  value={fit}
-                  onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
-                />
-              )}
-              {postprocessing && postprocessing.length > 0 && (
-                <>
-                  <Heading size="sm">Postprocessing</Heading>
-                  {postprocessing.map(
-                    (
-                      postprocess: InvokeAI.PostProcessedImageMetadata,
-                      i: number
-                    ) => {
-                      if (postprocess.type === 'esrgan') {
-                        const { scale, strength, denoise_str } = postprocess;
-                        return (
-                          <Flex key={i} pl={8} gap={1} direction="column">
-                            <Text size="md">{`${
-                              i + 1
-                            }: Upscale (ESRGAN)`}</Text>
+        <Flex gap={2}>
+          <Text fontWeight="semibold">File:</Text>
+          <Link href={image.url} isExternal maxW="calc(100% - 3rem)">
+            {image.url.length > 64
+              ? image.url.substring(0, 64).concat('...')
+              : image.url}
+            <ExternalLinkIcon mx="2px" />
+          </Link>
+        </Flex>
+        {Object.keys(metadata).length > 0 ? (
+          <>
+            {type && <MetadataItem label="Generation type" value={type} />}
+            {image.metadata?.model_weights && (
+              <MetadataItem
+                label="Model"
+                value={image.metadata.model_weights}
+              />
+            )}
+            {['esrgan', 'gfpgan'].includes(type) && (
+              <MetadataItem label="Original image" value={orig_path} />
+            )}
+            {prompt && (
+              <MetadataItem
+                label="Prompt"
+                labelPosition="top"
+                value={
+                  typeof prompt === 'string' ? prompt : promptToString(prompt)
+                }
+                onClick={() => setBothPrompts(prompt)}
+              />
+            )}
+            {seed !== undefined && (
+              <MetadataItem
+                label="Seed"
+                value={seed}
+                onClick={() => dispatch(setSeed(seed))}
+              />
+            )}
+            {threshold !== undefined && (
+              <MetadataItem
+                label="Noise Threshold"
+                value={threshold}
+                onClick={() => dispatch(setThreshold(threshold))}
+              />
+            )}
+            {perlin !== undefined && (
+              <MetadataItem
+                label="Perlin Noise"
+                value={perlin}
+                onClick={() => dispatch(setPerlin(perlin))}
+              />
+            )}
+            {sampler && (
+              <MetadataItem
+                label="Sampler"
+                value={sampler}
+                onClick={() => dispatch(setSampler(sampler))}
+              />
+            )}
+            {steps && (
+              <MetadataItem
+                label="Steps"
+                value={steps}
+                onClick={() => dispatch(setSteps(steps))}
+              />
+            )}
+            {cfg_scale !== undefined && (
+              <MetadataItem
+                label="CFG scale"
+                value={cfg_scale}
+                onClick={() => dispatch(setCfgScale(cfg_scale))}
+              />
+            )}
+            {variations && variations.length > 0 && (
+              <MetadataItem
+                label="Seed-weight pairs"
+                value={seedWeightsToString(variations)}
+                onClick={() =>
+                  dispatch(setSeedWeights(seedWeightsToString(variations)))
+                }
+              />
+            )}
+            {seamless && (
+              <MetadataItem
+                label="Seamless"
+                value={seamless}
+                onClick={() => dispatch(setSeamless(seamless))}
+              />
+            )}
+            {hires_fix && (
+              <MetadataItem
+                label="High Resolution Optimization"
+                value={hires_fix}
+                onClick={() => dispatch(setHiresFix(hires_fix))}
+              />
+            )}
+            {width && (
+              <MetadataItem
+                label="Width"
+                value={width}
+                onClick={() => dispatch(setWidth(width))}
+              />
+            )}
+            {height && (
+              <MetadataItem
+                label="Height"
+                value={height}
+                onClick={() => dispatch(setHeight(height))}
+              />
+            )}
+            {init_image_path && (
+              <MetadataItem
+                label="Initial image"
+                value={init_image_path}
+                isLink
+                onClick={() => dispatch(setInitialImage(init_image_path))}
+              />
+            )}
+            {mask_image_path && (
+              <MetadataItem
+                label="Mask image"
+                value={mask_image_path}
+                isLink
+                onClick={() => dispatch(setMaskPath(mask_image_path))}
+              />
+            )}
+            {type === 'img2img' && strength && (
+              <MetadataItem
+                label="Image to image strength"
+                value={strength}
+                onClick={() => dispatch(setImg2imgStrength(strength))}
+              />
+            )}
+            {fit && (
+              <MetadataItem
+                label="Image to image fit"
+                value={fit}
+                onClick={() => dispatch(setShouldFitToWidthHeight(fit))}
+              />
+            )}
+            {postprocessing && postprocessing.length > 0 && (
+              <>
+                <Heading size="sm">Postprocessing</Heading>
+                {postprocessing.map(
+                  (
+                    postprocess: InvokeAI.PostProcessedImageMetadata,
+                    i: number
+                  ) => {
+                    if (postprocess.type === 'esrgan') {
+                      const { scale, strength, denoise_str } = postprocess;
+                      return (
+                        <Flex key={i} pl={8} gap={1} direction="column">
+                          <Text size="md">{`${i + 1}: Upscale (ESRGAN)`}</Text>
+                          <MetadataItem
+                            label="Scale"
+                            value={scale}
+                            onClick={() => dispatch(setUpscalingLevel(scale))}
+                          />
+                          <MetadataItem
+                            label="Strength"
+                            value={strength}
+                            onClick={() =>
+                              dispatch(setUpscalingStrength(strength))
+                            }
+                          />
+                          {denoise_str !== undefined && (
                             <MetadataItem
-                              label="Scale"
-                              value={scale}
-                              onClick={() => dispatch(setUpscalingLevel(scale))}
-                            />
-                            <MetadataItem
-                              label="Strength"
-                              value={strength}
+                              label="Denoising strength"
+                              value={denoise_str}
                               onClick={() =>
-                                dispatch(setUpscalingStrength(strength))
+                                dispatch(setUpscalingDenoising(denoise_str))
                               }
                             />
-                            {denoise_str !== undefined && (
-                              <MetadataItem
-                                label="Denoising strength"
-                                value={denoise_str}
-                                onClick={() =>
-                                  dispatch(setUpscalingDenoising(denoise_str))
-                                }
-                              />
-                            )}
-                          </Flex>
-                        );
-                      } else if (postprocess.type === 'gfpgan') {
-                        const { strength } = postprocess;
-                        return (
-                          <Flex key={i} pl={8} gap={1} direction="column">
-                            <Text size="md">{`${
-                              i + 1
-                            }: Face restoration (GFPGAN)`}</Text>
+                          )}
+                        </Flex>
+                      );
+                    } else if (postprocess.type === 'gfpgan') {
+                      const { strength } = postprocess;
+                      return (
+                        <Flex key={i} pl={8} gap={1} direction="column">
+                          <Text size="md">{`${
+                            i + 1
+                          }: Face restoration (GFPGAN)`}</Text>
 
-                            <MetadataItem
-                              label="Strength"
-                              value={strength}
-                              onClick={() => {
-                                dispatch(setFacetoolStrength(strength));
-                                dispatch(setFacetoolType('gfpgan'));
-                              }}
-                            />
-                          </Flex>
-                        );
-                      } else if (postprocess.type === 'codeformer') {
-                        const { strength, fidelity } = postprocess;
-                        return (
-                          <Flex key={i} pl={8} gap={1} direction="column">
-                            <Text size="md">{`${
-                              i + 1
-                            }: Face restoration (Codeformer)`}</Text>
+                          <MetadataItem
+                            label="Strength"
+                            value={strength}
+                            onClick={() => {
+                              dispatch(setFacetoolStrength(strength));
+                              dispatch(setFacetoolType('gfpgan'));
+                            }}
+                          />
+                        </Flex>
+                      );
+                    } else if (postprocess.type === 'codeformer') {
+                      const { strength, fidelity } = postprocess;
+                      return (
+                        <Flex key={i} pl={8} gap={1} direction="column">
+                          <Text size="md">{`${
+                            i + 1
+                          }: Face restoration (Codeformer)`}</Text>
 
+                          <MetadataItem
+                            label="Strength"
+                            value={strength}
+                            onClick={() => {
+                              dispatch(setFacetoolStrength(strength));
+                              dispatch(setFacetoolType('codeformer'));
+                            }}
+                          />
+                          {fidelity && (
                             <MetadataItem
-                              label="Strength"
-                              value={strength}
+                              label="Fidelity"
+                              value={fidelity}
                               onClick={() => {
-                                dispatch(setFacetoolStrength(strength));
+                                dispatch(setCodeformerFidelity(fidelity));
                                 dispatch(setFacetoolType('codeformer'));
                               }}
                             />
-                            {fidelity && (
-                              <MetadataItem
-                                label="Fidelity"
-                                value={fidelity}
-                                onClick={() => {
-                                  dispatch(setCodeformerFidelity(fidelity));
-                                  dispatch(setFacetoolType('codeformer'));
-                                }}
-                              />
-                            )}
-                          </Flex>
-                        );
-                      }
+                          )}
+                        </Flex>
+                      );
                     }
-                  )}
-                </>
-              )}
-              {dreamPrompt && (
-                <MetadataItem
-                  withCopy
-                  label="Dream Prompt"
-                  value={dreamPrompt}
-                />
-              )}
-              <Flex gap={2} direction="column">
-                <Flex gap={2}>
-                  <Tooltip label="Copy metadata JSON">
-                    <IconButton
-                      aria-label={t('accessibility.copyMetadataJson')}
-                      icon={<FaCopy />}
-                      size="xs"
-                      variant="ghost"
-                      fontSize={14}
-                      onClick={() =>
-                        navigator.clipboard.writeText(metadataJSON)
-                      }
-                    />
-                  </Tooltip>
-                  <Text fontWeight="semibold">Metadata JSON:</Text>
-                </Flex>
-                <Box
-                  sx={{
-                    mt: 0,
-                    mr: 2,
-                    mb: 4,
-                    ml: 2,
-                    padding: 4,
-                    borderRadius: 'base',
-                    overflowX: 'scroll',
-                    wordBreak: 'break-all',
-                    bg: 'whiteAlpha.200',
-                    _dark: { bg: 'blackAlpha.200' },
-                  }}
-                >
-                  <pre>{metadataJSON}</pre>
-                </Box>
+                  }
+                )}
+              </>
+            )}
+            {dreamPrompt && (
+              <MetadataItem withCopy label="Dream Prompt" value={dreamPrompt} />
+            )}
+            <Flex gap={2} direction="column">
+              <Flex gap={2}>
+                <Tooltip label="Copy metadata JSON">
+                  <IconButton
+                    aria-label={t('accessibility.copyMetadataJson')}
+                    icon={<FaCopy />}
+                    size="xs"
+                    variant="ghost"
+                    fontSize={14}
+                    onClick={() => navigator.clipboard.writeText(metadataJSON)}
+                  />
+                </Tooltip>
+                <Text fontWeight="semibold">Metadata JSON:</Text>
               </Flex>
-            </>
-          ) : (
-            <Center width="100%" pt={10}>
-              <Text fontSize="lg" fontWeight="semibold">
-                No metadata available
-              </Text>
-            </Center>
-          )}
-        </Flex>
-      </Box>
+              <Box
+                sx={{
+                  mt: 0,
+                  mr: 2,
+                  mb: 4,
+                  ml: 2,
+                  padding: 4,
+                  borderRadius: 'base',
+                  overflowX: 'scroll',
+                  wordBreak: 'break-all',
+                  bg: 'whiteAlpha.500',
+                  _dark: { bg: 'blackAlpha.500' },
+                }}
+              >
+                <pre>{metadataJSON}</pre>
+              </Box>
+            </Flex>
+          </>
+        ) : (
+          <Center width="100%" pt={10}>
+            <Text fontSize="lg" fontWeight="semibold">
+              No metadata available
+            </Text>
+          </Center>
+        )}
+      </Flex>
     );
   },
   memoEqualityCheck
diff --git a/invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx b/invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx
index 473906185e..30ccbf318e 100644
--- a/invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx
+++ b/invokeai/frontend/web/src/features/lightbox/components/Lightbox.tsx
@@ -1,20 +1,21 @@
-import { Box, Flex, Grid } from '@chakra-ui/react';
+import { Box, chakra, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons';
-import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer';
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
 import { gallerySelector } from 'features/gallery/store/gallerySelectors';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
+import { AnimatePresence, motion } from 'framer-motion';
 import { isEqual } from 'lodash';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { BiExit } from 'react-icons/bi';
 import { TransformWrapper } from 'react-zoom-pan-pinch';
+import { PROGRESS_BAR_THICKNESS } from 'theme/util/constants';
 import useImageTransform from '../hooks/useImageTransform';
 import ReactPanZoomButtons from './ReactPanZoomButtons';
 import ReactPanZoomImage from './ReactPanZoomImage';
@@ -37,6 +38,8 @@ export const lightboxSelector = createSelector(
   }
 );
 
+const ChakraMotionBox = chakra(motion.div);
+
 export default function Lightbox() {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -67,106 +70,102 @@ export default function Lightbox() {
   );
 
   return (
-    <TransformWrapper
-      centerOnInit
-      minScale={0.1}
-      initialPositionX={50}
-      initialPositionY={50}
-    >
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          overflow: 'hidden',
-          position: 'absolute',
-          insetInlineStart: 0,
-          top: 0,
-          zIndex: 30,
-          animation: 'popIn 0.3s ease-in',
-          bg: 'base.800',
-        }}
-      >
-        <Flex
-          sx={{
-            flexDir: 'column',
-            position: 'absolute',
-            top: 4,
-            insetInlineStart: 4,
-            gap: 4,
-            zIndex: 3,
+    <AnimatePresence>
+      {isLightBoxOpen && (
+        <motion.div
+          key="lightbox"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15, ease: 'easeInOut' }}
+          style={{
+            display: 'flex',
+            width: '100vw',
+            height: `calc(100vh - ${PROGRESS_BAR_THICKNESS * 4}px)`,
+            position: 'fixed',
+            top: `${PROGRESS_BAR_THICKNESS * 4}px`,
+            background: 'var(--invokeai-colors-base-900)',
+            zIndex: 99,
           }}
         >
-          <IAIIconButton
-            icon={<BiExit />}
-            aria-label={t('accessibility.exitViewer')}
-            onClick={() => {
-              dispatch(setIsLightboxOpen(false));
-            }}
-            fontSize={20}
-          />
-          <ReactPanZoomButtons
-            flipHorizontally={flipHorizontally}
-            flipVertically={flipVertically}
-            rotateCounterClockwise={rotateCounterClockwise}
-            rotateClockwise={rotateClockwise}
-            reset={reset}
-          />
-        </Flex>
-
-        <Flex>
-          <Grid
-            sx={{
-              overflow: 'hidden',
-              gridTemplateColumns: 'auto max-content',
-              placeItems: 'center',
-              width: '100vw',
-              height: '100vh',
-              bg: 'base.850',
-            }}
+          <TransformWrapper
+            centerOnInit
+            minScale={0.1}
+            initialPositionX={50}
+            initialPositionY={50}
           >
+            <Flex
+              sx={{
+                flexDir: 'column',
+                position: 'absolute',
+                insetInlineStart: 4,
+                gap: 4,
+                zIndex: 3,
+                top: 4,
+              }}
+            >
+              <IAIIconButton
+                icon={<BiExit />}
+                aria-label="Exit Viewer"
+                className="lightbox-close-btn"
+                onClick={() => {
+                  dispatch(setIsLightboxOpen(false));
+                }}
+                fontSize={20}
+              />
+              <ReactPanZoomButtons
+                flipHorizontally={flipHorizontally}
+                flipVertically={flipVertically}
+                rotateCounterClockwise={rotateCounterClockwise}
+                rotateClockwise={rotateClockwise}
+                reset={reset}
+              />
+            </Flex>
+            <Flex
+              sx={{
+                position: 'absolute',
+                top: 4,
+                zIndex: 3,
+                insetInlineStart: '50%',
+                transform: 'translate(-50%, 0)',
+              }}
+            >
+              <CurrentImageButtons />
+            </Flex>
+
             {viewerImageToDisplay && (
               <>
                 <ReactPanZoomImage
                   rotation={rotation}
                   scaleX={scaleX}
                   scaleY={scaleY}
-                  image={viewerImageToDisplay.url}
+                  image={viewerImageToDisplay}
                   styleClass="lightbox-image"
                 />
                 {shouldShowImageDetails && (
                   <ImageMetadataViewer image={viewerImageToDisplay} />
                 )}
+
+                {!shouldShowImageDetails && (
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      top: 0,
+                      insetInlineStart: 0,
+                      w: '100vw',
+                      h: '100vh',
+                      px: 16,
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    <NextPrevImageButtons />
+                  </Box>
+                )}
               </>
             )}
-
-            {!shouldShowImageDetails && (
-              <Box
-                sx={{
-                  position: 'absolute',
-                  top: 0,
-                  insetInlineStart: 0,
-                  w: `calc(100vw - ${8 * 2 * 4}px)`,
-                  h: '100vh',
-                  mx: 8,
-                  pointerEvents: 'none',
-                }}
-              >
-                <NextPrevImageButtons />
-              </Box>
-            )}
-
-            <Box
-              sx={{
-                position: 'absolute',
-                top: 4,
-              }}
-            >
-              <CurrentImageButtons />
-            </Box>
-          </Grid>
-          <ImageGalleryPanel />
-        </Flex>
-      </Box>
-    </TransformWrapper>
+          </TransformWrapper>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 }
diff --git a/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx b/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx
index db6a02ae71..0658fd1756 100644
--- a/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx
+++ b/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch';
+import * as InvokeAI from 'app/invokeai';
 
 type ReactPanZoomProps = {
-  image: string;
+  image: InvokeAI.Image;
   styleClass?: string;
   alt?: string;
   ref?: React.Ref<HTMLImageElement>;
@@ -34,7 +35,7 @@ export default function ReactPanZoomImage({
           transform: `rotate(${rotation}deg) scaleX(${scaleX})  scaleY(${scaleY})`,
           width: '100%',
         }}
-        src={image}
+        src={image.url}
         alt={alt}
         ref={ref}
         className={styleClass ? styleClass : ''}
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 74a64ba405..4c011c124e 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -189,7 +189,7 @@ export default function InvokeTabs() {
       flexGrow={1}
     >
       <TabList>{tabs}</TabList>
-      <TabPanels>{isLightBoxOpen ? <Lightbox /> : tabPanels}</TabPanels>
+      <TabPanels>{tabPanels}</TabPanels>
     </Tabs>
   );
 }
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
index 8efccc9472..1f0bcaead3 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
@@ -18,16 +18,19 @@ import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvas
 import { createSelector } from '@reduxjs/toolkit';
 import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
 import { isEqual } from 'lodash';
+import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 
 const parametersPanelSelector = createSelector(
-  [uiSelector, activeTabNameSelector],
-  (ui, activeTabName) => {
+  [uiSelector, activeTabNameSelector, lightboxSelector],
+  (ui, activeTabName, lightbox) => {
     const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
+    const { isLightboxOpen } = lightbox;
 
     return {
       shouldPinParametersPanel,
       shouldShowParametersPanel,
       isResizable: activeTabName !== 'unifiedCanvas',
+      isLightboxOpen,
     };
   },
   {
@@ -44,8 +47,12 @@ type ParametersPanelProps = {
 const ParametersPanel = ({ children }: ParametersPanelProps) => {
   const dispatch = useAppDispatch();
 
-  const { shouldPinParametersPanel, shouldShowParametersPanel, isResizable } =
-    useAppSelector(parametersPanelSelector);
+  const {
+    shouldPinParametersPanel,
+    shouldShowParametersPanel,
+    isResizable,
+    isLightboxOpen,
+  } = useAppSelector(parametersPanelSelector);
 
   const closeParametersPanel = () => {
     dispatch(setShouldShowParametersPanel(false));
@@ -57,7 +64,8 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
       dispatch(toggleParametersPanel());
       shouldPinParametersPanel && dispatch(requestCanvasRescale());
     },
-    [shouldPinParametersPanel]
+    { enabled: () => !isLightboxOpen },
+    [shouldPinParametersPanel, isLightboxOpen]
   );
 
   useHotkeys(
@@ -86,7 +94,7 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
       isResizable={isResizable || !shouldPinParametersPanel}
       isOpen={shouldShowParametersPanel}
       onClose={closeParametersPanel}
-      isPinned={shouldPinParametersPanel}
+      isPinned={shouldPinParametersPanel || isLightboxOpen}
       sx={{
         borderColor: 'base.700',
         p: shouldPinParametersPanel ? 0 : 4,