Refactor useBooksManager and make it reusable

apps/readest-app/src/app/reader/components/BooksGrid.tsx

@@ -11,12 +11,12 @@ import Ribbon from './Ribbon';
 import SettingsDialog from './settings/SettingsDialog';
 import Annotator from './annotator/Annotator';
 
-interface BookGridProps {
+interface BooksGridProps {
   bookKeys: string[];
   onCloseBook: (bookKey: string) => void;
 }
 
-const BookGrid: React.FC<BookGridProps> = ({ bookKeys, onCloseBook }) => {
+const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
   const { getConfig, getProgress, getBookData, getViewState, getViewSettings } = useReaderStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useReaderStore();
   const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
@@ -78,4 +78,4 @@ const BookGrid: React.FC<BookGridProps> = ({ bookKeys, onCloseBook }) => {
   );
 };
 
-export default BookGrid;
+export default BooksGrid;

apps/readest-app/src/app/reader/components/ReaderContent.tsx

@@ -1,27 +1,48 @@
 'use client';
 
 import * as React from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { SystemSettings } from '@/types/settings';
+import { uniqueId } from '@/utils/misc';
 
+import useBooksManager from '../hooks/useBooksManager';
+import useBookShortcuts from '../hooks/useBookShortcuts';
 import Spinner from '@/components/Spinner';
 import SideBar from './sidebar/SideBar';
-import useBooks from '../hooks/useBooks';
-import BookGrid from './BookGrid';
-import useBookShortcuts from '../hooks/useBookShortcuts';
 import Notebook from './notebook/Notebook';
+import BooksGrid from './BooksGrid';
 
 const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { envConfig } = useEnv();
-  const { bookKeys, dismissBook, getNextBookKey, openSplitView } = useBooks();
-  const { sideBarBookKey, getView, getConfig, setSideBarBookKey } = useReaderStore();
-  const { getBookData, getViewState, clearViewState, saveConfig, saveSettings } = useReaderStore();
+  const { bookKeys, dismissBook, getNextBookKey } = useBooksManager();
+  const { sideBarBookKey, getView, getConfig, saveConfig, saveSettings, setSideBarBookKey } =
+    useReaderStore();
+  const { setBookKeys, getBookData, initViewState, getViewState, clearViewState } =
+    useReaderStore();
 
-  useBookShortcuts({ sideBarBookKey, bookKeys, openSplitView, getNextBookKey });
+  useBookShortcuts({ sideBarBookKey, bookKeys });
+
+  React.useEffect(() => {
+    const initialIds = (searchParams.get('ids') || '').split(',').filter(Boolean);
+    const initialBookKeys = initialIds.map((id) => `${id}-${uniqueId()}`);
+    setBookKeys(initialBookKeys);
+    const uniqueIds = new Set<string>();
+    console.log('Initialize books', initialBookKeys);
+    initialBookKeys.forEach((key, index) => {
+      const id = key.split('-')[0]!;
+      const isPrimary = !uniqueIds.has(id);
+      uniqueIds.add(id);
+      if (!getViewState(key)) {
+        initViewState(envConfig, id, key, isPrimary);
+        if (index === 0) setSideBarBookKey(key);
+      }
+    });
+  }, []);
 
   const saveConfigAndCloseBook = (bookKey: string) => {
     getView(bookKey)?.close();
@@ -70,8 +91,8 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
 
   return (
     <div className='flex h-screen'>
-      <SideBar onGoToLibrary={handleCloseBooks} onOpenSplitView={openSplitView} />
-      <BookGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
+      <SideBar onGoToLibrary={handleCloseBooks} />
+      <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
       <Notebook />
     </div>
   );

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

@@ -1,13 +1,14 @@
 import React from 'react';
+import useBooksManager from '../../hooks/useBooksManager';
 
 interface BookMenuProps {
-  openSplitView: () => void;
   setIsDropdownOpen?: (isOpen: boolean) => void;
 }
 
-const BookMenu: React.FC<BookMenuProps> = ({ openSplitView, setIsDropdownOpen }) => {
+const BookMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
+  const { openParallelView } = useBooksManager();
   const handleOpenSplitView = () => {
-    openSplitView();
+    openParallelView();
     setIsDropdownOpen?.(false);
   };
   const handleReloadPage = () => {

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

@@ -11,9 +11,8 @@ import BookMenu from './BookMenu';
 const SidebarHeader: React.FC<{
   isPinned: boolean;
   onGoToLibrary: () => void;
-  onOpenSplitView: () => void;
   handleTogglePin: () => void;
-}> = ({ isPinned, onGoToLibrary, onOpenSplitView, handleTogglePin }) => {
+}> = ({ isPinned, onGoToLibrary, handleTogglePin }) => {
   const { isTrafficLightVisible } = useTrafficLight();
   return (
     <div
@@ -36,7 +35,7 @@ const SidebarHeader: React.FC<{
           buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
           toggleButton={<MdOutlineMenu size={20} />}
         >
-          <BookMenu openSplitView={onOpenSplitView} />
+          <BookMenu />
         </Dropdown>
         <div className='right-0 flex h-8 w-8 items-center justify-center'>
           <button

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

@@ -15,8 +15,7 @@ const MAX_SIDEBAR_WIDTH = 0.45;
 
 const SideBar: React.FC<{
   onGoToLibrary: () => void;
-  onOpenSplitView: () => void;
-}> = ({ onGoToLibrary, onOpenSplitView }) => {
+}> = ({ onGoToLibrary }) => {
   const { envConfig } = useEnv();
   const { sideBarBookKey, settings } = useReaderStore();
   const { saveSettings, getBookData } = useReaderStore();
@@ -75,7 +74,6 @@ const SideBar: React.FC<{
         <SidebarHeader
           isPinned={isSideBarPinned}
           onGoToLibrary={onGoToLibrary}
-          onOpenSplitView={onOpenSplitView}
           handleTogglePin={handleSideBarTogglePin}
         />
         <div className='border-b px-3'>