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 ( } 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"