fix: add delete confirmation for book deletion from contextmenu, closes #2013 (#2029)

apps/readest-app/src/app/library/components/Bookshelf.tsx

@@ -14,6 +14,7 @@ import { useLibraryStore } from '@/store/libraryStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { navigateToLibrary, navigateToReader, showReaderWindow } from '@/utils/nav';
 import { formatAuthors, formatTitle } from '@/utils/book';
+import { eventDispatcher } from '@/utils/event';
 import { isMd5 } from '@/utils/md5';
 
 import Alert from '@/components/Alert';
@@ -57,6 +58,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const { safeAreaInsets } = useThemeStore();
   const [loading, setLoading] = useState(false);
   const [showSelectModeActions, setShowSelectModeActions] = useState(false);
+  const [bookIdsToDelete, setBookIdsToDelete] = useState<string[]>([]);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   const [showGroupingModal, setShowGroupingModal] = useState(false);
   const [queryTerm, setQueryTerm] = useState<string | null>(null);
@@ -189,8 +191,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
 
   const getBooksToDelete = () => {
     const booksToDelete: Book[] = [];
-    const selectedBooks = getSelectedBooks();
-    selectedBooks.forEach((id) => {
+    bookIdsToDelete.forEach((id) => {
       for (const book of libraryBooks.filter((book) => book.hash === id || book.groupId === id)) {
         if (book && !book.deletedAt) {
           booksToDelete.push(book);
@@ -210,6 +211,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   };
 
   const deleteSelectedBooks = () => {
+    setBookIdsToDelete(getSelectedBooks());
     setShowSelectModeActions(false);
     setShowDeleteAlert(true);
   };
@@ -219,6 +221,13 @@ const Bookshelf: React.FC<BookshelfProps> = ({
     setShowGroupingModal(true);
   };
 
+  const handleDeleteBooksIntent = (event: CustomEvent) => {
+    const { ids } = event.detail;
+    setBookIdsToDelete(ids);
+    setShowSelectModeActions(false);
+    setShowDeleteAlert(true);
+  };
+
   const bookFilter = (item: Book, queryTerm: string) => {
     if (item.deletedAt) return false;
     const searchTerm = new RegExp(queryTerm, 'i');
@@ -295,6 +304,13 @@ const Bookshelf: React.FC<BookshelfProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSelectMode, isSelectAll, isSelectNone]);
 
+  useEffect(() => {
+    eventDispatcher.on('delete-books', handleDeleteBooksIntent);
+    return () => {
+      eventDispatcher.off('delete-books', handleDeleteBooksIntent);
+    };
+  }, []);
+
   const selectedBooks = getSelectedBooks();
 
   return (

apps/readest-app/src/app/library/components/BookshelfItem.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useLongPress } from '@/hooks/useLongPress';
 import { Menu, MenuItem } from '@tauri-apps/api/menu';
 import { revealItemInDir } from '@tauri-apps/plugin-opener';
+import { eventDispatcher } from '@/utils/event';
 import { getOSPlatform } from '@/utils/misc';
 import { throttle } from '@/utils/throttle';
 import { LibraryCoverFitType, LibraryViewModeType } from '@/types/settings';
@@ -94,7 +95,6 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
   toggleSelection,
   handleBookUpload,
   handleBookDownload,
-  handleBookDelete,
   handleSetSelectMode,
   handleShowDetailsBook,
 }) => {
@@ -212,7 +212,7 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
     const deleteBookMenuItem = await MenuItem.new({
       text: _('Delete'),
       action: async () => {
-        await handleBookDelete(book);
+        eventDispatcher.dispatch('delete-books', { ids: [book.hash] });
       },
     });
     const menu = await Menu.new();
@@ -241,9 +241,7 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
     const deleteGroupMenuItem = await MenuItem.new({
       text: _('Delete'),
       action: async () => {
-        for (const book of group.books) {
-          await handleBookDelete(book);
-        }
+        eventDispatcher.dispatch('delete-books', { ids: [group.id] });
       },
     });
     const menu = await Menu.new();