(ui) allow auto-add on archived boards, reset to uncategorized if auto-add board is not currently visible due to archived view

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -51,6 +51,8 @@ import { addUpscaleRequestedListener } from 'app/store/middleware/listenerMiddle
 import { addWorkflowLoadRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested';
 import type { AppDispatch, RootState } from 'app/store/store';
 
+import { addCheckAutoAddBoardVisibleListener } from './listeners/checkAutoAddBoardVisible';
+
 export const listenerMiddleware = createListenerMiddleware();
 
 export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
@@ -116,6 +118,7 @@ addControlNetAutoProcessListener(startAppListening);
 addImageAddedToBoardFulfilledListener(startAppListening);
 addImageRemovedFromBoardFulfilledListener(startAppListening);
 addBoardIdSelectedListener(startAppListening);
+addCheckAutoAddBoardVisibleListener(startAppListening);
 
 // Node schemas
 addGetOpenAPISchemaListener(startAppListening);

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/checkAutoAddBoardVisible.ts

@@ -0,0 +1,25 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { checkAutoAddBoardVisible } from 'features/gallery/store/actions';
+import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
+import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
+import { boardsApi } from 'services/api/endpoints/boards';
+
+export const addCheckAutoAddBoardVisibleListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: checkAutoAddBoardVisible,
+    effect: async (action, { dispatch, getState }) => {
+      const state = getState();
+      const queryArgs = selectListBoardsQueryArgs(state);
+      const queryResult = boardsApi.endpoints.listAllBoards.select(queryArgs)(state);
+      const autoAddBoardId = state.gallery.autoAddBoardId;
+
+      if (!queryResult.data) {
+        return;
+      }
+
+      if (!queryResult.data.find((board) => board.board_id === autoAddBoardId)) {
+        dispatch(autoAddBoardIdChanged('none'));
+      }
+    },
+  });
+};

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

@@ -2,8 +2,10 @@ import type { ContextMenuProps } from '@invoke-ai/ui-library';
 import { ContextMenu, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { checkAutoAddBoardVisible } from 'features/gallery/store/actions';
 import { autoAddBoardIdChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { toast } from 'features/toast/toast';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArchiveBold, PiArchiveFill, PiDownloadBold, PiPlusBold } from 'react-icons/pi';
@@ -45,12 +47,20 @@ const BoardContextMenu = ({ board, setBoardToDelete, children }: Props) => {
     bulkDownload({ image_names: [], board_id: board.board_id });
   }, [board.board_id, bulkDownload]);
 
-  const handleArchive = useCallback(() => {
-    updateBoard({
+  const handleArchive = useCallback(async () => {
+    try {
+      await updateBoard({
         board_id: board.board_id,
         changes: { archived: true },
+      }).unwrap();
+      dispatch(checkAutoAddBoardVisible());
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: 'Unable to archive board',
       });
-  }, [board.board_id, updateBoard]);
+    }
+  }, [board.board_id, updateBoard, dispatch]);
 
   const handleUnarchive = useCallback(() => {
     updateBoard({
@@ -65,7 +75,7 @@ const BoardContextMenu = ({ board, setBoardToDelete, children }: Props) => {
         <MenuGroup title={boardName}>
           <MenuItem
             icon={<PiPlusBold />}
-            isDisabled={isSelectedForAutoAdd || autoAssignBoardOnClick || Boolean(board?.archived)}
+            isDisabled={isSelectedForAutoAdd || autoAssignBoardOnClick}
             onClick={handleSetAutoAdd}
           >
             {t('boards.menuItemAutoAdd')}
@@ -83,7 +93,7 @@ const BoardContextMenu = ({ board, setBoardToDelete, children }: Props) => {
           )}
 
           {!board.archived && (
-            <MenuItem icon={<PiArchiveFill />} onClick={handleArchive} isDisabled={isSelectedForAutoAdd}>
+            <MenuItem icon={<PiArchiveFill />} onClick={handleArchive}>
               {t('boards.archiveBoard')}
             </MenuItem>
           )}

invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx

@@ -14,6 +14,7 @@ import {
   Switch,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { checkAutoAddBoardVisible } from 'features/gallery/store/actions';
 import {
   alwaysShowImageSizeBadgeChanged,
   autoAssignBoardOnClickChanged,
@@ -66,7 +67,10 @@ const GallerySettingsPopover = () => {
   );
 
   const handleChangeShouldShowArchivedBoardsChanged = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => dispatch(shouldShowArchivedBoardsChanged(e.target.checked)),
+    (e: ChangeEvent<HTMLInputElement>) => {
+      dispatch(shouldShowArchivedBoardsChanged(e.target.checked));
+      dispatch(checkAutoAddBoardVisible());
+    },
     [dispatch]
   );
 

invokeai/frontend/web/src/features/gallery/store/actions.ts

@@ -5,3 +5,5 @@ export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');
 export const sentImageToImg2Img = createAction('gallery/sentImageToImg2Img');
 
 export const imageDownloaded = createAction('gallery/imageDownloaded');
+
+export const checkAutoAddBoardVisible = createAction('gallery/checkAutoAddBoardVisible');

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -128,6 +128,7 @@ export const gallerySlice = createSlice({
     });
     builder.addMatcher(boardsApi.endpoints.listAllBoards.matchFulfilled, (state, action) => {
       const boards = action.payload;
+
       if (!state.autoAddBoardId) {
         return;
       }