fix: allow CSS targeting of the "NUMBER pages left in chapter" label via <Trans> component (#3368)

* Allow users to change the "remaining pages" label

Makes the remaining page number and the label text that comes with it targetable with CSS.
Solves https://github.com/readest/readest/issues/3343.

* Fixed formatting

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

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import { Trans } from 'react-i18next';
 import { Insets } from '@/types/misc';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
@@ -75,6 +76,8 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
           })
       : '';
 
+  const showPagesLeft = total - 1 > current;
+
   const [progressInfoMode, setProgressInfoMode] = useState(viewSettings.progressInfoMode);
 
   const cycleProgressInfoModes = () => {
@@ -172,8 +175,23 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
           <>
             {viewSettings.showRemainingTime ? (
               <span className='time-left-label text-start'>{timeLeftStr}</span>
-            ) : viewSettings.showRemainingPages ? (
-              <span className='pages-left-label text-start'>{pagesLeftStr}</span>
+            ) : viewSettings.showRemainingPages && showPagesLeft ? (
+              <span className='text-start'>
+                {localize ? (
+                  <Trans
+                    i18nKey='{{number}} pages left in chapter'
+                    values={{ number: formatNumber(pagesLeft, localize, lang) }}
+                  >
+                    <span className='pages-left-number'>{'{{number}}'}</span>
+                    <span className='pages-left-label'>{' pages left in chapter'}</span>
+                  </Trans>
+                ) : (
+                  <Trans i18nKey='{{count}} pages left in chapter' count={pagesLeft}>
+                    <span className='pages-left-number'>{'{{count}}'}</span>
+                    <span className='pages-left-label'>{' pages left in chapter'}</span>
+                  </Trans>
+                )}
+              </span>
             ) : null}
           </>
         )}