fix(ui): use correct BoardTooltip component w/ thumbnail image

Author: psychedelicious

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

@@ -1,27 +1,23 @@
 import { Flex, Image, Text } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
+import { useMemo } from 'react';
 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;
+  imageCount: number;
+  assetCount: number;
+  isArchived: boolean;
+  coverImageName?: string | null;
 };
 
-export const BoardTooltip = ({ board }: Props) => {
+export const BoardTooltip = ({ imageCount, assetCount, isArchived, coverImageName }: 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);
+  const { currentData: coverImage } = useGetImageDTOQuery(coverImageName ?? skipToken);
+
+  const totalString = useMemo(() => {
+    return `${t('boards.imagesWithCount', { count: imageCount })}, ${t('boards.assetsWithCount', { count: assetCount })}${isArchived ? ` (${t('boards.archived')})` : ''}`;
+  }, [assetCount, imageCount, isArchived, t]);
 
   return (
     <Flex flexDir="column" alignItems="center" gap={1}>
@@ -34,13 +30,11 @@ export const BoardTooltip = ({ board }: Props) => {
           aspectRatio="1/1"
           borderRadius="base"
           borderBottomRadius="lg"
+          mt={1}
         />
       )}
       <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>}
+        <Text noOfLines={1}>{totalString}</Text>
       </Flex>
     </Flex>
   );

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTotalsTooltip.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 {
   selectAutoAddBoardId,
   selectAutoAssignBoardOnClick,
@@ -121,13 +121,14 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
       {(ref) => (
         <Tooltip
           label={
-            <BoardTotalsTooltip
+            <BoardTooltip
               imageCount={board.image_count}
               assetCount={board.asset_count}
-              isArchived={Boolean(board.archived)}
+              isArchived={board.archived}
+              coverImageName={board.cover_image_name}
             />
           }
-          openDelay={1000}
+          openDelay={500}
           placement="left"
           closeOnScroll
         >

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.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 {
   selectAutoAddBoardId,
@@ -58,13 +58,9 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
       {(ref) => (
         <Tooltip
           label={
-            <BoardTotalsTooltip
-              imageCount={data?.image_count ?? 0}
-              assetCount={data?.asset_count ?? 0}
-              isArchived={false}
-            />
+            <BoardTooltip imageCount={data?.image_count ?? 0} assetCount={data?.asset_count ?? 0} isArchived={false} />
           }
-          openDelay={1000}
+          openDelay={500}
           placement="left"
           closeOnScroll
         >