feat(ui): support a min expanded size for collapsible panels

Author: psychedelicious

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

@@ -9,7 +9,12 @@ import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
 import { selectBoardSearchText } from 'features/gallery/store/gallerySelectors';
 import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
 import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
-import { BOARD_PANEL_DEFAULT_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID } from 'features/ui/layouts/shared';
+import {
+  BOARD_PANEL_DEFAULT_HEIGHT_PX,
+  BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX,
+  BOARD_PANEL_MIN_HEIGHT_PX,
+  BOARDS_PANEL_ID,
+} from 'features/ui/layouts/shared';
 import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
@@ -27,7 +32,8 @@ export const BoardsPanel = memo(() => {
     BOARDS_PANEL_ID,
     'vertical',
     BOARD_PANEL_DEFAULT_HEIGHT_PX,
-    BOARD_PANEL_MIN_HEIGHT_PX
+    BOARD_PANEL_MIN_HEIGHT_PX,
+    BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX
   );
   const isCollapsed = useStore(collapsibleApi.$isCollapsed);
   const { t } = useTranslation();

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

@@ -10,6 +10,7 @@ import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
 import {
   GALLERY_PANEL_DEFAULT_HEIGHT_PX,
   GALLERY_PANEL_ID,
+  GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX,
   GALLERY_PANEL_MIN_HEIGHT_PX,
 } from 'features/ui/layouts/shared';
 import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
@@ -38,7 +39,8 @@ export const GalleryPanel = memo(() => {
     GALLERY_PANEL_ID,
     'vertical',
     GALLERY_PANEL_DEFAULT_HEIGHT_PX,
-    GALLERY_PANEL_MIN_HEIGHT_PX
+    GALLERY_PANEL_MIN_HEIGHT_PX,
+    GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX
   );
   const isCollapsed = useStore(collapsibleApi.$isCollapsed);
 

invokeai/frontend/web/src/features/ui/layouts/shared.ts

@@ -24,9 +24,11 @@ export const LEFT_PANEL_MIN_SIZE_PX = 420;
 export const RIGHT_PANEL_MIN_SIZE_PX = 420;
 
 export const BOARD_PANEL_MIN_HEIGHT_PX = 36;
+export const BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX = 128;
 export const BOARD_PANEL_DEFAULT_HEIGHT_PX = 232;
 
 export const GALLERY_PANEL_MIN_HEIGHT_PX = 36;
+export const GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX = 128;
 export const GALLERY_PANEL_DEFAULT_HEIGHT_PX = 232;
 
 export const LAYERS_PANEL_MIN_HEIGHT_PX = 36;

invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts

@@ -21,7 +21,8 @@ export const useCollapsibleGridviewPanel = (
   panelId: string,
   orientation: 'horizontal' | 'vertical',
   defaultSize: number,
-  collapsedSize?: number
+  collapsedSize?: number,
+  minExpandedSize?: number
 ) => {
   const $isCollapsed = useState(() => atom(false))[0];
   const lastExpandedSizeRef = useRef<number>(0);
@@ -46,12 +47,18 @@ export const useCollapsibleGridviewPanel = (
     if (!panel || !(panel instanceof GridviewPanel)) {
       return;
     }
+
+    let newSize = lastExpandedSizeRef.current || defaultSize;
+    if (minExpandedSize && newSize < minExpandedSize) {
+      newSize = minExpandedSize;
+    }
+
     if (orientation === 'vertical') {
-      panel.api.setSize({ height: lastExpandedSizeRef.current || defaultSize });
+      panel.api.setSize({ height: newSize });
     } else {
-      panel.api.setSize({ width: lastExpandedSizeRef.current || defaultSize });
+      panel.api.setSize({ width: newSize });
     }
-  }, [defaultSize, orientation, panelId, tab]);
+  }, [defaultSize, minExpandedSize, orientation, panelId, tab]);
 
   const toggle = useCallback(() => {
     const panel = navigationApi.getPanel(tab, panelId);