mobile: fix iOS safe area insets (#317)

apps/readest-app/next.config.mjs

@@ -19,6 +19,19 @@ const nextConfig = {
   // Configure assetPrefix or else the server won't properly resolve your assets.
   assetPrefix: '',
   reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        source: '/.well-known/apple-app-site-association',
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/json',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 const withPWA = withPWAInit({

apps/readest-app/src-tauri/tauri.conf.json

@@ -14,7 +14,7 @@
     "windows": [],
     "security": {
       "csp": {
-        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
+        "default-src": "'self' 'unsafe-inline' blob: data: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
         "connect-src": "'self' blob: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com https://*.cloudflarestorage.com",
         "img-src": "'self' blob: data: asset: http://asset.localhost https://*",
         "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost https://cdn.jsdelivr.net https://fonts.googleapis.com",
@@ -59,6 +59,9 @@
     "android": {
       "minSdkVersion": 26
     },
+    "iOS": {
+      "developmentTeam": "J5W48D69VR"
+    },
     "fileAssociations": [
       {
         "name": "epub",

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

@@ -352,7 +352,8 @@ const LibraryPage = () => {
   return (
     <div
       className={clsx(
-        'library-page bg-base-200 text-base-content flex h-dvh select-none flex-col overflow-hidden',
+        'library-page bg-base-200 text-base-content flex select-none flex-col overflow-hidden',
+        appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh',
         appService?.hasRoundedWindow && 'rounded-window',
       )}
     >

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

@@ -43,7 +43,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
     <div
       className={clsx(
         'grid h-full flex-grow',
-        appService?.hasSafeAreaInset && 'mt-[env(safe-area-inset-top)]',
+        appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
       )}
       style={{
         gridTemplateColumns: gridTemplate.columns,

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

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import * as React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -31,7 +32,7 @@ import TTSControl from './tts/TTSControl';
 const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
   const { bookKeys, dismissBook, getNextBookKey } = useBooksManager();
   const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
   const { saveSettings } = useSettingsStore();
@@ -148,7 +149,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     setTimeout(() => setLoading(true), 300);
     return (
       loading && (
-        <div className={'hero hero-content h-dvh'}>
+        <div className={clsx('hero hero-content', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
           <Spinner loading={true} />
         </div>
       )
@@ -156,7 +157,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   }
 
   return (
-    <div className='flex h-dvh'>
+    <div className={clsx('flex', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
       <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
       <TTSControl />

apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx

@@ -119,7 +119,7 @@ const SideBar: React.FC<{
       <div
         className={clsx(
           'sidebar-container bg-base-200 z-20 flex h-full min-w-60 select-none flex-col',
-          appService?.hasSafeAreaInset && 'mt-[env(safe-area-inset-top)]',
+          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
           appService?.hasRoundedWindow && 'rounded-window-top-left rounded-window-bottom-left',
           !isSideBarPinned && 'shadow-2xl',
         )}

apps/readest-app/src/components/Dialog.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { ReactNode, useEffect } from 'react';
 import { MdArrowBackIosNew } from 'react-icons/md';
+import { useEnv } from '@/context/EnvContext';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface DialogProps {
@@ -26,6 +27,7 @@ const Dialog: React.FC<DialogProps> = ({
   contentClassName,
   onClose,
 }) => {
+  const { appService } = useEnv();
   const iconSize22 = useResponsiveSize(22);
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
@@ -54,6 +56,7 @@ const Dialog: React.FC<DialogProps> = ({
         className={clsx(
           'modal-box settings-content flex h-full max-h-full w-full max-w-full flex-col rounded-none p-0 sm:rounded-2xl',
           'sm:h-[60%] sm:w-[65%] sm:max-w-[600px]',
+          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
           boxClassName,
         )}
       >