feat(ui): more gallery UX updates

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

@@ -32,12 +32,14 @@
         "deleteBoardAndImages": "Delete Board and Images",
         "deleteBoardOnly": "Delete Board Only",
         "deletedBoardsCannotbeRestored": "Deleted boards cannot be restored",
+        "hideBoards": "Hide Boards",
         "loading": "Loading...",
         "menuItemAutoAdd": "Auto-add to this Board",
         "move": "Move",
         "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...",
@@ -46,6 +48,7 @@
         "topMessage": "This board contains images used in the following features:",
         "unarchiveBoard": "Unarchive Board",
         "uncategorized": "Uncategorized",
+        "viewBoards": "View Boards",
         "downloadBoard": "Download Board",
         "imagesWithCount_one": "{{count}} image",
         "imagesWithCount_other": "{{count}} images",
@@ -373,6 +376,8 @@
         "displayBoardSearch": "Display Board Search",
         "displaySearch": "Display Search",
         "download": "Download",
+        "exitBoardSearch": "Exit Board Search",
+        "exitSearch": "Exit Search",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
         "galleryImageSize": "Image Size",
         "gallerySettings": "Gallery Settings",

invokeai/frontend/web/src/common/hooks/useAssertSingleton.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { assert } from 'tsafe';
+
+const IDS = new Set<string>();
+
+/**
+ * Asserts that there is only one instance of a singleton entity. It can be a hook or a component.
+ * @param id The ID of the singleton entity.
+ */
+export function useAssertSingleton(id: string) {
+  useEffect(() => {
+    assert(!IDS.has(id), `There should be only one instance of ${id}`);
+    IDS.add(id);
+    return () => {
+      IDS.delete(id);
+    };
+  }, [id]);
+}

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

@@ -0,0 +1,47 @@
+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" gap={1}>
+      {coverImage && (
+        <Image
+          src={coverImage.thumbnail_url}
+          draggable={false}
+          objectFit="cover"
+          maxW={150}
+          aspectRatio="1/1"
+          borderRadius="base"
+          borderBottomRadius="lg"
+        />
+      )}
+      <Flex flexDir="column" alignItems="center">
+        <Text noOfLines={1}>
+          {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
+        </Text>
+        {board?.archived && <Text>({t('boards.archived')})</Text>}
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -1,115 +1,122 @@
-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 type { CSSProperties } from 'react';
-import { memo, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { PiCaretDownBold } 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 = {
-  height: '100%',
-  width: '100%',
+type Props = {
+  isPrivate: boolean;
+  setBoardToDelete: (board?: BoardDTO) => void;
 };
 
-const BoardsList = () => {
+export const BoardsList = ({ isPrivate, setBoardToDelete }: Props) => {
+  const { t } = useTranslation();
   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 filteredBoards = useMemo(() => {
+    if (!boards) {
+      return EMPTY_ARRAY;
+    }
+
+    return boards.filter((board) => {
+      if (boardSearchText.length) {
+        return board.is_private === isPrivate && board.board_name.toLowerCase().includes(boardSearchText.toLowerCase());
+      } else {
+        return board.is_private === isPrivate;
+      }
+    });
+  }, [boardSearchText, boards, isPrivate]);
+
+  const boardElements = useMemo(() => {
+    const elements = [];
+    if (allowPrivateBoards && isPrivate && !boardSearchText.length) {
+      elements.push(<NoBoardBoard key="none" isSelected={selectedBoardId === 'none'} />);
+    }
+
+    if (!allowPrivateBoards && !boardSearchText.length) {
+      elements.push(<NoBoardBoard key="none" isSelected={selectedBoardId === 'none'} />);
+    }
+
+    filteredBoards.forEach((board) => {
+      elements.push(
+        <GalleryBoard
+          board={board}
+          isSelected={selectedBoardId === board.board_id}
+          setBoardToDelete={setBoardToDelete}
+          key={board.board_id}
+        />
+      );
+    });
+
+    return elements;
+  }, [allowPrivateBoards, isPrivate, boardSearchText.length, filteredBoards, selectedBoardId, setBoardToDelete]);
 
-  const { filteredPrivateBoards, filteredSharedBoards } = useMemo(() => {
-    const filteredBoards = boardSearchText
-      ? boards?.filter((board) => board.board_name.toLowerCase().includes(boardSearchText.toLowerCase()))
-      : boards;
-    const filteredPrivateBoards = filteredBoards?.filter((board) => board.is_private) ?? EMPTY_ARRAY;
-    const filteredSharedBoards = filteredBoards?.filter((board) => !board.is_private) ?? EMPTY_ARRAY;
-    return { filteredPrivateBoards, filteredSharedBoards };
-  }, [boardSearchText, boards]);
+  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">
-        <Box position="absolute" top={0} right={0} bottom={0} left={0}>
-          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-            {allowPrivateBoards && (
-              <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">
-                    {t('boards.private')}
-                  </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>
-              <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>
+    <Flex direction="column">
+      <Flex
+        position="sticky"
+        w="full"
+        justifyContent="space-between"
+        alignItems="center"
+        ps={2}
+        py={1}
+        zIndex={1}
+        top={0}
+        bg="base.900"
+      >
+        {allowPrivateBoards ? (
+          <Button variant="unstyled" onClick={onToggle}>
+            <Flex gap="2" alignItems="center">
+              <Icon
+                boxSize={4}
+                as={PiCaretDownBold}
+                transform={isOpen ? undefined : 'rotate(-90deg)'}
+                fill="base.500"
+              />
+              <Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
+                {boardListTitle}
+              </Text>
             </Flex>
-          </OverlayScrollbarsComponent>
-        </Box>
-      </Box>
-      <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
-    </>
+          </Button>
+        ) : (
+          <Text fontSize="sm" fontWeight="semibold" userSelect="none" color="base.500">
+            {boardListTitle}
+          </Text>
+        )}
+        <AddBoardButton isPrivateBoard={isPrivate} />
+      </Flex>
+      <Collapse in={isOpen}>
+        <Flex direction="column" gap={1}>
+          {boardElements.length ? (
+            boardElements
+          ) : (
+            <Text variant="subtext" textAlign="center">
+              {t('boards.noBoards', { boardType: boardSearchText.length ? 'Matching' : '' })}
+            </Text>
+          )}
+        </Flex>
+      </Collapse>
+    </Flex>
   );
 };
-export default memo(BoardsList);

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

@@ -0,0 +1,35 @@
+import { Box } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
+import { memo, useState } from 'react';
+import type { BoardDTO } from 'services/api/types';
+
+import { BoardsList } from './BoardsList';
+
+const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
+
+const BoardsListWrapper = () => {
+  const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
+  const [boardToDelete, setBoardToDelete] = useState<BoardDTO>();
+
+  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}>
+            {allowPrivateBoards && <BoardsList isPrivate={true} setBoardToDelete={setBoardToDelete} />}
+            <BoardsList isPrivate={false} setBoardToDelete={setBoardToDelete} />
+          </OverlayScrollbarsComponent>
+        </Box>
+      </Box>
+      <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
+    </>
+  );
+};
+export default memo(BoardsListWrapper);

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

@@ -40,7 +40,7 @@ const BoardsSearch = () => {
   );
 
   return (
-    <InputGroup pt={2}>
+    <InputGroup>
       <Input
         placeholder={t('boards.searchBoard')}
         value={boardSearchText}