fix: query status bar height on Android, closes #943 (#947)

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

@@ -9,6 +9,7 @@ import { MdOutlineMenu, MdArrowBackIosNew } from 'react-icons/md';
 import { IoMdCloseCircle } from 'react-icons/io';
 
 import { useEnv } from '@/context/EnvContext';
+import { useThemeStore } from '@/store/themeStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { useTrafficLightStore } from '@/store/trafficLightStore';
@@ -36,6 +37,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
   const router = useRouter();
   const searchParams = useSearchParams();
   const { appService } = useEnv();
+  const { statusBarHeight } = useThemeStore();
   const {
     isTrafficLightVisible,
     initializeTrafficLightStore,
@@ -96,7 +98,9 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
         isTrafficLightVisible ? 'pl-16' : 'pl-0 sm:pl-2',
       )}
       style={{
-        marginTop: appService?.hasSafeAreaInset ? 'max(env(safe-area-inset-top), 24px)' : '',
+        marginTop: appService?.hasSafeAreaInset
+          ? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
+          : '',
       }}
     >
       <div className='flex w-full items-center justify-between space-x-6 sm:space-x-12'>

apps/readest-app/src/app/library/page.tsx

@@ -28,6 +28,7 @@ import { usePullToRefresh } from '@/hooks/usePullToRefresh';
 import { useTheme } from '@/hooks/useTheme';
 import { useDemoBooks } from './hooks/useDemoBooks';
 import { useBooksSync } from './hooks/useBooksSync';
+import { useThemeStore } from '@/store/themeStore';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
 import {
@@ -65,6 +66,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   const _ = useTranslation();
   useTheme({ systemUIVisible: true, appThemeColor: 'base-200' });
   const { settings, setSettings, saveSettings } = useSettingsStore();
+  const { statusBarHeight } = useThemeStore();
   const [loading, setLoading] = useState(false);
   const isInitiating = useRef(false);
   const [libraryLoaded, setLibraryLoaded] = useState(false);
@@ -542,7 +544,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
             )}
             style={{
               marginTop: appService?.hasSafeAreaInset
-                ? 'max(env(safe-area-inset-top), 24px)'
+                ? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
                 : '48px',
             }}
           >

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

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
 import { useEnv } from '@/context/EnvContext';
+import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useTrafficLightStore } from '@/store/trafficLightStore';
@@ -42,7 +43,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
     cleanupTrafficLightListeners,
   } = useTrafficLightStore();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { bookKeys, hoveredBookKey, systemUIVisible, setHoveredBookKey } = useReaderStore();
+  const { bookKeys, hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const { systemUIVisible, statusBarHeight } = useThemeStore();
   const { isSideBarVisible } = useSidebarStore();
   const iconSize16 = useResponsiveSize(16);
 
@@ -90,7 +92,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
           isVisible ? 'visible' : 'hidden',
         )}
         style={{
-          height: systemUIVisible ? 'max(env(safe-area-inset-top), 24px)' : '',
+          height: systemUIVisible ? `max(env(safe-area-inset-top), ${statusBarHeight}px)` : '',
         }}
       />
       <div
@@ -107,7 +109,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         )}
         style={{
           marginTop: systemUIVisible
-            ? 'max(env(safe-area-inset-top), 24px)'
+            ? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
             : 'env(safe-area-inset-top)',
         }}
         onMouseLeave={() => !appService?.isMobile && setHoveredBookKey('')}

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

@@ -21,8 +21,8 @@ import ReaderContent from './ReaderContent';
 const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   const { envConfig, appService } = useEnv();
   const { settings, setSettings } = useSettingsStore();
-  const { isDarkMode } = useThemeStore();
-  const { hoveredBookKey, showSystemUI, dismissSystemUI } = useReaderStore();
+  const { isDarkMode, showSystemUI, dismissSystemUI } = useThemeStore();
+  const { hoveredBookKey } = useReaderStore();
   const { isSideBarVisible } = useSidebarStore();
   const { setLibrary } = useLibraryStore();
   const [libraryLoaded, setLibraryLoaded] = useState(false);

apps/readest-app/src/hooks/useTheme.ts

