feat(ui): add multi-select and batch capabilities

This introduces the core functionality for batch operations on images and multiple selection in the gallery/batch manager.

A number of other substantial changes are included:
- `imagesSlice` is consolidated into `gallerySlice`, allowing for simpler selection of filtered images
- `batchSlice` is added to manage the batch
- The wonky context pattern for image deletion has been changed, much simpler now using a `imageDeletionSlice` and redux listeners; this needs to be implemented still for the other image modals
- Minimum gallery size in px implemented as a hook
- Many style fixes & several bug fixes

TODO:
- The UI and UX need to be figured out, especially for controlnet
- Batch processing is not hooked up; generation does not do anything with batch
- Routes to support batch image operations, specifically delete and add/remove to/from boards

invokeai/frontend/web/src/app/components/App.tsx

@@ -7,7 +7,6 @@ import GalleryDrawer from 'features/gallery/components/GalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import SiteHeader from 'features/system/components/SiteHeader';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { useIsApplicationReady } from 'features/system/hooks/useIsApplicationReady';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
@@ -15,47 +14,27 @@ import FloatingParametersPanelButtons from 'features/ui/components/FloatingParam
 import InvokeTabs from 'features/ui/components/InvokeTabs';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
 import i18n from 'i18n';
-import { ReactNode, memo, useCallback, useEffect, useState } from 'react';
+import { ReactNode, memo, useEffect } from 'react';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
-import DeleteImageModal from 'features/gallery/components/DeleteImageModal';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
-import { useListModelsQuery } from 'services/api/endpoints/models';
 import DeleteBoardImagesModal from '../../features/gallery/components/Boards/DeleteBoardImagesModal';
+import DeleteImageModal from 'features/imageDeletion/components/DeleteImageModal';
 
 const DEFAULT_CONFIG = {};
 
 interface Props {
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
-  setIsReady?: (isReady: boolean) => void;
 }
 
