Add i18n support (#46)

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

@@ -2,27 +2,31 @@ import React from 'react';
 
 import { FiSearch } from 'react-icons/fi';
 import { MdOutlinePushPin, MdPushPin } from 'react-icons/md';
+import { useTranslation } from '@/hooks/useTranslation';
 
 const NotebookHeader: React.FC<{
   isPinned: boolean;
   handleTogglePin: () => void;
-}> = ({ isPinned, handleTogglePin }) => (
-  <div className='notebook-header relative flex h-11 items-center px-3'>
-    <div className='absolute inset-0 flex items-center justify-center'>
-      <div className='notebook-title text-sm font-medium'>Notebook</div>
+}> = ({ isPinned, handleTogglePin }) => {
+  const _ = useTranslation();
+  return (
+    <div className='notebook-header relative flex h-11 items-center px-3'>
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <div className='notebook-title text-sm font-medium'>{_('Notebook')}</div>
+      </div>
+      <div className='z-10 flex items-center space-x-3'>
+        <button
+          onClick={handleTogglePin}
+          className={`${isPinned ? 'bg-base-300' : 'bg-base-300/65'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
+        >
+          {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
+        </button>
+        <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
+          <FiSearch size={18} />
+        </button>
+      </div>
     </div>
-    <div className='z-10 flex items-center space-x-3'>
-      <button
-        onClick={handleTogglePin}
-        className={`${isPinned ? 'bg-base-300' : 'bg-base-300/65'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
-      >
-        {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
-      </button>
-      <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
-        <FiSearch size={18} />
-      </button>
-    </div>
-  </div>
-);
+  );
+};
 
 export default NotebookHeader;

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { useNotebookStore } from '@/store/notebookStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { TextSelection } from '@/utils/sel';
 import { BookNote } from '@/types/book';
 
@@ -10,6 +11,7 @@ interface NoteEditorProps {
 }
 
 const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
+  const _ = useTranslation();
   const { notebookNewAnnotation, notebookEditAnnotation } = useNotebookStore();
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const [note, setNote] = React.useState('');
@@ -62,7 +64,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
             rows={1}
             spellCheck={false}
             onChange={handleChange}
-            placeholder='Add your notes here...'
+            placeholder={_('Add your notes here...')}
           ></textarea>
         </div>
         <button
@@ -73,7 +75,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
           )}
           onClick={handleSaveNote}
         >
-          <div className='pr-1 align-bottom text-xs text-blue-400'>Save</div>
+          <div className='pr-1 align-bottom text-xs text-blue-400'>{_('Save')}</div>
         </button>
       </div>
       <div className='flex items-start pt-2'>

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

@@ -6,6 +6,7 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useNotebookStore } from '@/store/notebookStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useEnv } from '@/context/EnvContext';
 import useDragBar from '../../hooks/useDragBar';
 import NotebookHeader from './Header';
@@ -19,6 +20,7 @@ const MIN_NOTEBOOK_WIDTH = 0.15;
 const MAX_NOTEBOOK_WIDTH = 0.45;
 
 const Notebook: React.FC = ({}) => {
+  const _ = useTranslation();
   const { envConfig } = useEnv();
   const { settings } = useSettingsStore();
   const { sideBarBookKey } = useSidebarStore();
@@ -139,7 +141,7 @@ const Notebook: React.FC = ({}) => {
         />
         <NotebookHeader isPinned={isNotebookPinned} handleTogglePin={handleTogglePin} />
         <div className='max-h-[calc(100vh-44px)] overflow-y-auto px-3'>
-          <div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>Excerpts</p>}</div>
+          <div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>{_('Excerpts')}</p>}</div>
           <ul className=''>
             {excerptNotes.map((item, index) => (
               <li key={`${index}-${item.id}`} className='my-2'>
@@ -171,7 +173,7 @@ const Notebook: React.FC = ({}) => {
                         )}
                         onClick={handleEditNote.bind(null, item, true)}
                       >
-                        <div className='align-bottom text-xs text-red-400'>Delete</div>
+                        <div className='align-bottom text-xs text-red-400'>{_('Delete')}</div>
                       </button>
                     </div>
                   </div>
@@ -181,7 +183,7 @@ const Notebook: React.FC = ({}) => {
           </ul>
           <div>
             {(notebookNewAnnotation || annotationNotes.length > 0) && (
-              <p className='pt-1 text-sm'>Notes</p>
+              <p className='pt-1 text-sm'>{_('Notes')}</p>
             )}
           </div>
           {(notebookNewAnnotation || notebookEditAnnotation) && (