From 8dfe196c4fe60c22d88f52950137cd1a73808b26 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Fri, 21 Jul 2023 00:54:03 +1200
Subject: [PATCH] feat: Add Image Count to Board Name

---
 .../gallery/components/GalleryBoardName.tsx        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
index 2e2efb8e25..27565a52aa 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
@@ -6,6 +6,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { memo, useMemo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
+import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 
 const selector = createSelector(
   [stateSelector],
@@ -26,12 +27,17 @@ const GalleryBoardName = (props: Props) => {
   const { isOpen, onToggle } = props;
   const { selectedBoardId } = useAppSelector(selector);
   const boardName = useBoardName(selectedBoardId);
+  const numOfBoardImages = useBoardTotal(selectedBoardId);
+
   const formattedBoardName = useMemo(() => {
-    if (boardName.length > 20) {
-      return `${boardName.substring(0, 20)}...`;
+    if (!boardName || !numOfBoardImages) {
+      return '';
     }
-    return boardName;
-  }, [boardName]);
+    if (boardName.length > 20) {
+      return `${boardName.substring(0, 20)}... (${numOfBoardImages})`;
+    }
+    return `${boardName} (${numOfBoardImages})`;
+  }, [boardName, numOfBoardImages]);
 
   return (
     <Flex