fix: add metadata parsed from cbz zip comment, closes #639 (#688)

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

@@ -112,6 +112,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               <SectionInfo
                 section={sectionLabel}
                 showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
+                isScrolled={viewSettings.scrolled}
                 isVertical={viewSettings.vertical}
                 horizontalGap={horizontalGapPercent}
                 verticalMargin={verticalMarginPixels}
@@ -130,6 +131,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
                 section={section}
                 pageinfo={pageinfo}
                 showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
+                isScrolled={viewSettings.scrolled}
                 isVertical={viewSettings.vertical}
                 horizontalGap={horizontalGapPercent}
                 verticalMargin={verticalMarginPixels}

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

@@ -9,6 +9,7 @@ interface PageInfoProps {
   section?: PageInfo;
   pageinfo?: PageInfo;
   showDoubleBorder: boolean;
+  isScrolled: boolean;
   isVertical: boolean;
   horizontalGap: number;
   verticalMargin: number;
@@ -19,34 +20,32 @@ const PageInfoView: React.FC<PageInfoProps> = ({
   section,
   pageinfo,
   showDoubleBorder,
+  isScrolled,
   isVertical,
   horizontalGap,
   verticalMargin,
 }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const pageInfo =
-    bookFormat === 'PDF'
-      ? section
-        ? isVertical
-          ? `${section.current + 1} · ${section.total}`
-          : `${section.current + 1} / ${section.total}`
-        : ''
-      : pageinfo
-        ? _(
-            isVertical ? '{{currentPage}} · {{totalPage}}' : 'Loc. {{currentPage}} / {{totalPage}}',
-            {
-              currentPage: (pageinfo.next ?? pageinfo.current) + 1,
-              totalPage: pageinfo.total,
-            },
-          )
-        : '';
+  const pageInfo = ['PDF', 'CBZ'].includes(bookFormat)
+    ? section
+      ? isVertical
+        ? `${section.current + 1} · ${section.total}`
+        : `${section.current + 1} / ${section.total}`
+      : ''
+    : pageinfo
+      ? _(isVertical ? '{{currentPage}} · {{totalPage}}' : 'Loc. {{currentPage}} / {{totalPage}}', {
+          currentPage: (pageinfo.next ?? pageinfo.current) + 1,
+          totalPage: pageinfo.total,
+        })
+      : '';
 
   return (
     <div
       className={clsx(
         'pageinfo absolute bottom-0 flex items-center justify-end',
-        isVertical ? 'writing-vertical-rl' : 'bg-base-100 h-12 w-full',
+        isVertical ? 'writing-vertical-rl' : 'h-12 w-full',
+        isScrolled && 'bg-base-100',
       )}
       style={
         isVertical

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

@@ -4,6 +4,7 @@ import React from 'react';
 interface SectionInfoProps {
   section?: string;
   showDoubleBorder: boolean;
+  isScrolled: boolean;
   isVertical: boolean;
   horizontalGap: number;
   verticalMargin: number;
@@ -12,6 +13,7 @@ interface SectionInfoProps {
 const SectionInfo: React.FC<SectionInfoProps> = ({
   section,
   showDoubleBorder,
+  isScrolled,
   isVertical,
   horizontalGap,
   verticalMargin,
@@ -20,7 +22,8 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
     <div
       className={clsx(
         'sectioninfo absolute flex items-center overflow-hidden',
-        isVertical ? 'writing-vertical-rl max-h-[85%]' : 'bg-base-100 top-0 h-[44px]',
+        isVertical ? 'writing-vertical-rl max-h-[85%]' : 'top-0 h-[44px]',
+        isScrolled && 'bg-base-100',
       )}
       style={
         isVertical