From 637802d803e955e7b29eb3d9da5ed5fefe291af3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 9 Jul 2024 22:14:21 +1000
Subject: [PATCH] fix(ui): restore auto-add indicator

---
 .../gallery/components/Boards/AutoAddBadge.tsx     | 14 ++++++++++++++
 .../components/Boards/BoardsList/GalleryBoard.tsx  |  4 ++++
 .../components/Boards/BoardsList/NoBoardBoard.tsx  |  5 ++++-
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddBadge.tsx

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddBadge.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddBadge.tsx
new file mode 100644
index 0000000000..8ecd6a16bc
--- /dev/null
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddBadge.tsx
@@ -0,0 +1,14 @@
+import { Badge } from '@invoke-ai/ui-library';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const AutoAddBadge = memo(() => {
+  const { t } = useTranslation();
+  return (
+    <Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent">
+      {t('common.auto')}
+    </Badge>
+  );
+});
+
+AutoAddBadge.displayName = 'AutoAddBadge';
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index fd951a1e89..a2830026fd 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -14,6 +14,7 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 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 { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
@@ -46,6 +47,7 @@ interface GalleryBoardProps {
 const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
   const editingDisclosure = useDisclosure();
   const [localBoardName, setLocalBoardName] = useState(board.board_name);
@@ -144,6 +146,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
               />
               <EditableInput sx={editableInputStyles} />
             </Editable>
+            {autoAddBoardId === board.board_id && <AutoAddBadge />}
             {board.archived && !editingDisclosure.isOpen && (
               <Icon
                 as={PiArchiveBold}
@@ -151,6 +154,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
                 filter="drop-shadow(0px 0px 0.1rem var(--invoke-colors-base-800))"
               />
             )}
+
             <IAIDroppable data={droppableData} dropLabel={<Text fontSize="md">{t('unifiedCanvas.move')}</Text>} />
           </Flex>
         </Tooltip>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index c2ba470067..895511a951 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -3,6 +3,7 @@ import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
 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 NoBoardBoardContextMenu from 'features/gallery/components/Boards/NoBoardBoardContextMenu';
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
@@ -20,6 +21,7 @@ const _hover: SystemStyleObject = {
 
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
   const boardName = useBoardName('none');
   const handleSelectBoard = useCallback(() => {
@@ -70,10 +72,11 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
               color={isSelected ? 'base.100' : 'base.400'}
               fontWeight={isSelected ? 'semibold' : 'normal'}
               noOfLines={1}
-              flexShrink={0}
+              flexGrow={1}
             >
               {boardName}
             </Text>
+            {autoAddBoardId === 'none' && <AutoAddBadge />}
             <IAIDroppable data={droppableData} dropLabel={<Text fontSize="md">{t('unifiedCanvas.move')}</Text>} />
           </Flex>
         </Tooltip>