feat(ui): dropping image on All Images board removes it from board

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

@@ -1,10 +1,15 @@
-import { Flex, Icon, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import { FaImages } from 'react-icons/fa';
 import { boardIdSelected } from '../../store/boardSlice';
 import { useDispatch } from 'react-redux';
 import { IAINoImageFallback } from 'common/components/IAIImageFallback';
 import { AnimatePresence } from 'framer-motion';
 import { SelectedItemOverlay } from '../SelectedItemOverlay';
+import { useCallback } from 'react';
+import { ImageDTO } from 'services/api';
+import { useRemoveImageFromBoardMutation } from 'services/apiSlice';
+import { useDroppable } from '@dnd-kit/core';
+import IAIDropOverlay from 'common/components/IAIDropOverlay';
 
 const AllImagesBoard = ({ isSelected }: { isSelected: boolean }) => {
   const dispatch = useDispatch();
@@ -13,6 +18,33 @@ const AllImagesBoard = ({ isSelected }: { isSelected: boolean }) => {
     dispatch(boardIdSelected());
   };
 
+  const [removeImageFromBoard, { isLoading }] =
+    useRemoveImageFromBoardMutation();
+
+  const handleDrop = useCallback(
+    (droppedImage: ImageDTO) => {
+      if (!droppedImage.board_id) {
+        return;
+      }
+      removeImageFromBoard({
+        board_id: droppedImage.board_id,
+        image_name: droppedImage.image_name,
+      });
+    },
+    [removeImageFromBoard]
+  );
+
+  const {
+    isOver,
+    setNodeRef,
+    active: isDropActive,
+  } = useDroppable({
+    id: `board_droppable_all_images`,
+    data: {
+      handleDrop,
+    },
+  });
+
   return (
     <Flex
       sx={{
@@ -27,6 +59,7 @@ const AllImagesBoard = ({ isSelected }: { isSelected: boolean }) => {
       onClick={handleAllImagesBoardClick}
     >
       <Flex
+        ref={setNodeRef}
         sx={{
           position: 'relative',
           justifyContent: 'center',
@@ -40,6 +73,9 @@ const AllImagesBoard = ({ isSelected }: { isSelected: boolean }) => {
         <AnimatePresence>
           {isSelected && <SelectedItemOverlay />}
         </AnimatePresence>
+        <AnimatePresence>
+          {isDropActive && <IAIDropOverlay isOver={isOver} />}
+        </AnimatePresence>
       </Flex>
       <Text
         sx={{