-const App = ({
-  config = DEFAULT_CONFIG,
-  headerComponent,
-  setIsReady,
-}: Props) => {
+const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
   const language = useAppSelector(languageSelector);
 
   const log = useLogger();
 
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
 
-  const isApplicationReady = useIsApplicationReady();
-
-  const { data: pipelineModels } = useListModelsQuery({
-    model_type: 'main',
-  });
-  const { data: controlnetModels } = useListModelsQuery({
-    model_type: 'controlnet',
-  });
-  const { data: vaeModels } = useListModelsQuery({ model_type: 'vae' });
-  const { data: loraModels } = useListModelsQuery({ model_type: 'lora' });
-  const { data: embeddingModels } = useListModelsQuery({
-    model_type: 'embedding',
-  });
   const dispatch = useAppDispatch();
 
   useEffect(() => {

invokeai/frontend/web/src/app/components/ImageDnd/DragPreview.tsx

@@ -0,0 +1,82 @@
+import { Box, ChakraProps, Flex, Heading, Image } from '@chakra-ui/react';
+import { memo } from 'react';
+import { TypesafeDraggableData } from './typesafeDnd';
+
+type OverlayDragImageProps = {
+  dragData: TypesafeDraggableData | null;
+};
+
+const BOX_SIZE = 28;
+
+const STYLES: ChakraProps['sx'] = {
+  w: BOX_SIZE,
+  h: BOX_SIZE,
+  maxW: BOX_SIZE,
+  maxH: BOX_SIZE,
+  shadow: 'dark-lg',
+  borderRadius: 'lg',
+  borderWidth: 2,
+  borderStyle: 'dashed',
+  borderColor: 'base.100',
+  opacity: 0.5,
+  bg: 'base.800',
+  color: 'base.50',
+  _dark: {
+    borderColor: 'base.200',
+    bg: 'base.900',
+    color: 'base.100',
+  },
+};
+
+const DragPreview = (props: OverlayDragImageProps) => {
+  if (!props.dragData) {
+    return;
+  }
+
+  if (props.dragData.payloadType === 'IMAGE_DTO') {
+    return (
+      <Box
+        sx={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          userSelect: 'none',
+          cursor: 'none',
+        }}
+      >
+        <Image
+          sx={{
+            ...STYLES,
+          }}
+          src={props.dragData.payload.imageDTO.thumbnail_url}
+        />
+      </Box>
+    );
+  }
+
+  if (props.dragData.payloadType === 'IMAGE_NAMES') {
+    return (
+      <Flex
+        sx={{
+          cursor: 'none',
+          userSelect: 'none',
+          position: 'relative',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDir: 'column',
+          ...STYLES,
+        }}
+      >
+        <Heading>{props.dragData.payload.imageNames.length}</Heading>
+        <Heading size="sm">Images</Heading>
+      </Flex>
+    );
+  }
+
+  return null;
+};
+
+export default memo(DragPreview);

invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx

@@ -1,8 +1,5 @@
 import {
-  DndContext,
-  DragEndEvent,
   DragOverlay,
-  DragStartEvent,
   MouseSensor,
   TouchSensor,
   pointerWithin,
@@ -10,33 +7,45 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { PropsWithChildren, memo, useCallback, useState } from 'react';
-import OverlayDragImage from './OverlayDragImage';
-import { ImageDTO } from 'services/api/types';
-import { isImageDTO } from 'services/api/guards';
+import DragPreview from './DragPreview';
 import { snapCenterToCursor } from '@dnd-kit/modifiers';
 import { AnimatePresence, motion } from 'framer-motion';
+import {
+  DndContext,
+  DragEndEvent,
+  DragStartEvent,
+  TypesafeDraggableData,
+} from './typesafeDnd';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { imageDropped } from 'app/store/middleware/listenerMiddleware/listeners/imageDropped';
 
 type ImageDndContextProps = PropsWithChildren;
 
 const ImageDndContext = (props: ImageDndContextProps) => {
-  const [draggedImage, setDraggedImage] = useState<ImageDTO | null>(null);
+  const [activeDragData, setActiveDragData] =
+    useState<TypesafeDraggableData | null>(null);
+
+  const dispatch = useAppDispatch();
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
-    const dragData = event.active.data.current;
-    if (dragData && 'image' in dragData && isImageDTO(dragData.image)) {
-      setDraggedImage(dragData.image);
+    const activeData = event.active.data.current;
+    if (!activeData) {
+      return;
     }
+    setActiveDragData(activeData);
   }, []);
 
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
-      const handleDrop = event.over?.data.current?.handleDrop;
-      if (handleDrop && typeof handleDrop === 'function' && draggedImage) {
-        handleDrop(draggedImage);
+      const activeData = event.active.data.current;
+      const overData = event.over?.data.current;
+      if (!activeData || !overData) {
+        return;
       }
-      setDraggedImage(null);
+      dispatch(imageDropped({ overData, activeData }));
+      setActiveDragData(null);
     },
-    [draggedImage]
+    [dispatch]
   );
 
   const mouseSensor = useSensor(MouseSensor, {
@@ -46,6 +55,7 @@ const ImageDndContext = (props: ImageDndContextProps) => {
   const touchSensor = useSensor(TouchSensor, {
     activationConstraint: { delay: 150, tolerance: 5 },
   });
+
   // TODO: Use KeyboardSensor - needs composition of multiple collisionDetection algos
   // Alternatively, fix `rectIntersection` collection detection to work with the drag overlay
   // (currently the drag element collision rect is not correctly calculated)
@@ -63,7 +73,7 @@ const ImageDndContext = (props: ImageDndContextProps) => {
       {props.children}
       <DragOverlay dropAnimation={null} modifiers={[snapCenterToCursor]}>
         <AnimatePresence>
-          {draggedImage && (
+          {activeDragData && (
             <motion.div
               layout
               key="overlay-drag-image"
@@ -77,7 +87,7 @@ const ImageDndContext = (props: ImageDndContextProps) => {
                 transition: { duration: 0.1 },
               }}
             >
-              <OverlayDragImage image={draggedImage} />
+              <DragPreview dragData={activeDragData} />
             </motion.div>
           )}
         </AnimatePresence>

invokeai/frontend/web/src/app/components/ImageDnd/OverlayDragImage.tsx

@@ -1,36 +0,0 @@
-import { Box, Image } from '@chakra-ui/react';
-import { memo } from 'react';
-import { ImageDTO } from 'services/api/types';
-
-type OverlayDragImageProps = {
-  image: ImageDTO;
-};
-
-const OverlayDragImage = (props: OverlayDragImageProps) => {
-  return (
-    <Box
-      style={{
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        userSelect: 'none',
-        cursor: 'grabbing',
-        opacity: 0.5,
-      }}
-    >
-      <Image
-        sx={{
-          maxW: 36,
-          maxH: 36,
-          borderRadius: 'base',
-          shadow: 'dark-lg',
-        }}
-        src={props.image.thumbnail_url}
-      />
-    </Box>
-  );
-};
-
-export default memo(OverlayDragImage);

invokeai/frontend/web/src/app/components/ImageDnd/typesafeDnd.tsx

@@ -0,0 +1,195 @@
+// type-safe dnd from https://github.com/clauderic/dnd-kit/issues/935
+import {
+  Active,
+  Collision,
+  DndContextProps,
+  DndContext as OriginalDndContext,
+  Over,
+  Translate,
+  UseDraggableArguments,
+  UseDroppableArguments,
+  useDraggable as useOriginalDraggable,
+  useDroppable as useOriginalDroppable,
+} from '@dnd-kit/core';
+import { ImageDTO } from 'services/api/types';
+
+type BaseDropData = {
+  id: string;
+};
+
+export type CurrentImageDropData = BaseDropData & {
+  actionType: 'SET_CURRENT_IMAGE';
+};
+
+export type InitialImageDropData = BaseDropData & {
+  actionType: 'SET_INITIAL_IMAGE';
+};
+
+export type ControlNetDropData = BaseDropData & {
+  actionType: 'SET_CONTROLNET_IMAGE';
+  context: {
+    controlNetId: string;
+  };
+};
+
+export type CanvasInitialImageDropData = BaseDropData & {
+  actionType: 'SET_CANVAS_INITIAL_IMAGE';
+};
+
+export type NodesImageDropData = BaseDropData & {
+  actionType: 'SET_NODES_IMAGE';
+  context: {
+    nodeId: string;
+    fieldName: string;
+  };
+};
+
+export type NodesMultiImageDropData = BaseDropData & {
+  actionType: 'SET_MULTI_NODES_IMAGE';
+  context: { nodeId: string; fieldName: string };
+};
+
+export type AddToBatchDropData = BaseDropData & {
+  actionType: 'ADD_TO_BATCH';
+};
+
+export type MoveBoardDropData = BaseDropData & {
+  actionType: 'MOVE_BOARD';
+  context: { boardId: string | null };
+};
+
+export type TypesafeDroppableData =
+  | CurrentImageDropData
+  | InitialImageDropData
+  | ControlNetDropData
+  | CanvasInitialImageDropData
+  | NodesImageDropData
+  | AddToBatchDropData
+  | NodesMultiImageDropData
+  | MoveBoardDropData;
+
+type BaseDragData = {
+  id: string;
+};
+
+export type ImageDraggableData = BaseDragData & {
+  payloadType: 'IMAGE_DTO';
+  payload: { imageDTO: ImageDTO };
+};
+
+export type ImageNamesDraggableData = BaseDragData & {
+  payloadType: 'IMAGE_NAMES';
+  payload: { imageNames: string[] };
+};
+
+export type TypesafeDraggableData =
+  | ImageDraggableData
+  | ImageNamesDraggableData;
+
+interface UseDroppableTypesafeArguments
+  extends Omit<UseDroppableArguments, 'data'> {
+  data?: TypesafeDroppableData;
+}
+
+type UseDroppableTypesafeReturnValue = Omit<
+  ReturnType<typeof useOriginalDroppable>,
+  'active' | 'over'
+> & {
+  active: TypesafeActive | null;
+  over: TypesafeOver | null;
+};
+
+export function useDroppable(props: UseDroppableTypesafeArguments) {
+  return useOriginalDroppable(props) as UseDroppableTypesafeReturnValue;
+}
+
+interface UseDraggableTypesafeArguments
+  extends Omit<UseDraggableArguments, 'data'> {
+  data?: TypesafeDraggableData;
+}
+
+type UseDraggableTypesafeReturnValue = Omit<
+  ReturnType<typeof useOriginalDraggable>,
+  'active' | 'over'
+> & {
+  active: TypesafeActive | null;
+  over: TypesafeOver | null;
+};
+
+export function useDraggable(props: UseDraggableTypesafeArguments) {
+  return useOriginalDraggable(props) as UseDraggableTypesafeReturnValue;
+}
+
+interface TypesafeActive extends Omit<Active, 'data'> {
+  data: React.MutableRefObject<TypesafeDraggableData | undefined>;
+}
+
+interface TypesafeOver extends Omit<Over, 'data'> {
+  data: React.MutableRefObject<TypesafeDroppableData | undefined>;
+}
+
+export const isValidDrop = (
+  overData: TypesafeDroppableData | undefined,
+  active: TypesafeActive | null
+) => {
+  if (!overData || !active?.data.current) {
+    return false;
+  }
+
+  const { actionType } = overData;
+  const { payloadType } = active.data.current;
+
+  if (overData.id === active.data.current.id) {
+    return false;
+  }
+
+  switch (actionType) {
+    case 'SET_CURRENT_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_INITIAL_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_CONTROLNET_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_CANVAS_INITIAL_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_NODES_IMAGE':
+      return payloadType === 'IMAGE_DTO';
+    case 'SET_MULTI_NODES_IMAGE':
+      return payloadType === 'IMAGE_DTO' || 'IMAGE_NAMES';
+    case 'ADD_TO_BATCH':
+      return payloadType === 'IMAGE_DTO' || 'IMAGE_NAMES';
+    case 'MOVE_BOARD':
+      return payloadType === 'IMAGE_DTO' || 'IMAGE_NAMES';
+    default:
+      return false;
+  }
+};
+
+interface DragEvent {
+  activatorEvent: Event;
+  active: TypesafeActive;
+  collisions: Collision[] | null;
+  delta: Translate;
+  over: TypesafeOver | null;
+}
+
+export interface DragStartEvent extends Pick<DragEvent, 'active'> {}
+export interface DragMoveEvent extends DragEvent {}
+export interface DragOverEvent extends DragMoveEvent {}
+export interface DragEndEvent extends DragEvent {}
+export interface DragCancelEvent extends DragEndEvent {}
+
+export interface DndContextTypesafeProps
+  extends Omit<
+    DndContextProps,
+    'onDragStart' | 'onDragMove' | 'onDragOver' | 'onDragEnd' | 'onDragCancel'
+  > {
+  onDragStart?(event: DragStartEvent): void;
+  onDragMove?(event: DragMoveEvent): void;
+  onDragOver?(event: DragOverEvent): void;
+  onDragEnd?(event: DragEndEvent): void;
+  onDragCancel?(event: DragCancelEvent): void;
+}
+export function DndContext(props: DndContextTypesafeProps) {
+  return <OriginalDndContext {...props} />;
+}

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
-// import { OpenAPI } from 'services/api/types';
 
 import Loading from '../../common/components/Loading/Loading';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
@@ -17,11 +16,6 @@ import '../../i18n';
 import { socketMiddleware } from 'services/events/middleware';
 import { Middleware } from '@reduxjs/toolkit';
 import ImageDndContext from './ImageDnd/ImageDndContext';
-import {
-  DeleteImageContext,
-  DeleteImageContextProvider,
-} from 'app/contexts/DeleteImageContext';
-import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
 import { AddImageToBoardContextProvider } from '../contexts/AddImageToBoardContext';
 import { $authToken, $baseUrl } from 'services/api/client';
 import { DeleteBoardImagesContextProvider } from '../contexts/DeleteBoardImagesContext';
@@ -34,7 +28,6 @@ interface Props extends PropsWithChildren {
   token?: string;
   config?: PartialAppConfig;
   headerComponent?: ReactNode;
-  setIsReady?: (isReady: boolean) => void;
   middleware?: Middleware[];
 }
 
@@ -43,7 +36,6 @@ const InvokeAIUI = ({
   token,
   config,
   headerComponent,
-  setIsReady,
   middleware,
 }: Props) => {
   useEffect(() => {
@@ -85,17 +77,11 @@ const InvokeAIUI = ({
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
             <ImageDndContext>
-              <DeleteImageContextProvider>
-                <AddImageToBoardContextProvider>
-                  <DeleteBoardImagesContextProvider>
-                    <App
-                      config={config}
-                      headerComponent={headerComponent}
-                      setIsReady={setIsReady}
-                    />
-                  </DeleteBoardImagesContextProvider>
-                </AddImageToBoardContextProvider>
-              </DeleteImageContextProvider>
+              <AddImageToBoardContextProvider>
+                <DeleteBoardImagesContextProvider>
+                  <App config={config} headerComponent={headerComponent} />
+                </DeleteBoardImagesContextProvider>
+              </AddImageToBoardContextProvider>
             </ImageDndContext>
           </ThemeLocaleProvider>
         </React.Suspense>

invokeai/frontend/web/src/app/contexts/DeleteBoardImagesContext.tsx

@@ -5,15 +5,15 @@ import { useDeleteBoardMutation } from '../../services/api/endpoints/boards';
 import { defaultSelectorOptions } from '../store/util/defaultMemoizeOptions';
 import { createSelector } from '@reduxjs/toolkit';
 import { some } from 'lodash-es';
-import { canvasSelector } from '../../features/canvas/store/canvasSelectors';
-import { controlNetSelector } from '../../features/controlNet/store/controlNetSlice';
-import { selectImagesById } from '../../features/gallery/store/imagesSlice';
-import { nodesSelector } from '../../features/nodes/store/nodesSlice';
-import { generationSelector } from '../../features/parameters/store/generationSelectors';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import { controlNetSelector } from 'features/controlNet/store/controlNetSlice';
+import { selectImagesById } from 'features/gallery/store/gallerySlice';
+import { nodesSelector } from 'features/nodes/store/nodesSlice';
+import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { RootState } from '../store/store';
 import { useAppDispatch, useAppSelector } from '../store/storeHooks';
 import { ImageUsage } from './DeleteImageContext';
-import { requestedBoardImagesDeletion } from '../../features/gallery/store/actions';
+import { requestedBoardImagesDeletion } from 'features/gallery/store/actions';
 
 export const selectBoardImagesUsage = createSelector(
   [

invokeai/frontend/web/src/app/contexts/DeleteImageContext.tsx

@@ -1,201 +0,0 @@
-import { useDisclosure } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { requestedImageDeletion } from 'features/gallery/store/actions';
-import { systemSelector } from 'features/system/store/systemSelectors';
-import {
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import { ImageDTO } from 'services/api/types';
-import { RootState } from 'app/store/store';
-import { canvasSelector } from 'features/canvas/store/canvasSelectors';
-import { controlNetSelector } from 'features/controlNet/store/controlNetSlice';
-import { nodesSelector } from 'features/nodes/store/nodesSlice';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
-import { some } from 'lodash-es';
-
-export type ImageUsage = {
-  isInitialImage: boolean;
-  isCanvasImage: boolean;
-  isNodesImage: boolean;
-  isControlNetImage: boolean;
-};
-
-export const selectImageUsage = createSelector(
-  [
-    generationSelector,
-    canvasSelector,
-    nodesSelector,
-    controlNetSelector,
-    (state: RootState, image_name?: string) => image_name,
-  ],
-  (generation, canvas, nodes, controlNet, image_name) => {
-    const isInitialImage = generation.initialImage?.imageName === image_name;
-
-    const isCanvasImage = canvas.layerState.objects.some(
-      (obj) => obj.kind === 'image' && obj.imageName === image_name
-    );
-
-    const isNodesImage = nodes.nodes.some((node) => {
-      return some(
-        node.data.inputs,
-        (input) => input.type === 'image' && input.value === image_name
-      );
-    });
-
-    const isControlNetImage = some(
-      controlNet.controlNets,
-      (c) =>
-        c.controlImage === image_name || c.processedControlImage === image_name
-    );
-
-    const imageUsage: ImageUsage = {
-      isInitialImage,
-      isCanvasImage,
-      isNodesImage,
-      isControlNetImage,
-    };
-
-    return imageUsage;
-  },
-  defaultSelectorOptions
-);
-
-type DeleteImageContextValue = {
-  /**
-   * Whether the delete image dialog is open.
-   */
-  isOpen: boolean;
-  /**
-   * Closes the delete image dialog.
-   */
-  onClose: () => void;
-  /**
-   * Opens the delete image dialog and handles all deletion-related checks.
-   */
-  onDelete: (image?: ImageDTO) => void;
-  /**
-   * The image pending deletion
-   */
-  image?: ImageDTO;
-  /**
-   * The features in which this image is used
-   */
-  imageUsage?: ImageUsage;
-  /**
-   * Immediately deletes an image.
-   *
-   * You probably don't want to use this - use `onDelete` instead.
-   */
-  onImmediatelyDelete: () => void;
-};
-
-export const DeleteImageContext = createContext<DeleteImageContextValue>({
-  isOpen: false,
-  onClose: () => undefined,
-  onImmediatelyDelete: () => undefined,
-  onDelete: () => undefined,
-});
-
-const selector = createSelector(
-  [systemSelector],
-  (system) => {
-    const { isProcessing, isConnected, shouldConfirmOnDelete } = system;
-
-    return {
-      canDeleteImage: isConnected && !isProcessing,
-      shouldConfirmOnDelete,
-    };
-  },
-  defaultSelectorOptions
-);
-
-type Props = PropsWithChildren;
-
-export const DeleteImageContextProvider = (props: Props) => {
-  const { canDeleteImage, shouldConfirmOnDelete } = useAppSelector(selector);
-  const [imageToDelete, setImageToDelete] = useState<ImageDTO>();
-  const dispatch = useAppDispatch();
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  // Check where the image to be deleted is used (eg init image, controlnet, etc.)
-  const imageUsage = useAppSelector((state) =>
-    selectImageUsage(state, imageToDelete?.image_name)
-  );
-
-  // Clean up after deleting or dismissing the modal
-  const closeAndClearImageToDelete = useCallback(() => {
-    setImageToDelete(undefined);
-    onClose();
-  }, [onClose]);
-
-  // Dispatch the actual deletion action, to be handled by listener middleware
-  const handleActualDeletion = useCallback(
-    (image: ImageDTO) => {
-      dispatch(requestedImageDeletion({ image, imageUsage }));
-      closeAndClearImageToDelete();
-    },
-    [closeAndClearImageToDelete, dispatch, imageUsage]
-  );
-
-  // This is intended to be called by the delete button in the dialog
-  const onImmediatelyDelete = useCallback(() => {
-    if (canDeleteImage && imageToDelete) {
-      handleActualDeletion(imageToDelete);
-    }
-    closeAndClearImageToDelete();
-  }, [
-    canDeleteImage,
-    imageToDelete,
-    closeAndClearImageToDelete,
-    handleActualDeletion,
-  ]);
-
-  const handleGatedDeletion = useCallback(
-    (image: ImageDTO) => {
-      if (shouldConfirmOnDelete || some(imageUsage)) {
-        // If we should confirm on delete, or if the image is in use, open the dialog
-        onOpen();
-      } else {
-        handleActualDeletion(image);
-      }
-    },
-    [imageUsage, shouldConfirmOnDelete, onOpen, handleActualDeletion]
-  );
-
-  // Consumers of the context call this to delete an image
-  const onDelete = useCallback((image?: ImageDTO) => {
-    if (!image) {
-      return;
-    }
-    // Set the image to delete, then let the effect call the actual deletion
-    setImageToDelete(image);
-  }, []);
-
-  useEffect(() => {
-    // We need to use an effect here to trigger the image usage selector, else we get a stale value
-    if (imageToDelete) {
-      handleGatedDeletion(imageToDelete);
-    }
-  }, [handleGatedDeletion, imageToDelete]);
-
-  return (
-    <DeleteImageContext.Provider
-      value={{
-        isOpen,
-        image: imageToDelete,
-        onClose: closeAndClearImageToDelete,
-        onDelete,
-        onImmediatelyDelete,
-        imageUsage,
-      }}
-    >
-      {props.children}
-    </DeleteImageContext.Provider>
-  );
-};

invokeai/frontend/web/src/app/store/enhancers/reduxRemember/unserialize.ts

@@ -1,7 +1,6 @@
 import { initialCanvasState } from 'features/canvas/store/canvasSlice';
 import { initialControlNetState } from 'features/controlNet/store/controlNetSlice';
 import { initialGalleryState } from 'features/gallery/store/gallerySlice';
-import { initialImagesState } from 'features/gallery/store/imagesSlice';
 import { initialLightboxState } from 'features/lightbox/store/lightboxSlice';
 import { initialNodesState } from 'features/nodes/store/nodesSlice';
 import { initialGenerationState } from 'features/parameters/store/generationSlice';
@@ -26,7 +25,6 @@ const initialStates: {
   config: initialConfigState,
   ui: initialUIState,
   hotkeys: initialHotkeysState,
-  images: initialImagesState,
   controlNet: initialControlNetState,
 };
 

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

@@ -72,7 +72,6 @@ import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingA
 import { addImageCategoriesChangedListener } from './listeners/imageCategoriesChanged';
 import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
 import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess';
-import { addUpdateImageUrlsOnConnectListener } from './listeners/updateImageUrlsOnConnect';
 import {
   addImageAddedToBoardFulfilledListener,
   addImageAddedToBoardRejectedListener,
@@ -84,6 +83,9 @@ import {
 } from './listeners/imageRemovedFromBoard';
 import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
 import { addRequestedBoardImageDeletionListener } from './listeners/boardImagesDeleted';
+import { addSelectionAddedToBatchListener } from './listeners/selectionAddedToBatch';
+import { addImageDroppedListener } from './listeners/imageDropped';
+import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -126,6 +128,7 @@ addImageDeletedPendingListener();
 addImageDeletedFulfilledListener();
 addImageDeletedRejectedListener();
 addRequestedBoardImageDeletionListener();
+addImageToDeleteSelectedListener();
 
 // Image metadata
 addImageMetadataReceivedFulfilledListener();
@@ -211,3 +214,9 @@ addBoardIdSelectedListener();
 
 // Node schemas
 addReceivedOpenAPISchemaListener();
+
+// Batches
+addSelectionAddedToBatchListener();
+
+// DND
+addImageDroppedListener();

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

@@ -1,12 +1,14 @@
 import { log } from 'app/logging/useLogger';
 import { startAppListening } from '..';
-import { boardIdSelected } from 'features/gallery/store/boardSlice';
-import { selectImagesAll } from 'features/gallery/store/imagesSlice';
+import {
+  imageSelected,
+  selectImagesAll,
+  boardIdSelected,
+} from 'features/gallery/store/gallerySlice';
 import {
   IMAGES_PER_PAGE,
   receivedPageOfImages,
 } from 'services/api/thunks/image';
-import { imageSelected } from 'features/gallery/store/gallerySlice';
 import { boardsApi } from 'services/api/endpoints/boards';
 
 const moduleLog = log.child({ namespace: 'boards' });
@@ -28,7 +30,7 @@ export const addBoardIdSelectedListener = () => {
         return;
       }
 
-      const { categories } = state.images;
+      const { categories } = state.gallery;
 
       const filteredImages = allImages.filter((i) => {
         const isInCategory = categories.includes(i.image_category);
@@ -47,7 +49,7 @@ export const addBoardIdSelectedListener = () => {
         return;
       }
 
-      dispatch(imageSelected(board.cover_image_name));
+      dispatch(imageSelected(board.cover_image_name ?? null));
 
       // if we haven't loaded one full page of images from this board, load more
       if (
@@ -77,7 +79,7 @@ export const addBoardIdSelected_changeSelectedImage_listener = () => {
         return;
       }
 
-      const { categories } = state.images;
+      const { categories } = state.gallery;
 
       const filteredImages = selectImagesAll(state).filter((i) => {
         const isInCategory = categories.includes(i.image_category);

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

@@ -1,11 +1,11 @@
 import { requestedBoardImagesDeletion } from 'features/gallery/store/actions';
 import { startAppListening } from '..';
-import { imageSelected } from 'features/gallery/store/gallerySlice';
 import {
+  imageSelected,
   imagesRemoved,
   selectImagesAll,
   selectImagesById,
-} from 'features/gallery/store/imagesSlice';
+} from 'features/gallery/store/gallerySlice';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
@@ -22,12 +22,15 @@ export const addRequestedBoardImageDeletionListener = () => {
       const { board_id } = board;
 
       const state = getState();
-      const selectedImage = state.gallery.selectedImage
-        ? selectImagesById(state, state.gallery.selectedImage)
+      const selectedImageName =
+        state.gallery.selection[state.gallery.selection.length - 1];
+
+      const selectedImage = selectedImageName
+        ? selectImagesById(state, selectedImageName)
         : undefined;
 
       if (selectedImage && selectedImage.board_id === board_id) {
-        dispatch(imageSelected());
+        dispatch(imageSelected(null));
       }
 
       // We need to reset the features where the board images are in use - none of these work if their image(s) don't exist

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

@@ -4,7 +4,7 @@ import { log } from 'app/logging/useLogger';
 import { imageUploaded } from 'services/api/thunks/image';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
-import { imageUpserted } from 'features/gallery/store/imagesSlice';
+import { imageUpserted } from 'features/gallery/store/gallerySlice';
 
 const moduleLog = log.child({ namespace: 'canvasSavedToGalleryListener' });
 

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

@@ -3,8 +3,8 @@ import { startAppListening } from '..';
 import { receivedPageOfImages } from 'services/api/thunks/image';
 import {
   imageCategoriesChanged,
-  selectFilteredImagesAsArray,
-} from 'features/gallery/store/imagesSlice';
+  selectFilteredImages,
+} from 'features/gallery/store/gallerySlice';
 
 const moduleLog = log.child({ namespace: 'gallery' });
 
@@ -13,7 +13,7 @@ export const addImageCategoriesChangedListener = () => {
     actionCreator: imageCategoriesChanged,
     effect: (action, { getState, dispatch }) => {
       const state = getState();
-      const filteredImagesCount = selectFilteredImagesAsArray(state).length;
+      const filteredImagesCount = selectFilteredImages(state).length;
 
       if (!filteredImagesCount) {
         dispatch(

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

@@ -1,18 +1,21 @@
-import { requestedImageDeletion } from 'features/gallery/store/actions';
 import { startAppListening } from '..';
 import { imageDeleted } from 'services/api/thunks/image';
 import { log } from 'app/logging/useLogger';
 import { clamp } from 'lodash-es';
-import { imageSelected } from 'features/gallery/store/gallerySlice';
 import {
+  imageSelected,
   imageRemoved,
   selectImagesIds,
-} from 'features/gallery/store/imagesSlice';
+} from 'features/gallery/store/gallerySlice';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { api } from 'services/api';
+import {
+  imageDeletionConfirmed,
+  isModalOpenChanged,
+} from 'features/imageDeletion/store/imageDeletionSlice';
 
 const moduleLog = log.child({ namespace: 'image' });
 
@@ -21,16 +24,19 @@ const moduleLog = log.child({ namespace: 'image' });
  */
 export const addRequestedImageDeletionListener = () => {
   startAppListening({
-    actionCreator: requestedImageDeletion,
+    actionCreator: imageDeletionConfirmed,
     effect: async (action, { dispatch, getState, condition }) => {
-      const { image, imageUsage } = action.payload;
+      const { imageDTO, imageUsage } = action.payload;
 
-      const { image_name } = image;
+      dispatch(isModalOpenChanged(false));
+
+      const { image_name } = imageDTO;
 
       const state = getState();
-      const selectedImage = state.gallery.selectedImage;
+      const lastSelectedImage =
+        state.gallery.selection[state.gallery.selection.length - 1];
 
-      if (selectedImage === image_name) {
+      if (lastSelectedImage === image_name) {
         const ids = selectImagesIds(state);
 
         const deletedImageIndex = ids.findIndex(
@@ -50,7 +56,7 @@ export const addRequestedImageDeletionListener = () => {
         if (newSelectedImageId) {
           dispatch(imageSelected(newSelectedImageId as string));
         } else {
-          dispatch(imageSelected());
+          dispatch(imageSelected(null));
         }
       }
 
@@ -88,7 +94,7 @@ export const addRequestedImageDeletionListener = () => {
 
       if (wasImageDeleted) {
         dispatch(
-          api.util.invalidateTags([{ type: 'Board', id: image.board_id }])
+          api.util.invalidateTags([{ type: 'Board', id: imageDTO.board_id }])
         );
       }
     },

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

@@ -0,0 +1,188 @@
+import { createAction } from '@reduxjs/toolkit';
+import { startAppListening } from '../';
+import { log } from 'app/logging/useLogger';
+import {
+  TypesafeDraggableData,
+  TypesafeDroppableData,
+} from 'app/components/ImageDnd/typesafeDnd';
+import { imageSelected } from 'features/gallery/store/gallerySlice';
+import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import {
+  imageAddedToBatch,
+  imagesAddedToBatch,
+} from 'features/batch/store/batchSlice';
+import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice';
+import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
+import {
+  fieldValueChanged,
+  imageCollectionFieldValueChanged,
+} from 'features/nodes/store/nodesSlice';
+import { boardsApi } from 'services/api/endpoints/boards';
+import { boardImagesApi } from 'services/api/endpoints/boardImages';
+
+const moduleLog = log.child({ namespace: 'dnd' });
+
+export const imageDropped = createAction<{
+  overData: TypesafeDroppableData;
+  activeData: TypesafeDraggableData;
+}>('dnd/imageDropped');
+
+export const addImageDroppedListener = () => {
+  startAppListening({
+    actionCreator: imageDropped,
+    effect: (action, { dispatch, getState }) => {
+      const { activeData, overData } = action.payload;
+      const { actionType } = overData;
+
+      // set current image
+      if (
+        actionType === 'SET_CURRENT_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        dispatch(imageSelected(activeData.payload.imageDTO.image_name));
+      }
+
+      // set initial image
+      if (
+        actionType === 'SET_INITIAL_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        dispatch(initialImageChanged(activeData.payload.imageDTO));
+      }
+
+      // add image to batch
+      if (
+        actionType === 'ADD_TO_BATCH' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        dispatch(imageAddedToBatch(activeData.payload.imageDTO.image_name));
+      }
+
+      // add multiple images to batch
+      if (
+        actionType === 'ADD_TO_BATCH' &&
+        activeData.payloadType === 'IMAGE_NAMES'
+      ) {
+        dispatch(imagesAddedToBatch(activeData.payload.imageNames));
+      }
+
+      // set control image
+      if (
+        actionType === 'SET_CONTROLNET_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const { controlNetId } = overData.context;
+        dispatch(
+          controlNetImageChanged({
+            controlImage: activeData.payload.imageDTO.image_name,
+            controlNetId,
+          })
+        );
+      }
+
+      // set canvas image
+      if (
+        actionType === 'SET_CANVAS_INITIAL_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        dispatch(setInitialCanvasImage(activeData.payload.imageDTO));
+      }
+
+      // set nodes image
+      if (
+        actionType === 'SET_NODES_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const { fieldName, nodeId } = overData.context;
+        dispatch(
+          fieldValueChanged({
+            nodeId,
+            fieldName,
+            value: activeData.payload.imageDTO,
+          })
+        );
+      }
+
+      // set multiple nodes images (single image handler)
+      if (
+        actionType === 'SET_MULTI_NODES_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const { fieldName, nodeId } = overData.context;
+        dispatch(
+          fieldValueChanged({
+            nodeId,
+            fieldName,
+            value: [activeData.payload.imageDTO],
+          })
+        );
+      }
+
+      // set multiple nodes images (multiple images handler)
+      if (
+        actionType === 'SET_MULTI_NODES_IMAGE' &&
+        activeData.payloadType === 'IMAGE_NAMES'
+      ) {
+        const { fieldName, nodeId } = overData.context;
+        dispatch(
+          imageCollectionFieldValueChanged({
+            nodeId,
+            fieldName,
+            value: activeData.payload.imageNames.map((image_name) => ({
+              image_name,
+            })),
+          })
+        );
+      }
+
+      // remove image from board
+      // TODO: remove board_id from `removeImageFromBoard()` endpoint
+      // TODO: handle multiple images
+      // if (
+      //   actionType === 'MOVE_BOARD' &&
+      //   activeData.payloadType === 'IMAGE_DTO' &&
+      //   activeData.payload.imageDTO &&
+      //   overData.boardId !== null
+      // ) {
+      //   const { image_name } = activeData.payload.imageDTO;
+      //   dispatch(
+      //     boardImagesApi.endpoints.removeImageFromBoard.initiate({ image_name })
+      //   );
+      // }
+
+      // add image to board
+      if (
+        actionType === 'MOVE_BOARD' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO &&
+        overData.context.boardId
+      ) {
+        const { image_name } = activeData.payload.imageDTO;
+        const { boardId } = overData.context;
+        dispatch(
+          boardImagesApi.endpoints.addImageToBoard.initiate({
+            image_name,
+            board_id: boardId,
+          })
+        );
+      }
+
+      // add multiple images to board
+      // TODO: add endpoint
+      // if (
+      //   actionType === 'ADD_TO_BATCH' &&
+      //   activeData.payloadType === 'IMAGE_NAMES' &&
+      //   activeData.payload.imageDTONames
+      // ) {
+      //   dispatch(boardImagesApi.endpoints.addImagesToBoard.intiate({}));
+      // }
+    },
+  });
+};

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

@@ -1,7 +1,7 @@
 import { log } from 'app/logging/useLogger';
 import { startAppListening } from '..';
 import { imageMetadataReceived, imageUpdated } from 'services/api/thunks/image';
-import { imageUpserted } from 'features/gallery/store/imagesSlice';
+import { imageUpserted } from 'features/gallery/store/gallerySlice';
 
 const moduleLog = log.child({ namespace: 'image' });
 

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

@@ -0,0 +1,40 @@
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import {
+  imageDeletionConfirmed,
+  imageToDeleteSelected,
+  isModalOpenChanged,
+  selectImageUsage,
+} from 'features/imageDeletion/store/imageDeletionSlice';
+
+const moduleLog = log.child({ namespace: 'image' });
+
+export const addImageToDeleteSelectedListener = () => {
+  startAppListening({
+    actionCreator: imageToDeleteSelected,
+    effect: async (action, { dispatch, getState, condition }) => {
+      const imageDTO = action.payload;
+      const state = getState();
+      const { shouldConfirmOnDelete } = state.system;
+      const imageUsage = selectImageUsage(getState());
+
+      if (!imageUsage) {
+        // should never happen
+        return;
+      }
+
+      const isImageInUse =
+        imageUsage.isCanvasImage ||
+        imageUsage.isInitialImage ||
+        imageUsage.isControlNetImage ||
+        imageUsage.isNodesImage;
+
+      if (shouldConfirmOnDelete || isImageInUse) {
+        dispatch(isModalOpenChanged(true));
+        return;
+      }
+
+      dispatch(imageDeletionConfirmed({ imageDTO, imageUsage }));
+    },
+  });
+};

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

@@ -2,11 +2,12 @@ import { startAppListening } from '..';
 import { imageUploaded } from 'services/api/thunks/image';
 import { addToast } from 'features/system/store/systemSlice';
 import { log } from 'app/logging/useLogger';
-import { imageUpserted } from 'features/gallery/store/imagesSlice';
+import { imageUpserted } from 'features/gallery/store/gallerySlice';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
+import { imageAddedToBatch } from 'features/batch/store/batchSlice';
 
 const moduleLog = log.child({ namespace: 'image' });
 
@@ -70,6 +71,11 @@ export const addImageUploadedFulfilledListener = () => {
         dispatch(addToast({ title: 'Image Uploaded', status: 'success' }));
         return;
       }
+
+      if (postUploadAction?.type === 'ADD_TO_BATCH') {
+        dispatch(imageAddedToBatch(image.image_name));
+        return;
+      }
     },
   });
 };

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

@@ -1,7 +1,7 @@
 import { log } from 'app/logging/useLogger';
 import { startAppListening } from '..';
 import { imageUrlsReceived } from 'services/api/thunks/image';
-import { imageUpdatedOne } from 'features/gallery/store/imagesSlice';
+import { imageUpdatedOne } from 'features/gallery/store/gallerySlice';
 
 const moduleLog = log.child({ namespace: 'image' });
 

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

@@ -4,7 +4,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { startAppListening } from '..';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { makeToast } from 'app/components/Toaster';
-import { selectImagesById } from 'features/gallery/store/imagesSlice';
+import { selectImagesById } from 'features/gallery/store/gallerySlice';
 import { isImageDTO } from 'services/api/guards';
 
 export const addInitialImageSelectedListener = () => {

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

@@ -2,6 +2,7 @@ import { log } from 'app/logging/useLogger';
 import { startAppListening } from '..';
 import { serializeError } from 'serialize-error';
 import { receivedPageOfImages } from 'services/api/thunks/image';
+import { imagesApi } from 'services/api/endpoints/images';
 
 const moduleLog = log.child({ namespace: 'gallery' });
 
@@ -9,11 +10,17 @@ export const addReceivedPageOfImagesFulfilledListener = () => {
   startAppListening({
     actionCreator: receivedPageOfImages.fulfilled,
     effect: (action, { getState, dispatch }) => {
-      const page = action.payload;
+      const { items } = action.payload;
       moduleLog.debug(
         { data: { payload: action.payload } },
-        `Received ${page.items.length} images`
+        `Received ${items.length} images`
       );
+
+      items.forEach((image) => {
+        dispatch(
+          imagesApi.util.upsertQueryData('getImageDTO', image.image_name, image)
+        );
+      });
     },
   });
 };

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

@@ -0,0 +1,19 @@
+import { startAppListening } from '..';
+import { log } from 'app/logging/useLogger';
+import {
+  imagesAddedToBatch,
+  selectionAddedToBatch,
+} from 'features/batch/store/batchSlice';
+
+const moduleLog = log.child({ namespace: 'batch' });
+
+export const addSelectionAddedToBatchListener = () => {
+  startAppListening({
+    actionCreator: selectionAddedToBatch,
+    effect: (action, { dispatch, getState }) => {
+      const { selection } = getState().gallery;
+
+      dispatch(imagesAddedToBatch(selection));
+    },
+  });
+};

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

@@ -14,11 +14,11 @@ export const addSocketConnectedEventListener = () => {
 
       moduleLog.debug({ timestamp }, 'Connected');
 
-      const { nodes, config, images } = getState();
+      const { nodes, config, gallery } = getState();
 
       const { disabledTabs } = config;
 
-      if (!images.ids.length) {
+      if (!gallery.ids.length) {
         dispatch(
           receivedPageOfImages({
             categories: ['general'],

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

@@ -2,7 +2,7 @@ import { stagingAreaImageSaved } from 'features/canvas/store/actions';
 import { startAppListening } from '..';
 import { log } from 'app/logging/useLogger';
 import { imageUpdated } from 'services/api/thunks/image';
-import { imageUpserted } from 'features/gallery/store/imagesSlice';
+import { imageUpserted } from 'features/gallery/store/gallerySlice';
 import { addToast } from 'features/system/store/systemSlice';
 
 const moduleLog = log.child({ namespace: 'canvas' });

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

@@ -8,7 +8,7 @@ import { controlNetSelector } from 'features/controlNet/store/controlNetSlice';
 import { forEach, uniqBy } from 'lodash-es';
 import { imageUrlsReceived } from 'services/api/thunks/image';
 import { log } from 'app/logging/useLogger';
-import { selectImagesEntities } from 'features/gallery/store/imagesSlice';
+import { selectImagesEntities } from 'features/gallery/store/gallerySlice';
 
 const moduleLog = log.child({ namespace: 'images' });
 
@@ -36,7 +36,7 @@ const selectAllUsedImages = createSelector(
     nodes.nodes.forEach((node) => {
       forEach(node.data.inputs, (input) => {
         if (input.type === 'image' && input.value) {
-          allUsedImages.push(input.value);
+          allUsedImages.push(input.value.image_name);
         }
       });
     });

invokeai/frontend/web/src/app/store/store.ts

@@ -11,18 +11,18 @@ import { rememberEnhancer, rememberReducer } from 'redux-remember';
 import canvasReducer from 'features/canvas/store/canvasSlice';
 import controlNetReducer from 'features/controlNet/store/controlNetSlice';
 import galleryReducer from 'features/gallery/store/gallerySlice';
-import imagesReducer from 'features/gallery/store/imagesSlice';
 import lightboxReducer from 'features/lightbox/store/lightboxSlice';
 import generationReducer from 'features/parameters/store/generationSlice';
 import postprocessingReducer from 'features/parameters/store/postprocessingSlice';
 import systemReducer from 'features/system/store/systemSlice';
-// import sessionReducer from 'features/system/store/sessionSlice';
 import nodesReducer from 'features/nodes/store/nodesSlice';
 import boardsReducer from 'features/gallery/store/boardSlice';
 import configReducer from 'features/system/store/configSlice';
 import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import uiReducer from 'features/ui/store/uiSlice';
 import dynamicPromptsReducer from 'features/dynamicPrompts/store/slice';
+import batchReducer from 'features/batch/store/batchSlice';
+import imageDeletionReducer from 'features/imageDeletion/store/imageDeletionSlice';
 
 import { listenerMiddleware } from './middleware/listenerMiddleware';
 
@@ -45,11 +45,11 @@ const allReducers = {
   config: configReducer,
   ui: uiReducer,
   hotkeys: hotkeysReducer,
-  images: imagesReducer,
   controlNet: controlNetReducer,
   boards: boardsReducer,
-  // session: sessionReducer,
   dynamicPrompts: dynamicPromptsReducer,
+  batch: batchReducer,
+  imageDeletion: imageDeletionReducer,
   [api.reducerPath]: api.reducer,
 };
 
@@ -68,6 +68,7 @@ const rememberedKeys: (keyof typeof allReducers)[] = [
   'ui',
   'controlNet',
   'dynamicPrompts',
+  'batch',
   // 'boards',
   // 'hotkeys',
   // 'config',