add delete button to image previwer in gallery (#7170)

* add delete button to image previwer in gallery

* delete the last image and display the first one

* fix bug - delete the last image

* feat: optimize code

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
Co-authored-by: 杨国璇 <ygx@192.168.1.7>

frontend/src/metadata/views/gallery/main.js

@@ -275,15 +275,17 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
     setSelectedImages(prev => prev.length < 2 ? [image] : [...prev]);
   }, [imageItems]);
 
-  const moveToPrevImage = () => {
+  const moveToPrevImage = useCallback(() => {
     const imageItemsLength = imageItems.length;
     setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
-  };
+    setSelectedImages([imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength]]);
+  }, [imageItems, imageIndex]);
 
-  const moveToNextImage = () => {
+  const moveToNextImage = useCallback(() => {
     const imageItemsLength = imageItems.length;
     setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
-  };
+    setSelectedImages([imageItems[(imageIndex + 1) % imageItemsLength]]);
+  }, [imageItems, imageIndex]);
 
   const handleImageSelection = useCallback((selectedImages) => {
     setSelectedImages(selectedImages);
@@ -340,6 +342,28 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
     }
   }, [handleImageSelection, updateSelectedImage]);
 
+  const deleteImage = useCallback(() => {
+    const image = selectedImages[0];
+    const index = imageItems.findIndex(item => item.id === image.id);
+    onDelete(selectedImages);
+
+    const newImageItems = imageItems.filter(item => item.id !== image.id);
+    let newSelectedImage;
+
+    if (newImageItems.length === 0) {
+      setSelectedImages([]);
+      setIsImagePopupOpen(false);
+      setImageIndex(0);
+    } else {
+      const newIndex = index >= newImageItems.length ? 0 : index;
+      newSelectedImage = newImageItems[newIndex];
+      setImageIndex(newIndex);
+    }
+
+    setSelectedImages(newSelectedImage ? [newSelectedImage] : []);
+    updateSelectedImage(newSelectedImage);
+  }, [selectedImages, imageItems, onDelete, updateSelectedImage]);
+
   return (
     <>
       <div
@@ -385,6 +409,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore }) => {
             closeImagePopup={closeImagePopup}
             moveToPrevImage={moveToPrevImage}
             moveToNextImage={moveToNextImage}
+            onDeleteImage={deleteImage}
           />
         </ModalPortal>
       )}