From ad2f1b7b36ec9f882b4733dc0b2387949047a3ca Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 12 Mar 2023 13:46:00 +1100
Subject: [PATCH] fix(ui): hack for hiding pinned panels

---
 .../features/ui/components/FloatingGalleryButton.tsx  |  4 ++--
 .../ui/components/FloatingParametersPanelButtons.tsx  | 11 ++++++++---
 .../common/ResizableDrawer/ResizableDrawer.tsx        |  6 ++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
index 5f94420e9b..6076b0944f 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@@ -11,12 +11,12 @@ import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
 const floatingGalleryButtonSelector = createSelector(
   [activeTabNameSelector, uiSelector],
   (activeTabName, ui) => {
-    const { shouldPinGallery } = ui;
+    const { shouldPinGallery, shouldShowGallery } = ui;
 
     return {
       shouldPinGallery,
       shouldShowGalleryButton:
-        !shouldPinGallery &&
+        (!shouldPinGallery || !shouldShowGallery) &&
         ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName),
     };
   },
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
index ca206684ca..cec9ab2918 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx
@@ -23,17 +23,22 @@ const floatingButtonStyles: ChakraProps['sx'] = {
 export const floatingParametersPanelButtonSelector = createSelector(
   [uiSelector, activeTabNameSelector],
   (ui, activeTabName) => {
-    const { shouldPinParametersPanel, shouldUseCanvasBetaLayout } = ui;
+    const {
+      shouldPinParametersPanel,
+      shouldUseCanvasBetaLayout,
+      shouldShowParametersPanel,
+    } = ui;
 
     const canvasBetaLayoutCheck =
       shouldUseCanvasBetaLayout && activeTabName === 'unifiedCanvas';
 
     const shouldShowProcessButtons =
-      !canvasBetaLayoutCheck && !shouldPinParametersPanel;
+      !canvasBetaLayoutCheck &&
+      (!shouldPinParametersPanel || !shouldShowParametersPanel);
 
     const shouldShowParametersPanelButton =
       !canvasBetaLayoutCheck &&
-      !shouldPinParametersPanel &&
+      (!shouldPinParametersPanel || !shouldShowParametersPanel) &&
       ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
 
     return {
diff --git a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
index ec1c003b4a..8b920da868 100644
--- a/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx
@@ -154,19 +154,21 @@ const ResizableDrawer = ({
     <Slide
       direction={slideDirection}
       in={isOpen}
-      motionProps={{ initial: false }}
+      unmountOnExit={isPinned}
+      motionProps={{ initial: isPinned }}
       {...(isPinned
         ? {
             style: {
               position: undefined,
               left: undefined,
+              right: undefined,
               top: undefined,
               bottom: undefined,
               width: undefined,
             },
           }
         : {
-            transition: { enter: { duration: 0.15 }, exit: { duration: 0.15 } },
+            // transition: { enter: { duration: 0.15 }, exit: { duration: 0.15 } },
             style: { zIndex: 99, width: 'full' },
           })}
     >