fix(ui): restore auto-add indicator

Author: psychedelicious

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';

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,13 +146,15 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
               />
               <EditableInput sx={editableInputStyles} />
             </Editable>
+            {autoAddBoardId === board.board_id && <AutoAddBadge />}
             {board.archived && !editingDisclosure.isOpen && (
               <Icon
                 as={PiArchiveBold}
                 fill="base.300"
                 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>

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>