From 72949e726f98fd200cc9dd0b3dea5e26d5124d63 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 25 Dec 2024 19:39:43 +0100
Subject: [PATCH] Fix deleted bootnotes still shown in sidebar (#42)

---
 .../reader/components/annotator/Annotator.tsx | 10 ++++--
 .../reader/components/notebook/Notebook.tsx   | 31 +++++++------------
 .../components/sidebar/BooknoteItem.tsx       |  8 +++--
 .../components/sidebar/BooknoteView.tsx       |  2 +-
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
index 84bb2dd1..fc41206a 100644
--- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
@@ -104,7 +104,9 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     const detail = (event as CustomEvent).detail;
     const { value: cfi, index, range } = detail;
     const { booknotes = [] } = config;
-    const annotations = booknotes.filter((booknote) => booknote.type === 'annotation');
+    const annotations = booknotes.filter(
+      (booknote) => booknote.type === 'annotation' && !booknote.deletedAt,
+    );
     const annotation = annotations.find((annotation) => annotation.cfi === cfi);
     if (!annotation) return;
     const selection = { key: bookKey, annotated: true, text: annotation.text ?? '', range, index };
@@ -235,7 +237,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     };
 
     const existingIndex = annotations.findIndex(
-      (annotation) => annotation.cfi === cfi && annotation.type === 'excerpt',
+      (annotation) =>
+        annotation.cfi === cfi && annotation.type === 'excerpt' && !annotation.deletedAt,
     );
     if (existingIndex !== -1) {
       annotations[existingIndex] = annotation;
@@ -270,7 +273,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       updatedAt: Date.now(),
     };
     const existingIndex = annotations.findIndex(
-      (annotation) => annotation.cfi === cfi && annotation.type === 'annotation',
+      (annotation) =>
+        annotation.cfi === cfi && annotation.type === 'annotation' && !annotation.deletedAt,
     );
     const views = getViewsById(bookKey.split('-')[0]!);
     if (existingIndex !== -1) {
diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
index 63759486..83f57cde 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -84,14 +84,18 @@ const Notebook: React.FC = ({}) => {
     setNotebookNewAnnotation(null);
   };
 
-  const handleEditNote = (annotation: BookNote) => {
+  const handleEditNote = (note: BookNote, isDelete: boolean) => {
     if (!sideBarBookKey) return;
     const config = getConfig(sideBarBookKey)!;
     const { booknotes: annotations = [] } = config;
-    const existingIndex = annotations.findIndex((item) => item.id === annotation.id);
+    const existingIndex = annotations.findIndex((item) => item.id === note.id);
     if (existingIndex === -1) return;
-    annotation.updatedAt = Date.now();
-    annotations[existingIndex] = annotation;
+    if (isDelete) {
+      note.deletedAt = Date.now();
+    } else {
+      note.updatedAt = Date.now();
+    }
+    annotations[existingIndex] = note;
     const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
     if (updatedConfig) {
       saveConfig(envConfig, sideBarBookKey, updatedConfig, settings);
@@ -100,27 +104,16 @@ const Notebook: React.FC = ({}) => {
   };
 
   const { handleMouseDown } = useDragBar(handleDragMove);
-  const deleteNote = (note: BookNote) => {
-    if (!sideBarBookKey) return;
-    const config = getConfig(sideBarBookKey);
-    if (!config) return;
-    const { booknotes = [] } = config;
-    const updatedNotes = booknotes.filter((item) => item.id !== note.id);
-    const updatedConfig = updateBooknotes(sideBarBookKey, updatedNotes);
-    if (updatedConfig) {
-      saveConfig(envConfig, sideBarBookKey, updatedConfig, settings);
-    }
-  };
 
   if (!sideBarBookKey) return null;
 
   const config = getConfig(sideBarBookKey);
   const { booknotes: allNotes = [] } = config || {};
   const annotationNotes = allNotes
-    .filter((note) => note.type === 'annotation' && note.note)
+    .filter((note) => note.type === 'annotation' && note.note && !note.deletedAt)
     .sort((a, b) => b.createdAt - a.createdAt);
   const excerptNotes = allNotes
-    .filter((note) => note.type === 'excerpt')
+    .filter((note) => note.type === 'excerpt' && note.text && !note.deletedAt)
     .sort((a, b) => a.createdAt - b.createdAt);
 
   return isNotebookVisible ? (
@@ -176,7 +169,7 @@ const Notebook: React.FC = ({}) => {
                           'btn btn-ghost settings-content hover:bg-transparent',
                           'flex h-[1em] min-h-[1em] items-end p-0',
                         )}
-                        onClick={deleteNote.bind(null, item)}
+                        onClick={handleEditNote.bind(null, item, true)}
                       >
                         <div className='align-bottom text-xs text-red-400'>Delete</div>
                       </button>
@@ -192,7 +185,7 @@ const Notebook: React.FC = ({}) => {
             )}
           </div>
           {(notebookNewAnnotation || notebookEditAnnotation) && (
-            <NoteEditor onSave={handleSaveNote} onEdit={handleEditNote} />
+            <NoteEditor onSave={handleSaveNote} onEdit={(item) => handleEditNote(item, false)} />
           )}
           <ul className=''>
             {annotationNotes.map((item, index) => (
diff --git a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
index 54cfe5f2..ee4f22e8 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
@@ -39,8 +39,12 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, editable = f
     const config = getConfig(bookKey);
     if (!config) return;
     const { booknotes = [] } = config;
-    const updatedNotes = booknotes.filter((item) => item.id !== note.id);
-    const updatedConfig = updateBooknotes(bookKey, updatedNotes);
+    booknotes.forEach((item) => {
+      if (item.id === note.id) {
+        item.deletedAt = Date.now();
+      }
+    });
+    const updatedConfig = updateBooknotes(bookKey, booknotes);
     if (updatedConfig) {
       saveConfig(envConfig, bookKey, updatedConfig, settings);
     }
diff --git a/apps/readest-app/src/app/reader/components/sidebar/BooknoteView.tsx b/apps/readest-app/src/app/reader/components/sidebar/BooknoteView.tsx
index d840159f..7adb9cc1 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/BooknoteView.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/BooknoteView.tsx
@@ -22,7 +22,7 @@ const BooknoteView: React.FC<{
   const { getConfig } = useBookDataStore();
   const config = getConfig(bookKey)!;
   const { booknotes: allNotes = [] } = config;
-  const booknotes = allNotes.filter((note) => note.type === type);
+  const booknotes = allNotes.filter((note) => note.type === type && !note.deletedAt);
 
   const booknoteGroups: { [href: string]: BooknoteGroup } = {};
   for (const booknote of booknotes) {