feat(bookshelf): show one line of book description in list view of the bookshelf, closes #2955 (#2990)

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

@@ -14,7 +14,7 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { LibraryCoverFitType, LibraryViewModeType } from '@/types/settings';
 import { navigateToLogin } from '@/utils/nav';
-import { formatAuthors } from '@/utils/book';
+import { formatAuthors, formatDescription } from '@/utils/book';
 import ReadingProgress from './ReadingProgress';
 import BookCover from '@/components/BookCover';
 
@@ -91,7 +91,7 @@ const BookItem: React.FC<BookItemProps> = ({
         className={clsx(
           'flex w-full flex-col p-0',
           mode === 'grid' && 'pt-2',
-          mode === 'list' && 'py-2',
+          mode === 'list' && 'gap-2 py-0',
         )}
       >
         <div className={clsx('min-w-0 flex-1', mode === 'list' && 'flex flex-col gap-2')}>
@@ -110,6 +110,9 @@ const BookItem: React.FC<BookItemProps> = ({
             </p>
           )}
         </div>
+        <h4 className='text-neutral-content line-clamp-1 text-sm'>
+          {formatDescription(book.metadata?.description)}
+        </h4>
         <div
           className={clsx('flex items-center', book.progress ? 'justify-between' : 'justify-end')}
           style={{

apps/readest-app/src/utils/book.ts

@@ -133,6 +133,15 @@ export const formatTitle = (title: string | LanguageMap) => {
   return typeof title === 'string' ? title : formatLanguageMap(title);
 };
 
+export const formatDescription = (description?: string | LanguageMap) => {
+  if (!description) return '';
+  const text = typeof description === 'string' ? description : formatLanguageMap(description);
+  return text
+    .replace(/<\/?[^>]+(>|$)/g, '')
+    .replace(/&#\d+;/g, '')
+    .trim();
+};
+
 export const formatPublisher = (publisher: string | LanguageMap) => {
   return typeof publisher === 'string' ? publisher : formatLanguageMap(publisher);
 };