update board header styling, toggle board search, resizing gallery panels

invokeai/frontend/web/public/locales/en.json

@@ -370,6 +370,7 @@
         "deleteImage_other": "Delete {{count}} Images",
         "deleteImageBin": "Deleted images will be sent to your operating system's Bin.",
         "deleteImagePermanent": "Deleted images cannot be restored.",
+        "displayBoardSearch": "Display Board Search",
         "displaySearch": "Display Search",
         "download": "Download",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -1,4 +1,4 @@
-import { Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@@ -8,12 +8,10 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCaretUpBold } from 'react-icons/pi';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import type { BoardDTO } from 'services/api/types';
 
 import AddBoardButton from './AddBoardButton';
-import BoardsSearch from './BoardsSearch';
 import GalleryBoard from './GalleryBoard';
 import NoBoardBoard from './NoBoardBoard';
 
@@ -42,8 +40,7 @@ const BoardsList = () => {
 
   return (
     <>
-      <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base">
-        <BoardsSearch />
+      <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base" maxHeight="100%">
         <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
           {allowPrivateBoards && (
             <>
@@ -53,7 +50,7 @@ const BoardsList = () => {
                 </Text>
                 <AddBoardButton isPrivateBoard={true} />
               </Flex>
-              <Flex direction="column" maxH={346} gap={1}>
+              <Flex direction="column" maxH={100} gap={1}>
                 <NoBoardBoard isSelected={selectedBoardId === 'none'} />
                 {filteredPrivateBoards.map((board) => (
                   <GalleryBoard

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

@@ -4,11 +4,14 @@ import { useStore } from '@nanostores/react';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback } from 'react';
+import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
+import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImagesBold, PiMagnifyingGlassBold } from 'react-icons/pi';
+import { Panel, PanelGroup } from 'react-resizable-panels';
 
 import BoardsList from './Boards/BoardsList/BoardsList';
+import BoardsSearch from './Boards/BoardsList/BoardsSearch';
 import GalleryBoardName from './GalleryBoardName';
 import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@@ -41,6 +44,7 @@ const ImageGalleryContent = () => {
   const dispatch = useAppDispatch();
   const galleryHeader = useStore($galleryHeader);
   const searchDisclosure = useDisclosure({ defaultIsOpen: false });
+  const boardSearchDisclosure = useDisclosure({ defaultIsOpen: false });
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
@@ -50,16 +54,36 @@ const ImageGalleryContent = () => {
     dispatch(galleryViewChanged('assets'));
   }, [dispatch]);
 
+  const panelGroupRef = useRef(null);
+
   return (
     <Flex layerStyle="first" position="relative" flexDirection="column" h="full" w="full" p={2} gap={2}>
-      {galleryHeader}
       <Flex alignItems="center" justifyContent="space-between" gap={2}>
+        {galleryHeader}
+        <GalleryBoardName />
         <GalleryBoardName />
         <GallerySettingsPopover />
+        <IconButton
+          onClick={boardSearchDisclosure.onToggle}
+          tooltip={`${t('gallery.displayBoardSearch')}`}
+          aria-label={t('gallery.displayBoardSearch')}
+          icon={<PiMagnifyingGlassBold />}
+          size="sm"
+        />
       </Flex>
+      <PanelGroup ref={panelGroupRef} direction="vertical">
+        <Panel>
+          <Collapse in={boardSearchDisclosure.isOpen} >
+          <Box mt="2">
+            <BoardsSearch />
+          </Box>
+          </Collapse>
           <BoardsList />
-      <Flex alignItems="center" justifyContent="space-between" gap={2}>
-        <Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" mb="2">
+        </Panel>
+        <ResizeHandle orientation="horizontal" />
+        <Panel>
+          <Flex flexDirection="column" alignItems="center" justifyContent="space-between" gap={2} h="full">
+            <Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" my="2">
               <TabList fontSize="sm" borderBottom="none">
                 <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
                   <Flex alignItems="center" justifyContent="center" gap="2" w="full">
@@ -87,8 +111,7 @@ const ImageGalleryContent = () => {
                 </Tab>
               </TabList>
             </Tabs>
-      </Flex>
-      <Box mb="1">
+            <Box mb="2" w="full">
               <Collapse in={searchDisclosure.isOpen}>
                 <GallerySearch />
               </Collapse>
@@ -96,6 +119,9 @@ const ImageGalleryContent = () => {
             <GalleryImageGrid />
             <GalleryPagination />
           </Flex>
+        </Panel>
+      </PanelGroup>
+    </Flex>
   );
 };