board UI updates: font tweaks, add cover image to tooltip, move uncategorized out of board list, allow collapsible board list if private enabled

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

@@ -38,6 +38,7 @@
         "movingImagesToBoard_one": "Moving {{count}} image to board:",
         "movingImagesToBoard_other": "Moving {{count}} images to board:",
         "myBoard": "My Board",
+        "noBoards": "No {{boardType}} Boards",
         "noMatching": "No matching Boards",
         "private": "Private Boards",
         "searchBoard": "Search Boards...",

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

@@ -0,0 +1,45 @@
+import { Flex, Image, Text } from '@invoke-ai/ui-library';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { useTranslation } from 'react-i18next';
+import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
+import { useGetImageDTOQuery } from 'services/api/endpoints/images';
+import type { BoardDTO } from 'services/api/types';
+
+type Props = {
+  board: BoardDTO | null;
+};
+
+export const BoardTooltip = ({ board }: Props) => {
+  const { t } = useTranslation();
+  const { imagesTotal } = useGetBoardImagesTotalQuery(board?.board_id || 'none', {
+    selectFromResult: ({ data }) => {
+      return { imagesTotal: data?.total ?? 0 };
+    },
+  });
+  const { assetsTotal } = useGetBoardAssetsTotalQuery(board?.board_id || 'none', {
+    selectFromResult: ({ data }) => {
+      return { assetsTotal: data?.total ?? 0 };
+    },
+  });
+  const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
+
+  return (
+    <Flex flexDir="column" alignItems="center">
+      {coverImage && (
+        <Image
+          src={coverImage.thumbnail_url}
+          draggable={false}
+          objectFit="cover"
+          w={100}
+          h={100}
+          borderRadius="base"
+          borderBottomRadius="lg"
+        />
+      )}
+      <Text>
+        {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
+      </Text>
+      {board?.archived && <Text>({t('boards.archived')})</Text>}
+    </Flex>
+  );
+};

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

@@ -1,22 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
-
-type Props = {
-  board_id: string;
-  isArchived: boolean;
-};
-
-export const BoardTotalsTooltip = ({ board_id, isArchived }: Props) => {
-  const { t } = useTranslation();
-  const { imagesTotal } = useGetBoardImagesTotalQuery(board_id, {
-    selectFromResult: ({ data }) => {
-      return { imagesTotal: data?.total ?? 0 };
-    },
-  });
-  const { assetsTotal } = useGetBoardAssetsTotalQuery(board_id, {
-    selectFromResult: ({ data }) => {
-      return { assetsTotal: data?.total ?? 0 };
-    },
-  });
-  return `${t('boards.imagesWithCount', { count: imagesTotal })}, ${t('boards.assetsWithCount', { count: assetsTotal })}${isArchived ? ` (${t('boards.archived')})` : ''}`;
-};

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

@@ -1,101 +1,89 @@
-import { Box, Flex, Text } from '@invoke-ai/ui-library';
+import { Button, Collapse, 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';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { useMemo, useState } from 'react';
-import type { CSSProperties } from 'react';
-import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiCaretDownBold, PiCaretRightBold } from 'react-icons/pi';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import type { BoardDTO } from 'services/api/types';
 
 import AddBoardButton from './AddBoardButton';
 import GalleryBoard from './GalleryBoard';
-import NoBoardBoard from './NoBoardBoard';
 
-const overlayScrollbarsStyles: CSSProperties = {
+export const BoardsList = ({ isPrivate }: { isPrivate?: boolean }) => {
-  height: '100%',
+  const { t } = useTranslation();
-  width: '100%',
-};
-
-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 { t } = useTranslation();
+  const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
+  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
 
-  const { filteredPrivateBoards, filteredSharedBoards } = useMemo(() => {
+  const filteredBoards = useMemo(() => {
-    const filteredBoards = boardSearchText
+    if (!boards) {
-      ? boards?.filter((board) => board.board_name.toLowerCase().includes(boardSearchText.toLowerCase()))
+      return EMPTY_ARRAY;
-      : boards;
+    }
-    const filteredPrivateBoards = filteredBoards?.filter((board) => board.is_private) ?? EMPTY_ARRAY;
+
-    const filteredSharedBoards = filteredBoards?.filter((board) => !board.is_private) ?? EMPTY_ARRAY;
+    return boards.filter((board) => {
-    return { filteredPrivateBoards, filteredSharedBoards };
+      if (boardSearchText) {
-  }, [boardSearchText, boards]);
+        return board.is_private === isPrivate && board.board_name.toLowerCase().includes(boardSearchText.toLowerCase());
+      } else {
+        return board.is_private === !!isPrivate;
+      }
+    });
+  }, [boardSearchText, boards, isPrivate]);
+
+  const boardListTitle = useMemo(() => {
+    if (allowPrivateBoards) {
+      return isPrivate ? t('boards.private') : t('boards.shared');
+    } else {
+      return t('boards.boards');
+    }
+  }, [isPrivate, allowPrivateBoards, t]);
 
   return (
     <>
-      <Box position="relative" w="full" h="full">
+      <Flex direction="column" gap={1}>
-        <Box position="absolute" top={0} right={0} bottom={0} left={0}>
+        <Flex
-          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+          position="sticky"
-            {allowPrivateBoards && (
+          w="full"
-              <Flex direction="column" gap={1}>
+          justifyContent="space-between"
-                <Flex
+          alignItems="center"
-                  position="sticky"
+          ps={2}
-                  w="full"
+          pb={1}
-                  justifyContent="space-between"
+          pt={2}
-                  alignItems="center"
+          zIndex={1}
-                  ps={2}
+          top={0}
-                  pb={1}
+          bg="base.900"
-                  pt={2}
+        >
-                  zIndex={1}
+          {allowPrivateBoards ? (
-                  top={0}
+            <Button variant="unstyled" onClick={onToggle}>
-                  bg="base.900"
+              <Flex gap="2" alignItems="center">
-                >
+                <Icon boxSize="5" as={isOpen ? PiCaretDownBold : PiCaretRightBold} fill="base.500" />
-                  <Text fontSize="md" fontWeight="semibold" userSelect="none">
+                <Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
-                    {t('boards.private')}
+                  {boardListTitle}
-                  </Text>
-                  <AddBoardButton isPrivateBoard={true} />
-                </Flex>
-                <Flex direction="column" gap={1}>
-                  <NoBoardBoard isSelected={selectedBoardId === 'none'} />
-                  {filteredPrivateBoards.map((board) => (
-                    <GalleryBoard
-                      board={board}
-                      isSelected={selectedBoardId === board.board_id}
-                      setBoardToDelete={setBoardToDelete}
-                      key={board.board_id}
-                    />
-                  ))}
-                </Flex>
-              </Flex>
-            )}
-            <Flex direction="column" gap={1}>
-              <Flex
-                position="sticky"
-                w="full"
-                justifyContent="space-between"
-                alignItems="center"
-                ps={2}
-                pb={1}
-                pt={2}
-                zIndex={1}
-                top={0}
-                bg="base.900"
-              >
-                <Text fontSize="md" fontWeight="semibold" userSelect="none">
-                  {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
                 </Text>
-                <AddBoardButton isPrivateBoard={false} />
               </Flex>
+            </Button>
+          ) : (
+            <Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
+              {boardListTitle}
+            </Text>
+          )}
+          <AddBoardButton isPrivateBoard={!!isPrivate} />
+        </Flex>
+        <Collapse in={isOpen}>
+          <>
+            {!filteredBoards.length ? (
+              <Text variant="subtext" textAlign="center">
+                {t('boards.noBoards', { boardType: isPrivate ? 'Private' : '' })}
+              </Text>
+            ) : (
               <Flex direction="column" gap={1}>
-                {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
+                {filteredBoards.map((board) => (
-                {filteredSharedBoards.map((board) => (
                   <GalleryBoard
                     board={board}
                     isSelected={selectedBoardId === board.board_id}
@@ -104,12 +92,11 @@ const BoardsList = () => {
                   />
                 ))}
               </Flex>
-            </Flex>
+            )}
-          </OverlayScrollbarsComponent>
+          </>
-        </Box>
+        </Collapse>
-      </Box>
+      </Flex>
       <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
     </>
   );
 };
-export default memo(BoardsList);

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

@@ -0,0 +1,35 @@
+import { Box, Spacer } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
+import { memo } from 'react';
+
+import { BoardsList } from './BoardsList';
+import NoBoardBoard from './NoBoardBoard';
+
+const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
+
+const BoardsListWrapper = () => {
+  const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
+  const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
+
+  return (
+    <>
+      <Box position="relative" w="full" h="full">
+        <Box position="absolute" top={0} right={0} bottom={0} left={0}>
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+            <Spacer pt="5px" />
+            <NoBoardBoard isSelected={selectedBoardId === 'none'} />
+            {allowPrivateBoards && <BoardsList isPrivate={true} />}
+            <BoardsList />
+          </OverlayScrollbarsComponent>
+        </Box>
+      </Box>
+    </>
+  );
+};
+export default memo(BoardsListWrapper);

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

@@ -17,7 +17,7 @@ import IAIDroppable from 'common/components/IAIDroppable';
 import type { AddToBoardDropData } from 'features/dnd/types';
 import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
-import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
+import { BoardTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTooltip';
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
 import type { MouseEvent, MouseEventHandler, MutableRefObject } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -115,12 +115,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   return (
     <BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
       {(ref) => (
-        <Tooltip
+        <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll>
-          label={<BoardTotalsTooltip board_id={board.board_id} isArchived={Boolean(board.archived)} />}
-          openDelay={1000}
-          placement="left"
-          closeOnScroll
-        >
           <Flex
             position="relative"
             ref={ref}
@@ -132,7 +127,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
             cursor="pointer"
             py={1}
             px={2}
-            gap={2}
+            gap={4}
             bg={isSelected ? 'base.850' : undefined}
             _hover={_hover}
           >
@@ -149,17 +144,18 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
               onChange={onChange}
               onSubmit={onSubmit}
               isPreviewFocusable={false}
+              fontSize="sm"
             >
               <EditablePreview
                 cursor="pointer"
                 p={0}
-                fontSize="md"
+                fontSize="sm"
                 textOverflow="ellipsis"
                 noOfLines={1}
                 w="fit-content"
                 wordBreak="break-all"
-                color={isSelected ? 'base.100' : 'base.400'}
+                // color={isSelected ? 'base.100' : 'base.200'}
-                fontWeight={isSelected ? 'semibold' : 'normal'}
+                fontWeight={isSelected ? 'bold' : 'normal'}
               />
               <EditableInput sx={editableInputStyles} />
               <JankEditableHijack onStartEditingRef={onStartEditingRef} />
@@ -197,8 +193,8 @@ const CoverImage = ({ board }: { board: BoardDTO }) => {
         src={coverImage.thumbnail_url}
         draggable={false}
         objectFit="cover"
-        w={8}
+        w={10}
-        h={8}
+        h={10}
         borderRadius="base"
         borderBottomRadius="lg"
       />
@@ -206,8 +202,8 @@ const CoverImage = ({ board }: { board: BoardDTO }) => {
   }
 
   return (
-    <Flex w={8} h={8} justifyContent="center" alignItems="center">
+    <Flex w={10} h={10} justifyContent="center" alignItems="center">
-      <Icon boxSize={8} as={PiImageSquare} opacity={0.7} color="base.500" />
+      <Icon boxSize={10} as={PiImageSquare} opacity={0.7} color="base.500" />
     </Flex>
   );
 };

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

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
 import type { RemoveFromBoardDropData } from 'features/dnd/types';
 import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
-import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
+import { BoardTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTooltip';
 import NoBoardBoardContextMenu from 'features/gallery/components/Boards/NoBoardBoardContextMenu';
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo } from 'react';
@@ -29,7 +29,6 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   });
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
-  const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
   const boardName = useBoardName('none');
   const handleSelectBoard = useCallback(() => {
     dispatch(boardIdSelected({ boardId: 'none' }));
@@ -46,25 +45,12 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
     []
   );
 
-  const filteredOut = useMemo(() => {
-    return boardSearchText ? !boardName.toLowerCase().includes(boardSearchText.toLowerCase()) : false;
-  }, [boardName, boardSearchText]);
-
   const { t } = useTranslation();
 
-  if (filteredOut) {
-    return null;
-  }
-
   return (
     <NoBoardBoardContextMenu>
       {(ref) => (
-        <Tooltip
+        <Tooltip label={<BoardTooltip board={null} />} openDelay={1000} placement="left" closeOnScroll>
-          label={<BoardTotalsTooltip board_id="none" isArchived={false} />}
-          openDelay={1000}
-          placement="left"
-          closeOnScroll
-        >
           <Flex
             position="relative"
             ref={ref}
@@ -75,24 +61,22 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
             cursor="pointer"
             px={2}
             py={1}
-            gap={2}
+            gap={4}
             bg={isSelected ? 'base.850' : undefined}
             _hover={_hover}
           >
-            <Flex w={8} h={8} justifyContent="center" alignItems="center">
+            {/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
-              {/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
+            <Icon boxSize={8} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
-              <Icon boxSize={6} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
+              <path
-                <path
+                d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
-                  d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
+                strokeWidth="5"
-                  strokeWidth="5"
+              />
-                />
+            </Icon>
-              </Icon>
-            </Flex>
 
             <Text
-              fontSize="md"
+              fontSize="sm"
-              color={isSelected ? 'base.100' : 'base.400'}
+              // color={isSelected ? 'base.100' : 'base.400'}
-              fontWeight={isSelected ? 'semibold' : 'normal'}
+              fontWeight={isSelected ? 'bold' : 'normal'}
               noOfLines={1}
               flexGrow={1}
             >

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

@@ -17,11 +17,11 @@ const GalleryBoardName = (props: Props) => {
       as="button"
       h="full"
       w="full"
-      borderWidth={1}
+      layerStyle="second"
       borderRadius="base"
       alignItems="center"
       justifyContent="center"
-      px={2}
+      p={1}
     >
       <Text fontWeight="semibold" fontSize="md" noOfLines={1} wordBreak="break-all" color="base.200">
         {boardName}

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

@@ -23,7 +23,7 @@ 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';
+import BoardsListWrapper from './Boards/BoardsList/BoardsListWrapper';
 import BoardsSearch from './Boards/BoardsList/BoardsSearch';
 import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@@ -118,7 +118,7 @@ const ImageGalleryContent = () => {
               <BoardsSearch />
             </Collapse>
             <Divider pt={2} />
-            <BoardsList />
+            <BoardsListWrapper />
           </Flex>
         </Panel>
         <ResizeHandle