fix: display complete notes in note list and save note drafts, closes #405 (#412)

apps/readest-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",

apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { useNotebookStore } from '@/store/notebookStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { TextSelection } from '@/utils/sel';
+import { md5Fingerprint } from '@/utils/md5';
 import { BookNote } from '@/types/book';
 import useShortcuts from '@/hooks/useShortcuts';
 
@@ -13,7 +14,14 @@ interface NoteEditorProps {
 
 const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
   const _ = useTranslation();
-  const { notebookNewAnnotation, notebookEditAnnotation, setNotebookNewAnnotation, setNotebookEditAnnotation } = useNotebookStore();
+  const {
+    notebookNewAnnotation,
+    notebookEditAnnotation,
+    setNotebookNewAnnotation,
+    setNotebookEditAnnotation,
+    saveNotebookAnnotationDraft,
+    getNotebookAnnotationDraft,
+  } = useNotebookStore();
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const [note, setNote] = React.useState('');
 
@@ -21,13 +29,30 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
     if (editorRef.current) {
       editorRef.current.focus();
     }
-  }, []);
+  }, [editorRef]);
 
   useEffect(() => {
     if (notebookEditAnnotation) {
       setNote(notebookEditAnnotation.note);
+      if (editorRef.current) {
+        editorRef.current.value = notebookEditAnnotation.note;
+        editorRef.current.focus();
+        adjustHeight();
+      }
+    } else if (notebookNewAnnotation) {
+      const noteText = getAnnotationText();
+      if (noteText) {
+        const draftNote = getNotebookAnnotationDraft(md5Fingerprint(noteText)) || '';
+        setNote(draftNote);
+        if (editorRef.current) {
+          editorRef.current.value = draftNote;
+          editorRef.current.focus();
+          adjustHeight();
+        }
+      }
     }
-  }, [notebookEditAnnotation]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notebookNewAnnotation, notebookEditAnnotation]);
 
   const adjustHeight = () => {
     if (editorRef.current) {
@@ -36,11 +61,24 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
     }
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const getAnnotationText = () => {
+    return notebookEditAnnotation?.text || notebookNewAnnotation?.text || '';
+  };
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     adjustHeight();
     setNote(e.currentTarget.value);
   };
 
+  const handleOnBlur = () => {
+    if (editorRef.current && editorRef.current.value) {
+      const noteText = getAnnotationText();
+      if (noteText) {
+        saveNotebookAnnotationDraft(md5Fingerprint(noteText), editorRef.current.value);
+      }
+    }
+  };
+
   const handleSaveNote = () => {
     if (editorRef.current && notebookNewAnnotation) {
       onSave(notebookNewAnnotation, editorRef.current.value);
@@ -58,12 +96,13 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
     },
     onCloseNote: () => {
       if (notebookNewAnnotation) {
-        setNotebookNewAnnotation(null)
-      } else if (notebookEditAnnotation) {
-        setNotebookEditAnnotation(null)
+        setNotebookNewAnnotation(null);
       }
-    }
-  })
+      if (notebookEditAnnotation) {
+        setNotebookEditAnnotation(null);
+      }
+    },
+  });
 
   return (
     <div className='note-editor-container bg-base-100 mt-2 rounded-md p-2'>
@@ -79,7 +118,8 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
             value={note}
             rows={1}
             spellCheck={false}
-            onChange={handleChange}
+            onChange={handleOnChange}
+            onBlur={handleOnBlur}
             placeholder={_('Add your notes here...')}
           ></textarea>
         </div>
@@ -97,7 +137,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
       <div className='flex items-start pt-2'>
         <div className='mr-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
         <div className='note-citation settings-content line-clamp-3 text-sm'>
-          {notebookNewAnnotation?.text || notebookEditAnnotation?.text}
+          {getAnnotationText()}
         </div>
       </div>
     </div>

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -77,6 +77,8 @@ const Notebook: React.FC = ({}) => {
     event.preventDefault();
     event.stopPropagation();
     setNotebookVisible(false);
+    setNotebookNewAnnotation(null);
+    setNotebookEditAnnotation(null);
   };
 
   const handleDragMove = (e: MouseEvent) => {

apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx

@@ -81,7 +81,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           } as React.CSSProperties
         }
       >
-        {item.note && <span className='line-clamp-3 font-normal'>{item.note}</span>}
+        {item.note && <span className='font-normal'>{item.note}</span>}
         <div className='flex items-start'>
           {item.note && (
             <div className='my-1 mr-2 min-h-full self-stretch border-l-2 border-gray-300'></div>

apps/readest-app/src/store/notebookStore.ts

@@ -8,6 +8,7 @@ interface NotebookState {
   isNotebookPinned: boolean;
   notebookNewAnnotation: TextSelection | null;
   notebookEditAnnotation: BookNote | null;
+  notebookAnnotationDrafts: { [key: string]: string };
   toggleNotebook: () => void;
   toggleNotebookPin: () => void;
   setNotebookWidth: (width: string) => void;
@@ -15,14 +16,17 @@ interface NotebookState {
   setNotebookPin: (pinned: boolean) => void;
   setNotebookNewAnnotation: (selection: TextSelection | null) => void;
   setNotebookEditAnnotation: (note: BookNote | null) => void;
+  saveNotebookAnnotationDraft: (key: string, note: string) => void;
+  getNotebookAnnotationDraft: (key: string) => string | undefined;
 }
 
-export const useNotebookStore = create<NotebookState>((set) => ({
+export const useNotebookStore = create<NotebookState>((set, get) => ({
   notebookWidth: '',
   isNotebookVisible: false,
   isNotebookPinned: false,
   notebookNewAnnotation: null,
   notebookEditAnnotation: null,
+  notebookAnnotationDrafts: {},
   setNotebookWidth: (width: string) => set({ notebookWidth: width }),
   toggleNotebook: () => set((state) => ({ isNotebookVisible: !state.isNotebookVisible })),
   toggleNotebookPin: () => set((state) => ({ isNotebookPinned: !state.isNotebookPinned })),
@@ -31,4 +35,9 @@ export const useNotebookStore = create<NotebookState>((set) => ({
   setNotebookNewAnnotation: (selection: TextSelection | null) =>
     set({ notebookNewAnnotation: selection }),
   setNotebookEditAnnotation: (note: BookNote | null) => set({ notebookEditAnnotation: note }),
+  saveNotebookAnnotationDraft: (key: string, note: string) =>
+    set((state) => ({
+      notebookAnnotationDrafts: { ...state.notebookAnnotationDrafts, [key]: note },
+    })),
+  getNotebookAnnotationDraft: (key: string) => get().notebookAnnotationDrafts[key],
 }));

apps/readest-app/src/styles/globals.css

@@ -28,6 +28,22 @@ html[data-page='reader'] {
   background: theme('colors.base-100');
 }
 
+html {
+  font-size: 16px;
+}
+
+@media (max-width: 480px) {
+  html {
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  html {
+    font-size: 18.4px;
+  }
+}
+
 body {
   color: var(--foreground);
   background: var(--background);