add current gallery board name

This commit is contained in:
chainchompa 2024-07-08 22:03:42 -04:00
parent 0e092c0fb5
commit 1785825690
4 changed files with 16 additions and 32 deletions

View File

@ -5,16 +5,16 @@ import { PiPlusBold } from 'react-icons/pi';
import { useCreateBoardMutation } from 'services/api/endpoints/boards'; import { useCreateBoardMutation } from 'services/api/endpoints/boards';
type Props = { type Props = {
privateBoard: boolean; isPrivateBoard: boolean;
}; };
const AddBoardButton = ({ privateBoard }: Props) => { const AddBoardButton = ({ isPrivateBoard }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [createBoard, { isLoading }] = useCreateBoardMutation(); const [createBoard, { isLoading }] = useCreateBoardMutation();
const DEFAULT_BOARD_NAME = t('boards.myBoard'); const DEFAULT_BOARD_NAME = t('boards.myBoard');
const handleCreateBoard = useCallback(() => { const handleCreateBoard = useCallback(() => {
createBoard({ board_name: DEFAULT_BOARD_NAME, private_board: privateBoard }); createBoard({ board_name: DEFAULT_BOARD_NAME, is_private: isPrivateBoard });
}, [createBoard, DEFAULT_BOARD_NAME, privateBoard]); }, [createBoard, DEFAULT_BOARD_NAME, isPrivateBoard]);
return ( return (
<IconButton <IconButton

View File

@ -72,7 +72,7 @@ const BoardsList = () => {
{t('boards.private')} {t('boards.private')}
</Text> </Text>
</Flex> </Flex>
<AddBoardButton privateBoard={true} /> <AddBoardButton isPrivateBoard={true} />
</Flex> </Flex>
<Collapse in={isPrivateBoardsOpen} animateOpacity> <Collapse in={isPrivateBoardsOpen} animateOpacity>
<Flex direction="column"> <Flex direction="column">
@ -104,7 +104,7 @@ const BoardsList = () => {
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')} {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
</Text> </Text>
</Flex> </Flex>
<AddBoardButton privateBoard={false} /> <AddBoardButton isPrivateBoard={false} />
</Flex> </Flex>
<Collapse in={isSharedBoardsOpen} animateOpacity> <Collapse in={isSharedBoardsOpen} animateOpacity>
<Flex direction="column"> <Flex direction="column">

View File

@ -1,16 +1,9 @@
import { Button, Flex, Icon, Spacer } from '@invoke-ai/ui-library'; import { Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { PiCaretUpBold } from 'react-icons/pi';
import { useBoardName } from 'services/api/hooks/useBoardName'; import { useBoardName } from 'services/api/hooks/useBoardName';
type Props = { const GalleryBoardName = () => {
isOpen: boolean;
onToggle: () => void;
};
const GalleryBoardName = (props: Props) => {
const { isOpen, onToggle } = props;
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardName = useBoardName(selectedBoardId); const boardName = useBoardName(selectedBoardId);
@ -23,26 +16,15 @@ const GalleryBoardName = (props: Props) => {
return ( return (
<Flex <Flex
as={Button} my="1"
onClick={onToggle}
size="sm"
position="relative"
gap={2}
w="full"
justifyContent="center" justifyContent="center"
alignItems="center" fontSize="md"
px={2} fontWeight="bold"
borderWidth="thin"
borderStyle="solid"
borderRadius="base"
> >
<Spacer />
{formattedBoardName} {formattedBoardName}
<Spacer />
<Icon
as={PiCaretUpBold}
boxSize={4}
transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
transitionProperty="common"
transitionDuration="normal"
/>
</Flex> </Flex>
); );
}; };

View File

@ -9,6 +9,7 @@ import { PiImagesBold } from 'react-icons/pi';
import { RiServerLine } from 'react-icons/ri'; import { RiServerLine } from 'react-icons/ri';
import BoardsList from './Boards/BoardsList/BoardsList'; import BoardsList from './Boards/BoardsList/BoardsList';
import GalleryBoardName from './GalleryBoardName';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid'; import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
import { GalleryPagination } from './ImageGrid/GalleryPagination'; import { GalleryPagination } from './ImageGrid/GalleryPagination';
import { GallerySearch } from './ImageGrid/GallerySearch'; import { GallerySearch } from './ImageGrid/GallerySearch';
@ -42,6 +43,7 @@ const ImageGalleryContent = () => {
{galleryHeader} {galleryHeader}
<Box> <Box>
<BoardsList isOpen={isBoardListOpen} /> <BoardsList isOpen={isBoardListOpen} />
<GalleryBoardName />
</Box> </Box>
<Flex alignItems="center" justifyContent="space-between" gap={2}> <Flex alignItems="center" justifyContent="space-between" gap={2}>
<Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full"> <Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">