fix(ui): hack for hiding pinned panels

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),
     };
   },

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 {

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' },
           })}
     >