From a96e34d2d191944ce58785477e4837c6c5600790 Mon Sep 17 00:00:00 2001
From: chainchompa <chainchompa@gmail.com>
Date: Tue, 9 Jul 2024 18:46:26 -0400
Subject: [PATCH] remove collapsibles and update board title

---
 .../Boards/BoardsList/BoardsList.tsx          | 111 ++++++------------
 .../gallery/components/GalleryBoardName.tsx   |  47 ++------
 .../components/ImageGalleryContent.tsx        |   5 +-
 3 files changed, 42 insertions(+), 121 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index 7b572bd9ec..9dfb4a2860 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -1,4 +1,4 @@
-import { Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { Flex, Icon, Text, useDisclosure } 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';
@@ -22,20 +22,13 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-type Props = {
-  isOpen: boolean;
-};
-
-const BoardsList = (props: Props) => {
-  const { isOpen } = props;
+const BoardsList = () => {
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
   const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
   const queryArgs = useAppSelector(selectListBoardsQueryArgs);
   const { data: boards } = useListAllBoardsQuery(queryArgs);
   const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
-  const privateBoardsDisclosure = useDisclosure({ defaultIsOpen: false });
-  const sharedBoardsDisclosure = useDisclosure({ defaultIsOpen: false });
   const { t } = useTranslation();
 
   const { filteredPrivateBoards, filteredSharedBoards } = useMemo(() => {
@@ -49,75 +42,20 @@ const BoardsList = (props: Props) => {
 
   return (
     <>
-      <Collapse in={isOpen} animateOpacity>
-        <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">
+        <BoardsSearch />
+        <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
           {allowPrivateBoards && (
             <>
-              <Flex w="full" gap={2}>
-                <Flex
-                  flexGrow={1}
-                  onClick={privateBoardsDisclosure.onToggle}
-                  gap={2}
-                  alignItems="center"
-                  cursor="pointer"
-                >
-                  <Icon
-                    as={PiCaretUpBold}
-                    boxSize={4}
-                    transform={privateBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
-                    transitionProperty="common"
-                    transitionDuration="normal"
-                    color="base.400"
-                  />
-                  <Text fontSize="md" fontWeight="medium" userSelect="none">
-                    {t('boards.private')}
-                  </Text>
-                </Flex>
+              <Flex w="full" justifyContent="space-between" alignItems="center">
+                <Text fontSize="md" fontWeight="medium" userSelect="none">
+                  {t('boards.private')}
+                </Text>
                 <AddBoardButton isPrivateBoard={true} />
               </Flex>
-              <Collapse in={privateBoardsDisclosure.isOpen} animateOpacity>
-                <OverlayScrollbarsComponent
-                  defer
-                  style={overlayScrollbarsStyles}
-                  options={overlayScrollbarsParams.options}
-                >
-                  <Flex direction="column" maxH={346} gap={1}>
-                    <NoBoardBoard isSelected={selectedBoardId === 'none'} />
-                    {filteredPrivateBoards.map((board) => (
-                      <GalleryBoard
-                        board={board}
-                        isSelected={selectedBoardId === board.board_id}
-                        setBoardToDelete={setBoardToDelete}
-                        key={board.board_id}
-                      />
-                    ))}
-                  </Flex>
-                </OverlayScrollbarsComponent>
-              </Collapse>
-            </>
-          )}
-          <Flex h="full" w="full" gap={2}>
-            <Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}>
-              <Icon
-                as={PiCaretUpBold}
-                boxSize={4}
-                transform={sharedBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
-                transitionProperty="common"
-                transitionDuration="normal"
-                color="base.400"
-              />
-              <Text fontSize="md" fontWeight="medium" userSelect="none">
-                {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
-              </Text>
-            </Flex>
-            <AddBoardButton isPrivateBoard={false} />
-          </Flex>
-          <Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity>
-            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-              <Flex direction="column" gap={1}>
-                {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
-                {filteredSharedBoards.map((board) => (
+              <Flex direction="column" maxH={346} gap={1}>
+                <NoBoardBoard isSelected={selectedBoardId === 'none'} />
+                {filteredPrivateBoards.map((board) => (
                   <GalleryBoard
                     board={board}
                     isSelected={selectedBoardId === board.board_id}
@@ -126,10 +64,27 @@ const BoardsList = (props: Props) => {
                   />
                 ))}
               </Flex>
-            </OverlayScrollbarsComponent>
-          </Collapse>
-        </Flex>
-      </Collapse>
+            </>
+          )}
+          <Flex w="full" justifyContent="space-between" alignItems="center">
+            <Text fontSize="md" fontWeight="medium" userSelect="none">
+              {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
+            </Text>
+            <AddBoardButton isPrivateBoard={false} />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
+            {filteredSharedBoards.map((board) => (
+              <GalleryBoard
+                board={board}
+                isSelected={selectedBoardId === board.board_id}
+                setBoardToDelete={setBoardToDelete}
+                key={board.board_id}
+              />
+            ))}
+          </Flex>
+        </OverlayScrollbarsComponent>
+      </Flex>
       <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
     </>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
index 7b3d2e3537..9e9d8bee39 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
@@ -1,50 +1,17 @@
-import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { memo, useMemo } from 'react';
-import { PiCaretUpBold } from 'react-icons/pi';
+import { memo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
-type Props = {
-  isOpen: boolean;
-  onToggle: () => void;
-};
-
-const GalleryBoardName = (props: Props) => {
-  const { isOpen, onToggle } = props;
+const GalleryBoardName = () => {
   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
-      as={Button}
-      onClick={onToggle}
-      size="sm"
-      position="relative"
-      gap={2}
-      variant="outline"
-      w="full"
-      justifyContent="center"
-      alignItems="center"
-      fontSize="md"
-      color="base.50"
-    >
-      <Spacer />
-      {formattedBoardName}
-      <Spacer />
-      <Icon
-        as={PiCaretUpBold}
-        boxSize={4}
-        transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
-        transitionProperty="common"
-        transitionDuration="normal"
-      />
+    <Flex as="button" w="full" borderWidth={1} borderRadius="base" alignItems="center" justifyContent="center" px={2}>
+      <Text fontWeight="semibold" fontSize="md" noOfLines={1} wordBreak="break-all" color="base.200">
+        {boardName}
+      </Text>
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 44f3f8d6d9..74901b0f58 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -41,7 +41,6 @@ const ImageGalleryContent = () => {
   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'));
@@ -55,10 +54,10 @@ const ImageGalleryContent = () => {
     <Flex layerStyle="first" position="relative" flexDirection="column" h="full" w="full" p={2} gap={2}>
       {galleryHeader}
       <Flex alignItems="center" justifyContent="space-between" gap={2}>
-          <GalleryBoardName isOpen={isBoardListOpen} onToggle={onToggleBoardList} />
+          <GalleryBoardName />
           <GallerySettingsPopover />
         </Flex>
-      <BoardsList isOpen={isBoardListOpen}/>
+      <BoardsList />
       <Flex alignItems="center" justifyContent="space-between" gap={2}>
         <Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" mb="2">
           <TabList fontSize="sm" borderBottom="none">