From fad27d74a027d3c1564dd9334819abffca6791d8 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 10 Mar 2026 00:36:13 +0800
Subject: [PATCH] compat(android): show button navigation bar on Android,
 closes #3466 (#3501)

---
 .../android/src/main/java/NativeBridgePlugin.kt   |  4 ++--
 .../reader/components/footerbar/ColorPanel.tsx    |  9 ++++++++-
 .../components/footerbar/FontLayoutPanel.tsx      | 11 +++++++++--
 .../components/footerbar/MobileFooterBar.tsx      |  3 +--
 .../reader/components/footerbar/NavigationBar.tsx | 15 ++++++++++++---
 .../components/footerbar/NavigationPanel.tsx      | 13 +++++++++++--
 .../src/app/reader/components/sidebar/Content.tsx |  4 +---
 .../src/app/reader/components/tts/TTSControl.tsx  |  2 +-
 8 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/android/src/main/java/NativeBridgePlugin.kt b/apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/android/src/main/java/NativeBridgePlugin.kt
index c4a2dcb0..1ac1da57 100644
--- a/apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/android/src/main/java/NativeBridgePlugin.kt
+++ b/apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/android/src/main/java/NativeBridgePlugin.kt
@@ -285,7 +285,7 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                     }
                     if (visible) {
                         controller.show(WindowInsets.Type.statusBars())
-                        controller.hide(WindowInsets.Type.navigationBars())
+                        controller.show(WindowInsets.Type.navigationBars())
                     } else {
                         controller.hide(WindowInsets.Type.systemBars())
                     }
@@ -301,7 +301,7 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                     }
                     if (visible) {
                         it.show(WindowInsetsCompat.Type.statusBars())
-                        it.hide(WindowInsetsCompat.Type.navigationBars())
+                        it.show(WindowInsetsCompat.Type.navigationBars())
                     } else {
                         it.hide(WindowInsetsCompat.Type.systemBars())
                     }