@@ -3,7 +3,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { applyCustomTheme, Palette } from '@/styles/themes';
-import { setSystemUIVisibility } from '@/utils/bridge';
+import { getStatusBarHeight, setSystemUIVisibility } from '@/utils/bridge';
 
 type UseThemeProps = {
   systemUIVisible?: boolean;
@@ -16,15 +16,22 @@ export const useTheme = ({
 }: UseThemeProps = {}) => {
   const { appService } = useEnv();
   const { settings } = useSettingsStore();
-  const { themeColor, isDarkMode, updateAppTheme } = useThemeStore();
+  const { themeColor, isDarkMode, updateAppTheme, setStatusBarHeight } = useThemeStore();
 
   useEffect(() => {
     updateAppTheme(appThemeColor);
     if (appService?.isMobile) {
       setSystemUIVisibility({ visible: systemUIVisible, darkMode: isDarkMode });
     }
+    if (appService?.isAndroidApp) {
+      getStatusBarHeight().then((res) => {
+        if (res.height && res.height > 0) {
+          setStatusBarHeight(res.height / window.devicePixelRatio);
+        }
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDarkMode]);
+  }, [appService, isDarkMode]);
 
   useEffect(() => {
     const customThemes = settings.globalReadSettings?.customThemes ?? [];

apps/readest-app/src/store/readerStore.ts

@@ -30,13 +30,9 @@ interface ReaderStore {
   viewStates: { [key: string]: ViewState };
   bookKeys: string[];
   hoveredBookKey: string | null;
-  systemUIVisible: boolean;
   setBookKeys: (keys: string[]) => void;
   setHoveredBookKey: (key: string | null) => void;
   setBookmarkRibbonVisibility: (key: string, visible: boolean) => void;
-  showSystemUI: () => void;
-  dismissSystemUI: () => void;
-
   setProgress: (
     key: string,
     location: string,
@@ -67,12 +63,8 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
   viewStates: {},
   bookKeys: [],
   hoveredBookKey: null,
-  systemUIVisible: false,
   setBookKeys: (keys: string[]) => set({ bookKeys: keys }),
   setHoveredBookKey: (key: string | null) => set({ hoveredBookKey: key }),
-  showSystemUI: () => set({ systemUIVisible: true }),
-  dismissSystemUI: () => set({ systemUIVisible: false }),
-
   getView: (key: string | null) => (key && get().viewStates[key]?.view) || null,
   setView: (key: string, view) =>
     set((state) => ({

apps/readest-app/src/store/themeStore.ts

@@ -10,6 +10,11 @@ interface ThemeState {
   systemIsDarkMode: boolean;
   themeCode: ThemeCode;
   isDarkMode: boolean;
+  systemUIVisible: boolean;
+  statusBarHeight: number;
+  setStatusBarHeight: (height: number) => void;
+  showSystemUI: () => void;
+  dismissSystemUI: () => void;
   getIsDarkMode: () => boolean;
   setThemeMode: (mode: ThemeMode) => void;
   setThemeColor: (color: string) => void;
@@ -62,6 +67,11 @@ export const useThemeStore = create<ThemeState>((set, get) => {
     systemIsDarkMode,
     isDarkMode,
     themeCode,
+    systemUIVisible: false,
+    statusBarHeight: 24,
+    showSystemUI: () => set({ systemUIVisible: true }),
+    dismissSystemUI: () => set({ systemUIVisible: false }),
+    setStatusBarHeight: (height: number) => set({ statusBarHeight: height }),
     getIsDarkMode: () => get().isDarkMode,
     setThemeMode: (mode) => {
       if (typeof window !== 'undefined' && localStorage) {

apps/readest-app/src/utils/bridge.ts

@@ -33,6 +33,11 @@ export interface SetSystemUIVisibilityResponse {
   error?: string;
 }
 
+export interface GetStatusBarHeightResponse {
+  height: number;
+  error?: string;
+}
+
 export async function copyURIToPath(request: CopyURIRequest): Promise<CopyURIResponse> {
   const result = await invoke<CopyURIResponse>('plugin:native-bridge|copy_uri_to_path', {
     payload: request,
@@ -67,3 +72,10 @@ export async function setSystemUIVisibility(
   );
   return result;
 }
+
+export async function getStatusBarHeight(): Promise<GetStatusBarHeightResponse> {
+  const result = await invoke<GetStatusBarHeightResponse>(
+    'plugin:native-bridge|get_status_bar_height',
+  );
+  return result;
+}