fix(ui): really fixed autoadd context menu

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -1,19 +1,13 @@
 import { MenuItem, MenuList } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch } from 'app/store/storeHooks';
-import { stateSelector } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
-import {
+import { boardIdSelected } from 'features/gallery/store/gallerySlice';
-  autoAddBoardIdChanged,
+import { memo, useCallback } from 'react';
-  boardIdSelected,
+import { FaFolder } from 'react-icons/fa';
-} from 'features/gallery/store/gallerySlice';
-import { memo, useCallback, useMemo } from 'react';
-import { FaFolder, FaMinus, FaPlus } from 'react-icons/fa';
 import { BoardDTO } from 'services/api/types';
 import { menuListMotionProps } from 'theme/components/menu';
 import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
-import SystemBoardContextMenuItems from './SystemBoardContextMenuItems';
+import NoBoardContextMenuItems from './NoBoardContextMenuItems';
 
 type Props = {
   board?: BoardDTO;
@@ -25,30 +19,11 @@ type Props = {
 const BoardContextMenu = memo(
   ({ board, board_id, setBoardToDelete, children }: Props) => {
     const dispatch = useAppDispatch();
-    const selector = useMemo(
-      () =>
-        createSelector(
-          stateSelector,
-          ({ gallery }) => {
-            const isSelectedForAutoAdd = board_id === gallery.autoAddBoardId;
-
-            return { isSelectedForAutoAdd };
-          },
-          defaultSelectorOptions
-        ),
-      [board_id]
-    );
-
-    const { isSelectedForAutoAdd } = useAppSelector(selector);
 
     const handleSelectBoard = useCallback(() => {
       dispatch(boardIdSelected(board?.board_id ?? board_id));
     }, [board?.board_id, board_id, dispatch]);
 
-    const handleAutoAdd = useCallback(() => {
-      dispatch(autoAddBoardIdChanged(board_id));
-    }, [board_id, dispatch]);
-
     return (
       <ContextMenu<HTMLDivElement>
         menuProps={{ size: 'sm', isLazy: true }}
@@ -64,15 +39,7 @@ const BoardContextMenu = memo(
             <MenuItem icon={<FaFolder />} onClickCapture={handleSelectBoard}>
               Select Board
             </MenuItem>
-            <MenuItem
+            {!board && <NoBoardContextMenuItems />}
-              icon={isSelectedForAutoAdd ? <FaMinus /> : <FaPlus />}
-              onClickCapture={handleAutoAdd}
-            >
-              {isSelectedForAutoAdd
-                ? 'Disable Auto-Add'
-                : 'Auto-Add to this Board'}
-            </MenuItem>
-            {!board && <SystemBoardContextMenuItems board_id={board_id} />}
             {board && (
               <GalleryBoardContextMenuItems
                 board={board}

invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx

@@ -1,6 +1,11 @@
 import { MenuItem } from '@chakra-ui/react';
-import { memo, useCallback } from 'react';
+import { createSelector } from '@reduxjs/toolkit';
-import { FaTrash } from 'react-icons/fa';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
+import { memo, useCallback, useMemo } from 'react';
+import { FaMinus, FaPlus, FaTrash } from 'react-icons/fa';
 import { BoardDTO } from 'services/api/types';
 
 type Props = {
@@ -9,6 +14,25 @@ type Props = {
 };
 
 const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
+  const dispatch = useAppDispatch();
+
+  const selector = useMemo(
+    () =>
+      createSelector(
+        stateSelector,
+        ({ gallery }) => {
+          const isSelectedForAutoAdd =
+            board.board_id === gallery.autoAddBoardId;
+
+          return { isSelectedForAutoAdd };
+        },
+        defaultSelectorOptions
+      ),
+    [board.board_id]
+  );
+
+  const { isSelectedForAutoAdd } = useAppSelector(selector);
+
   const handleDelete = useCallback(() => {
     if (!setBoardToDelete) {
       return;
@@ -16,8 +40,31 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
     setBoardToDelete(board);
   }, [board, setBoardToDelete]);
 
+  const handleToggleAutoAdd = useCallback(() => {
+    dispatch(
+      autoAddBoardIdChanged(isSelectedForAutoAdd ? undefined : board.board_id)
+    );
+  }, [board.board_id, dispatch, isSelectedForAutoAdd]);
+
   return (
     <>
+      {board.image_count > 0 && (
+        <>
+          {/* <MenuItem
+                    isDisabled={!board.image_count}
+                    icon={<FaImages />}
+                    onClickCapture={handleAddBoardToBatch}
+                  >
+                    Add Board to Batch
+                  </MenuItem> */}
+        </>
+      )}
+      <MenuItem
+        icon={isSelectedForAutoAdd ? <FaMinus /> : <FaPlus />}
+        onClickCapture={handleToggleAutoAdd}
+      >
+        {isSelectedForAutoAdd ? 'Disable Auto-Add' : 'Auto-Add to this Board'}
+      </MenuItem>
       <MenuItem
         sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
         icon={<FaTrash />}

invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx

@@ -0,0 +1,28 @@
+import { MenuItem } from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
+import { memo, useCallback } from 'react';
+import { FaPlus } from 'react-icons/fa';
+
+const NoBoardContextMenuItems = () => {
+  const dispatch = useAppDispatch();
+
+  const autoAddBoardId = useAppSelector(
+    (state) => state.gallery.autoAddBoardId
+  );
+  const handleDisableAutoAdd = useCallback(() => {
+    dispatch(autoAddBoardIdChanged(undefined));
+  }, [dispatch]);
+
+  return (
+    <>
+      {autoAddBoardId && (
+        <MenuItem icon={<FaPlus />} onClickCapture={handleDisableAutoAdd}>
+          Disable Auto-Add
+        </MenuItem>
+      )}
+    </>
+  );
+};
+
+export default memo(NoBoardContextMenuItems);

invokeai/frontend/web/src/features/gallery/components/Boards/SystemBoardContextMenuItems.tsx

@@ -1,12 +0,0 @@
-import { BoardId } from 'features/gallery/store/gallerySlice';
-import { memo } from 'react';
-
-type Props = {
-  board_id: BoardId;
-};
-
-const SystemBoardContextMenuItems = ({ board_id }: Props) => {
-  return <></>;
-};
-
-export default memo(SystemBoardContextMenuItems);