feat(ui): updated boards resizable panel logic

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

@@ -3,12 +3,17 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
-const GalleryBoardName = () => {
+type Props = {
+  onClick: () => void;
+};
+
+const GalleryBoardName = (props: Props) => {
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const boardName = useBoardName(selectedBoardId);
 
   return (
     <Flex
+      onClick={props.onClick}
       as="button"
       h="full"
       w="full"

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

@@ -5,7 +5,11 @@ import { memo } from 'react';
 
 import GalleryBoardName from './GalleryBoardName';
 
-const GalleryHeader = () => {
+type Props = {
+  onClickBoardName: () => void;
+};
+
+export const GalleryHeader = memo((props: Props) => {
   const projectName = useStore($projectName);
   const projectUrl = useStore($projectUrl);
 
@@ -15,16 +19,16 @@ const GalleryHeader = () => {
         <Text fontSize="md" fontWeight="semibold" noOfLines={1} w="full" textAlign="center">
           <Link href={projectUrl}>{projectName}</Link>
         </Text>
-        <GalleryBoardName />
+        <GalleryBoardName onClick={props.onClickBoardName} />
       </Flex>
     );
   }
 
   return (
     <Flex w="full" pe={2}>
-      <GalleryBoardName />
+      <GalleryBoardName onClick={props.onClickBoardName} />
     </Flex>
   );
-};
+});
 
-export default memo(GalleryHeader);
+GalleryHeader.displayName = 'GalleryHeader';

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

@@ -1,12 +1,14 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
 import { Box, Collapse, Flex, IconButton, Spacer, Tab, TabList, Tabs, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import GalleryHeader from 'features/gallery/components/GalleryHeader';
+import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
 import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
-import { memo, useCallback, useRef } from 'react';
+import { usePanel, type UsePanelOptions } from 'features/ui/hooks/usePanel';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiMagnifyingGlassBold } from 'react-icons/pi';
+import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
 import BoardsList from './Boards/BoardsList/BoardsList';
@@ -36,6 +38,20 @@ const ImageGalleryContent = () => {
   const dispatch = useAppDispatch();
   const searchDisclosure = useDisclosure({ defaultIsOpen: false });
   const boardSearchDisclosure = useDisclosure({ defaultIsOpen: false });
+  const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+
+  const boardsListPanelOptions = useMemo<UsePanelOptions>(
+    () => ({
+      unit: 'pixels',
+      minSize: 128,
+      defaultSize: 256,
+      fallbackMinSizePct: 20,
+      panelGroupRef,
+      panelGroupDirection: 'vertical',
+    }),
+    []
+  );
+  const boardsListPanel = usePanel(boardsListPanelOptions);
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
@@ -45,12 +61,10 @@ const ImageGalleryContent = () => {
     dispatch(galleryViewChanged('assets'));
   }, [dispatch]);
 
-  const panelGroupRef = useRef(null);
-
   return (
     <Flex position="relative" flexDirection="column" h="full" w="full" pt={2}>
       <Flex alignItems="center" gap={2}>
-        <GalleryHeader />
+        <GalleryHeader onClickBoardName={boardsListPanel.toggle} />
         <GallerySettingsPopover />
         <Box position="relative" h="full">
           <IconButton
@@ -76,14 +90,26 @@ const ImageGalleryContent = () => {
         </Box>
       </Flex>
       <PanelGroup ref={panelGroupRef} direction="vertical">
-        <Panel>
+        <Panel
+          id="boards-list-panel"
+          ref={boardsListPanel.ref}
+          defaultSize={boardsListPanel.defaultSize}
+          minSize={boardsListPanel.minSize}
+          onCollapse={boardsListPanel.onCollapse}
+          onExpand={boardsListPanel.onExpand}
+          collapsible
+        >
           <Collapse in={boardSearchDisclosure.isOpen}>
             <BoardsSearch />
           </Collapse>
           <BoardsList />
         </Panel>
-        <ResizeHandle orientation="horizontal" />
-        <Panel>
+        <ResizeHandle
+          id="gallery-panel-handle"
+          orientation="horizontal"
+          onDoubleClick={boardsListPanel.onDoubleClickHandle}
+        />
+        <Panel id="gallery-wrapper-panel" minSize={20}>
           <Flex flexDirection="column" alignItems="center" justifyContent="space-between" h="full" w="full">
             <Tabs index={galleryView === 'images' ? 0 : 1} variant="enclosed" display="flex" flexDir="column" w="full">
               <TabList gap={2} fontSize="sm" borderColor="base.800">