From 476ebd13aeedfeab2af899843d5378a8b1a3b161 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 9 Jul 2024 22:51:08 +1000
Subject: [PATCH] feat(ui): add board button tooltip when private boards
 enabled

---
 invokeai/frontend/web/public/locales/en.json  |  2 ++
 .../Boards/BoardsList/AddBoardButton.tsx      | 23 +++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 3332e21416..4b102d6cf3 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -17,6 +17,8 @@
     },
     "boards": {
         "addBoard": "Add Board",
+        "addPrivateBoard": "Add Private Board",
+        "addSharedBoard": "Add Shared Board",
         "archiveBoard": "Archive Board",
         "archived": "Archived",
         "autoAddBoard": "Auto-Add Board",
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
index 112d0d61f8..c6ddb85daa 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
@@ -1,7 +1,7 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { boardIdSelected } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 import { useCreateBoardMutation } from 'services/api/endpoints/boards';
@@ -13,23 +13,32 @@ type Props = {
 const AddBoardButton = ({ isPrivateBoard }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
   const [createBoard, { isLoading }] = useCreateBoardMutation();
-  const DEFAULT_BOARD_NAME = t('boards.myBoard');
+  const label = useMemo(() => {
+    if (!allowPrivateBoards) {
+      return t('boards.addBoard');
+    }
+    if (isPrivateBoard) {
+      return t('boards.addPrivateBoard');
+    }
+    return t('boards.addSharedBoard');
+  }, [allowPrivateBoards, isPrivateBoard, t]);
   const handleCreateBoard = useCallback(async () => {
     try {
-      const board = await createBoard({ board_name: DEFAULT_BOARD_NAME, is_private: isPrivateBoard }).unwrap();
+      const board = await createBoard({ board_name: t('boards.myBoard'), is_private: isPrivateBoard }).unwrap();
       dispatch(boardIdSelected({ boardId: board.board_id }));
     } catch {
       //no-op
     }
-  }, [createBoard, DEFAULT_BOARD_NAME, isPrivateBoard, dispatch]);
+  }, [t, createBoard, isPrivateBoard, dispatch]);
 
   return (
     <IconButton
       icon={<PiPlusBold />}
       isLoading={isLoading}
-      tooltip={t('boards.addBoard')}
-      aria-label={t('boards.addBoard')}
+      tooltip={label}
+      aria-label={label}
       onClick={handleCreateBoard}
       size="md"
       data-testid="add-board-button"