diff --git a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
index 668e9af9..96cda389 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/ColorPanel.tsx
@@ -79,7 +79,14 @@ export const ColorPanel: React.FC<ColorPanelProps> = ({ actionTab, bottomOffset
   );
 
   return (
-    <div className={classes} style={{ bottom: bottomOffset }}>
+    <div
+      className={classes}
+      style={{
+        bottom: appService?.isAndroidApp
+          ? `calc(env(safe-area-inset-bottom) + 64px)`
+          : bottomOffset,
+      }}
+    >
       {appService?.hasScreenBrightness && (
         <Slider
           label={_('Screen Brightness')}
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
index abc916e2..088195fa 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FontLayoutPanel.tsx
@@ -41,7 +41,7 @@ export const FontLayoutPanel: React.FC<FontLayoutPanelProps> = ({
   marginIconSize,
 }) => {
   const _ = useTranslation();
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
   const { getView, getViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey);
   const view = getView(bookKey);
@@ -98,7 +98,14 @@ export const FontLayoutPanel: React.FC<FontLayoutPanelProps> = ({
   );
 
   return (
-    <div className={classes} style={{ bottom: bottomOffset }}>
+    <div
+      className={classes}
+      style={{
+        bottom: appService?.isAndroidApp
+          ? `calc(env(safe-area-inset-bottom) + 64px)`
+          : bottomOffset,
+      }}
+    >
       <Slider
         label={_('Font Size')}
         initialValue={viewSettings?.defaultFontSize ?? FONT_SIZE_LIMITS.DEFAULT}
diff --git a/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
index b2ee0779..30d30b5a 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/MobileFooterBar.tsx
@@ -19,7 +19,6 @@ const MobileFooterBar: React.FC<FooterBarChildProps> = ({
   const sliderHeight = useResponsiveSize(28);
   const marginIconSize = useResponsiveSize(20);
   const bottomOffset = isMobile ? `${gridInsets.bottom * 0.33 + 64}px` : '64px';
-  const navPadding = isMobile ? `${gridInsets.bottom * 0.33 + 16}px` : '0px';
 
   return (
     <>
@@ -42,7 +41,7 @@ const MobileFooterBar: React.FC<FooterBarChildProps> = ({
       <NavigationBar
         bookKey={bookKey}
         actionTab={actionTab}
-        navPadding={navPadding}
+        gridInsets={gridInsets}
         onSetActionTab={onSetActionTab!}
       />
     </>
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
index d211280c..fde96dcd 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationBar.tsx
@@ -5,34 +5,43 @@ import { RxSlider as SliderIcon } from 'react-icons/rx';
 import { RiFontFamily as FontIcon } from 'react-icons/ri';
 import { PiSun as ColorIcon } from 'react-icons/pi';
 import { MdOutlineHeadphones as TTSIcon } from 'react-icons/md';
+import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import Button from '@/components/Button';
+import { Insets } from '@/types/misc';
 
 interface NavigationBarProps {
   bookKey: string;
   actionTab: string;
-  navPadding: string;
+  gridInsets: Insets;
   onSetActionTab: (tab: string) => void;
 }
 
 export const NavigationBar: React.FC<NavigationBarProps> = ({
   bookKey,
   actionTab,
-  navPadding: mobileNavPadding,
+  gridInsets,
   onSetActionTab,
 }) => {
+  const isMobile = window.innerWidth < 640 || window.innerHeight < 640;
   const _ = useTranslation();
+  const { appService } = useEnv();
   const { getViewState } = useReaderStore();
   const viewState = getViewState(bookKey);
   const tocIconSize = useResponsiveSize(23);
   const fontIconSize = useResponsiveSize(18);
+  const navPadding = isMobile ? `${gridInsets.bottom * 0.33 + 16}px` : '0px';
 
   return (
     <div
       className={clsx('bg-base-200 z-30 mt-auto flex w-full justify-between px-8 py-4 sm:hidden')}
-      style={{ paddingBottom: mobileNavPadding }}
+      style={{
+        paddingBottom: appService?.isAndroidApp
+          ? `calc(env(safe-area-inset-bottom) + 16px)`
+          : navPadding,
+      }}
     >
       <Button
         label={_('Table of Contents')}
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
index 2f1bbe8a..8dae258f 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
@@ -4,6 +4,7 @@ import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
 import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
+import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { ViewSettings } from '@/types/book';
@@ -29,10 +30,11 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
   progressValid,
   navigationHandlers,
   viewSettings,
-  bottomOffset: mobileBottomOffset,
+  bottomOffset,
   sliderHeight,
 }) => {
   const _ = useTranslation();
+  const { appService } = useEnv();
   const { getView } = useReaderStore();
   const view = getView(bookKey);
 
@@ -63,7 +65,14 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
   );
 
   return (
-    <div className={classes} style={{ bottom: mobileBottomOffset }}>
+    <div
+      className={classes}
+      style={{
+        bottom: appService?.isAndroidApp
+          ? `calc(env(safe-area-inset-bottom) + 64px)`
+          : bottomOffset,
+      }}
+    >
       <div className='flex w-full items-center justify-between gap-x-6'>
         <Slider
           label={_('Reading Progress')}
diff --git a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
index b46db30a..92283558 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/Content.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
 import { BookDoc } from '@/libs/document';
-import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useBookDataStore } from '@/store/bookDataStore';
@@ -19,7 +18,6 @@ const SidebarContent: React.FC<{
   bookDoc: BookDoc;
   sideBarBookKey: string;
 }> = ({ bookDoc, sideBarBookKey }) => {
-  const { safeAreaInsets } = useThemeStore();
   const { setHoveredBookKey } = useReaderStore();
   const { setSideBarVisible } = useSidebarStore();
   const { getConfig, setConfig } = useBookDataStore();
@@ -109,7 +107,7 @@ const SidebarContent: React.FC<{
       <div
         className='flex-shrink-0'
         style={{
-          paddingBottom: `${(safeAreaInsets?.bottom || 0) / 2}px`,
+          paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) / 2)',
         }}
       >
         <TabNavigation activeTab={activeTab} onTabChange={handleTabChange} />
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
index 82691237..11a0b247 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
+++ b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
@@ -195,7 +195,7 @@ const TTSControl: React.FC<TTSControlProps> = ({ bookKey, gridInsets }) => {
           )}
           style={{
             bottom: appService?.hasSafeAreaInset
-              ? `${(safeAreaInsets?.bottom || 0) * 0.33 + (hoveredBookKey ? 70 : 52)}px`
+              ? `calc(env(safe-area-inset-bottom, 0px) * ${appService?.isIOSApp ? 0.33 : 1} + ${hoveredBookKey ? 70 : 52}px)`
               : undefined,
           }}
         >