fix(layout): various fixes on the book and reader styles and layouts, closes #2368 (#2369)

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

@@ -65,7 +65,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
         }
       }
     });
-    setLibrary(libraryBooks);
+    setLibrary([...libraryBooks]);
     appService?.saveLibraryBooks(libraryBooks);
     onConfirm();
   };
@@ -118,7 +118,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
         }
       }
     });
-    setLibrary(libraryBooks);
+    setLibrary([...libraryBooks]);
     appService?.saveLibraryBooks(libraryBooks);
     onConfirm();
   };
@@ -155,7 +155,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
               className='flex items-center space-x-2 p-2 text-blue-500'
             >
               <HiOutlineFolderRemove size={iconSize} />
-              <span>{_('Remove From Group')}</span>
+              <span className='truncate'>{_('Remove From Group')}</span>
             </button>
           )}
           <button
@@ -163,7 +163,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
             className='flex items-center space-x-2 p-2 text-blue-500'
           >
             <HiOutlineFolderAdd size={iconSize} />
-            <span>{_('Create New Group')}</span>
+            <span className='truncate'>{_('Create New Group')}</span>
           </button>
         </div>
         {showInput && (

apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { FaHeadphones } from 'react-icons/fa6';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
@@ -18,7 +18,7 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
   onSpeakText,
 }) => {
   const _ = useTranslation();
-  const { getView, getViewState, getViewSettings } = useReaderStore();
+  const { hoveredBookKey, getView, getViewState, getViewSettings } = useReaderStore();
   const view = getView(bookKey);
   const viewState = getViewState(bookKey);
   const viewSettings = getViewSettings(bookKey);
@@ -27,6 +27,16 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
     progressValid ? progressFraction * 100 : 0,
   );
 
+  const rangeInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (hoveredBookKey !== bookKey) {
+      if (rangeInputRef.current && document.activeElement === rangeInputRef.current) {
+        rangeInputRef.current.blur();
+      }
+    }
+  }, [hoveredBookKey, bookKey]);
+
   useEffect(() => {
     if (progressValid) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -93,6 +103,7 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
         </span>
       )}
       <input
+        ref={rangeInputRef}
         type='range'
         className='text-base-content mx-2 min-w-0 flex-1'
         min={0}

apps/readest-app/src/components/Popup.tsx

@@ -83,7 +83,11 @@ const Popup = ({
       <div
         id='popup-container'
         ref={containerRef}
-        className={clsx('bg-base-300 absolute rounded-lg font-sans shadow-xl', className)}
+        className={clsx(
+          'bg-base-300 absolute rounded-lg font-sans',
+          trianglePosition?.dir !== 'up' && 'shadow-xl',
+          className,
+        )}
         style={{
           width: `${width}px`,
           height: height ? `${height}px` : 'auto',

apps/readest-app/src/services/transformers/sanitizer.ts

@@ -17,8 +17,17 @@ export const sanitizerTransformer: Transformer = {
         /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob|data):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
       ADD_TAGS: ['link', 'meta'],
       ADD_ATTR: (attributeName: string) => {
+        const attrWhitelist = [
+          'xmlns',
+          'http-equiv',
+          'content',
+          'charset',
+          'link',
+          'vlink',
+          'imt-state', // custom attribute generated by some translators
+        ];
         return (
-          ['xmlns', 'http-equiv', 'content', 'charset', 'link', 'vlink'].includes(attributeName) ||
+          attrWhitelist.includes(attributeName) ||
           attributeName.startsWith('xml:') ||
           attributeName.startsWith('xmlns:') ||
           attributeName.startsWith('epub:')

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

@@ -121,6 +121,7 @@ const getColorStyles = (
       --theme-bg-color: ${bg};
       --theme-fg-color: ${fg};
       --theme-primary-color: ${primary};
+      --override-color: ${overrideColor};
       color-scheme: ${isDarkMode ? 'dark' : 'light'};
     }
     html, body {
@@ -345,6 +346,11 @@ const getLayoutStyles = (
     color: unset;
   }
 
+  /* some epubs set insane inline-block for p */
+  p {
+    display: block;
+  }
+
   /* inline images without dimension */
   .ie6 img {
     width: unset;
@@ -612,7 +618,10 @@ export const applyImageStyle = (document: Document) => {
     const hasTextSiblings = Array.from(parent.childNodes).some(
       (node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim(),
     );
-    if (hasTextSiblings) {
+    const isInline = Array.from(parent.childNodes).every(
+      (node) => node.nodeType !== Node.ELEMENT_NODE || (node as Element).tagName !== 'BR',
+    );
+    if (hasTextSiblings && isInline) {
       img.classList.add('has-text-siblings');
     }
   });