feat: add book metadata search in the bookshelf, closes #100 (#838)

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

@@ -10,6 +10,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { navigateToLibrary, navigateToReader } from '@/utils/nav';
+import { formatAuthors, formatTitle } from '@/utils/book';
 import { isMd5 } from '@/utils/md5';
 
 import Alert from '@/components/Alert';
@@ -49,6 +50,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const [showSelectModeActions, setShowSelectModeActions] = useState(false);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   const [showGroupingModal, setShowGroupingModal] = useState(false);
+  const [queryTerm, setQueryTerm] = useState<string | null>(null);
   const [navBooksGroup, setNavBooksGroup] = useState<BooksGroup | null>(null);
   const [importBookUrl] = useState(searchParams?.get('url') || '');
   const isImportingBook = useRef(false);
@@ -86,6 +88,12 @@ const Bookshelf: React.FC<BookshelfProps> = ({
 
   useEffect(() => {
     const group = searchParams?.get('group') || '';
+    const query = searchParams?.get('q') || '';
+    if (query) {
+      setQueryTerm(query);
+    } else {
+      setQueryTerm(null);
+    }
     if (group) {
       const booksGroup = allBookshelfItems.find(
         (item) => 'name' in item && item.id === group,
@@ -93,11 +101,11 @@ const Bookshelf: React.FC<BookshelfProps> = ({
       if (booksGroup) {
         setNavBooksGroup(booksGroup);
       } else {
-        navigateToLibrary(router);
+        navigateToLibrary(router, query ? `q=${query}` : undefined);
       }
     } else {
       setNavBooksGroup(null);
-      navigateToLibrary(router);
+      navigateToLibrary(router, query ? `q=${query}` : undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams, libraryBooks, showGroupingModal]);
@@ -137,6 +145,18 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   };
 
   const currentBookshelfItems = navBooksGroup ? navBooksGroup.books : allBookshelfItems;
+  const bookFilter = (item: Book, queryTerm: string) => {
+    if (item.deletedAt) return false;
+    const searchTerm = new RegExp(queryTerm, 'i');
+    const title = formatTitle(item.title);
+    const authors = formatAuthors(item.author);
+    return searchTerm.test(title) || searchTerm.test(authors);
+  };
+  const filteredBookshelfItems = currentBookshelfItems.filter((item) => {
+    if ('name' in item) return item.books.some((book) => bookFilter(book, queryTerm || ''));
+    else if (queryTerm) return bookFilter(item, queryTerm);
+    return true;
+  });
 
   return (
     <div className='bookshelf'>
@@ -146,7 +166,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
           'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12',
         )}
       >
-        {currentBookshelfItems.map((item, index) => (
+        {filteredBookshelfItems.map((item, index) => (
           <BookshelfItem
             key={`library-item-${index}`}
             item={item}

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { navigateToLibrary, navigateToReader } from '@/utils/nav';
 import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
@@ -94,6 +94,7 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
 }) => {
   const _ = useTranslation();
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { envConfig, appService } = useEnv();
   const { settings } = useSettingsStore();
   const { updateBook } = useLibraryStore();
@@ -133,7 +134,9 @@ const BookshelfItem: React.FC<BookshelfItemProps> = ({
     if (isSelectMode) {
       toggleSelection(group.id);
     } else {
-      navigateToLibrary(router, `group=${group.id}`);
+      const params = new URLSearchParams(searchParams?.toString());
+      params.set('group', group.id);
+      navigateToLibrary(router, `${params.toString()}`);
     }
   };
 

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

@@ -1,17 +1,18 @@
 import clsx from 'clsx';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
 import { PiSelectionAllDuotone } from 'react-icons/pi';
-import { MdOutlineMenu } from 'react-icons/md';
-import { MdArrowBackIosNew } from 'react-icons/md';
+import { MdOutlineMenu, MdArrowBackIosNew } from 'react-icons/md';
+import { IoMdCloseCircle } from 'react-icons/io';
 
 import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { useTrafficLightStore } from '@/store/trafficLightStore';
 import { navigateToLibrary } from '@/utils/nav';
+import { throttle } from '@/utils/throttle';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SettingsMenu from './SettingsMenu';
@@ -40,6 +41,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     setTrafficLightVisibility,
     cleanupTrafficLightListeners,
   } = useTrafficLightStore();
+  const [searchQuery, setSearchQuery] = useState(searchParams?.get('q') ?? '');
 
   const headerRef = useRef<HTMLDivElement>(null);
   const iconSize16 = useResponsiveSize(16);
@@ -49,6 +51,26 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     onToggleSelectMode,
   });
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const throttledUpdateQueryParam = useCallback(
+    throttle((value: string) => {
+      const params = new URLSearchParams(searchParams?.toString());
+      if (value) {
+        params.set('q', value);
+      } else {
+        params.delete('q');
+      }
+      router.push(`?${params.toString()}`);
+    }, 1000),
+    [searchParams],
+  );
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newQuery = e.target.value;
+    setSearchQuery(newQuery);
+    throttledUpdateQueryParam(newQuery);
+  };
+
   useEffect(() => {
     if (!appService?.hasTrafficLight) return;
 
@@ -93,7 +115,9 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             </span>
             <input
               type='text'
+              value={searchQuery}
               placeholder={_('Search Books...')}
+              onChange={handleSearchChange}
               spellCheck='false'
               className={clsx(
                 'input rounded-badge bg-base-300/50 h-9 w-full pl-10 pr-10 sm:h-7',
@@ -103,6 +127,19 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             />
           </div>
           <div className='absolute right-4 flex items-center space-x-2 text-gray-500 sm:space-x-4'>
+            {searchQuery && (
+              <button
+                type='button'
+                onClick={() => {
+                  setSearchQuery('');
+                  throttledUpdateQueryParam('');
+                }}
+                className='text-gray-400 hover:text-gray-600'
+                aria-label={_('Clear Search')}
+              >
+                <IoMdCloseCircle className='h-4 w-4' />
+              </button>
+            )}
             <span className='bg-base-content/50 mx-2 h-4 w-[0.5px]'></span>
             <Dropdown
               className='exclude-title-bar-mousedown dropdown-bottom flex h-6 cursor-pointer justify-center'