fix(android): fixed back gesture to close config panel, closes #2406 (#2411)

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

@@ -406,7 +406,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
                 !selectedBooks.length && 'btn-disabled opacity-50',
               )}
             >
-              <MdDelete className='fill-red-500' />
+              <MdDelete className='text-red-500' />
               <div className='text-red-500'>{_('Delete')}</div>
             </button>
             <button

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

@@ -106,7 +106,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
     >
       <div
         role='none'
-        className={clsx('absolute top-0 z-10 h-11 w-full')}
+        className={clsx('absolute top-0 z-20 h-11 w-full')}
+        onClick={() => setHoveredBookKey(bookKey)}
         onMouseEnter={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
         onTouchStart={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
       />

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

@@ -60,6 +60,8 @@ const HintInfo: React.FC<SectionInfoProps> = ({
     };
   }, [hintMessage]);
 
+  if (!hintMessage) return null;
+
   return (
     <>
       <div

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

@@ -31,7 +31,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
 }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const { hoveredBookKey } = useReaderStore();
+  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
   const { systemUIVisible, statusBarHeight } = useThemeStore();
   const topInset = Math.max(
     gridInsets.top,
@@ -56,8 +56,8 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
           isVertical ? 'writing-vertical-rl max-h-[85%]' : 'top-0 h-[44px]',
           isScrolled && !isVertical && 'bg-base-100',
         )}
-        role='banner'
-        aria-label={section ? _('Section Title') + `: ${section}` : ''}
+        role='none'
+        onClick={() => setHoveredBookKey(bookKey)}
         style={
           isVertical
             ? {
@@ -76,7 +76,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
         }
       >
         <span
-          aria-hidden='true'
+          aria-label={section ? _('Section Title') + `: ${section}` : ''}
           className={clsx(
             'text-center',
             isVertical ? '' : 'line-clamp-1',

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

@@ -1,10 +1,11 @@
 import clsx from 'clsx';
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useDeviceControlStore } from '@/store/deviceStore';
 import { eventDispatcher } from '@/utils/event';
 import { FooterBarProps, NavigationHandlers, FooterBarChildProps } from './types';
 import { debounce } from '@/utils/debounce';
@@ -27,6 +28,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
   const { getView, getViewState, getProgress, getViewSettings } = useReaderStore();
   const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
+  const { acquireBackKeyInterception, releaseBackKeyInterception } = useDeviceControlStore();
 
   const view = getView(bookKey);
   const config = getConfig(bookKey);
@@ -147,6 +149,40 @@ const FooterBar: React.FC<FooterBarProps> = ({
     ],
   );
 
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent | CustomEvent) => {
+      if (event instanceof CustomEvent) {
+        if (event.detail.keyName === 'Back') {
+          setHoveredBookKey('');
+          return true;
+        }
+      } else {
+        if (event.key === 'Escape') {
+          setHoveredBookKey('');
+        }
+        event.stopPropagation();
+      }
+      return false;
+    },
+    [setHoveredBookKey],
+  );
+
+  useEffect(() => {
+    if (!appService?.isAndroidApp) return;
+
+    if (hoveredBookKey) {
+      acquireBackKeyInterception();
+      eventDispatcher.onSync('native-key-down', handleKeyDown);
+    }
+    return () => {
+      if (hoveredBookKey) {
+        releaseBackKeyInterception();
+        eventDispatcher.offSync('native-key-down', handleKeyDown);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hoveredBookKey]);
+
   const commonProps: FooterBarChildProps = {
     bookKey,
     gridInsets,
@@ -182,6 +218,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
           'absolute bottom-0 left-0 z-10 flex h-[52px] w-full',
           viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
         )}
+        onClick={() => setHoveredBookKey(bookKey)}
         onMouseEnter={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
         onTouchStart={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
       />

apps/readest-app/src/styles/globals.css

@@ -416,7 +416,23 @@ foliate-view {
   box-shadow: none !important;
 }
 
-[data-eink="true"] [class*="text-"] {
+[data-eink="true"] [class*="text-base-content"] {
+  color: theme('colors.base-content') !important;
+}
+
+[data-eink="true"] [class*="text-red"] {
+  color: theme('colors.base-content') !important;
+}
+
+[data-eink="true"] [class*="text-gray"] {
+  color: theme('colors.base-content') !important;
+}
+
+[data-eink="true"] [class*="text-neutral-content"] {
+  color: theme('colors.base-content') !important;
+}
+
+[data-eink="true"] [class*="placeholder"]::placeholder {
   color: theme('colors.base-content') !important;
 }
 
@@ -424,8 +440,8 @@ foliate-view {
   background-color: theme('colors.base-content') !important;
 }
 
-[data-eink="true"] [class*="placeholder:"]::placeholder {
-  color: theme('colors.base-content') !important;
+[data-eink="true"] [class*="font-light"] {
+  font-weight: normal !important;
 }
 
 [data-eink="true"] [class*="text-bold-in-eink"] {