update image and assets tabs styling

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.",
+        "displaySearch": "Display Search",
         "download": "Download",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
         "galleryImageSize": "Image Size",

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

@@ -1,17 +1,51 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
+import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
+import { PiCaretUpBold } from 'react-icons/pi';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
-const GalleryBoardName = () => {
+type Props = {
+  isOpen: boolean;
+  onToggle: () => void;
+};
+
+const GalleryBoardName = (props: Props) => {
+  const { isOpen, onToggle } = props;
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const boardName = useBoardName(selectedBoardId);
 
+  const formattedBoardName = useMemo(() => {
+    if (boardName.length > 20) {
+      return `${boardName.substring(0, 20)}...`;
+    }
+    return boardName;
+  }, [boardName]);
+
   return (
-    <Flex w="full" borderWidth={1} borderRadius="base" alignItems="center" justifyContent="center" px={2}>
+    <Flex
-      <Text fontWeight="semibold" fontSize="md" noOfLines={1} wordBreak="break-all" color="base.200">
+      as={Button}
-        {boardName}
+      onClick={onToggle}
-      </Text>
+      size="sm"
+      position="relative"
+      gap={2}
+      variant="outline"
+      w="full"
+      justifyContent="center"
+      alignItems="center"
+      px={2}
+      fontSize="md"
+      color="base.50"
+    >
+      <Spacer />
+      {formattedBoardName}
+      <Spacer />
+      <Icon
+        as={PiCaretUpBold}
+        boxSize={4}
+        transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
+        transitionProperty="common"
+        transitionDuration="normal"
+      />
     </Flex>
   );
 };

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

@@ -1,24 +1,47 @@
-import { Button, ButtonGroup, Flex, Tab, TabList, Tabs } from '@invoke-ai/ui-library';
+import type { ChakraProps } from '@invoke-ai/ui-library';
+import { Box, Collapse, Flex, IconButton, Tab, TabList, Tabs, useDisclosure } from '@invoke-ai/ui-library';
 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 { useTranslation } from 'react-i18next';
-import { PiImagesBold } from 'react-icons/pi';
+import { PiImagesBold, PiMagnifyingGlassBold } from 'react-icons/pi';
-import { RiServerLine } from 'react-icons/ri';
 
 import BoardsList from './Boards/BoardsList/BoardsList';
 import GalleryBoardName from './GalleryBoardName';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 import { GalleryPagination } from './ImageGrid/GalleryPagination';
 import { GallerySearch } from './ImageGrid/GallerySearch';
+import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
+
+const baseStyles: ChakraProps['sx'] = {
+  fontWeight: 'semibold',
+  fontSize: 'md',
+  color: 'base.300',
+  borderBottom: '1px solid',
+  borderBottomColor: 'invokeBlue.800',
+};
+
+const selectedStyles: ChakraProps['sx'] = {
+  borderColor: 'invokeBlue.800',
+  borderBottomColor: 'base.850',
+  color: 'invokeBlue.300',
+};
+
+const searchIconStyles: ChakraProps['sx'] = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'invokeBlue.800',
+  maxW: '16',
+};
 
 const ImageGalleryContent = () => {
   const { t } = useTranslation();
   const galleryView = useAppSelector((s) => s.gallery.galleryView);
   const dispatch = useAppDispatch();
   const galleryHeader = useStore($galleryHeader);
+  const searchDisclosure = useDisclosure({ defaultIsOpen: false });
+  const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } = useDisclosure({ defaultIsOpen: true });
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
@@ -29,51 +52,48 @@ const ImageGalleryContent = () => {
   }, [dispatch]);
 
   return (
-    <Flex
+    <Flex layerStyle="first" position="relative" flexDirection="column" h="full" w="full" p={2} gap={2}>
-      layerStyle="first"
-      position="relative"
-      flexDirection="column"
-      h="full"
-      w="full"
-      borderRadius="base"
-      p={2}
-      gap={2}
-    >
       {galleryHeader}
-      <BoardsList />
-      <GalleryBoardName />
       <Flex alignItems="center" justifyContent="space-between" gap={2}>
-        <Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
+          <GalleryBoardName isOpen={isBoardListOpen} onToggle={onToggleBoardList} />
-          <TabList>
+          <GallerySettingsPopover />
-            <ButtonGroup w="full">
+        </Flex>
-              <Tab
+      <BoardsList isOpen={isBoardListOpen}/>
-                as={Button}
+      <Flex alignItems="center" justifyContent="space-between" gap={2}>
-                size="sm"
+        <Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" mb="2">
-                isChecked={galleryView === 'images'}
+          <TabList fontSize="sm" borderBottom="none">
-                onClick={handleClickImages}
+            <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
-                w="full"
+              <Flex alignItems="center" justifyContent="center" gap="2" w="full">
-                leftIcon={<PiImagesBold size="16px" />}
+                <PiImagesBold size="16px" />
-                data-testid="images-tab"
-              >
                 {t('parameters.images')}
+              </Flex>
             </Tab>
-              <Tab
+            <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
-                as={Button}
+              <Flex alignItems="center" justifyContent="center" gap="2" w="full">
-                size="sm"
+                <PiImagesBold size="16px" />
-                isChecked={galleryView === 'assets'}
-                onClick={handleClickAssets}
-                w="full"
-                leftIcon={<RiServerLine size="16px" />}
-                data-testid="assets-tab"
-              >
                 {t('gallery.assets')}
+              </Flex>
+            </Tab>
+            <Tab sx={searchIconStyles} onClick={searchDisclosure.onToggle}>
+            <IconButton
+                tooltip={`${t('gallery.displaySearch')}`}
+                aria-label={t('gallery.displaySearch')}
+                icon={<PiMagnifyingGlassBold />}
+                fontSize={16}
+                textAlign="center"
+                color="base.400"
+                variant="unstyled"
+                minW="unset"
+              />
             </Tab>
-            </ButtonGroup>
           </TabList>
         </Tabs>
       </Flex>
-
+      <Box mb="1">
+        <Collapse in={searchDisclosure.isOpen}>
           <GallerySearch />
+        </Collapse>
+      </Box>
       <GalleryImageGrid />
       <GalleryPagination />
     </Flex>