From b1f29412479cf11a777fd9c8f37830c778e563c2 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sun, 9 Mar 2025 18:33:52 +0800
Subject: [PATCH] fix: various fixes for updater, footerbar and note item
 (#545)

* fix: don't open book if failed to download book

* fix: various fixes for updater, footerbar and note item
1. now footerbar when invisible won't process pointer events
2. manually check updater won't be prevented by check interval
3. get rid of clamped text in note item
---
 .../src/app/reader/components/FooterBar.tsx   | 107 ++++++++++--------
 .../components/sidebar/BooknoteItem.tsx       |   2 +-
 .../src/components/AboutWindow.tsx            |   2 +-
 apps/readest-app/src/helpers/updater.ts       |   5 +-
 4 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/FooterBar.tsx b/apps/readest-app/src/app/reader/components/FooterBar.tsx
index d14ac968..d2f93a5d 100644
--- a/apps/readest-app/src/app/reader/components/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/FooterBar.tsx
@@ -67,64 +67,73 @@ const FooterBar: React.FC<FooterBarProps> = ({
     }
   };
 
+  const isVisible = hoveredBookKey === bookKey;
   const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
   const progressValid = !!progressInfo;
   const progressFraction = progressValid ? (progressInfo!.current + 1) / progressInfo!.total : 0;
+
   return (
-    <div
-      className={clsx(
-        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
-        'shadow-xs bg-base-100 transition-opacity duration-300',
-        appService?.hasSafeAreaInset && 'pb-[env(safe-area-inset-bottom)]',
-        appService?.hasRoundedWindow && 'rounded-window-bottom-right',
-        !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
-        isHoveredAnim && 'hover-bar-anim',
-        viewSettings?.vertical && viewSettings?.scrolled ? 'mb-3 !h-6' : '',
-        hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
-      )}
-      dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
-      onMouseEnter={() => setHoveredBookKey(bookKey)}
-      onMouseLeave={() => setHoveredBookKey('')}
-    >
-      <div className='hidden sm:flex'>
+    <>
+      <div
+        className='absolute bottom-0 left-0 z-10 h-12 w-full'
+        onMouseEnter={() => setHoveredBookKey(bookKey)}
+        onTouchStart={() => setHoveredBookKey(bookKey)}
+      />
+      <div
+        className={clsx(
+          'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
+          'shadow-xs bg-base-100 transition-opacity duration-300',
+          appService?.hasSafeAreaInset && 'pb-[env(safe-area-inset-bottom)]',
+          appService?.hasRoundedWindow && 'rounded-window-bottom-right',
+          !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
+          isHoveredAnim && 'hover-bar-anim',
+          viewSettings?.vertical && viewSettings?.scrolled ? 'mb-3 !h-6' : '',
+          isVisible ? `pointer-events-auto opacity-100` : `pointer-events-none opacity-0`,
+        )}
+        dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
+        onMouseLeave={() => setHoveredBookKey('')}
+        aria-hidden={!isVisible}
+      >
+        <div className='hidden sm:flex'>
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
+            onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
+            tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+          />
+        </div>
         <Button
-          icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
-          onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
-          tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+          icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
+          onClick={viewSettings?.rtl ? handleGoForward : handleGoBack}
+          tooltip={viewSettings?.rtl ? _('Go Forward') : _('Go Back')}
+          disabled={viewSettings?.rtl ? !view?.history.canGoForward : !view?.history.canGoBack}
         />
-      </div>
-      <Button
-        icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
-        onClick={viewSettings?.rtl ? handleGoForward : handleGoBack}
-        tooltip={viewSettings?.rtl ? _('Go Forward') : _('Go Back')}
-        disabled={viewSettings?.rtl ? !view?.history.canGoForward : !view?.history.canGoBack}
-      />
-      <Button
-        icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
-        onClick={viewSettings?.rtl ? handleGoBack : handleGoForward}
-        tooltip={viewSettings?.rtl ? _('Go Back') : _('Go Forward')}
-        disabled={viewSettings?.rtl ? !view?.history.canGoBack : !view?.history.canGoForward}
-      />
-      <span className='mx-2 text-center text-sm'>
-        {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}
-      </span>
-      <input
-        type='range'
-        className='text-base-content mx-2 w-full'
-        min={0}
-        max={100}
-        value={progressValid ? progressFraction * 100 : 0}
-        onChange={(e) => handleProgressChange(e)}
-      />
-      <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
-      <div className='hidden sm:flex'>
         <Button
-          icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
-          onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
-          tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+          icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
+          onClick={viewSettings?.rtl ? handleGoBack : handleGoForward}
+          tooltip={viewSettings?.rtl ? _('Go Back') : _('Go Forward')}
+          disabled={viewSettings?.rtl ? !view?.history.canGoBack : !view?.history.canGoForward}
         />
+        <span className='mx-2 text-center text-sm'>
+          {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}
+        </span>
+        <input
+          type='range'
+          className='text-base-content mx-2 w-full'
+          min={0}
+          max={100}
+          value={progressValid ? progressFraction * 100 : 0}
+          onChange={(e) => handleProgressChange(e)}
+        />
+        <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
+        <div className='hidden sm:flex'>
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
+            onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
+            tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
index 0030788d..2df1fa96 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx
@@ -90,7 +90,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           {item.note && (
             <div className='my-1 me-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
           )}
-          <div className={clsx('content font-size-sm line-clamp-3', item.note && 'py-2')}>
+          <div className={clsx('content font-size-sm line-clamp-3', item.note && 'my-2')}>
             <span
               className={clsx(
                 'inline',
diff --git a/apps/readest-app/src/components/AboutWindow.tsx b/apps/readest-app/src/components/AboutWindow.tsx
index 42b6db6f..8698e2c1 100644
--- a/apps/readest-app/src/components/AboutWindow.tsx
+++ b/apps/readest-app/src/components/AboutWindow.tsx
@@ -20,7 +20,7 @@ export const AboutWindow = () => {
   const [isUpdated, setIsUpdated] = React.useState(false);
 
   const handleCheckUpdate = async () => {
-    const update = await checkForAppUpdates(_);
+    const update = await checkForAppUpdates(_, false);
     if (!update) {
       setIsUpdated(true);
     }
diff --git a/apps/readest-app/src/helpers/updater.ts b/apps/readest-app/src/helpers/updater.ts
index 81ff3513..4b51632b 100644
--- a/apps/readest-app/src/helpers/updater.ts
+++ b/apps/readest-app/src/helpers/updater.ts
@@ -6,10 +6,11 @@ import { TranslationFunc } from '@/hooks/useTranslation';
 
 const LAST_CHECK_KEY = 'lastAppUpdateCheck';
 
-export const checkForAppUpdates = async (_: TranslationFunc) => {
+export const checkForAppUpdates = async (_: TranslationFunc, autoCheck = true) => {
   const lastCheck = localStorage.getItem(LAST_CHECK_KEY);
   const now = Date.now();
-  if (lastCheck && now - parseInt(lastCheck, 10) < CHECK_UPDATE_INTERVAL_SEC * 1000) return;
+  if (autoCheck && lastCheck && now - parseInt(lastCheck, 10) < CHECK_UPDATE_INTERVAL_SEC * 1000)
+    return;
   localStorage.setItem(LAST_CHECK_KEY, now.toString());
 
   console.log('Checking for updates');