release: version 0.9.26 (#723)

* fix: set max width for annotation toolbar

* doc: add TXT to supported formats list

.github/workflows/release.yml

@@ -56,27 +56,35 @@ jobs:
       fail-fast: false
       matrix:
         config:
+          - os: ubuntu-latest
+            release: android
+            rust_target: aarch64-linux-android,armv7-linux-androideabi,i686-linux-android,x86_64-linux-android
           - os: ubuntu-22.04
+            release: linux
             arch: x86_64
             rust_target: x86_64-unknown-linux-gnu
           - os: ubuntu-22.04-arm
+            release: linux
             arch: aarch64
             rust_target: aarch64-unknown-linux-gnu
           - os: macos-latest
+            release: macos
             arch: aarch64
             rust_target: x86_64-apple-darwin,aarch64-apple-darwin
             args: '--target universal-apple-darwin'
           - os: windows-latest
+            release: windows
             arch: x86_64
             rust_target: x86_64-pc-windows-msvc
             args: '--target x86_64-pc-windows-msvc'
           - os: windows-latest
+            release: windows
             arch: aarch64
             rust_target: aarch64-pc-windows-msvc
             args: '--target aarch64-pc-windows-msvc --bundles nsis'
 
     runs-on: ${{ matrix.config.os }}
-    timeout-minutes: 30
+    timeout-minutes: 60
     steps:
       - uses: actions/checkout@v4
 
@@ -94,6 +102,21 @@ jobs:
           node-version: 22
           cache: pnpm
 
+      - name: setup Java (for Android build only)
+        if: matrix.config.release == 'android'
+        uses: actions/setup-java@v4
+        with:
+          distribution: 'zulu'
+          java-version: '17'
+
+      - name: setup Android SDK (for Android build only)
+        if: matrix.config.release == 'android'
+        uses: android-actions/setup-android@v3
+
+      - name: install NDK (for Android build only)
+        if: matrix.config.release == 'android'
+        run: sdkmanager "ndk;27.0.11902837"
+
       - name: install dependencies
         run: pnpm install
 
@@ -109,6 +132,12 @@ jobs:
         with:
           key: ${{ matrix.config.os }}-cargo-${{ hashFiles('Cargo.lock') }}
 
+      - name: install dependencies (ubuntu only)
+        if: contains(matrix.config.os, 'ubuntu') && matrix.config.release != 'android'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libfontconfig-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf xdg-utils
+
       - name: create .env.local file for Next.js
         run: |
           echo "NEXT_PUBLIC_POSTHOG_KEY=${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}" >> .env.local
@@ -116,17 +145,43 @@ jobs:
           echo "NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}" >> .env.local
           echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}" >> .env.local
           echo "NEXT_PUBLIC_APP_PLATFORM=tauri" >> .env.local
+          cp .env.local apps/readest-app/.env.local
 
-      - name: copy .env.local to apps/readest-app
-        run: cp .env.local apps/readest-app/.env.local
-
-      - name: install dependencies (ubuntu only)
-        if: contains(matrix.config.os, 'ubuntu')
+      - name: build and upload Android apks
+        if: matrix.config.release == 'android'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NDK_HOME: ${{ env.ANDROID_HOME }}/ndk/27.0.11902837
         run: |
-          sudo apt-get update
-          sudo apt-get install -y pkg-config libfontconfig-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf xdg-utils
+          cd apps/readest-app/
+          rm -rf src-tauri/gen/android
+          pnpm tauri android init
+          pnpm tauri icon ../../data/icons/readest-book.png
+          git checkout .
+
+          pushd src-tauri/gen/android
+          echo "keyAlias=${{ secrets.ANDROID_KEY_ALIAS }}" > keystore.properties
+          echo "password=${{ secrets.ANDROID_KEY_PASSWORD }}" >> keystore.properties
+          base64 -d <<< "${{ secrets.ANDROID_KEY_BASE64 }}" > $RUNNER_TEMP/keystore.jks
+          echo "storeFile=$RUNNER_TEMP/keystore.jks" >> keystore.properties
+
+          popd
+          version=${{ needs.get-release.outputs.release_version }}
+          apk_path=src-tauri/gen/android/app/build/outputs/apk/universal/release
+          universial_apk=Readest_${version}_universal.apk
+          arm64_apk=Readest_${version}_arm64.apk
+          pnpm tauri android build
+          cp ${apk_path}/app-universal-release.apk $universial_apk
+          pnpm tauri android build -t aarch64
+          cp ${apk_path}/app-universal-release.apk $arm64_apk
+
+          echo "Uploading $universial_apk to GitHub release"
+          gh release upload ${{ needs.get-release.outputs.release_tag }} $universial_apk --clobber
+          echo "Uploading $arm64_apk to GitHub release"
+          gh release upload ${{ needs.get-release.outputs.release_tag }} $arm64_apk --clobber
 
       - uses: tauri-apps/tauri-action@v0
+        if: matrix.config.release != 'android'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
@@ -137,6 +192,7 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+          NODE_OPTIONS: '--max-old-space-size=8192'
         with:
           projectPath: apps/readest-app
           releaseId: ${{ needs.get-release.outputs.release_id }}

README.md

@@ -42,7 +42,7 @@
 
 | **Feature**                             | **Description**                                                                                | **Status** |
 | --------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------- |
-| **Multi-Format Support**                | Support EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental)                                   | ✅         |
+| **Multi-Format Support**                | Support EPUB, MOBI, KF8 (AZW3), FB2, CBZ, TXT, PDF (experimental)                              | ✅         |
 | **Scroll/Page View Modes**              | Switch between scrolling or paginated reading modes.                                           | ✅         |
 | **Full-Text Search**                    | Search across the entire book to find relevant sections.                                       | ✅         |
 | **Annotations and Highlighting**        | Add highlights, bookmarks, and notes to enhance your reading experience.                       | ✅         |

apps/readest-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.9.22",
+  "version": "0.9.26",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",
@@ -56,6 +56,7 @@
     "@tauri-apps/plugin-shell": "~2.2.0",
     "@tauri-apps/plugin-updater": "^2.5.1",
     "@zip.js/zip.js": "^2.7.53",
+    "aws4fetch": "^1.0.20",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",
     "cssbeautify": "^0.3.1",
@@ -65,7 +66,7 @@
     "i18next-http-backend": "^3.0.1",
     "js-md5": "^0.8.3",
     "jwt-decode": "^4.0.0",
-    "next": "15.2.2",
+    "next": "15.2.4",
     "posthog-js": "^1.205.0",
     "react": "19.0.0",
     "react-color": "^2.19.3",
@@ -77,6 +78,7 @@
     "zustand": "5.0.1"
   },
   "devDependencies": {
+    "@opennextjs/cloudflare": "^0.5.12",
     "@tauri-apps/cli": "2.3.1",
     "@types/cors": "^2.8.17",
     "@types/cssbeautify": "^0.3.5",
@@ -99,6 +101,7 @@
     "postcss-nested": "^7.0.2",
     "raw-loader": "^4.0.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "wrangler": "^4.4.0"
   }
 }

apps/readest-app/public/locales/ar/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "التباين",
   "Sunset": "غروب الشمس",
   "Double Border": "حدود مزدوجة",
-  "Border Color": "لون الحدود"
+  "Border Color": "لون الحدود",
+  "Border Frame": "إطار الحدود",
+  "Show Header": "عرض الرأس",
+  "Show Footer": "عرض التذييل",
+  "Small": "صغير",
+  "Large": "كبير",
+  "Auto": "تلقائي",
+  "Language": "اللغة",
+  "No annotations to export": "لا توجد تعليقات للتصدير",
+  "Author": "المؤلف",
+  "Exported from Readest": "تم التصدير من ريديست",
+  "Highlights & Annotations": "التمييزات والتعليقات",
+  "Note": "ملاحظة",
+  "Copied to clipboard": "تم النسخ إلى الحافظة",
+  "Export Annotations": "تصدير التعليقات",
+  "Auto Import on File Open": "استيراد تلقائي عند فتح الملف",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/de/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Kontrast",
   "Sunset": "Sonnenuntergang",
   "Double Border": "Doppelter Rand",
-  "Border Color": "Randfarbe"
+  "Border Color": "Randfarbe",
+  "Border Frame": "Rahmenrand",
+  "Show Header": "Kopfzeile anzeigen",
+  "Show Footer": "Fußzeile anzeigen",
+  "Small": "Klein",
+  "Large": "Groß",
+  "Auto": "Automatisch",
+  "Language": "Sprache",
+  "No annotations to export": "Keine Anmerkungen zum Exportieren",
+  "Author": "Autor",
+  "Exported from Readest": "Exportiert von Readest",
+  "Highlights & Annotations": "Hervorhebungen & Anmerkungen",
+  "Note": "Notiz",
+  "Copied to clipboard": "In die Zwischenablage kopiert",
+  "Export Annotations": "Anmerkungen exportieren",
+  "Auto Import on File Open": "Automatischer Import beim Öffnen einer Datei",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/el/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Αντίθεση",
   "Sunset": "Ηλιοβασίλεμα",
   "Double Border": "Διπλό περιθώριο",
-  "Border Color": "Χρώμα περιγράμματος"
+  "Border Color": "Χρώμα περιγράμματος",
+  "Border Frame": "Πλαίσιο περιγράμματος",
+  "Show Header": "Εμφάνιση κεφαλίδας",
+  "Show Footer": "Εμφάνιση υποσέλιδου",
+  "Small": "Μικρό",
+  "Large": "Μεγάλο",
+  "Auto": "Αυτόματο",
+  "Language": "Γλώσσα",
+  "No annotations to export": "Δεν υπάρχουν σχολιασμοί για εξαγωγή",
+  "Author": "Συγγραφέας",
+  "Exported from Readest": "Εξήχθη από το Readest",
+  "Highlights & Annotations": "Επισημάνσεις & Σχολιασμοί",
+  "Note": "Σημείωση",
+  "Copied to clipboard": "Αντιγράφηκε στο πρόχειρο",
+  "Export Annotations": "Εξαγωγή σχολιασμών",
+  "Auto Import on File Open": "Αυτόματη εισαγωγή κατά το άνοιγμα αρχείου",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/en/translation.json

@@ -1 +1,3 @@
-{}
+{
+  "LXGW WenKai GB Screen": "LXGW WenKai"
+}

apps/readest-app/public/locales/es/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Contraste",
   "Sunset": "Atardecer",
   "Double Border": "Doble borde",
-  "Border Color": "Color del borde"
+  "Border Color": "Color del borde",
+  "Border Frame": "Marco de borde",
+  "Show Header": "Mostrar encabezado",
+  "Show Footer": "Mostrar pie de página",
+  "Small": "Pequeño",
+  "Large": "Grande",
+  "Auto": "Automático",
+  "Language": "Idioma",
+  "No annotations to export": "No hay anotaciones para exportar",
+  "Author": "Autor",
+  "Exported from Readest": "Exportado desde Readest",
+  "Highlights & Annotations": "Resaltados y anotaciones",
+  "Note": "Nota",
+  "Copied to clipboard": "Copiado al portapapeles",
+  "Export Annotations": "Exportar anotaciones",
+  "Auto Import on File Open": "Importación automática al abrir archivo",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Contraste",
   "Sunset": "Coucher de soleil",
   "Double Border": "Double bordure",
-  "Border Color": "Couleur de la bordure"
+  "Border Color": "Couleur de la bordure",
+  "Border Frame": "Cadre de bordure",
+  "Show Header": "Afficher l'en-tête",
+  "Show Footer": "Afficher le pied de page",
+  "Small": "Petit",
+  "Large": "Grand",
+  "Auto": "Automatique",
+  "Language": "Langue",
+  "No annotations to export": "Aucune annotation à exporter",
+  "Author": "Auteur",
+  "Exported from Readest": "Exporté depuis Readest",
+  "Highlights & Annotations": "Surlignages et annotations",
+  "Note": "Note",
+  "Copied to clipboard": "Copié dans le presse-papiers",
+  "Export Annotations": "Exporter les annotations",
+  "Auto Import on File Open": "Importation automatique à l'ouverture du fichier",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "विरोधाभास",
   "Sunset": "सनसेट",
   "Double Border": "डबल बॉर्डर",
-  "Border Color": "बॉर्डर रंग"
+  "Border Color": "बॉर्डर रंग",
+  "Border Frame": "बॉर्डर फ्रेम",
+  "Show Header": "हेडर दिखाएं",
+  "Show Footer": "फ़ुटर दिखाएं",
+  "Small": "छोटा",
+  "Large": "बड़ा",
+  "Auto": "स्वचालित",
+  "Language": "भाषा",
+  "No annotations to export": "निर्यात करने के लिए कोई टिप्पणियाँ नहीं हैं",
+  "Author": "लेखक",
+  "Exported from Readest": "Readest से निर्यात किया गया",
+  "Highlights & Annotations": "हाइलाइट और टिप्पणियाँ",
+  "Note": "टिप्पणी",
+  "Copied to clipboard": "क्लिपबोर्ड पर कॉपी किया गया",
+  "Export Annotations": "टिप्पणियाँ निर्यात करें",
+  "Auto Import on File Open": "फ़ाइल खोलने पर स्वचालित आयात",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/id/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Kontras",
   "Sunset": "Senja",
   "Double Border": "Garis Ganda",
-  "Border Color": "Warna Garis"
+  "Border Color": "Warna Garis",
+  "Border Frame": "Bingkai Garis",
+  "Show Header": "Tampilkan Header",
+  "Show Footer": "Tampilkan Footer",
+  "Small": "Kecil",
+  "Large": "Besar",
+  "Auto": "Otomatis",
+  "Language": "Bahasa",
+  "No annotations to export": "Tidak ada anotasi yang diekspor",
+  "Author": "Penulis",
+  "Exported from Readest": "Diekspor dari Readest",
+  "Highlights & Annotations": "Sorotan & Anotasi",
+  "Note": "Catatan",
+  "Copied to clipboard": "Disalin ke papan klip",
+  "Export Annotations": "Ekspor Anotasi",
+  "Auto Import on File Open": "Impor Otomatis saat File Dibuka",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/it/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Contrasto",
   "Sunset": "Tramonto",
   "Double Border": "Doppio bordo",
-  "Border Color": "Colore bordo"
+  "Border Color": "Colore bordo",
+  "Border Frame": "Cornice bordo",
+  "Show Header": "Mostra intestazione",
+  "Show Footer": "Mostra piè di pagina",
+  "Small": "Piccolo",
+  "Large": "Grande",
+  "Auto": "Automatico",
+  "Language": "Lingua",
+  "No annotations to export": "Nessuna annotazione da esportare",
+  "Author": "Autore",
+  "Exported from Readest": "Esportato da Readest",
+  "Highlights & Annotations": "Evidenziazioni e annotazioni",
+  "Note": "Nota",
+  "Copied to clipboard": "Copiato negli appunti",
+  "Export Annotations": "Esporta annotazioni",
+  "Auto Import on File Open": "Importazione automatica all'apertura del file",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "コントラスト",
   "Sunset": "サンセット",
   "Double Border": "二重枠",
-  "Border Color": "ボーダーカラー"
+  "Border Color": "ボーダーカラー",
+  "Border Frame": "ボーダーフレーム",
+  "Show Header": "ヘッダーを表示",
+  "Show Footer": "フッターを表示",
+  "Small": "小",
+  "Large": "大",
+  "Auto": "自動",
+  "Language": "言語",
+  "No annotations to export": "エクスポートする注釈はありません",
+  "Author": "著者",
+  "Exported from Readest": "Readestからエクスポート",
+  "Highlights & Annotations": "ハイライトと注釈",
+  "Note": "メモ",
+  "Copied to clipboard": "クリップボードにコピー",
+  "Export Annotations": "注釈をエクスポート",
+  "Auto Import on File Open": "ファイルを開くと自動インポート",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "대비",
   "Sunset": "일몰",
   "Double Border": "이중 테두리",
-  "Border Color": "테두리 색상"
+  "Border Color": "테두리 색상",
+  "Border Frame": "테두리 프레임",
+  "Show Header": "헤더 표시",
+  "Show Footer": "푸터 표시",
+  "Small": "작음",
+  "Large": "큼",
+  "Auto": "자동",
+  "Language": "언어",
+  "No annotations to export": "내보낼 주석이 없습니다",
+  "Author": "저자",
+  "Exported from Readest": "Readest에서 내보냄",
+  "Highlights & Annotations": "하이라이트 및 주석",
+  "Note": "노트",
+  "Copied to clipboard": "클립보드에 복사",
+  "Export Annotations": "주석 내보내기",
+  "Auto Import on File Open": "파일 열 때 자동 가져오기",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Kontrast",
   "Sunset": "Zachód słońca",
   "Double Border": "Podwójna ramka",
-  "Border Color": "Kolor ramki"
+  "Border Color": "Kolor ramki",
+  "Border Frame": "Ramka",
+  "Show Header": "Pokaż nagłówek",
+  "Show Footer": "Pokaż stopkę",
+  "Small": "Mały",
+  "Large": "Duży",
+  "Auto": "Automatyczny",
+  "Language": "Język",
+  "No annotations to export": "Brak adnotacji do eksportu",
+  "Author": "Autor",
+  "Exported from Readest": "Eksportowane z Readest",
+  "Highlights & Annotations": "Zaznaczenia i adnotacje",
+  "Note": "Notatka",
+  "Copied to clipboard": "Skopiowano do schowka",
+  "Export Annotations": "Eksportuj adnotacje",
+  "Auto Import on File Open": "Automatyczne importowanie przy otwieraniu pliku",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Contraste",
   "Sunset": "Pôr do Sol",
   "Double Border": "Borda Dupla",
-  "Border Color": "Cor da Borda"
+  "Border Color": "Cor da Borda",
+  "Border Frame": "Moldura da Borda",
+  "Show Header": "Mostrar Cabeçalho",
+  "Show Footer": "Mostrar Rodapé",
+  "Small": "Pequeno",
+  "Large": "Grande",
+  "Auto": "Automático",
+  "Language": "Idioma",
+  "No annotations to export": "Nenhuma anotação para exportar",
+  "Author": "Autor",
+  "Exported from Readest": "Exportado do Readest",
+  "Highlights & Annotations": "Destaques e Anotações",
+  "Note": "Nota",
+  "Copied to clipboard": "Copiado para a área de transferência",
+  "Export Annotations": "Exportar Anotações",
+  "Auto Import on File Open": "Importação Automática ao Abrir Arquivo",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Контраст",
   "Sunset": "Закат",
   "Double Border": "Двойная граница",
-  "Border Color": "Цвет границы"
+  "Border Color": "Цвет границы",
+  "Border Frame": "Граница рамки",
+  "Show Header": "Показать заголовок",
+  "Show Footer": "Показать нижний колонтитул",
+  "Small": "Маленький",
+  "Large": "Большой",
+  "Auto": "Авто",
+  "Language": "Язык",
+  "No annotations to export": "Нет аннотаций для экспорта",
+  "Author": "Автор",
+  "Exported from Readest": "Экспортировано из Readest",
+  "Highlights & Annotations": "Выделения и аннотации",
+  "Note": "Заметка",
+  "Copied to clipboard": "Скопировано в буфер обмена",
+  "Export Annotations": "Экспортировать аннотации",
+  "Auto Import on File Open": "Автоматический импорт при открытии файла",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Kontrast",
   "Sunset": "Gün Batımı",
   "Double Border": "Çift Sınır",
-  "Border Color": "Sınır Rengi"
+  "Border Color": "Sınır Rengi",
+  "Border Frame": "Sınır Çerçevesi",
+  "Show Header": "Başlık Göster",
+  "Show Footer": "Altbilgi Göster",
+  "Small": "Küçük",
+  "Large": "Büyük",
+  "Auto": "Otomatik",
+  "Language": "Dil",
+  "No annotations to export": "Dışa aktarılacak not yok",
+  "Author": "Yazar",
+  "Exported from Readest": "Readest'ten dışa aktarıldı",
+  "Highlights & Annotations": "Vurgular ve Notlar",
+  "Note": "Not",
+  "Copied to clipboard": "Panoya kopyalandı",
+  "Export Annotations": "Notları Dışa Aktar",
+  "Auto Import on File Open": "Dosya Açıldığında Otomatik İçe Aktar",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Контраст",
   "Sunset": "Захід сонця",
   "Double Border": "Подвійна рамка",
-  "Border Color": "Колір рамки"
+  "Border Color": "Колір рамки",
+  "Border Frame": "Рамка рамки",
+  "Show Header": "Показати заголовок",
+  "Show Footer": "Показати нижню частину",
+  "Small": "Малий",
+  "Large": "Великий",
+  "Auto": "Автоматичний",
+  "Language": "Мова",
+  "No annotations to export": "Немає анотацій для експорту",
+  "Author": "Автор",
+  "Exported from Readest": "Експортовано з Readest",
+  "Highlights & Annotations": "Виділення та анотації",
+  "Note": "Примітка",
+  "Copied to clipboard": "Скопійовано в буфер обміну",
+  "Export Annotations": "Експортувати анотації",
+  "Auto Import on File Open": "Автоматичний імпорт при відкритті файлу",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -244,5 +244,21 @@
   "Contrast": "Tương phản",
   "Sunset": "Hoàng hôn",
   "Double Border": "Đôi viền",
-  "Border Color": "Màu viền"
+  "Border Color": "Màu viền",
+  "Border Frame": "Khung viền",
+  "Show Header": "Hiển thị tiêu đề",
+  "Show Footer": "Hiển thị chân trang",
+  "Small": "Nhỏ",
+  "Large": "Lớn",
+  "Auto": "Tự động",
+  "Language": "Ngôn ngữ",
+  "No annotations to export": "Không có chú thích để xuất",
+  "Author": "Tác giả",
+  "Exported from Readest": "Đã xuất từ Readest",
+  "Highlights & Annotations": "Điểm nổi bật & Chú thích",
+  "Note": "Ghi chú",
+  "Copied to clipboard": "Đã sao chép vào bảng ghi",
+  "Export Annotations": "Xuất chú thích",
+  "Auto Import on File Open": "Tự động nhập khi mở tệp",
+  "LXGW WenKai GB Screen": "LXGW WenKai"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -243,6 +243,22 @@
   "Preview": "预览",
   "Contrast": "对比",
   "Sunset": "日落",
-  "Double Border": "页面版框",
-  "Border Color": "版框颜色"
+  "Double Border": "显示版框",
+  "Border Color": "版框颜色",
+  "Border Frame": "页面版框",
+  "Show Header": "显示页眉",
+  "Show Footer": "显示页脚",
+  "Small": "小",
+  "Large": "大",
+  "Auto": "自动",
+  "Language": "语言",
+  "No annotations to export": "没有要导出的笔记",
+  "Author": "作者",
+  "Exported from Readest": "从 Readest 导出",
+  "Highlights & Annotations": "划线和笔记",
+  "Note": "笔记",
+  "Copied to clipboard": "已复制到剪贴板",
+  "Export Annotations": "导出笔记",
+  "Auto Import on File Open": "打开文件时自动导入",
+  "LXGW WenKai GB Screen": "霞鹜文楷"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -243,6 +243,22 @@
   "Preview": "預覽",
   "Contrast": "對比",
   "Sunset": "日落",
-  "Double Border": "頁面邊框",
-  "Border Color": "邊框顏色"
+  "Double Border": "顯示邊框",
+  "Border Color": "邊框顏色",
+  "Border Frame": "頁面邊框",
+  "Show Header": "顯示頁眉",
+  "Show Footer": "顯示頁腳",
+  "Small": "小",
+  "Large": "大",
+  "Auto": "自動",
+  "Language": "語言",
+  "No annotations to export": "沒有要匯出的筆記",
+  "Author": "作者",
+  "Exported from Readest": "從 Readest 匯出",
+  "Highlights & Annotations": "高亮和筆記",
+  "Note": "筆記",
+  "Copied to clipboard": "已複製到剪貼板",
+  "Export Annotations": "匯出筆記",
+  "Auto Import on File Open": "打開文件時自動導入",
+  "LXGW WenKai GB Screen": "霞鶩文楷"
 }

apps/readest-app/release-notes.json

@@ -1,5 +1,32 @@
 {
   "releases": {
+    "0.9.26": {
+      "date": "2025-03-27",
+      "notes": [
+        "Support open book from file manager without importing",
+        "Add LXGW WenKai font in Serif fonts list",
+        "Various fixes on layout and styles on Windows and Android"
+      ]
+    },
+    "0.9.25": {
+      "date": "2025-03-24",
+      "notes": [
+        "Support exporting annotations in markdown format",
+        "Support importing TXT files",
+        "Support setting reader language in the UI",
+        "Add bottom action bar on mobile platforms",
+        "Various fixes on layout settings and styles"
+      ]
+    },
+    "0.9.23": {
+      "date": "2025-03-19",
+      "notes": [
+        "Add options to show/hide header and footer",
+        "Add responsive window size for popup footnotes",
+        "Fix theme color not applied on Safari browsers",
+        "Fix progress not updated to 100% when finished reading"
+      ]
+    },
     "0.9.22": {
       "date": "2025-03-16",
       "notes": [

apps/readest-app/src-tauri/gen/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+
+    <!-- AndroidTV support -->
+    <uses-feature android:name="android.software.leanback" android:required="false" />
+
+    <application
+        android:icon="@mipmap/ic_launcher"
+        android:largeHeap="true"
+        android:label="@string/app_name"
+        android:theme="@style/Theme.readest"
+        android:usesCleartextTraffic="${usesCleartextTraffic}">
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:launchMode="singleTask"
+            android:label="@string/main_activity_title"
+            android:name=".MainActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+                <!-- AndroidTV support -->
+                <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
+            </intent-filter>
+            <!-- DEEP LINK PLUGIN. AUTO-GENERATED. DO NOT REMOVE. -->
+            <intent-filter android:autoVerify="true">
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="http" />
+                <data android:scheme="https" />
+                <data android:host="web.readest.com" />
+                
+            </intent-filter>
+            <!-- DEEP LINK PLUGIN. AUTO-GENERATED. DO NOT REMOVE. -->
+        </activity>
+
+        <provider
+          android:name="androidx.core.content.FileProvider"
+          android:authorities="${applicationId}.fileprovider"
+          android:exported="false"
+          android:grantUriPermissions="true">
+          <meta-data
+            android:name="android.support.FILE_PROVIDER_PATHS"
+            android:resource="@xml/file_paths" />
+        </provider>
+    </application>
+</manifest>

apps/readest-app/src-tauri/plugins/tauri-plugin-safari-auth/permissions/schemas/schema.json

@@ -49,7 +49,7 @@
           "minimum": 1.0
         },
         "description": {
-          "description": "Human-readable description of what the permission does. Tauri convention is to use <h4> headings in markdown content for Tauri documentation generation purposes.",
+          "description": "Human-readable description of what the permission does. Tauri convention is to use `<h4>` headings in markdown content for Tauri documentation generation purposes.",
           "type": [
             "string",
             "null"
@@ -111,7 +111,7 @@
           "type": "string"
         },
         "description": {
-          "description": "Human-readable description of what the permission does. Tauri internal convention is to use <h4> headings in markdown content for Tauri documentation generation purposes.",
+          "description": "Human-readable description of what the permission does. Tauri internal convention is to use `<h4>` headings in markdown content for Tauri documentation generation purposes.",
           "type": [
             "string",
             "null"

apps/readest-app/src-tauri/src/lib.rs

@@ -63,6 +63,15 @@ fn set_window_open_with_files(app: &AppHandle, files: Vec<PathBuf>) {
     }
 }
 
+#[cfg(desktop)]
+fn set_rounded_window(app: &AppHandle, rounded: bool) {
+    let window = app.get_webview_window("main").unwrap();
+    let script = format!("window.IS_ROUNDED = {};", rounded);
+    if let Err(e) = window.eval(&script) {
+        eprintln!("Failed to set IS_ROUNDED variable: {}", e);
+    }
+}
+
 #[command]
 async fn start_server(window: Window) -> Result<u16, String> {
     start(move |url| {
@@ -185,6 +194,12 @@ pub fn run() {
                     app_handle.get_webview_window("main").unwrap()
                         .eval("window.__READEST_CLI_ACCESS = true; window.__READEST_UPDATER_ACCESS = true;")
                         .expect("Failed to set cli access config");
+
+                    set_rounded_window(&app_handle, true);
+                    #[cfg(target_os = "windows")]
+                    if tauri_plugin_os::version() <= tauri_plugin_os::Version::from_string("10.0.19045") {
+                        set_rounded_window(&app_handle, false);
+                    }
                 });
             }
 
@@ -225,8 +240,7 @@ pub fn run() {
                     .title("Readest");
 
                 if cfg!(target_os = "windows") {
-                    let version = tauri_plugin_os::version();
-                    if version <= tauri_plugin_os::Version::from_string("10.0.19045") {
+                    if tauri_plugin_os::version() <= tauri_plugin_os::Version::from_string("10.0.19045") {
                         win_builder = win_builder.shadow(false);
                     } else {
                         win_builder = win_builder.shadow(true);

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

@@ -23,6 +23,7 @@ import { openUrl } from '@tauri-apps/plugin-opener';
 import { handleAuthCallback } from '@/helpers/auth';
 import { getAppleIdAuth, Scope } from './utils/appleIdAuth';
 import { authWithSafari } from './utils/safariAuth';
+import WindowButtons from '@/components/WindowButtons';
 
 type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
 
@@ -47,11 +48,11 @@ const ProviderLogin: React.FC<ProviderLoginProp> = ({ provider, handleSignIn, Ic
       onClick={() => handleSignIn(provider)}
       className={clsx(
         'mb-2 flex w-64 items-center justify-center rounded border p-2.5',
-        'bg-base-100 border-gray-300 shadow-sm transition hover:bg-gray-50',
+        'bg-base-100 border-base-300 hover:bg-base-200 shadow-sm transition',
       )}
     >
       <Icon />
-      <span className='text-neutral-content/70 px-2 text-sm'>{label}</span>
+      <span className='text-base-content/75 px-2 text-sm'>{label}</span>
     </button>
   );
 };
@@ -67,6 +68,8 @@ export default function AuthPage() {
   const isOAuthServerRunning = useRef(false);
   const [isMounted, setIsMounted] = useState(false);
 
+  const headerRef = useRef<HTMLDivElement>(null);
+
   const getTauriRedirectTo = (isOAuth: boolean) => {
     if (process.env.NODE_ENV === 'production' || appService?.isMobile) {
       if (appService?.isIOSApp) {
@@ -298,21 +301,31 @@ export default function AuthPage() {
   return isTauriAppPlatform() ? (
     <div
       className={clsx(
-        'mt-6 flex',
+        'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
         appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
-        appService?.hasTrafficLight && 'pt-11',
       )}
     >
-      <button
-        onClick={handleGoBack}
+      <div
+        ref={headerRef}
         className={clsx(
-          'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
-          appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
-          appService?.hasTrafficLight && 'top-11',
+          'flex w-full items-center justify-between py-2 pe-6 ps-4',
+          appService?.hasTrafficLight && 'pt-11',
         )}
       >
-        <IoArrowBack className='text-base-content' />
-      </button>
+        <button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
+          <IoArrowBack className='text-base-content' />
+        </button>
+
+        {appService?.hasWindowBar && (
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={appService?.hasWindowBar}
+            showMaximize={appService?.hasWindowBar}
+            showClose={appService?.hasWindowBar}
+            onClose={handleGoBack}
+          />
+        )}
+      </div>
       <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
         <ProviderLogin
           provider='google'
@@ -332,7 +345,7 @@ export default function AuthPage() {
           Icon={FaGithub}
           label={_('Sign in with GitHub')}
         />
-        <hr className='my-3 mt-6 w-64 border-t border-gray-200' />
+        <hr className='border-base-300 my-3 mt-6 w-64 border-t' />
         <Auth
           supabaseClient={supabase}
           appearance={{ theme: ThemeSupa }}

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

@@ -68,7 +68,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     <div
       ref={headerRef}
       className={clsx(
-        'titlebar h-13 z-10 flex w-full items-center py-2 pr-4 sm:pr-6',
+        'titlebar z-10 flex h-[52px] w-full items-center py-2 pr-4 sm:pr-6',
         appService?.hasSafeAreaInset && 'mt-[env(safe-area-inset-top)]',
         isTrafficLightVisible ? 'pl-16' : 'pl-0 sm:pl-2',
       )}

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

@@ -13,7 +13,8 @@ const getProgressPercentage = (book: Book) => {
   if (book.progress && book.progress[1] === 1) {
     return 100;
   }
-  return Math.round((book.progress[0] / book.progress[1]) * 100);
+  const percentage = Math.round((book.progress[0] / book.progress[1]) * 100);
+  return Math.max(0, Math.min(100, percentage));
 };
 
 const ReadingProgress: React.FC<ReadingProgressProps> = memo(

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

@@ -6,7 +6,7 @@ import { PiUserCircleCheck } from 'react-icons/pi';
 import { MdCheck } from 'react-icons/md';
 
 import { setAboutDialogVisible } from '@/components/AboutWindow';
-import { hasUpdater, isWebAppPlatform } from '@/services/environment';
+import { hasUpdater, isTauriAppPlatform, isWebAppPlatform } from '@/services/environment';
 import { DOWNLOAD_READEST_URL } from '@/services/constants';
 import { useAuth } from '@/context/AuthContext';
 import { useEnv } from '@/context/EnvContext';
@@ -33,6 +33,9 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
   const [isAutoCheckUpdates, setIsAutoCheckUpdates] = useState(settings.autoCheckUpdates);
   const [isScreenWakeLock, setIsScreenWakeLock] = useState(settings.screenWakeLock);
+  const [isAutoImportBooksOnOpen, setIsAutoImportBooksOnOpen] = useState(
+    settings.autoImportBooksOnOpen,
+  );
 
   const showAboutReadest = () => {
     setAboutDialogVisible(true);
@@ -74,6 +77,13 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
     }
   };
 
+  const toggleAutoImportBooksOnOpen = () => {
+    settings.autoImportBooksOnOpen = !settings.autoImportBooksOnOpen;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsAutoImportBooksOnOpen(settings.autoImportBooksOnOpen);
+  };
+
   const toggleAutoCheckUpdates = () => {
     settings.autoCheckUpdates = !settings.autoCheckUpdates;
     setSettings(settings);
@@ -150,6 +160,13 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
         icon={isAutoUpload ? <MdCheck className='text-base-content' /> : undefined}
         onClick={toggleAutoUploadBooks}
       />
+      {isTauriAppPlatform() && !appService?.isMobile && (
+        <MenuItem
+          label={_('Auto Import on File Open')}
+          icon={isAutoImportBooksOnOpen ? <MdCheck className='text-base-content' /> : undefined}
+          onClick={toggleAutoImportBooksOnOpen}
+        />
+      )}
       {hasUpdater() && (
         <MenuItem
           label={_('Check Updates on Start')}
@@ -163,9 +180,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
         onClick={toggleScreenWakeLock}
       />
       <hr className='border-base-200 my-1' />
-      {appService?.hasRoundedWindow && (
-        <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />
-      )}
+      {appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
       <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />
       {isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}

apps/readest-app/src/app/library/hooks/useBooksSync.ts

@@ -85,9 +85,8 @@ export const useBooksSync = ({ onSyncStart, onSyncEnd }: UseBooksSyncProps) => {
         }
         const mergedBook =
           matchingBook.updatedAt > oldBook.updatedAt
-            ? { ...oldBook, ...matchingBook, updatedAt: oldBook.updatedAt }
-            : { ...matchingBook, ...oldBook, updatedAt: oldBook.updatedAt };
-        mergedBook.progress = matchingBook.progress ?? oldBook.progress;
+            ? { ...oldBook, ...matchingBook }
+            : { ...matchingBook, ...oldBook };
         return mergedBook;
       }
       return oldBook;

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

@@ -191,11 +191,13 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
 
   const processOpenWithFiles = React.useCallback(
     async (appService: AppService, openWithFiles: string[], libraryBooks: Book[]) => {
+      const settings = await appService.loadSettings();
       const bookIds: string[] = [];
       for (const file of openWithFiles) {
         console.log('Open with book:', file);
         try {
-          const book = await appService.importBook(file, libraryBooks);
+          const temp = !settings.autoImportBooksOnOpen;
+          const book = await appService.importBook(file, libraryBooks, true, true, false, temp);
           if (book) {
             bookIds.push(book.hash);
           }
@@ -508,8 +510,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
           <div
             ref={containerRef}
             className={clsx(
-              'scroll-container drop-zone mt-12 flex-grow overflow-auto px-4 sm:px-2',
-              appService?.hasSafeAreaInset && 'mt-[calc(48px+env(safe-area-inset-top))]',
+              'scroll-container drop-zone mt-[52px] flex-grow overflow-y-auto px-4 sm:px-2',
+              appService?.hasSafeAreaInset && 'mt-[calc(52px+env(safe-area-inset-top))]',
               appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom))]',
               isDragging && 'drag-over',
             )}

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

@@ -81,37 +81,62 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
             />
             <FoliateViewer bookKey={bookKey} bookDoc={bookDoc} config={config} />
             <FootnotePopup bookKey={bookKey} bookDoc={bookDoc} />
-            {viewSettings.scrolled ? null : (
+            {viewSettings.vertical && viewSettings.scrolled && (
               <>
-                {viewSettings.vertical && viewSettings.doubleBorder && (
-                  <DoubleBorder
-                    borderColor={viewSettings.borderColor}
-                    horizontalGap={horizontalGapPercent}
-                    verticalMargin={verticalMarginPixels}
-                  />
-                )}
-                <SectionInfo
-                  section={sectionLabel}
-                  isVertical={viewSettings.vertical}
-                  horizontalGap={horizontalGapPercent}
-                  verticalMargin={verticalMarginPixels}
+                <div
+                  className='bg-base-100 absolute left-0 top-0 h-full'
+                  style={{
+                    width: `calc(${horizontalGapPercent}%)`,
+                    height: `calc(100% - ${verticalMarginPixels}px)`,
+                  }}
                 />
-                <HintInfo
-                  bookKey={bookKey}
-                  isVertical={viewSettings.vertical}
-                  horizontalGap={horizontalGapPercent}
-                  verticalMargin={verticalMarginPixels}
-                />
-                <PageInfoView
-                  bookFormat={book.format}
-                  section={section}
-                  pageinfo={pageinfo}
-                  isVertical={viewSettings.vertical}
-                  horizontalGap={horizontalGapPercent}
-                  verticalMargin={verticalMarginPixels}
+                <div
+                  className='bg-base-100 absolute right-0 top-0 h-full'
+                  style={{
+                    width: `calc(${horizontalGapPercent}%)`,
+                    height: `calc(100% - ${verticalMarginPixels}px)`,
+                  }}
                 />
               </>
             )}
+            {viewSettings.vertical && viewSettings.doubleBorder && (
+              <DoubleBorder
+                showHeader={viewSettings.showHeader}
+                showFooter={viewSettings.showFooter}
+                borderColor={viewSettings.borderColor}
+                horizontalGap={horizontalGapPercent}
+                verticalMargin={verticalMarginPixels}
+              />
+            )}
+            {viewSettings.showHeader && (
+              <SectionInfo
+                section={sectionLabel}
+                showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
+                isScrolled={viewSettings.scrolled}
+                isVertical={viewSettings.vertical}
+                horizontalGap={horizontalGapPercent}
+                verticalMargin={verticalMarginPixels}
+              />
+            )}
+            <HintInfo
+              bookKey={bookKey}
+              showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
+              isVertical={viewSettings.vertical}
+              horizontalGap={horizontalGapPercent}
+              verticalMargin={verticalMarginPixels}
+            />
+            {viewSettings.showFooter && (
+              <PageInfoView
+                bookFormat={book.format}
+                section={section}
+                pageinfo={pageinfo}
+                showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
+                isScrolled={viewSettings.scrolled}
+                isVertical={viewSettings.vertical}
+                horizontalGap={horizontalGapPercent}
+                verticalMargin={verticalMarginPixels}
+              />
+            )}
             <Annotator bookKey={bookKey} />
             <FooterBar
               bookKey={bookKey}

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

@@ -2,6 +2,8 @@ interface DoubleBorderProps {
   borderColor: string;
   horizontalGap: number;
   verticalMargin: number;
+  showHeader: boolean;
+  showFooter: boolean;
 }
 
 const paddingPx = 10;
@@ -10,51 +12,63 @@ const DoubleBorder: React.FC<DoubleBorderProps> = ({
   borderColor,
   horizontalGap,
   verticalMargin,
+  showHeader,
+  showFooter,
 }) => {
   return (
     <>
+      {/* outter frame */}
       <div
         className={'borderframe pointer-events-none absolute'}
         style={{
           border: `4px solid ${borderColor}`,
           height: `calc(100% - ${verticalMargin * 2}px + ${paddingPx * 2}px)`,
           top: `calc(${verticalMargin}px - ${paddingPx}px)`,
-          left: `calc(${horizontalGap * 2}% - 32px - ${paddingPx}px)`,
-          right: `calc(${horizontalGap * 2}% - 32px - ${paddingPx}px)`,
+          left: `calc(${horizontalGap}% - ${showFooter ? 32 : 0}px - ${paddingPx}px)`,
+          right: `calc(${horizontalGap}% - ${showHeader ? 32 : 0}px - ${paddingPx}px)`,
         }}
       ></div>
+      {/* inner frame */}
       <div
         className={'borderframe pointer-events-none absolute'}
         style={{
           border: `1px solid ${borderColor}`,
           height: `calc(100% - ${verticalMargin * 2}px)`,
           top: `${verticalMargin}px`,
-          left: `${horizontalGap * 2}%`,
-          right: `${horizontalGap * 2}%`,
-        }}
-      />
-      <div
-        className={'borderframe pointer-events-none absolute'}
-        style={{
-          border: `1px solid ${borderColor}`,
-          width: '32px',
-          height: `calc(100% - ${verticalMargin * 2}px)`,
-          top: `${verticalMargin}px`,
-          left: `calc(${horizontalGap * 2}% - 32px)`,
-          borderRight: 'none',
-        }}
-      />
-      <div
-        className={'borderframe pointer-events-none absolute'}
-        style={{
-          border: `1px solid ${borderColor}`,
-          width: '32px',
-          height: `calc(100% - ${verticalMargin * 2}px)`,
-          top: `${verticalMargin}px`,
-          left: `calc(100% - ${horizontalGap * 2}%)`,
-          borderLeft: 'none',
+          left: showFooter ? `${horizontalGap}%` : `calc(${horizontalGap}%)`,
+          right: showHeader ? `${horizontalGap}%` : `calc(${horizontalGap}%)`,
         }}
       />
+      {/* footer */}
+      {showFooter && (
+        <div
+          className={'borderframe pointer-events-none absolute'}
+          style={{
+            borderTop: `1px solid ${borderColor}`,
+            borderBottom: `1px solid ${borderColor}`,
+            borderLeft: `1px solid ${borderColor}`,
+            width: '32px',
+            height: `calc(100% - ${verticalMargin * 2}px)`,
+            top: `${verticalMargin}px`,
+            left: `calc(${horizontalGap}% - 32px)`,
+          }}
+        />
+      )}
+      {/* header */}
+      {showHeader && (
+        <div
+          className={'borderframe pointer-events-none absolute'}
+          style={{
+            borderTop: `1px solid ${borderColor}`,
+            borderBottom: `1px solid ${borderColor}`,
+            borderRight: `1px solid ${borderColor}`,
+            width: '32px',
+            height: `calc(100% - ${verticalMargin * 2}px)`,
+            top: `${verticalMargin}px`,
+            left: `calc(100% - ${horizontalGap}%)`,
+          }}
+        />
+      )}
     </>
   );
 };

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

@@ -62,7 +62,7 @@ const FoliateViewer: React.FC<{
       viewSettings.vertical =
         writingDir?.vertical || viewSettings.writingMode.includes('vertical') || false;
       viewSettings.rtl = writingDir?.rtl || viewSettings.writingMode.includes('rl') || false;
-      setViewSettings(bookKey, viewSettings);
+      setViewSettings(bookKey, { ...viewSettings });
 
       mountAdditionalFonts(detail.doc);
 

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

@@ -3,14 +3,25 @@ import clsx from 'clsx';
 import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { FaHeadphones } from 'react-icons/fa6';
+import { IoIosList as TOCIcon } from 'react-icons/io';
+import { PiNotePencil as NoteIcon } from 'react-icons/pi';
+import { RxSlider as SliderIcon } from 'react-icons/rx';
+import { RiFontFamily as FontIcon } from 'react-icons/ri';
+import { MdOutlineHeadphones as TTSIcon } from 'react-icons/md';
+import { TbBoxMargin } from 'react-icons/tb';
+import { RxLineHeight } from 'react-icons/rx';
 
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { eventDispatcher } from '@/utils/event';
+import { saveViewSettings } from '../utils/viewSettingsHelper';
 import { PageInfo } from '@/types/book';
+import { getStyles } from '@/utils/style';
 import Button from '@/components/Button';
+import Slider from '@/components/Slider';
 
 interface FooterBarProps {
   bookKey: string;
@@ -28,17 +39,44 @@ const FooterBar: React.FC<FooterBarProps> = ({
   isHoveredAnim,
 }) => {
   const _ = useTranslation();
-  const { appService } = useEnv();
+  const { envConfig, appService } = useEnv();
   const { hoveredBookKey, setHoveredBookKey, getView, getProgress, getViewSettings } =
     useReaderStore();
-  const { isSideBarVisible } = useSidebarStore();
+  const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
+  const [actionTab, setActionTab] = React.useState('');
+  const sliderHeight = useResponsiveSize(28);
+  const tocIconSize = useResponsiveSize(23);
+  const fontIconSize = useResponsiveSize(18);
+  const marginIconSize = useResponsiveSize(20);
+
   const view = getView(bookKey);
   const progress = getProgress(bookKey);
   const viewSettings = getViewSettings(bookKey);
 
-  const handleProgressChange = (event: React.ChangeEvent) => {
-    const newProgress = parseInt((event.target as HTMLInputElement).value, 10);
-    view?.goToFraction(newProgress / 100.0);
+  const handleProgressChange = (value: number) => {
+    view?.goToFraction(value / 100.0);
+  };
+
+  const handleFontSizeChange = (value: number) => {
+    saveViewSettings(envConfig, bookKey, 'defaultFontSize', value);
+    view?.renderer.setStyles?.(getStyles(viewSettings!));
+  };
+
+  const handleMarginChange = (value: number) => {
+    const marginPx = Math.round((value / 100) * 88);
+    const gapPercent = Math.round((value / 100) * 10);
+    saveViewSettings(envConfig, bookKey, 'marginPx', marginPx);
+    saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent);
+    view?.renderer.setAttribute('margin', `${marginPx}px`);
+    view?.renderer.setAttribute('gap', `${gapPercent}%`);
+    if (viewSettings?.scrolled) {
+      view?.renderer.setAttribute('flow', 'scrolled');
+    }
+  };
+
+  const handleLineHeightChange = (value: number) => {
+    saveViewSettings(envConfig, bookKey, 'lineHeight', value / 10);
+    view?.renderer.setStyles?.(getStyles(viewSettings!));
   };
 
   const handleGoPrev = () => {
@@ -67,68 +105,217 @@ const FooterBar: React.FC<FooterBarProps> = ({
     }
   };
 
+  const handleSetActionTab = (tab: string) => {
+    console.log('handleSetActionTab', tab);
+    setActionTab(actionTab === tab ? '' : tab);
+    if (tab === 'tts') {
+      setHoveredBookKey('');
+      handleSpeakText();
+    } else if (tab === 'toc') {
+      setHoveredBookKey('');
+      if (viewSettings) {
+        viewSettings.sideBarTab = 'toc';
+      }
+      setSideBarVisible(true);
+    } else if (tab === 'note') {
+      setHoveredBookKey('');
+      setSideBarVisible(true);
+      if (viewSettings) {
+        viewSettings.sideBarTab = 'annotations';
+      }
+    }
+  };
+
+  const getMarginProgressValue = (marginPx: number, gapPercent: number) => {
+    return (marginPx / 88 + gapPercent / 10) * 50;
+  };
+
   const isVisible = hoveredBookKey === bookKey;
   const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
   const progressValid = !!progressInfo;
-  const progressFraction = progressValid ? (progressInfo!.current + 1) / progressInfo!.total : 0;
+  const progressFraction = progressValid
+    ? ((progressInfo!.next ?? progressInfo!.current) + 1) / progressInfo!.total
+    : 0;
 
   return (
     <>
       <div
         className={clsx(
-          'absolute bottom-0 left-0 z-10 h-12 w-full',
-          viewSettings?.vertical && viewSettings?.scrolled ? 'bottom-3 !h-6' : '',
+          'absolute bottom-0 left-0 z-10 hidden w-full sm:flex sm:h-[52px]',
+          // show scroll bar when vertical and scrolled in desktop
+          viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
         )}
         onMouseEnter={() => !appService?.isMobile && setHoveredBookKey(bookKey)}
         onTouchStart={() => !appService?.isMobile && 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)]',
+          'footer-bar shadow-xs absolute bottom-0 z-50 flex w-full flex-col',
+          'sm:h-[52px] sm:justify-center',
+          'sm:bg-base-100 border-base-300/50 border sm:border-none',
+          'transition-[opacity,transform] duration-300',
           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`,
+          // show scroll bar when vertical and scrolled in desktop
+          viewSettings?.vertical && viewSettings?.scrolled && 'sm:!bottom-3 sm:!h-7',
+          isVisible
+            ? `pointer-events-auto translate-y-0 opacity-100`
+            : `pointer-events-none translate-y-full opacity-0 sm:translate-y-0`,
         )}
         dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
-        onMouseLeave={() => setHoveredBookKey('')}
+        onMouseLeave={() => window.innerWidth >= 640 && setHoveredBookKey('')}
         aria-hidden={!isVisible}
       >
-        <div className='hidden sm:flex'>
+        {/* Mobile footer bar */}
+        <div
+          className={clsx(
+            'bg-base-200 absolute bottom-16 flex w-full items-center gap-x-2 px-4 transition-all sm:hidden',
+            actionTab === 'progress'
+              ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
+              : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
+          )}
+          style={{
+            bottom: appService?.hasSafeAreaInset
+              ? 'calc(env(safe-area-inset-bottom) + 64px)'
+              : '64px',
+          }}
+        >
           <Button
             icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
             onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
             tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
           />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
+            onClick={handleGoBack}
+            tooltip={_('Go Back')}
+            disabled={!view?.history.canGoBack}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
+            onClick={handleGoForward}
+            tooltip={_('Go Forward')}
+            disabled={!view?.history.canGoForward}
+          />
+          <Slider
+            heightPx={sliderHeight}
+            bubbleLabel={`${Math.round(progressFraction * 100)}%`}
+            initialValue={progressValid ? progressFraction * 100 : 0}
+            onChange={(e) => handleProgressChange(e)}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
+            onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
+            tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+          />
         </div>
-        <Button
-          icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
-          onClick={handleGoBack}
-          tooltip={_('Go Back')}
-          disabled={!view?.history.canGoBack}
-        />
-        <Button
-          icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
-          onClick={handleGoForward}
-          tooltip={_('Go Forward')}
-          disabled={!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'>
+        <div
+          className={clsx(
+            'bg-base-200 absolute flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
+            actionTab === 'font'
+              ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
+              : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
+          )}
+          style={{
+            bottom: appService?.hasSafeAreaInset
+              ? 'calc(env(safe-area-inset-bottom) + 64px)'
+              : '64px',
+          }}
+        >
+          <Slider
+            initialValue={viewSettings?.defaultFontSize ?? 16}
+            bubbleLabel={`${viewSettings?.defaultFontSize ?? 16}`}
+            minLabel='A'
+            maxLabel='A'
+            minClassName='text-xs'
+            maxClassName='text-base'
+            onChange={handleFontSizeChange}
+            min={8}
+            max={30}
+          />
+          <div className='flex w-full items-center justify-between gap-x-6'>
+            <Slider
+              initialValue={getMarginProgressValue(
+                viewSettings?.marginPx ?? 44,
+                viewSettings?.gapPercent ?? 5,
+              )}
+              bubbleElement={<TbBoxMargin size={marginIconSize} />}
+              minLabel={_('Small')}
+              maxLabel={_('Large')}
+              step={10}
+              onChange={handleMarginChange}
+            />
+            <Slider
+              initialValue={(viewSettings?.lineHeight ?? 1.6) * 10}
+              bubbleElement={<RxLineHeight size={marginIconSize} />}
+              minLabel={_('Small')}
+              maxLabel={_('Large')}
+              min={8}
+              max={24}
+              onChange={handleLineHeightChange}
+            />
+          </div>
+        </div>
+        <div
+          className={clsx(
+            'bg-base-200 z-50 mt-auto flex w-full justify-between px-8 py-4 sm:hidden',
+            appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom)+16px)]',
+          )}
+        >
+          <Button
+            icon={<TOCIcon size={tocIconSize} className='' />}
+            onClick={() => handleSetActionTab('toc')}
+          />
+          <Button icon={<NoteIcon className='' />} onClick={() => handleSetActionTab('note')} />
+          <Button
+            icon={<SliderIcon className={clsx(actionTab === 'progress' && 'text-blue-500')} />}
+            onClick={() => handleSetActionTab('progress')}
+          />
+          <Button
+            icon={
+              <FontIcon
+                size={fontIconSize}
+                className={clsx(actionTab === 'font' && 'text-blue-500')}
+              />
+            }
+            onClick={() => handleSetActionTab('font')}
+          />
+          <Button icon={<TTSIcon className='' />} onClick={() => handleSetActionTab('tts')} />
+        </div>
+        {/* Desktop footer bar */}
+        <div className='hidden w-full items-center gap-x-4 px-4 sm:flex'>
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
+            onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
+            tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
+            onClick={handleGoBack}
+            tooltip={_('Go Back')}
+            disabled={!view?.history.canGoBack}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
+            onClick={handleGoForward}
+            tooltip={_('Go Forward')}
+            disabled={!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(parseInt((e.target as HTMLInputElement).value, 10))
+            }
+          />
+          <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
           <Button
             icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
             onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}

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

@@ -1,10 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { BookDoc } from '@/libs/document';
-import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
-import { getFootnoteStyles, getStyles } from '@/utils/style';
+import { getFootnoteStyles, getStyles, getThemeCode } from '@/utils/style';
 import { getPopupPosition, getPosition, Position } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
 import { FoliateView } from '@/types/view';
@@ -26,12 +25,21 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
   const [trianglePosition, setTrianglePosition] = useState<Position | null>();
   const [popupPosition, setPopupPosition] = useState<Position | null>();
   const [showPopup, setShowPopup] = useState(false);
+
   const { getView, getViewSettings } = useReaderStore();
-  const { themeCode } = useThemeStore();
   const view = getView(bookKey);
   const viewSettings = getViewSettings(bookKey)!;
   const footnoteHandler = new FootnoteHandler();
 
+  const [gridRect, setGridRect] = useState<DOMRect | null>(null);
+  const [responsiveWidth, setResponsiveWidth] = useState(popupWidth);
+  const [responsiveHeight, setResponsiveHeight] = useState(popupHeight);
+
+  const getResponsivePopupSize = (size: number, isVertical: boolean) => {
+    const maxSize = isVertical ? window.innerWidth / 2 : window.innerHeight / 2;
+    return Math.min(size, maxSize - popupPadding - 12);
+  };
+
   useEffect(() => {
     const handleBeforeRender = (e: Event) => {
       const detail = (e as CustomEvent).detail;
@@ -50,8 +58,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
       const { renderer } = view;
       renderer.setAttribute('flow', 'scrolled');
       renderer.setAttribute('margin', '0px');
-      renderer.setAttribute('gap', '5%');
+      renderer.setAttribute('gap', '0%');
       const viewSettings = getViewSettings(bookKey)!;
+      const themeCode = getThemeCode();
       const popupTheme = { ...themeCode };
       const popupContainer = document.getElementById('popup-container');
       if (popupContainer) {
@@ -65,8 +74,17 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
 
     const handleRender = (e: Event) => {
       const detail = (e as CustomEvent).detail;
-      console.log('render footnote', detail);
-      setShowPopup(true);
+      // console.log('render footnote', detail);
+      const { view } = detail;
+      view.addEventListener('relocate', () => {
+        const { renderer } = view as FoliateView;
+        if (viewSettings.vertical) {
+          setResponsiveWidth(getResponsivePopupSize(renderer.viewSize, true));
+        } else {
+          setResponsiveHeight(getResponsivePopupSize(renderer.viewSize, false));
+        }
+        setShowPopup(true);
+      });
     };
 
     footnoteHandler.addEventListener('before-render', handleBeforeRender);
@@ -76,25 +94,41 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
       footnoteHandler.removeEventListener('render', handleRender);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view, themeCode]);
+  }, [view]);
+
+  useEffect(() => {
+    if (viewSettings.vertical) {
+      setResponsiveWidth(popupHeight);
+      setResponsiveHeight(Math.max(popupWidth, window.innerHeight / 4));
+    } else {
+      setResponsiveWidth(Math.max(popupWidth, window.innerWidth / 4));
+      setResponsiveHeight(popupHeight);
+    }
+  }, [viewSettings]);
+
+  useEffect(() => {
+    if (trianglePosition && gridRect) {
+      const popupPos = getPopupPosition(
+        trianglePosition,
+        gridRect,
+        responsiveWidth,
+        responsiveHeight,
+        popupPadding,
+      );
+      setPopupPosition(popupPos);
+    }
+  }, [trianglePosition, gridRect, responsiveWidth, responsiveHeight]);
 
   const docLinkHandler = async (event: Event) => {
     const detail = (event as CustomEvent).detail;
-    console.log('doc link click', detail);
+    // console.log('doc link click', detail);
     const gridFrame = document.querySelector(`#gridcell-${bookKey}`);
     if (!gridFrame) return;
     const rect = gridFrame.getBoundingClientRect();
     const viewSettings = getViewSettings(bookKey)!;
     const triangPos = getPosition(detail.a, rect, popupPadding, viewSettings.vertical);
-    const popupPos = getPopupPosition(
-      triangPos,
-      rect,
-      viewSettings.vertical ? popupHeight : popupWidth,
-      viewSettings.vertical ? popupWidth : popupHeight,
-      popupPadding,
-    );
+    setGridRect(rect);
     setTrianglePosition(triangPos);
-    setPopupPosition(popupPos);
 
     footnoteHandler.handle(bookDoc, event)?.catch((err) => {
       console.warn(err);
@@ -111,11 +145,13 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
 
   const handleDismissPopup = () => {
     closePopup();
+    setGridRect(null);
     setPopupPosition(null);
     setTrianglePosition(null);
     setShowPopup(false);
   };
 
+  // Handle custom footnote popup event from iframe event
   const handleFootnotePopupEvent = (event: CustomEvent) => {
     const { element, footnote } = event.detail;
     const gridFrame = document.querySelector(`#gridcell-${bookKey}`);
@@ -123,21 +159,30 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
     const rect = gridFrame.getBoundingClientRect();
     const viewSettings = getViewSettings(bookKey)!;
     const triangPos = getPosition(element, rect, popupPadding, viewSettings.vertical);
-    const popupPos = getPopupPosition(
-      triangPos,
-      rect,
-      viewSettings.vertical ? popupHeight : popupWidth,
-      viewSettings.vertical ? popupWidth : popupHeight,
-      popupPadding,
-    );
     if (footnoteRef.current) {
       const elem = document.createElement('p');
       elem.textContent = footnote;
-      elem.setAttribute('style', `padding: 16px; hanging-punctuation: allow-end last;`);
+      elem.setAttribute('style', `padding: 1em; hanging-punctuation: allow-end last;`);
+      elem.style.visibility = 'hidden';
+      if (viewSettings.vertical) {
+        elem.style.height = `${responsiveHeight}px`;
+      } else {
+        elem.style.width = `${responsiveWidth}px`;
+      }
+      document.body.appendChild(elem);
+      const popupSize = elem.getBoundingClientRect();
+      if (viewSettings.vertical) {
+        setResponsiveWidth(getResponsivePopupSize(popupSize.width, true));
+      } else {
+        setResponsiveHeight(getResponsivePopupSize(popupSize.height, false));
+      }
+      document.body.removeChild(elem);
+
+      elem.style.visibility = 'visible';
       footnoteRef.current.replaceChildren(elem);
-      setShowPopup(true);
+      setGridRect(rect);
       setTrianglePosition(triangPos);
-      setPopupPosition(popupPos);
+      setShowPopup(true);
     }
   };
 
@@ -146,8 +191,10 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
   });
 
   useEffect(() => {
+    window.addEventListener('resize', handleDismissPopup);
     eventDispatcher.on('footnote-popup', handleFootnotePopupEvent);
     return () => {
+      window.removeEventListener('resize', handleDismissPopup);
       eventDispatcher.off('footnote-popup', handleFootnotePopupEvent);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -159,9 +206,6 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
     }
   }, [footnoteRef]);
 
-  const width = viewSettings.vertical ? popupHeight : popupWidth;
-  const height = viewSettings.vertical ? popupWidth : popupHeight;
-
   return (
     <div>
       {showPopup && (
@@ -172,8 +216,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
         />
       )}
       <Popup
-        width={width}
-        height={height}
+        width={responsiveWidth}
+        height={responsiveHeight}
         position={showPopup ? popupPosition! : undefined}
         trianglePosition={showPopup ? trianglePosition! : undefined}
         className='select-text overflow-y-auto'
@@ -182,8 +226,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
           className=''
           ref={footnoteRef}
           style={{
-            width: `${width}px`,
-            height: `${height}px`,
+            width: `${responsiveWidth}px`,
+            height: `${responsiveHeight}px`,
           }}
         ></div>
       </Popup>

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

@@ -86,8 +86,10 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-4'>
-        <SidebarToggler bookKey={bookKey} />
+      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center gap-x-4'>
+        <div className='hidden sm:flex'>
+          <SidebarToggler bookKey={bookKey} />
+        </div>
         <BookmarkToggler bookKey={bookKey} />
       </div>
 

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

@@ -1,11 +1,10 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
-import { useSidebarStore } from '@/store/sidebarStore';
-import { useTrafficLightStore } from '@/store/trafficLightStore';
 import { eventDispatcher } from '@/utils/event';
 
 interface SectionInfoProps {
   bookKey: string;
+  showDoubleBorder: boolean;
   isVertical: boolean;
   horizontalGap: number;
   verticalMargin: number;
@@ -13,12 +12,11 @@ interface SectionInfoProps {
 
 const HintInfo: React.FC<SectionInfoProps> = ({
   bookKey,
+  showDoubleBorder,
   isVertical,
   horizontalGap,
   verticalMargin,
 }) => {
-  const { isSideBarVisible } = useSidebarStore();
-  const { isTrafficLightVisible } = useTrafficLightStore();
   const [hintMessage, setHintMessage] = React.useState<string | null>(null);
   const hintTimeout = useRef(2000);
   const dismissTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -49,26 +47,21 @@ const HintInfo: React.FC<SectionInfoProps> = ({
   return (
     <div
       className={clsx(
-        'sectioninfo absolute flex justify-end overflow-hidden',
-        !isVertical && (isTrafficLightVisible && !isSideBarVisible ? 'h-[44px]' : 'h-[30px]'),
-        isVertical ? 'writing-vertical-rl w-[32px] items-center' : 'top-0 items-end',
-        isVertical ? 'max-h-[50%]' : 'max-w-[50%]',
+        'hintinfo absolute flex items-center justify-end overflow-hidden',
+        hintMessage ? 'bg-base-100' : 'bg-transparent',
+        isVertical ? 'writing-vertical-rl max-h-[50%]' : 'top-0 h-[44px] max-w-[50%]',
       )}
       style={
         isVertical
           ? {
-              bottom: `calc(${horizontalGap / 2}% + ${verticalMargin}px)`,
-              left: `calc(100% - ${horizontalGap * 2}%)`,
-              height: `calc(100% - ${verticalMargin * 2}px)`,
+              bottom: `${verticalMargin * 1.5}px`,
+              left: `calc(100% - ${horizontalGap}%)`,
+              width: showDoubleBorder ? '30px' : `${horizontalGap}%`,
             }
-          : { right: `${horizontalGap}%` }
+          : { insetInlineEnd: `${horizontalGap}%` }
       }
     >
-      <h2
-        className={clsx(
-          'text-neutral-content line-clamp-1 text-center font-sans text-xs font-light',
-        )}
-      >
+      <h2 className={clsx('text-neutral-content text-center font-sans text-xs font-light')}>
         {hintMessage || ''}
       </h2>
     </div>

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

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
+import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
 import { PageInfo } from '@/types/book';
 
@@ -7,6 +8,8 @@ interface PageInfoProps {
   bookFormat: string;
   section?: PageInfo;
   pageinfo?: PageInfo;
+  showDoubleBorder: boolean;
+  isScrolled: boolean;
   isVertical: boolean;
   horizontalGap: number;
   verticalMargin: number;
@@ -16,43 +19,46 @@ const PageInfoView: React.FC<PageInfoProps> = ({
   bookFormat,
   section,
   pageinfo,
+  showDoubleBorder,
+  isScrolled,
   isVertical,
   horizontalGap,
   verticalMargin,
 }) => {
   const _ = useTranslation();
-  const pageInfo =
-    bookFormat === 'PDF'
-      ? section
-        ? isVertical
-          ? `${section.current + 1} · ${section.total}`
-          : `${section.current + 1} / ${section.total}`
-        : ''
-      : pageinfo
-        ? _(
-            isVertical ? '{{currentPage}} · {{totalPage}}' : 'Loc. {{currentPage}} / {{totalPage}}',
-            {
-              currentPage: pageinfo.current + 1,
-              totalPage: pageinfo.total,
-            },
-          )
-        : '';
+  const { appService } = useEnv();
+  const pageInfo = ['PDF', 'CBZ'].includes(bookFormat)
+    ? section
+      ? isVertical
+        ? `${section.current + 1} · ${section.total}`
+        : `${section.current + 1} / ${section.total}`
+      : ''
+    : pageinfo
+      ? _(isVertical ? '{{currentPage}} · {{totalPage}}' : 'Loc. {{currentPage}} / {{totalPage}}', {
+          currentPage: (pageinfo.next ?? pageinfo.current) + 1,
+          totalPage: pageinfo.total,
+        })
+      : '';
 
   return (
     <div
       className={clsx(
         'pageinfo absolute bottom-0 flex items-center justify-end',
-        isVertical ? 'left-0' : 'right-0',
-        isVertical ? 'writing-vertical-rl w-[32px]' : 'h-12',
+        isVertical ? 'writing-vertical-rl' : 'h-12 w-full',
+        isScrolled && !isVertical && 'bg-base-100',
       )}
       style={
         isVertical
           ? {
-              bottom: `calc(${horizontalGap / 2}% + ${verticalMargin}px)`,
-              left: `calc(${horizontalGap * 2}% - 32px)`,
+              bottom: `${verticalMargin * 1.5}px`,
+              left: showDoubleBorder ? `calc(${horizontalGap}% - 32px)` : 0,
+              width: showDoubleBorder ? '32px' : `${horizontalGap}%`,
               height: `calc(100% - ${verticalMargin * 2}px)`,
             }
-          : { paddingRight: `${horizontalGap}%` }
+          : {
+              insetInlineEnd: `${horizontalGap}%`,
+              paddingBottom: appService?.hasSafeAreaInset ? 'env(safe-area-inset-bottom)' : 0,
+            }
       }
     >
       <h2 className='text-neutral-content text-right font-sans text-xs font-extralight'>

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

@@ -1,11 +1,10 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import { useSidebarStore } from '@/store/sidebarStore';
-import { useTrafficLightStore } from '@/store/trafficLightStore';
-
 interface SectionInfoProps {
   section?: string;
+  showDoubleBorder: boolean;
+  isScrolled: boolean;
   isVertical: boolean;
   horizontalGap: number;
   verticalMargin: number;
@@ -13,33 +12,34 @@ interface SectionInfoProps {
 
 const SectionInfo: React.FC<SectionInfoProps> = ({
   section,
+  showDoubleBorder,
+  isScrolled,
   isVertical,
   horizontalGap,
   verticalMargin,
 }) => {
-  const { isSideBarVisible } = useSidebarStore();
-  const { isTrafficLightVisible } = useTrafficLightStore();
   return (
     <div
       className={clsx(
-        'sectioninfo absolute flex overflow-hidden',
-        !isVertical && (isTrafficLightVisible && !isSideBarVisible ? 'h-[44px]' : 'h-[30px]'),
-        isVertical ? 'writing-vertical-rl w-[32px] items-center' : 'top-0 items-end',
-        isVertical ? 'max-h-[50%]' : 'max-w-[50%]',
+        'sectioninfo absolute flex items-center overflow-hidden',
+        isVertical ? 'writing-vertical-rl max-h-[85%]' : 'top-0 h-[44px]',
+        isScrolled && !isVertical && 'bg-base-100',
       )}
       style={
         isVertical
           ? {
-              top: `calc(${horizontalGap / 2}% + ${verticalMargin}px)`,
-              left: `calc(100% - ${horizontalGap * 2}%)`,
+              top: `${verticalMargin * 1.5}px`,
+              left: `calc(100% - ${horizontalGap}%)`,
+              width: showDoubleBorder ? '32px' : `${horizontalGap}%`,
               height: `calc(100% - ${verticalMargin * 2}px)`,
             }
-          : { left: `${horizontalGap}%` }
+          : { insetInlineStart: `${horizontalGap}%`, width: `calc(100% - ${horizontalGap * 2}%)` }
       }
     >
       <h2
         className={clsx(
-          'text-neutral-content line-clamp-1 text-center font-sans text-xs font-light',
+          'text-neutral-content text-center font-sans text-xs font-light',
+          isVertical ? '' : 'line-clamp-1',
         )}
       >
         {section || ''}

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

@@ -132,9 +132,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
 
       <hr className='border-base-300 my-1' />
 
-      {appService?.hasRoundedWindow && (
-        <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />
-      )}
+      {appService?.hasWindow && <MenuItem label={_('Fullscreen')} onClick={handleFullScreen} />}
       <MenuItem
         label={
           themeMode === 'dark'

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -12,7 +12,7 @@ import { FaHeadphones } from 'react-icons/fa6';
 import * as CFI from 'foliate-js/epubcfi.js';
 import { Overlayer } from 'foliate-js/overlayer.js';
 import { useEnv } from '@/context/EnvContext';
-import { BookNote, HighlightColor, HighlightStyle } from '@/types/book';
+import { BookNote, BooknoteGroup, HighlightColor, HighlightStyle } from '@/types/book';
 import { getOSPlatform, uniqueId } from '@/utils/misc';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useSettingsStore } from '@/store/settingsStore';
@@ -24,6 +24,7 @@ import { useFoliateEvents } from '../../hooks/useFoliateEvents';
 import { useNotesSync } from '../../hooks/useNotesSync';
 import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
+import { findTocItemBS } from '@/utils/toc';
 import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
@@ -76,9 +77,9 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const dictPopupHeight = Math.min(300, maxHeight);
   const transPopupWidth = Math.min(480, maxWidth);
   const transPopupHeight = Math.min(360, maxHeight);
-  const annotPopupWidth = useResponsiveSize(300);
+  const annotPopupWidth = Math.min(useResponsiveSize(300), maxWidth);
   const annotPopupHeight = useResponsiveSize(44);
-  const androidSelectionHandlerHeight = 8;
+  const androidSelectionHandlerHeight = 0;
 
   const onLoad = (event: Event) => {
     const detail = (event as CustomEvent).detail;
@@ -240,8 +241,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     };
 
     eventDispatcher.onSync('iframe-single-click', handleSingleClick);
+    eventDispatcher.on('export-annotations', handleExportMarkdown);
     return () => {
       eventDispatcher.offSync('iframe-single-click', handleSingleClick);
+      eventDispatcher.off('export-annotations', handleExportMarkdown);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -438,6 +441,91 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     eventDispatcher.dispatch('tts-speak', { bookKey, range: selection.range });
   };
 
+  const handleExportMarkdown = (event: CustomEvent) => {
+    const { bookKey: exportBookKey } = event.detail;
+    if (bookKey !== exportBookKey) return;
+
+    const { bookDoc, book } = bookData;
+    if (!bookDoc || !book || !bookDoc.toc) return;
+
+    const config = getConfig(bookKey)!;
+    const { booknotes: allNotes = [] } = config;
+    const booknotes = allNotes.filter((note) => !note.deletedAt);
+    if (booknotes.length === 0) {
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        message: _('No annotations to export'),
+        className: 'whitespace-nowrap',
+        timeout: 2000,
+      });
+      return;
+    }
+    const booknoteGroups: { [href: string]: BooknoteGroup } = {};
+    for (const booknote of booknotes) {
+      const tocItem = findTocItemBS(bookDoc.toc ?? [], booknote.cfi);
+      const href = tocItem?.href || '';
+      const label = tocItem?.label || '';
+      const id = tocItem?.id || 0;
+      if (!booknoteGroups[href]) {
+        booknoteGroups[href] = { id, href, label, booknotes: [] };
+      }
+      booknoteGroups[href].booknotes.push(booknote);
+    }
+
+    Object.values(booknoteGroups).forEach((group) => {
+      group.booknotes.sort((a, b) => {
+        return CFI.compare(a.cfi, b.cfi);
+      });
+    });
+
+    const sortedGroups = Object.values(booknoteGroups).sort((a, b) => {
+      return a.id - b.id;
+    });
+
+    const lines: string[] = [];
+    lines.push(`# ${book.title}`);
+    lines.push(`**${_('Author')}**: ${book.author || ''}`);
+    lines.push('');
+    lines.push(`**${_('Exported from Readest')}**: ${new Date().toISOString().slice(0, 10)}`);
+    lines.push('');
+    lines.push('---');
+    lines.push('');
+    lines.push(`## ${_('Highlights & Annotations')}`);
+    lines.push('');
+
+    for (const group of sortedGroups) {
+      const chapterTitle = group.label || _('Untitled');
+      lines.push(`### ${chapterTitle}`);
+      for (const note of group.booknotes) {
+        lines.push(`> "${note.text}"`);
+        if (note.note) {
+          lines.push(`**${_('Note')}**:: ${note.note}`);
+        }
+        lines.push('');
+      }
+      lines.push('---');
+      lines.push('');
+    }
+
+    const markdownContent = lines.join('\n');
+
+    navigator.clipboard?.writeText(markdownContent);
+    eventDispatcher.dispatch('toast', {
+      type: 'info',
+      message: _('Copied to clipboard'),
+      className: 'whitespace-nowrap',
+      timeout: 2000,
+    });
+    if (appService?.isMobile) return;
+    const blob = new Blob([markdownContent], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${book.title.replace(/\s+/g, '_')}.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
   const selectionAnnotated = selection?.annotated;
   const buttons = [
     { tooltipText: _('Copy'), Icon: FiCopy, onClick: handleCopy },

apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx

@@ -165,13 +165,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
           ) : (
             <div>
               <p className='text-base'>{translation || 'No translation available.'}</p>
-              <div className='pt-4 text-sm opacity-60'>
-                Translated by{' '}
-                <a href='https://www.deepl.com/' target='_blank' rel='noopener noreferrer'>
-                  DeepL
-                </a>
-                .
-              </div>
+              <div className='pt-4 text-sm opacity-60'>Translated by DeepL.</div>
             </div>
           )}
         </div>

apps/readest-app/src/app/reader/components/annotator/WikipediaPopup.tsx

@@ -114,11 +114,7 @@ const WikipediaPopup: React.FC<WikipediaPopupProps> = ({
           <main className='flex-grow overflow-y-auto px-2 font-sans'></main>
           <footer className='mt-auto hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
             <div className='flex items-center px-4 py-2 text-sm opacity-60'>
-              From <a id='link'>Wikipedia</a>, released under the{' '}
-              <a href='https://en.wikipedia.org/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License'>
-                CC BY-SA License
-              </a>
-              .
+              Source: Wikipedia (CC BY-SA)
             </div>
           </footer>
         </div>

apps/readest-app/src/app/reader/components/annotator/WiktionaryPopup.tsx

@@ -169,8 +169,7 @@ const WiktionaryPopup: React.FC<WiktionaryPopupProps> = ({
           <main className='flex-grow overflow-y-auto p-4 font-sans' />
           <footer className='mt-auto hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
             <div className='flex items-center px-4 py-2 text-sm opacity-60'>
-              From <a id='link'>Wiktionary</a>, released under the{' '}
-              <a href='https://creativecommons.org/licenses/by-sa/4.0/'>CC BY-SA License</a>.
+              Source: Wiktionary (CC BY-SA)
             </div>
           </footer>
         </div>

apps/readest-app/src/app/reader/components/settings/DropDown.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import React from 'react';
+import { FiChevronDown } from 'react-icons/fi';
+import { MdCheck } from 'react-icons/md';
+import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize';
+
+interface DropDownProps {
+  selected: { option: string; label: string };
+  options: { option: string; label: string }[];
+  onSelect: (option: string) => void;
+}
+
+const DropDown: React.FC<DropDownProps> = ({ selected, options, onSelect }) => {
+  const iconSize16 = useResponsiveSize(16);
+  const defaultIconSize = useDefaultIconSize();
+
+  return (
+    <div className='dropdown dropdown-bottom'>
+      <button
+        tabIndex={0}
+        className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
+        onClick={(e) => e.currentTarget.focus()}
+      >
+        <span>{selected.label}</span>
+        <FiChevronDown size={iconSize16} />
+      </button>
+      <ul
+        tabIndex={0}
+        className={clsx(
+          'dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute z-[1] shadow',
+          'menu-vertical right-[-32px] mt-2 inline max-h-80 w-44 overflow-y-scroll sm:right-0',
+        )}
+      >
+        {options.map(({ option, label }) => (
+          <li key={option} onClick={() => onSelect(option)}>
+            <div className='flex items-center px-0'>
+              <span style={{ minWidth: `${defaultIconSize}px` }}>
+                {selected.option === option && <MdCheck className='text-base-content' />}
+              </span>
+              <span>{label || option}</span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DropDown;

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -1,8 +1,6 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
-import NumberInput from './NumberInput';
-import FontDropdown from './FontDropDown';
 import {
   ANDROID_FONTS,
   IOS_FONTS,
@@ -14,13 +12,15 @@ import {
   WINDOWS_FONTS,
 } from '@/services/constants';
 import { useReaderStore } from '@/store/readerStore';
-import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useEnv } from '@/context/EnvContext';
 import { getStyles } from '@/utils/style';
 import { getOSPlatform } from '@/utils/misc';
 import { getSysFontsList } from '@/utils/font';
 import { isTauriAppPlatform } from '@/services/environment';
+import { saveViewSettings } from '../../utils/viewSettingsHelper';
+import NumberInput from './NumberInput';
+import FontDropdown from './FontDropDown';
 
 interface FontFaceProps {
   className?: string;
@@ -44,25 +44,27 @@ const FontFace = ({
   moreOptions,
   selected,
   onSelect,
-}: FontFaceProps) => (
-  <div className={clsx('config-item', className)}>
-    <span className=''>{label}</span>
-    <FontDropdown
-      family={family}
-      options={options.map((option) => ({ option, label: option }))}
-      moreOptions={moreOptions?.map((option) => ({ option, label: option })) ?? []}
-      selected={selected}
-      onSelect={onSelect}
-      onGetFontFamily={handleFontFaceFont}
-    />
-  </div>
-);
+}: FontFaceProps) => {
+  const _ = useTranslation();
+  return (
+    <div className={clsx('config-item', className)}>
+      <span className=''>{label}</span>
+      <FontDropdown
+        family={family}
+        options={options.map((option) => ({ option, label: _(option) }))}
+        moreOptions={moreOptions?.map((option) => ({ option, label: option })) ?? []}
+        selected={selected}
+        onSelect={onSelect}
+        onGetFontFamily={handleFontFaceFont}
+      />
+    </div>
+  );
+};
 
 const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
-  const { appService } = useEnv();
-  const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
-  const { getView, getViewSettings, setViewSettings } = useReaderStore();
+  const { envConfig, appService } = useEnv();
+  const { getView, getViewSettings } = useReaderStore();
   const view = getView(bookKey);
   const viewSettings = getViewSettings(bookKey)!;
 
@@ -118,89 +120,49 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   }, []);
 
   useEffect(() => {
-    viewSettings.defaultFont = defaultFont;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.defaultFont = defaultFont;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'defaultFont', defaultFont);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultFont]);
 
   useEffect(() => {
-    viewSettings.defaultFontSize = defaultFontSize;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.defaultFontSize = defaultFontSize;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'defaultFontSize', defaultFontSize);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultFontSize]);
 
   useEffect(() => {
-    viewSettings.minimumFontSize = minFontSize;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.minimumFontSize = minFontSize;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'minimumFontSize', minFontSize);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [minFontSize]);
 
   useEffect(() => {
-    viewSettings.fontWeight = fontWeight;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.fontWeight = fontWeight;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'fontWeight', fontWeight);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fontWeight]);
 
   useEffect(() => {
-    viewSettings.serifFont = serifFont;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.serifFont = serifFont;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'serifFont', serifFont);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serifFont]);
 
   useEffect(() => {
-    viewSettings.sansSerifFont = sansSerifFont;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.sansSerifFont = sansSerifFont;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'sansSerifFont', sansSerifFont);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sansSerifFont]);
 
   useEffect(() => {
-    viewSettings.monospaceFont = monospaceFont;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.monospaceFont = monospaceFont;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'monospaceFont', monospaceFont);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [monospaceFont]);
 
   useEffect(() => {
-    viewSettings.overrideFont = overrideFont;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.overrideFont = overrideFont;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'overrideFont', overrideFont);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overrideFont]);
@@ -225,7 +187,6 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
-              className='config-item-top'
               label={_('Default Font Size')}
               value={defaultFontSize}
               onChange={setDefaultFontSize}
@@ -233,7 +194,6 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               max={120}
             />
             <NumberInput
-              className='config-item-bottom'
               label={_('Minimum Font Size')}
               value={minFontSize}
               onChange={setMinFontSize}
@@ -249,7 +209,6 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
-              className='config-item-top'
               label={_('Font Weight')}
               value={fontWeight}
               onChange={setFontWeight}
@@ -265,7 +224,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <h2 className='mb-2 font-medium'>{_('Font Family')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
-            <div className='config-item config-item-top'>
+            <div className='config-item'>
               <span className=''>{_('Default Font')}</span>
               <FontDropdown
                 options={fontFamilyOptions}
@@ -275,7 +234,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               />
             </div>
 
-            <div className='config-item config-item-bottom'>
+            <div className='config-item'>
               <span className=''>{_('Override Book Font')}</span>
               <input
                 type='checkbox'

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -3,7 +3,7 @@ import { MdOutlineAutoMode } from 'react-icons/md';
 import { MdOutlineTextRotationNone, MdTextRotateVertical } from 'react-icons/md';
 import { TbTextDirectionRtl } from 'react-icons/tb';
 
-import { useSettingsStore } from '@/store/settingsStore';
+import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
@@ -12,11 +12,12 @@ import { getStyles } from '@/utils/style';
 import { getMaxInlineSize } from '@/utils/config';
 import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
 import { MIGHT_BE_RTL_LANGS } from '@/services/constants';
+import { saveViewSettings } from '../../utils/viewSettingsHelper';
 import NumberInput from './NumberInput';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
-  const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
+  const { envConfig } = useEnv();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const { getBookData } = useBookDataStore();
   const view = getView(bookKey);
@@ -40,102 +41,59 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [isScrolledMode, setScrolledMode] = useState(viewSettings.scrolled!);
   const [doubleBorder, setDoubleBorder] = useState(viewSettings.doubleBorder!);
   const [borderColor, setBorderColor] = useState(viewSettings.borderColor!);
+  const [showHeader, setShowHeader] = useState(viewSettings.showHeader!);
+  const [showFooter, setShowFooter] = useState(viewSettings.showFooter!);
 
   useEffect(() => {
-    viewSettings.paragraphMargin = paragraphMargin;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.paragraphMargin = paragraphMargin;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'paragraphMargin', paragraphMargin);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [paragraphMargin]);
 
   useEffect(() => {
-    viewSettings.lineHeight = lineHeight;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.lineHeight = lineHeight;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'lineHeight', lineHeight);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lineHeight]);
 
   useEffect(() => {
-    viewSettings.wordSpacing = wordSpacing;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.wordSpacing = wordSpacing;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'wordSpacing', wordSpacing);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wordSpacing]);
 
   useEffect(() => {
-    viewSettings.letterSpacing = letterSpacing;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.letterSpacing = letterSpacing;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'letterSpacing', letterSpacing);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [letterSpacing]);
 
   useEffect(() => {
-    viewSettings.textIndent = textIndent;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.textIndent = textIndent;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'textIndent', textIndent);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [textIndent]);
 
   useEffect(() => {
-    viewSettings.fullJustification = fullJustification;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.fullJustification = fullJustification;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'fullJustification', fullJustification);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullJustification]);
 
   useEffect(() => {
-    viewSettings.hyphenation = hyphenation;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.hyphenation = hyphenation;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'hyphenation', hyphenation);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hyphenation]);
 
   useEffect(() => {
-    viewSettings.marginPx = marginPx;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.marginPx = marginPx;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'marginPx', marginPx);
     view?.renderer.setAttribute('margin', `${marginPx}px`);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginPx]);
 
   useEffect(() => {
-    viewSettings.gapPercent = gapPercent;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.gapPercent = gapPercent;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent);
     view?.renderer.setAttribute('gap', `${gapPercent}%`);
     if (viewSettings.scrolled) {
       view?.renderer.setAttribute('flow', 'scrolled');
@@ -144,35 +102,20 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   }, [gapPercent]);
 
   useEffect(() => {
-    viewSettings.maxColumnCount = maxColumnCount;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.maxColumnCount = maxColumnCount;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'maxColumnCount', maxColumnCount);
     view?.renderer.setAttribute('max-column-count', maxColumnCount);
     view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxColumnCount]);
 
   useEffect(() => {
-    viewSettings.maxInlineSize = maxInlineSize;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.maxInlineSize = maxInlineSize;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'maxInlineSize', maxInlineSize);
     view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxInlineSize]);
 
   useEffect(() => {
-    viewSettings.maxBlockSize = maxBlockSize;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.maxBlockSize = maxBlockSize;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'maxBlockSize', maxBlockSize);
     view?.renderer.setAttribute('max-block-size', `${maxBlockSize}px`);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxBlockSize]);
@@ -180,18 +123,18 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   useEffect(() => {
     // global settings are not supported for writing mode
     const prevWritingMode = viewSettings.writingMode;
-    viewSettings.writingMode = writingMode;
-    if (writingMode.includes('vertical')) {
-      viewSettings.vertical = true;
+    if (!writingMode.includes('vertical')) {
+      viewSettings.vertical = false;
     }
-    setViewSettings(bookKey, viewSettings);
+    saveViewSettings(envConfig, bookKey, 'writingMode', writingMode, true);
     if (view) {
       view.renderer.setStyles?.(getStyles(viewSettings));
       view.book.dir = getBookDirFromWritingMode(writingMode);
     }
     if (
       prevWritingMode !== writingMode &&
-      (writingMode === 'horizontal-rl' || prevWritingMode === 'horizontal-rl')
+      (['horizontal-rl', 'vertical-rl'].includes(writingMode) ||
+        ['horizontal-rl', 'vertical-rl'].includes(prevWritingMode))
     ) {
       setTimeout(() => window.location.reload(), 100);
     }
@@ -199,52 +142,74 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   }, [writingMode]);
 
   useEffect(() => {
-    viewSettings.overrideLayout = overrideLayout;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.overrideLayout = overrideLayout;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'overrideLayout', overrideLayout);
     view?.renderer.setStyles?.(getStyles(viewSettings));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overrideLayout]);
 
   useEffect(() => {
-    viewSettings!.scrolled = isScrolledMode;
+    saveViewSettings(envConfig, bookKey, 'scrolled', isScrolledMode);
     getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
     getView(bookKey)?.renderer.setAttribute(
       'max-inline-size',
       `${getMaxInlineSize(viewSettings)}px`,
     );
     getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!));
-    setViewSettings(bookKey, viewSettings!);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.scrolled = isScrolledMode;
-      setSettings(settings);
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScrolledMode]);
 
   useEffect(() => {
-    viewSettings.doubleBorder = doubleBorder;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.doubleBorder = doubleBorder;
-      setSettings(settings);
+    if (doubleBorder && viewSettings.vertical) {
+      viewSettings.gapPercent = Math.max(
+        viewSettings.gapPercent,
+        Math.ceil(4800 / window.innerWidth),
+      );
+      setGapPercent(viewSettings.gapPercent);
+      setViewSettings(bookKey, viewSettings);
     }
+    saveViewSettings(envConfig, bookKey, 'doubleBorder', doubleBorder);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [doubleBorder]);
 
   useEffect(() => {
-    viewSettings.borderColor = borderColor;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.borderColor = borderColor;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'borderColor', borderColor);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [borderColor]);
 
+  useEffect(() => {
+    if (showHeader && !viewSettings.vertical) {
+      viewSettings.marginPx = Math.max(viewSettings.marginPx, 44);
+      setMarginPx(viewSettings.marginPx);
+      setViewSettings(bookKey, viewSettings);
+    } else if (showHeader && viewSettings.vertical) {
+      viewSettings.gapPercent = Math.max(
+        viewSettings.gapPercent,
+        Math.ceil(4800 / window.innerWidth),
+      );
+      setGapPercent(viewSettings.gapPercent);
+      setViewSettings(bookKey, viewSettings);
+    }
+    saveViewSettings(envConfig, bookKey, 'showHeader', showHeader);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showHeader]);
+
+  useEffect(() => {
+    if (showFooter && !viewSettings.vertical) {
+      viewSettings.marginPx = Math.max(viewSettings.marginPx, 44);
+      setMarginPx(viewSettings.marginPx);
+      setViewSettings(bookKey, viewSettings);
+    } else if (showFooter && viewSettings.vertical) {
+      viewSettings.gapPercent = Math.max(
+        viewSettings.gapPercent,
+        Math.ceil(4800 / window.innerWidth),
+      );
+      setGapPercent(viewSettings.gapPercent);
+      setViewSettings(bookKey, viewSettings);
+    }
+    saveViewSettings(envConfig, bookKey, 'showFooter', showFooter);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showFooter]);
+
   const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language);
   const mightBeRTLBook = MIGHT_BE_RTL_LANGS.includes(langCode) || isCJKEnv();
 
@@ -308,36 +273,37 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       )}
 
       {viewSettings.vertical && (
-        <>
-          <div className='w-full'>
-            <div className='flex items-center justify-between'>
-              <h2 className='font-medium'>{_('Double Border')}</h2>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={doubleBorder}
-                onChange={() => setDoubleBorder(!doubleBorder)}
-              />
-            </div>
-          </div>
+        <div className='w-full'>
+          <h2 className='mb-2 font-medium'>{_('Border Frame')}</h2>
+          <div className='card bg-base-100 border-base-200 border shadow'>
+            <div className='divide-base-200 divide-y'>
+              <div className='config-item'>
+                <span className=''>{_('Double Border')}</span>
+                <input
+                  type='checkbox'
+                  className='toggle'
+                  checked={doubleBorder}
+                  onChange={() => setDoubleBorder(!doubleBorder)}
+                />
+              </div>
 
-          <div className='w-full'>
-            <div className='flex items-center justify-between'>
-              <h2 className='font-medium'>{_('Border Color')}</h2>
-              <div className='flex gap-4'>
-                <button
-                  className={`btn btn-circle btn-sm bg-red-300 hover:bg-red-500 ${borderColor === 'red' ? 'btn-active !bg-red-500' : ''}`}
-                  onClick={() => setBorderColor('red')}
-                ></button>
+              <div className='config-item'>
+                <span className=''>{_('Border Color')}</span>
+                <div className='flex gap-4'>
+                  <button
+                    className={`btn btn-circle btn-sm bg-red-300 hover:bg-red-500 ${borderColor === 'red' ? 'btn-active !bg-red-500' : ''}`}
+                    onClick={() => setBorderColor('red')}
+                  ></button>
 
-                <button
-                  className={`btn btn-circle btn-sm bg-black/50 hover:bg-black ${borderColor === 'black' ? 'btn-active !bg-black' : ''}`}
-                  onClick={() => setBorderColor('black')}
-                ></button>
+                  <button
+                    className={`btn btn-circle btn-sm bg-black/50 hover:bg-black ${borderColor === 'black' ? 'btn-active !bg-black' : ''}`}
+                    onClick={() => setBorderColor('black')}
+                  ></button>
+                </div>
               </div>
             </div>
           </div>
-        </>
+        </div>
       )}
 
       <div className='w-full'>
@@ -345,7 +311,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <div className='card bg-base-100 border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
-              className='config-item-top'
               label={_('Paragraph Margin')}
               value={paragraphMargin}
               onChange={setParagraphMargin}
@@ -361,21 +326,23 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               max={3.0}
               step={0.1}
             />
-            <NumberInput
-              label={_('Word Spacing')}
-              value={wordSpacing}
-              onChange={setWordSpacing}
-              min={-4}
-              max={8}
-              step={0.5}
-            />
+            {langCode !== 'zh' && (
+              <NumberInput
+                label={_('Word Spacing')}
+                value={wordSpacing}
+                onChange={setWordSpacing}
+                min={-4}
+                max={8}
+                step={0.5}
+              />
+            )}
             <NumberInput
               label={_('Letter Spacing')}
               value={letterSpacing}
               onChange={setLetterSpacing}
               min={-2}
               max={4}
-              step={0.1}
+              step={0.5}
             />
             <NumberInput
               label={_('Text Indent')}
@@ -385,7 +352,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               max={4}
               step={1}
             />
-            <div className='config-item config-item-bottom'>
+            <div className='config-item'>
               <span className=''>{_('Full Justification')}</span>
               <input
                 type='checkbox'
@@ -394,7 +361,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onChange={() => setFullJustification(!fullJustification)}
               />
             </div>
-            <div className='config-item config-item-bottom'>
+            <div className='config-item'>
               <span className=''>{_('Hyphenation')}</span>
               <input
                 type='checkbox'
@@ -403,7 +370,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onChange={() => setHyphenation(!hyphenation)}
               />
             </div>
-            <div className='config-item config-item-bottom'>
+            <div className='config-item'>
               <span className=''>{_('Override Book Layout')}</span>
               <input
                 type='checkbox'
@@ -420,12 +387,29 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <h2 className='mb-2 font-medium'>{_('Page')}</h2>
         <div className='card bg-base-100 border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
+            <div className='config-item'>
+              <span className=''>{_('Show Header')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={showHeader}
+                onChange={() => setShowHeader(!showHeader)}
+              />
+            </div>
+            <div className='config-item'>
+              <span className=''>{_('Show Footer')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={showFooter}
+                onChange={() => setShowFooter(!showFooter)}
+              />
+            </div>
             <NumberInput
-              className='config-item-top'
               label={_('Vertical Margins (px)')}
               value={marginPx}
               onChange={setMarginPx}
-              min={0}
+              min={!viewSettings.vertical && (showFooter || showHeader) ? 44 : 0}
               max={88}
               step={4}
             />
@@ -433,7 +417,11 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               label={_('Horizontal Margins (%)')}
               value={gapPercent}
               onChange={setGapPercent}
-              min={viewSettings.vertical ? 2 : 0}
+              min={
+                viewSettings.vertical && (showFooter || showHeader)
+                  ? Math.ceil(4800 / window.innerWidth)
+                  : 0
+              }
               max={30}
             />
             <NumberInput

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -1,14 +1,20 @@
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import i18n from 'i18next';
+import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { getStyles } from '@/utils/style';
+import { saveViewSettings } from '../../utils/viewSettingsHelper';
+import { TRANSLATED_LANGS } from '@/services/constants';
 import cssbeautify from 'cssbeautify';
 import cssValidate from '@/utils/css';
+import DropDown from './DropDown';
 
 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
+  const { envConfig, appService } = useEnv();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
@@ -20,6 +26,9 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const [inputFocusInAndroid, setInputFocusInAndroid] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
   const handleUserStylesheetChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const cssInput = e.target.value;
     setDraftStylesheet(cssInput);
@@ -66,13 +75,51 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     e.nativeEvent.stopImmediatePropagation();
   };
 
-  useEffect(() => {
-    viewSettings.animated = animated;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.animated = animated;
-      setSettings(settings);
+  const handleInputFocus = () => {
+    if (appService?.isAndroidApp) {
+      setInputFocusInAndroid(true);
     }
+    setTimeout(() => {
+      textareaRef.current?.scrollIntoView({
+        behavior: 'instant',
+        block: 'center',
+      });
+    }, 300);
+  };
+
+  const handleInputBlur = () => {
+    if (appService?.isAndroidApp) {
+      setInputFocusInAndroid(false);
+    }
+  };
+
+  const getCurrentUILangOption = () => {
+    const uiLanguage = viewSettings.uiLanguage;
+    return {
+      option: uiLanguage,
+      label:
+        uiLanguage === ''
+          ? _('Auto')
+          : TRANSLATED_LANGS[uiLanguage as keyof typeof TRANSLATED_LANGS],
+    };
+  };
+
+  const getUILangOptions = () => {
+    const langs = TRANSLATED_LANGS as Record<string, string>;
+    const options = Object.entries(langs).map(([option, label]) => ({ option, label }));
+    options.sort((a, b) => a.label.localeCompare(b.label));
+    options.unshift({ option: '', label: _('Auto') });
+    return options;
+  };
+
+  const handleSelectUILang = (option: string) => {
+    viewSettings.uiLanguage = option;
+    saveViewSettings(envConfig, bookKey, 'uiLanguage', option);
+    i18n.changeLanguage(option ? option : navigator.language);
+  };
+
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'animated', animated);
     if (animated) {
       getView(bookKey)?.renderer.setAttribute('animated', '');
     } else {
@@ -82,32 +129,40 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   }, [animated]);
 
   useEffect(() => {
-    viewSettings.disableClick = isDisableClick;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.disableClick = isDisableClick;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'disableClick', isDisableClick);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDisableClick]);
 
   useEffect(() => {
-    viewSettings.continuousScroll = isContinuousScroll;
-    setViewSettings(bookKey, viewSettings);
-    if (isFontLayoutSettingsGlobal) {
-      settings.globalViewSettings.continuousScroll = isContinuousScroll;
-      setSettings(settings);
-    }
+    saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isContinuousScroll]);
 
   return (
-    <div className='my-4 w-full space-y-6'>
+    <div
+      className={clsx('my-4 w-full space-y-6', inputFocusInAndroid && 'h-[50%] overflow-y-auto')}
+    >
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Language')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
+          <div className='divide-base-200 divide-y'>
+            <div className='config-item'>
+              <span className=''>{_('Language')}</span>
+              <DropDown
+                selected={getCurrentUILangOption()}
+                options={getUILangOptions()}
+                onSelect={handleSelectUILang}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Animation')}</h2>
         <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-base-200 divide-y'>
-            <div className='config-item config-item-top config-item-bottom'>
+            <div className='config-item'>
               <span className=''>{_('Paging Animation')}</span>
               <input
                 type='checkbox'
@@ -124,7 +179,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
         <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-base-200 divide-y'>
-            <div className='config-item config-item-top'>
+            <div className='config-item'>
               <span className=''>{_('Continuous Scroll')}</span>
               <input
                 type='checkbox'
@@ -133,7 +188,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onChange={() => setIsContinuousScroll(!isContinuousScroll)}
               />
             </div>
-            <div className='config-item config-item-bottom'>
+            <div className='config-item'>
               <span className=''>{_('Disable Click-to-Flip')}</span>
               <input
                 type='checkbox'
@@ -153,6 +208,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         >
           <div className='relative p-1'>
             <textarea
+              ref={textareaRef}
               className={clsx(
                 'textarea textarea-ghost h-48 w-full border-0 p-3 text-base !outline-none sm:text-sm',
                 'placeholder:text-base-content/70',
@@ -160,6 +216,8 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               placeholder={_('Enter your custom CSS here...')}
               spellCheck='false'
               value={draftStylesheet}
+              onFocus={handleInputFocus}
+              onBlur={handleInputBlur}
               onInput={handleInput}
               onKeyDown={handleInput}
               onKeyUp={handleInput}

apps/readest-app/src/app/reader/components/settings/NumberInput.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FiMinus, FiPlus } from 'react-icons/fi';
 
 interface NumberInputProps {
@@ -26,6 +26,10 @@ const NumberInput: React.FC<NumberInputProps> = ({
   const [localValue, setLocalValue] = useState(value);
   const numberStep = step || 1;
 
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
 

apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx

@@ -28,7 +28,9 @@ type TabConfig = {
 
 const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ bookKey }) => {
   const _ = useTranslation();
-  const [activePanel, setActivePanel] = useState<SettingsPanelType>('Font');
+  const [activePanel, setActivePanel] = useState<SettingsPanelType>(
+    (localStorage.getItem('lastConfigPanel') || 'Font') as SettingsPanelType,
+  );
   const { setFontLayoutSettingsDialogOpen } = useSettingsStore();
 
   const tabConfig = [
@@ -54,6 +56,11 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
     },
   ] as TabConfig[];
 
+  const handleSetActivePanel = (tab: SettingsPanelType) => {
+    setActivePanel(tab);
+    localStorage.setItem('lastConfigPanel', tab);
+  };
+
   const handleClose = () => {
     setFontLayoutSettingsDialogOpen(false);
   };
@@ -65,6 +72,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
         onClose={handleClose}
         className='modal-open'
         boxClassName='sm:min-w-[520px]'
+        snapHeight={window.innerWidth < 640 ? 0.7 : undefined}
         header={
           <div className='flex w-full items-center justify-between'>
             <button
@@ -76,7 +84,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
             >
               <MdArrowBackIosNew />
             </button>
-            <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center pl-4 gap-2'>
+            <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center gap-2 pl-4'>
               {tabConfig.map(({ tab, icon: Icon, label }) => (
                 <button
                   key={tab}
@@ -84,7 +92,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
                     'btn btn-ghost text-base-content btn-sm',
                     activePanel === tab ? 'btn-active' : '',
                   )}
-                  onClick={() => setActivePanel(tab)}
+                  onClick={() => handleSetActivePanel(tab)}
                 >
                   <Icon className='mr-0' />
                   {window.innerWidth >= 500 ? label : ''}

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

@@ -5,8 +5,10 @@ import Image from 'next/image';
 import MenuItem from '@/components/MenuItem';
 import { setAboutDialogVisible } from '@/components/AboutWindow';
 import { useLibraryStore } from '@/store/libraryStore';
+import { useSidebarStore } from '@/store/sidebarStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { isWebAppPlatform } from '@/services/environment';
+import { eventDispatcher } from '@/utils/event';
 import { DOWNLOAD_READEST_URL } from '@/services/constants';
 import useBooksManager from '../../hooks/useBooksManager';
 
@@ -19,6 +21,8 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
   const _ = useTranslation();
   const { getVisibleLibrary } = useLibraryStore();
   const { openParallelView } = useBooksManager();
+  const { sideBarBookKey } = useSidebarStore();
+
   const handleParallelView = (id: string) => {
     openParallelView(id);
     setIsDropdownOpen?.(false);
@@ -35,6 +39,10 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
     window.open(DOWNLOAD_READEST_URL, '_blank');
     setIsDropdownOpen?.(false);
   };
+  const handleExportAnnotations = () => {
+    eventDispatcher.dispatch('export-annotations', { bookKey: sideBarBookKey });
+    setIsDropdownOpen?.(false);
+  };
 
   const isWebApp = isWebAppPlatform();
 
@@ -49,6 +57,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
       <MenuItem label={_('Parallel Read')} noIcon>
         <ul className='max-h-60 overflow-y-auto'>
           {getVisibleLibrary()
+            .filter((book) => book.format !== 'PDF' && book.format !== 'CBZ')
             .slice(0, 20)
             .map((book) => (
               <MenuItem
@@ -72,6 +81,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
             ))}
         </ul>
       </MenuItem>
+      <MenuItem label={_('Export Annotations')} noIcon onClick={handleExportAnnotations} />
       <MenuItem label={_('Reload Page')} noIcon shortcut='Shift+R' onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />
       {isWebApp && <MenuItem label={_('Download Readest')} noIcon onClick={downloadReadest} />}

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

@@ -4,16 +4,9 @@ import * as CFI from 'foliate-js/epubcfi.js';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { findTocItemBS } from '@/utils/toc';
 import { TOCItem } from '@/libs/document';
-import { BookNote, BookNoteType } from '@/types/book';
+import { BooknoteGroup, BookNoteType } from '@/types/book';
 import BooknoteItem from './BooknoteItem';
 
-interface BooknoteGroup {
-  id: number;
-  href: string;
-  label: string;
-  booknotes: BookNote[];
-}
-
 const BooknoteView: React.FC<{
   type: BookNoteType;
   bookKey: string;

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

@@ -38,7 +38,10 @@ const SidebarHeader: React.FC<{
         >
           <MdArrowBackIosNew size={iconSize22} />
         </button>
-        <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
+        <button
+          className='btn btn-ghost hidden h-8 min-h-8 w-8 p-0 sm:flex'
+          onClick={onGoToLibrary}
+        >
           <GiBookshelf className='fill-base-content' />
         </button>
       </div>

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

@@ -68,7 +68,7 @@ const TOCItemView: React.FC<{
         aria-selected={isActive ? 'true' : 'false'}
         data-href={item.href ? getContentMd5(item.href) : undefined}
         className={`flex w-full cursor-pointer items-center rounded-md py-2 ${
-          isActive ? 'bg-base-300/85 hover:bg-base-300' : 'hover:bg-base-300/85'
+          isActive ? 'bg-base-300/85 hover:bg-base-300' : 'sm:hover:bg-base-300/85'
         }`}
       >
         {item.subitems && (

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

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-import { MdToc, MdEditNote, MdBookmarkBorder } from 'react-icons/md';
+import { MdBookmarkBorder as BookmarkIcon } from 'react-icons/md';
+import { IoIosList as TOCIcon } from 'react-icons/io';
+import { PiNotePencil as NoteIcon } from 'react-icons/pi';
 
 import { useTranslation } from '@/hooks/useTranslation';
 
@@ -34,13 +36,13 @@ const TabNavigation: React.FC<{
             tab === 'toc' ? _('TOC') : tab === 'annotations' ? _('Annotate') : _('Bookmark')
           }
         >
-          <div className={clsx('')} onClick={() => onTabChange(tab)}>
+          <div className={clsx('flex h-6 items-center')} onClick={() => onTabChange(tab)}>
             {tab === 'toc' ? (
-              <MdToc className='mx-auto' />
+              <TOCIcon className='mx-auto' />
             ) : tab === 'annotations' ? (
-              <MdEditNote className='mx-auto' />
+              <NoteIcon className='mx-auto' />
             ) : (
-              <MdBookmarkBorder className='mx-auto' />
+              <BookmarkIcon className='mx-auto' />
             )}
           </div>
         </div>

apps/readest-app/src/app/reader/hooks/useIframeEvents.ts

@@ -137,7 +137,11 @@ export const useTouchEvent = (
     if (hoveredBookKey && touchEnd) {
       const deltaY = touchEnd.screenY - touchStart.screenY;
       const deltaX = touchEnd.screenX - touchStart.screenX;
-      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
+      if (!viewSettings!.scrolled && !viewSettings!.vertical) {
+        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
+          setHoveredBookKey(null);
+        }
+      } else {
         setHoveredBookKey(null);
       }
     }
@@ -161,8 +165,10 @@ export const useTouchEvent = (
         Math.abs(deltaY) > Math.abs(deltaX) &&
         Math.abs(deltaX) < windowWidth * 0.3
       ) {
-        // swipe up to toggle the header bar and the footer bar
-        setHoveredBookKey(hoveredBookKey ? null : bookKey);
+        // swipe up to toggle the header bar and the footer bar, only for horizontal page mode
+        if (!viewSettings!.scrolled && !viewSettings!.vertical) {
+          setHoveredBookKey(hoveredBookKey ? null : bookKey);
+        }
       } else {
         if (hoveredBookKey) {
           setHoveredBookKey(null);
@@ -187,15 +193,10 @@ export const useTouchEvent = (
   };
 
   useEffect(() => {
-    // swipe touch is not compatible with scrolled mode, so only enable it in page mode
-    if (!viewSettings!.scrolled) {
-      window.addEventListener('message', handleTouch);
-      return () => {
-        window.removeEventListener('message', handleTouch);
-      };
-    } else {
-      return () => {};
-    }
+    window.addEventListener('message', handleTouch);
+    return () => {
+      window.removeEventListener('message', handleTouch);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hoveredBookKey, viewRef]);
 };

apps/readest-app/src/app/reader/utils/viewSettingsHelper.ts

@@ -0,0 +1,29 @@
+import { ViewSettings } from '@/types/book';
+import { EnvConfigType } from '@/services/environment';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { useReaderStore } from '@/store/readerStore';
+import { useSettingsStore } from '@/store/settingsStore';
+
+export const saveViewSettings = async <K extends keyof ViewSettings>(
+  envConfig: EnvConfigType,
+  bookKey: string,
+  key: K,
+  value: ViewSettings[K],
+  skipGlobal?: boolean,
+) => {
+  const { settings, isFontLayoutSettingsGlobal, setSettings, saveSettings } =
+    useSettingsStore.getState();
+  const { getViewSettings, setViewSettings } = useReaderStore.getState();
+  const { getConfig, saveConfig } = useBookDataStore.getState();
+  const viewSettings = getViewSettings(bookKey)!;
+  const config = getConfig(bookKey)!;
+  viewSettings[key] = value;
+  setViewSettings(bookKey, viewSettings);
+
+  if (isFontLayoutSettingsGlobal && !skipGlobal) {
+    settings.globalViewSettings[key] = value;
+    setSettings(settings);
+  }
+  await saveConfig(envConfig, bookKey, config, settings);
+  await saveSettings(envConfig, settings);
+};

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

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { IoArrowBack } from 'react-icons/io5';
@@ -17,6 +17,7 @@ import { navigateToLibrary } from '@/utils/nav';
 import { deleteUser } from '@/libs/user';
 import { eventDispatcher } from '@/utils/event';
 import { Toast } from '@/components/Toast';
+import WindowButtons from '@/components/WindowButtons';
 import Quota from '@/components/Quota';
 
 const ProfilePage = () => {
@@ -29,6 +30,8 @@ const ProfilePage = () => {
   const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
 
+  const headerRef = useRef<HTMLDivElement>(null);
+
   useTheme();
 
   useEffect(() => {
@@ -154,24 +157,34 @@ const ProfilePage = () => {
   return (
     <div
       className={clsx(
-        'mt-6 flex justify-center',
+        'bg-base-100 border-base-200 flex h-dvh w-full select-none flex-col items-center border',
         appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
-        appService?.hasTrafficLight && 'pt-11',
       )}
     >
-      <button
-        onClick={handleGoBack}
+      <div
+        ref={headerRef}
         className={clsx(
-          'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
-          appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
-          appService?.hasTrafficLight && 'top-11',
+          'flex w-full items-center justify-between py-2 pe-6 ps-4',
+          appService?.hasTrafficLight && 'pt-11',
         )}
       >
-        <IoArrowBack className='text-base-content' />
-      </button>
-      <div className='w-full max-w-4xl px-6 py-10'>
+        <button onClick={handleGoBack} className={clsx('btn btn-ghost h-8 min-h-8 w-8 p-0')}>
+          <IoArrowBack className='text-base-content' />
+        </button>
+
+        {appService?.hasWindowBar && (
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={appService?.hasWindowBar}
+            showMaximize={appService?.hasWindowBar}
+            showClose={appService?.hasWindowBar}
+            onClose={handleGoBack}
+          />
+        )}
+      </div>
+      <div className='w-full max-w-4xl px-4 py-10'>
         <div className='bg-base-200 overflow-hidden rounded-lg p-2 shadow-md sm:p-6'>
-          <div className='p-6'>
+          <div className='p-2 sm:p-6'>
             <div className='mb-8 flex flex-col items-center gap-x-6 gap-y-4 md:flex-row md:items-start'>
               <div className='flex-shrink-0'>
                 {avatarUrl ? (
@@ -202,7 +215,7 @@ const ProfilePage = () => {
               </div>
             </div>
 
-            <div className='bg-base-100 mb-8 rounded-lg p-6'>
+            <div className='bg-base-100 mb-8 rounded-lg px-4 py-6'>
               <h3 className='text-base-content mb-2 text-lg font-semibold'>{_('Features')}</h3>
               <div className='mt-6'>
                 <ul className='text-base-content/60 grid grid-cols-1 gap-2 md:grid-cols-2'>

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

@@ -7,11 +7,13 @@ import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { impactFeedback } from '@tauri-apps/plugin-haptics';
 
 const VELOCITY_THRESHOLD = 0.5;
+const SNAP_THRESHOLD = 0.2;
 
 interface DialogProps {
   id?: string;
   isOpen: boolean;
   children: ReactNode;
+  snapHeight?: number;
   header?: ReactNode;
   title?: string;
   className?: string;
@@ -25,6 +27,7 @@ const Dialog: React.FC<DialogProps> = ({
   id,
   isOpen,
   children,
+  snapHeight,
   header,
   title,
   className,
@@ -34,6 +37,7 @@ const Dialog: React.FC<DialogProps> = ({
   onClose,
 }) => {
   const { appService } = useEnv();
+  const [isFullHeightInMobile, setIsFullHeightInMobile] = React.useState(!snapHeight);
   const iconSize22 = useResponsiveSize(22);
   const isMobile = window.innerWidth < 640;
 
@@ -61,9 +65,12 @@ const Dialog: React.FC<DialogProps> = ({
     const newTop = Math.max(0.0, Math.min(1, heightFraction));
 
     if (modal && overlay) {
-      modal.style.transition = '';
+      modal.style.height = '100%';
       modal.style.transform = `translateY(${newTop * 100}%)`;
       overlay.style.opacity = `${1 - heightFraction}`;
+
+      setIsFullHeightInMobile(data.clientY < 44);
+      modal.style.transition = `padding-top 0.3s ease-out`;
     }
   };
 
@@ -72,11 +79,14 @@ const Dialog: React.FC<DialogProps> = ({
     const overlay = document.querySelector('.overlay') as HTMLElement;
     if (!modal || !overlay) return;
 
+    const snapUpper = snapHeight ? 1 - snapHeight - SNAP_THRESHOLD : 0.5;
+    const snapLower = snapHeight ? 1 - snapHeight + SNAP_THRESHOLD : 0.5;
     if (
       data.velocity > VELOCITY_THRESHOLD ||
-      (data.velocity >= 0 && data.clientY >= window.innerHeight * 0.5)
+      (data.velocity >= 0 && data.clientY >= window.innerHeight * snapLower)
     ) {
       const transitionDuration = 0.15 / Math.max(data.velocity, 0.5);
+      modal.style.height = '100%';
       modal.style.transition = `transform ${transitionDuration}s ease-out`;
       modal.style.transform = 'translateY(100%)';
       overlay.style.transition = `opacity ${transitionDuration}s ease-out`;
@@ -88,7 +98,22 @@ const Dialog: React.FC<DialogProps> = ({
       if (appService?.hasHaptics) {
         impactFeedback('medium');
       }
+    } else if (
+      snapHeight &&
+      data.clientY > window.innerHeight * snapUpper &&
+      data.clientY < window.innerHeight * snapLower
+    ) {
+      modal.style.transition = `transform 0.3s ease-out`;
+      modal.style.transform = `translateY(${(1 - snapHeight) * window.innerHeight}px)`;
+      setTimeout(() => {
+        modal.style.height = `${snapHeight * 100}%`;
+      }, 100);
+      if (appService?.hasHaptics) {
+        impactFeedback('medium');
+      }
     } else {
+      setIsFullHeightInMobile(true);
+      modal.style.height = '100%';
       modal.style.transition = `transform 0.3s ease-out`;
       modal.style.transform = `translateY(0%)`;
       overlay.style.opacity = '0';
@@ -104,9 +129,15 @@ const Dialog: React.FC<DialogProps> = ({
     <dialog
       id={id ?? 'dialog'}
       open={isOpen}
-      className={clsx('modal sm:min-w-90 z-50 h-full w-full !bg-transparent sm:w-full', className)}
+      className={clsx(
+        'modal sm:min-w-90 z-50 h-full w-full !items-start !bg-transparent sm:w-full sm:!items-center',
+        className,
+      )}
     >
-      <div className={clsx('overlay fixed inset-0 z-10 bg-black/50 sm:bg-black/20', bgClassName)} />
+      <div
+        className={clsx('overlay fixed inset-0 z-10 bg-black/50 sm:bg-black/20', bgClassName)}
+        onClick={onClose}
+      />
       <div
         className={clsx(
           'modal-box settings-content z-20 flex flex-col rounded-none rounded-tl-2xl rounded-tr-2xl p-0 sm:rounded-2xl',
@@ -114,9 +145,19 @@ const Dialog: React.FC<DialogProps> = ({
           window.innerWidth < window.innerHeight
             ? 'sm:h-[50%] sm:w-3/4'
             : 'sm:h-[65%] sm:w-1/2 sm:max-w-[600px]',
-          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)] sm:pt-0',
+          appService?.hasSafeAreaInset &&
+            isFullHeightInMobile &&
+            'pt-[env(safe-area-inset-top)] sm:pt-0',
           boxClassName,
         )}
+        style={
+          snapHeight
+            ? {
+                height: `${snapHeight * 100}%`,
+                transform: `translateY(${(1 - snapHeight) * window.innerHeight}px)`,
+              }
+            : {}
+        }
       >
         {window.innerWidth < 640 && (
           <div

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

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+
+interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  initialValue?: number;
+  heightPx?: number;
+  minLabel?: string;
+  maxLabel?: string;
+  bubbleElement?: React.ReactNode;
+  bubbleLabel?: string;
+  className?: string;
+  minClassName?: string;
+  maxClassName?: string;
+  bubbleClassName?: string;
+  onChange?: (value: number) => void;
+}
+
+const Slider: React.FC<SliderProps> = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  initialValue = 50,
+  heightPx = 40,
+  minLabel = '',
+  maxLabel = '',
+  bubbleElement,
+  bubbleLabel = '',
+  className = '',
+  minClassName = '',
+  maxClassName = '',
+  bubbleClassName = '',
+  onChange,
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleChange = (e: React.ChangeEvent) => {
+    const newValue = parseInt((e.target as HTMLInputElement).value, 10);
+    setValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div className={`slider bg-base-200 mx-auto w-full max-w-md rounded-xl ${className}`}>
+      <div className='relative' style={{ height: `${heightPx}px` }}>
+        <div className='bg-base-300/40 absolute h-full w-full rounded-full'></div>
+        <div
+          className='bg-base-300 absolute h-full rounded-full'
+          style={{ width: percentage > 0 ? `calc(${percentage}% + ${heightPx / 2}px)` : '0px' }}
+        ></div>
+        <div className='absolute inset-0 flex items-center justify-between px-4 text-sm'>
+          <span className={`ml-2 ${minClassName}`}>{minLabel}</span>
+          <span className={`mr-2 ${maxClassName}`}>{maxLabel}</span>
+        </div>
+        <div
+          className='pointer-events-none absolute top-0 z-10'
+          style={{
+            left: `max(${heightPx / 2}px, calc(${percentage}%))`,
+            transform: 'translateX(calc(-50%))',
+            height: '100%',
+          }}
+        >
+          <div
+            className={`bg-base-200 flex h-full items-center justify-center rounded-full text-sm shadow-md ${bubbleClassName}`}
+            style={{ width: `${heightPx}px` }}
+          >
+            {bubbleElement || bubbleLabel}
+          </div>
+        </div>
+        <input
+          type='range'
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          className='absolute inset-0 h-full w-full cursor-pointer opacity-0'
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Slider;

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

@@ -64,8 +64,8 @@ export const Toast = () => {
         >
           <span
             className={clsx(
-              'max-h-[50vh] min-w-[30vw] max-w-80',
-              'overflow-scroll whitespace-normal break-words text-center',
+              'max-h-[50vh] min-w-32 max-w-80',
+              'overflow-y-auto whitespace-normal break-words text-center',
               messageClass.current,
             )}
           >

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

@@ -15,7 +15,7 @@ export const useTheme = () => {
 
   useEffect(() => {
     const colorScheme = isDarkMode ? 'dark' : 'light';
-    document.documentElement.style.setProperty('color-scheme', colorScheme);
     document.documentElement.setAttribute('data-theme', `${themeColor}-${colorScheme}`);
+    document.documentElement.style.setProperty('color-scheme', colorScheme);
   }, [themeColor, isDarkMode]);
 };

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

@@ -12,7 +12,7 @@ export const useUICSS = (bookKey: string, viewSettings: ViewSettings) => {
       styleElement.remove();
     }
 
-    const rawCSS = viewSettings.userStylesheet;
+    const rawCSS = viewSettings.userStylesheet || '';
     const newStyleEl = document.createElement('style');
     newStyleEl.textContent = rawCSS.replace('foliate-view', `#foliate-view-${bookKey}`);
     document.head.appendChild(newStyleEl);

apps/readest-app/src/libs/document.ts

@@ -99,6 +99,31 @@ export class DocumentLoader {
   }
 
   private async makeZipLoader() {
+    const getComment = async (): Promise<string | null> => {
+      const EOCD_SIGNATURE = [0x50, 0x4b, 0x05, 0x06];
+      const maxEOCDSearch = 1024 * 64;
+
+      const sliceSize = Math.min(maxEOCDSearch, this.file.size);
+      const tail = await this.file.slice(this.file.size - sliceSize, this.file.size).arrayBuffer();
+      const bytes = new Uint8Array(tail);
+
+      for (let i = bytes.length - 22; i >= 0; i--) {
+        if (
+          bytes[i] === EOCD_SIGNATURE[0] &&
+          bytes[i + 1] === EOCD_SIGNATURE[1] &&
+          bytes[i + 2] === EOCD_SIGNATURE[2] &&
+          bytes[i + 3] === EOCD_SIGNATURE[3]
+        ) {
+          const commentLength = bytes[i + 20]! + (bytes[i + 21]! << 8);
+          const commentStart = i + 22;
+          const commentBytes = bytes.slice(commentStart, commentStart + commentLength);
+          return new TextDecoder().decode(commentBytes);
+        }
+      }
+
+      return null;
+    };
+
     const { configure, ZipReader, BlobReader, TextWriter, BlobWriter } = await import(
       '@zip.js/zip.js'
     );
@@ -120,7 +145,7 @@ export class DocumentLoader {
     );
     const getSize = (name: string) => map.get(name)?.uncompressedSize ?? 0;
 
-    return { entries, loadText, loadBlob, getSize, sha1: undefined };
+    return { entries, loadText, loadBlob, getSize, getComment, sha1: undefined };
   }
 
   private isCBZ(): boolean {
@@ -155,7 +180,7 @@ export class DocumentLoader {
 
       if (this.isCBZ()) {
         const { makeComicBook } = await import('foliate-js/comic-book.js');
-        book = makeComicBook(loader, this.file);
+        book = await makeComicBook(loader, this.file);
         format = 'CBZ';
       } else if (this.isFBZ()) {
         const entry = entries.find((entry) => entry.filename.endsWith(`.${EXTS.FB2}`));

apps/readest-app/src/pages/api/storage/delete.ts

@@ -2,8 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { corsAllMethods, runMiddleware } from '@/utils/cors';
 import { createSupabaseClient } from '@/utils/supabase';
 import { validateUserAndToken } from '@/utils/access';
-import { DeleteObjectCommand } from '@aws-sdk/client-s3';
-import { s3Client } from '@/utils/s3';
+import { deleteObject } from '@/utils/r2';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   await runMiddleware(req, res, corsAllMethods);
@@ -41,13 +40,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       return res.status(403).json({ error: 'Unauthorized access to the file' });
     }
 
-    const deleteCommand = new DeleteObjectCommand({
-      Bucket: process.env['R2_BUCKET_NAME'] || '',
-      Key: fileKey,
-    });
-
     try {
-      await s3Client.send(deleteCommand);
+      await deleteObject(process.env['R2_BUCKET_NAME'] || '', fileKey);
       const { error: deleteError } = await supabase.from('files').delete().eq('id', fileRecord.id);
 
       if (deleteError) {

apps/readest-app/src/pages/api/storage/download.ts

@@ -1,9 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { supabase, createSupabaseClient } from '@/utils/supabase';
 import { corsAllMethods, runMiddleware } from '@/utils/cors';
-import { GetObjectCommand } from '@aws-sdk/client-s3';
-import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
-import { s3Client } from '@/utils/s3';
+import { getDownloadSignedUrl } from '@/utils/r2';
 
 const getUserAndToken = async (authHeader: string | undefined) => {
   if (!authHeader) return {};
@@ -56,15 +54,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       return res.status(403).json({ error: 'Unauthorized access to the file' });
     }
 
-    const getCommand = new GetObjectCommand({
-      Bucket: process.env['R2_BUCKET_NAME'] || '',
-      Key: fileKey,
-    });
-
     try {
-      const downloadUrl = await getSignedUrl(s3Client, getCommand, {
-        expiresIn: 1800,
-      });
+      const bucketName = process.env['R2_BUCKET_NAME'] || '';
+      const downloadUrl = await getDownloadSignedUrl(bucketName, fileKey, 1800);
 
       res.status(200).json({
         downloadUrl,

apps/readest-app/src/pages/api/storage/upload.ts

@@ -1,10 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { supabase, createSupabaseClient } from '@/utils/supabase';
 import { corsAllMethods, runMiddleware } from '@/utils/cors';
-import { PutObjectCommand } from '@aws-sdk/client-s3';
-import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { getStoragePlanData } from '@/utils/access';
-import { s3Client } from '@/utils/s3';
+import { getUploadSignedUrl } from '@/utils/r2';
 
 const getUserAndToken = async (authHeader: string | undefined) => {
   if (!authHeader) return {};
@@ -75,19 +73,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       if (insertError) return res.status(500).json({ error: insertError.message });
     }
 
-    const signableHeaders = new Set<string>();
-    signableHeaders.add('content-length');
-    const putCommand = new PutObjectCommand({
-      Bucket: process.env['R2_BUCKET_NAME'] || '',
-      Key: objectKey,
-      ContentLength: objSize,
-    });
-
     try {
-      const uploadUrl = await getSignedUrl(s3Client, putCommand, {
-        expiresIn: 1800,
-        signableHeaders,
-      });
+      const uploadUrl = await getUploadSignedUrl(
+        process.env['R2_BUCKET_NAME'] || '',
+        objectKey,
+        objSize,
+        1800,
+      );
 
       res.status(200).json({
         uploadUrl,

apps/readest-app/src/services/appService.ts

@@ -36,6 +36,7 @@ import { getOSPlatform, isCJKEnv, isValidURL } from '@/utils/misc';
 import { deserializeConfig, serializeConfig } from '@/utils/serializer';
 import { downloadFile, uploadFile, deleteFile, createProgressHandler } from '@/libs/storage';
 import { ProgressHandler } from '@/utils/transfer';
+import { TxtToEpubConverter } from '@/utils/txt';
 import { BOOK_FILE_NOT_FOUND_ERROR } from './errors';
 
 export abstract class BaseAppService implements AppService {
@@ -48,6 +49,7 @@ export abstract class BaseAppService implements AppService {
   abstract isAndroidApp: boolean;
   abstract isIOSApp: boolean;
   abstract hasTrafficLight: boolean;
+  abstract hasWindow: boolean;
   abstract hasWindowBar: boolean;
   abstract hasContextMenu: boolean;
   abstract hasRoundedWindow: boolean;
@@ -125,11 +127,12 @@ export abstract class BaseAppService implements AppService {
   }
 
   async importBook(
-    file: string | File,
+    file: string | File, // file path/url or file object
     books: Book[],
     saveBook: boolean = true,
     saveCover: boolean = true,
     overwrite: boolean = false,
+    transient: boolean = false,
   ): Promise<Book | null> {
     try {
       let loadedBook: BookDoc;
@@ -145,6 +148,10 @@ export abstract class BaseAppService implements AppService {
           filename = file.name;
           fileobj = file;
         }
+        if (filename.endsWith('.txt')) {
+          const txt2epub = new TxtToEpubConverter();
+          ({ file: fileobj } = await txt2epub.convert({ file: fileobj }));
+        }
         ({ book: loadedBook, format } = await new DocumentLoader(fileobj).open());
         if (!loadedBook.metadata.title) {
           loadedBook.metadata.title = getBaseFilename(filename);
@@ -157,7 +164,7 @@ export abstract class BaseAppService implements AppService {
       const hash = await partialMD5(fileobj);
       const existingBook = books.filter((b) => b.hash === hash)[0];
       if (existingBook) {
-        if (existingBook.deletedAt) {
+        if (!transient) {
           existingBook.deletedAt = null;
         }
         existingBook.updatedAt = Date.now();
@@ -170,6 +177,7 @@ export abstract class BaseAppService implements AppService {
         author: formatAuthors(loadedBook.metadata.author, loadedBook.metadata.language),
         createdAt: existingBook ? existingBook.createdAt : Date.now(),
         uploadedAt: existingBook ? existingBook.uploadedAt : null,
+        deletedAt: transient ? Date.now() : null,
         downloadedAt: Date.now(),
         updatedAt: Date.now(),
       };
@@ -177,7 +185,7 @@ export abstract class BaseAppService implements AppService {
         await this.fs.createDir(getDir(book), 'Books');
       }
       if (saveBook && (!(await this.fs.exists(getFilename(book), 'Books')) || overwrite)) {
-        if (typeof file === 'string' && !isValidURL(file)) {
+        if (typeof file === 'string' && !isValidURL(file) && !filename.endsWith('.txt')) {
           await this.fs.copyFile(file, getFilename(book), 'Books');
         } else {
           await this.fs.writeFile(getFilename(book), 'Books', await fileobj.arrayBuffer());
@@ -193,6 +201,9 @@ export abstract class BaseAppService implements AppService {
       if (!existingBook) {
         await this.saveBookConfig(book, INIT_BOOK_CONFIG);
         books.splice(0, 0, book);
+      } else {
+        existingBook.title = book.title;
+        existingBook.author = book.author;
       }
 
       if (typeof file === 'string' && isValidURL(file)) {

apps/readest-app/src/services/constants.ts

@@ -11,11 +11,22 @@ import {
 import { ReadSettings, SystemSettings } from '@/types/settings';
 import { UserStorageQuota } from '@/types/user';
 import { getDefaultMaxBlockSize, getDefaultMaxInlineSize } from '@/utils/config';
+import { stubTranslation as _ } from '@/utils/misc';
 
 export const LOCAL_BOOKS_SUBDIR = 'Readest/Books';
 export const CLOUD_BOOKS_SUBDIR = 'Readest/Books';
 
-export const SUPPORTED_FILE_EXTS = ['epub', 'mobi', 'azw', 'azw3', 'fb2', 'zip', 'cbz', 'pdf'];
+export const SUPPORTED_FILE_EXTS = [
+  'epub',
+  'mobi',
+  'azw',
+  'azw3',
+  'fb2',
+  'zip',
+  'cbz',
+  'pdf',
+  'txt',
+];
 export const FILE_ACCEPT_FORMATS = SUPPORTED_FILE_EXTS.map((ext) => `.${ext}`).join(', ');
 export const BOOK_UNGROUPED_NAME = '';
 export const BOOK_UNGROUPED_ID = '';
@@ -25,6 +36,7 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   autoUpload: true,
   autoCheckUpdates: true,
   screenWakeLock: true,
+  autoImportBooksOnOpen: false,
 
   lastSyncedAtBooks: 0,
   lastSyncedAtConfigs: 0,
@@ -71,8 +83,10 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   writingMode: 'auto',
   vertical: false,
   rtl: false,
-  doubleBorder: true,
+  doubleBorder: false,
   borderColor: 'red',
+  showHeader: true,
+  showFooter: true,
 };
 
 export const DEFAULT_BOOK_STYLE: BookStyle = {
@@ -87,13 +101,14 @@ export const DEFAULT_BOOK_STYLE: BookStyle = {
   invert: false,
   theme: 'light',
   overrideFont: false,
-  overrideLayout: false,
+  overrideLayout: true,
   userStylesheet: '',
 };
 
 export const DEFAULT_MOBILE_VIEW_SETTINGS: Partial<ViewSettings> = {
   fullJustification: false,
   animated: true,
+  defaultFont: 'Sans-serif',
 };
 
 export const DEFAULT_CJK_VIEW_SETTINGS: Partial<ViewSettings> = {
@@ -103,6 +118,7 @@ export const DEFAULT_CJK_VIEW_SETTINGS: Partial<ViewSettings> = {
 
 export const DEFAULT_VIEW_CONFIG: ViewConfig = {
   sideBarTab: 'toc',
+  uiLanguage: '',
 };
 
 export const DEFAULT_TTS_CONFIG: TTSConfig = {
@@ -126,6 +142,7 @@ export const SERIF_FONTS = [
   'Vollkorn',
   'Georgia',
   'Times New Roman',
+  _('LXGW WenKai GB Screen'),
 ];
 
 export const SANS_SERIF_FONTS = ['Roboto', 'Noto Sans', 'Open Sans', 'Helvetica', 'Arial'];
@@ -473,3 +490,25 @@ export const MIGHT_BE_RTL_LANGS = [
   'yi',
   '',
 ];
+
+export const TRANSLATED_LANGS = {
+  en: 'English',
+  fr: 'Français',
+  de: 'Deutsch',
+  it: 'Italiano',
+  ja: '日本語',
+  ko: '한국어',
+  es: 'Español',
+  pt: 'Português',
+  ru: 'Русский',
+  ar: 'العربية',
+  el: 'Ελληνικά',
+  uk: 'Українська',
+  pl: 'Polski',
+  tr: 'Türkçe',
+  hi: 'हिन्दी',
+  id: 'Bahasa Indonesia',
+  vi: 'Tiếng Việt',
+  'zh-CN': '简体中文',
+  'zh-TW': '正體中文',
+};

apps/readest-app/src/services/nativeAppService.ts

@@ -23,6 +23,12 @@ import { isValidURL } from '@/utils/misc';
 import { BaseAppService } from './appService';
 import { LOCAL_BOOKS_SUBDIR } from './constants';
 
+declare global {
+  interface Window {
+    IS_ROUNDED?: boolean;
+  }
+}
+
 const OS_TYPE = osType();
 
 const resolvePath = (fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } => {
@@ -122,9 +128,10 @@ export class NativeAppService extends BaseAppService {
   isAndroidApp = OS_TYPE === 'android';
   isIOSApp = OS_TYPE === 'ios';
   hasTrafficLight = OS_TYPE === 'macos';
+  hasWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
   hasWindowBar = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
   hasContextMenu = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
-  hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
+  hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android') && !!window.IS_ROUNDED;
   hasSafeAreaInset = OS_TYPE === 'ios' || OS_TYPE === 'android';
   hasHaptics = OS_TYPE === 'ios' || OS_TYPE === 'android';
   hasSysFontsList = !(OS_TYPE === 'ios' || OS_TYPE === 'android');

apps/readest-app/src/services/webAppService.ts

@@ -184,6 +184,7 @@ export class WebAppService extends BaseAppService {
   isAndroidApp = false;
   isIOSApp = false;
   hasTrafficLight = false;
+  hasWindow = false;
   hasWindowBar = false;
   hasContextMenu = false;
   hasRoundedWindow = false;

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

@@ -66,6 +66,7 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
     const bookIndex = library.findIndex((b) => b.hash === bookKey.split('-')[0]);
     if (bookIndex == -1) return;
     const book = library.splice(bookIndex, 1)[0]!;
+    book.progress = config.progress;
     book.updatedAt = Date.now();
     library.unshift(book);
     setLibrary(library);

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

@@ -222,7 +222,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
       const viewState = state.viewStates[key];
       if (!viewState || !bookData) return state;
 
-      const progress: [number, number] = [pageinfo.current, pageinfo.total];
+      const progress: [number, number] = [(pageinfo.next ?? pageinfo.current) + 1, pageinfo.total];
 
       // Update library book progress
       const { library, setLibrary } = useLibraryStore.getState();

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

@@ -10,6 +10,7 @@ interface ThemeState {
   systemIsDarkMode: boolean;
   themeCode: ThemeCode;
   isDarkMode: boolean;
+  getIsDarkMode: () => boolean;
   setThemeMode: (mode: ThemeMode) => void;
   setThemeColor: (color: string) => void;
   updateAppTheme: (color: keyof Palette) => void;
@@ -61,6 +62,7 @@ export const useThemeStore = create<ThemeState>((set, get) => {
     systemIsDarkMode,
     isDarkMode,
     themeCode,
+    getIsDarkMode: () => get().isDarkMode,
     setThemeMode: (mode) => {
       if (typeof window !== 'undefined' && localStorage) {
         localStorage.setItem('themeMode', mode);

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

@@ -191,14 +191,6 @@ foliate-view {
   @apply hover:bg-base-100/50;
 }
 
-.config-item-top {
-  @apply rounded-t-2xl;
-}
-
-.config-item-bottom {
-  @apply rounded-b-2xl;
-}
-
 .collapse-arrow > .collapse-title:after {
   top: var(--top-override, default-value);
   inset-inline-end: var(--end-override, default-value);
@@ -217,7 +209,7 @@ foliate-view {
 }
 
 .scroll-container {
-  overflow-y: scroll;
+  overflow-y: auto;
   scrollbar-width: thin;
   -webkit-overflow-scrolling: touch;
 }

apps/readest-app/src/types/book.ts

@@ -24,7 +24,7 @@ export interface Book {
   downloadedAt?: number | null;
 
   lastUpdated?: number; // deprecated in favor of updatedAt
-  progress?: [number, number]; // Add progress field: [current, total]
+  progress?: [number, number]; // Add progress field: [current, total], 1-based page number
 }
 
 export interface BookGroupType {
@@ -53,6 +53,13 @@ export interface BookNote {
   deletedAt?: number | null;
 }
 
+export interface BooknoteGroup {
+  id: number;
+  href: string;
+  label: string;
+  booknotes: BookNote[];
+}
+
 export type WritingMode = 'auto' | 'horizontal-tb' | 'horizontal-rl' | 'vertical-rl';
 
 export interface BookLayout {
@@ -70,6 +77,8 @@ export interface BookLayout {
   rtl: boolean;
   doubleBorder: boolean;
   borderColor: string;
+  showHeader: boolean;
+  showFooter: boolean;
 }
 
 export interface BookStyle {
@@ -100,6 +109,7 @@ export interface BookFont {
 
 export interface ViewConfig {
   sideBarTab: string;
+  uiLanguage: string;
 }
 
 export interface TTSConfig {
@@ -147,7 +157,7 @@ export interface BookSearchResult {
 
 export interface BookConfig {
   bookHash?: string;
-  progress?: [number, number];
+  progress?: [number, number]; // [current pagenum, total pagenum], 1-based page number
   location?: string;
   booknotes?: BookNote[];
   searchConfig?: Partial<BookSearchConfig>;

apps/readest-app/src/types/settings.ts

@@ -24,6 +24,7 @@ export interface SystemSettings {
   autoUpload: boolean;
   autoCheckUpdates: boolean;
   screenWakeLock: boolean;
+  autoImportBooksOnOpen: boolean;
 
   lastSyncedAtBooks: number;
   lastSyncedAtConfigs: number;

apps/readest-app/src/types/system.ts

@@ -25,6 +25,7 @@ export interface AppService {
   osPlatform: string;
   appPlatform: AppPlatform;
   hasTrafficLight: boolean;
+  hasWindow: boolean;
   hasWindowBar: boolean;
   hasContextMenu: boolean;
   hasRoundedWindow: boolean;
@@ -47,6 +48,7 @@ export interface AppService {
     saveBook?: boolean,
     saveCover?: boolean,
     overwrite?: boolean,
+    transient?: boolean,
   ): Promise<Book | null>;
   deleteBook(book: Book, includingUploaded?: boolean): Promise<void>;
   uploadBook(book: Book, onProgress?: ProgressHandler): Promise<void>;

apps/readest-app/src/types/view.ts

@@ -46,6 +46,7 @@ export interface FoliateView extends HTMLElement {
     prev: () => Promise<void>;
     goTo?: (params: { index: number; anchor: number }) => void;
     setStyles?: (css: string) => void;
+    getContents: () => { doc: Document; index?: number }[];
     addEventListener: (type: string, listener: EventListener) => void;
     removeEventListener: (type: string, listener: EventListener) => void;
   };

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

@@ -18,7 +18,6 @@ export const getSysFontsList = async (): Promise<string[]> => {
     if (FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
       const fonts = await invoke<string[]>('list_fonts');
       cachedSysFonts = [...new Set(fonts.filter((font) => !isSymbolicFontName(font)))].sort();
-      console.log('Fetched font list:', cachedSysFonts);
       return cachedSysFonts;
     } else {
       console.warn(`Unsupported platform: ${osPlatform}`);

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

@@ -0,0 +1,60 @@
+import { AwsClient } from 'aws4fetch';
+
+const getR2Client = () => {
+  return new AwsClient({
+    service: 's3',
+    region: process.env['R2_REGION'] || 'auto',
+    accessKeyId: process.env['R2_ACCESS_KEY_ID']!,
+    secretAccessKey: process.env['R2_SECRET_ACCESS_KEY']!,
+  });
+};
+
+const getR2Url = () => {
+  const R2_ACCOUNT_ID = process.env['R2_ACCOUNT_ID']!;
+  return `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`;
+};
+
+export const getDownloadSignedUrl = async (
+  bucketName: string,
+  fileKey: string,
+  expiresIn: number,
+) => {
+  return (
+    await getR2Client().sign(
+      new Request(`${getR2Url()}/${bucketName}/${fileKey}?X-Amz-Expires=${expiresIn}`),
+      {
+        aws: { signQuery: true },
+      },
+    )
+  ).url.toString();
+};
+
+export const getUploadSignedUrl = async (
+  bucketName: string,
+  fileKey: string,
+  contentLength: number,
+  expiresIn: number,
+) => {
+  return (
+    await getR2Client().sign(
+      new Request(
+        `${getR2Url()}/${bucketName}/${fileKey}?X-Amz-Expires=${expiresIn}&X-Amz-SignedHeaders=content-length`,
+        {
+          method: 'PUT',
+          headers: {
+            'Content-Length': contentLength.toString(),
+          },
+        },
+      ),
+      {
+        aws: { signQuery: true },
+      },
+    )
+  ).url.toString();
+};
+
+export const deleteObject = async (bucketName: string, fileKey: string) => {
+  return await getR2Client().fetch(`${getR2Url()}/${bucketName}/${fileKey}`, {
+    method: 'DELETE',
+  });
+};

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

@@ -76,6 +76,7 @@ const getFontStyles = (
 
 const getAdditionalFontLinks = () => `
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans-webfont@1.0.4/misans-l3/misans-l3/result.min.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-gb-screen@1.0.6/font.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" crossorigin="anonymous">
 `;
 
@@ -137,14 +138,15 @@ const getLayoutStyles = (
   bg: string,
   fg: string,
   primary: string,
+  isDarkMode: boolean,
 ) => `
   @namespace epub "http://www.idpf.org/2007/ops";
   html {
-    color-scheme: light dark;
+    color-scheme: ${isDarkMode ? 'dark' : 'light'};
     color: ${fg};
   }
   a:any-link {
-    color: ${primary} ${bg === '#ffffff' ? '' : '!important'};
+    color: ${primary} ${isDarkMode ? '!important' : ''};
   }
   aside[epub|type~="footnote"] {
     display: none;
@@ -158,6 +160,8 @@ const getLayoutStyles = (
   
   html {
     --theme-bg-color: ${bg};
+    --theme-fg-color: ${fg};
+    --theme-primary-color: ${primary};
     --default-text-align: ${justify ? 'justify' : 'start'};
     hanging-punctuation: allow-end last;
     orphans: 2;
@@ -186,8 +190,8 @@ const getLayoutStyles = (
     background-color: var(--theme-bg-color, transparent);
     background: var(--background-set, none);
   }
-  body *:not(a):not(#b1):not(#b1 *):not(#b2):not(#b2 *):not(.bg):not(.bg *):not(.vol):not(.vol *):not(.background):not(.background *) {
-    ${bg === '#ffffff' ? '' : `background-color: ${bg} !important;`}
+  body *:not(a):not(#b1):not(#b1 *):not(#b2):not(#b2 *):not(img):not(.bg):not(.bg *):not(.vol):not(.vol *):not(.background):not(.background *) {
+    ${isDarkMode ? `background-color: ${bg} !important;` : ''}
   }
   body {
     overflow: unset;
@@ -197,12 +201,12 @@ const getLayoutStyles = (
     background-color: transparent !important;
   }
   p, li, blockquote, dd {
-    margin: ${vertical ? `0 ${paragraphMargin}em` : `${paragraphMargin}em 0`};
+    margin: ${vertical ? `0 ${paragraphMargin}em` : `${paragraphMargin}em 0`} ${overrideLayout ? '!important' : ''};
     line-height: ${lineSpacing} ${overrideLayout ? '!important' : ''};
     word-spacing: ${wordSpacing}px ${overrideLayout ? '!important' : ''};
     letter-spacing: ${letterSpacing}px ${overrideLayout ? '!important' : ''};
     text-indent: ${textIndent}em ${overrideLayout ? '!important' : ''};
-    text-align: inherit;
+    text-align: ${overrideLayout ? 'var(--default-text-align) !important' : 'inherit'};
     -webkit-hyphens: ${hyphenate ? 'auto' : 'manual'};
     hyphens: ${hyphenate ? 'auto' : 'manual'};
     -webkit-hyphenate-limit-before: 3;
@@ -211,6 +215,9 @@ const getLayoutStyles = (
     hanging-punctuation: allow-end last;
     widows: 2;
   }
+  li, p:has(> :is(img, video, font, h1, h2, h3, h4, h5, table)) {
+    text-indent: 0 !important;
+  }
   /* prevent the above from overriding the align attribute */
   [align="left"] { text-align: left; }
   [align="right"] { text-align: right; }
@@ -248,13 +255,22 @@ export const getFootnoteStyles = () => `
     display: block !important;
   }
 
+  body {
+    padding: 1em !important;
+  }
+
+  a:any-link {
+    text-decoration: none;
+  }
+
   ol {
     margin: 0;
     padding: 0;
   }
 
   p, li, blockquote, dd {
-    text-indent: 0;
+    margin: unset !important;
+    text-indent: unset !important;
   }
 `;
 
@@ -263,6 +279,7 @@ export interface ThemeCode {
   fg: string;
   primary: string;
   palette: Palette;
+  isDarkMode: boolean;
 }
 
 export const getThemeCode = () => {
@@ -298,6 +315,7 @@ export const getThemeCode = () => {
     fg: defaultPalette['base-content'],
     primary: defaultPalette.primary,
     palette: defaultPalette,
+    isDarkMode,
   } as ThemeCode;
 };
 
@@ -320,6 +338,7 @@ export const getStyles = (viewSettings: ViewSettings, themeCode?: ThemeCode) =>
     themeCode.bg,
     themeCode.fg,
     themeCode.primary,
+    themeCode.isDarkMode,
   );
   // scale the font size on-the-fly so that we can sync the same font size on different devices
   const isMobile = ['ios', 'android'].includes(getOSPlatform());

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

@@ -4,7 +4,6 @@ const supabaseUrl =
   process.env['NEXT_PUBLIC_SUPABASE_URL'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_URL']!;
 const supabaseAnonKey =
   process.env['NEXT_PUBLIC_SUPABASE_ANON_KEY'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_ANON_KEY']!;
-const supabaseAdminKey = process.env['SUPABASE_ADMIN_KEY'] || '';
 
 export const supabase = createClient(supabaseUrl, supabaseAnonKey);
 
@@ -21,6 +20,7 @@ export const createSupabaseClient = (accessToken?: string) => {
 };
 
 export const createSupabaseAdminClient = () => {
+  const supabaseAdminKey = process.env['SUPABASE_ADMIN_KEY'] || '';
   return createClient(supabaseUrl, supabaseAdminKey, {
     auth: {
       persistSession: false,

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

@@ -0,0 +1,374 @@
+import { partialMD5 } from './md5';
+
+interface Metadata {
+  bookTitle: string;
+  author: string;
+  language: string;
+  identifier: string;
+}
+
+interface Chapter {
+  title: string;
+  content: string;
+}
+
+interface Txt2EpubOptions {
+  file: File;
+  author?: string;
+  language?: string;
+}
+
+interface ExtractChapterOptions {
+  linesBetweenSegments: number;
+}
+
+interface ConversionResult {
+  file: File;
+  bookTitle: string;
+  chapterCount: number;
+  language: string;
+}
+
+const zipWriteOptions = {
+  lastAccessDate: new Date(0),
+  lastModDate: new Date(0),
+};
+
+export class TxtToEpubConverter {
+  public async convert(options: Txt2EpubOptions): Promise<ConversionResult> {
+    const { file: txtFile, author: providedAuthor, language: providedLanguage } = options;
+
+    const fileContent = await this.readFileAsArrayBuffer(txtFile);
+    const detectedEncoding = this.detectEncoding(fileContent) || 'utf-8';
+    const decoder = new TextDecoder(detectedEncoding);
+    const txtContent = decoder.decode(fileContent).trim();
+
+    const bookTitle = this.extractBookTitle(txtFile.name);
+    const fileName = `${bookTitle}.epub`;
+
+    const fileHeader = txtContent.slice(0, 1024);
+    const authorMatch =
+      fileHeader.match(/[【\[]?作者[】\]]?[:：\s]\s*(.+)\r?\n/) ||
+      fileHeader.match(/[【\[]?\s*(.+)\s+著\s*[】\]]?\r?\n/);
+    const author = authorMatch ? authorMatch[1]!.trim() : providedAuthor || '';
+    const language = providedLanguage || this.detectLanguage(fileHeader);
+    const identifier = await partialMD5(txtFile);
+    const metadata = { bookTitle, author, language, identifier };
+
+    let chapters: Chapter[] = [];
+    for (let i = 4; i >= 3; i--) {
+      chapters = this.extractChapters(txtContent, metadata, {
+        linesBetweenSegments: i,
+      });
+
+      if (chapters.length === 0) {
+        throw new Error('No chapters detected.');
+      } else if (chapters.length > 1) {
+        break;
+      }
+    }
+
+    const blob = await this.createEpub(chapters, metadata);
+    return {
+      file: new File([blob], fileName),
+      bookTitle,
+      chapterCount: chapters.length,
+      language,
+    };
+  }
+
+  private extractChapters(
+    txtContent: string,
+    metadata: Metadata,
+    option: ExtractChapterOptions,
+  ): Chapter[] {
+    const { language } = metadata;
+    const { linesBetweenSegments } = option;
+    const segmentRegex = new RegExp(`(?:\\r?\\n){${linesBetweenSegments},}|-{4,}\r?\n`);
+    let chapterRegex: RegExp;
+    if (language === 'zh') {
+      chapterRegex =
+        /(?:^|\n|\s|《[^》]+》)(第?[一二三四五六七八九十百千万0-9]+[章卷节回讲篇](?:[：:、 　\(\)0-9]+[^\n-]*)?(?!\S)|(?:^|\n|\s|《[^》]+》)[一二三四五六七八九十百千万]+(?:[：:、 　][^\n-]+)(?!\S)|(?:楔子|前言|引言|序言|序章|总论|概论)(?:[：: 　][^\n-]*)?(?!\S))/g;
+    } else {
+      chapterRegex =
+        /(?:^|\n|\s)(Chapter [0-9]+(?:[: ][^\n]*)?(?!\S)|Part [0-9]+(?:[: ][^\n]*)?(?!\S)|Prologue(?:[: ][^\n]*)?(?!\S)|Introduction(?:[: ][^\n]*)?(?!\S))/g;
+    }
+
+    const formatSegment = (segment: string): string => {
+      return segment
+        .replace(/-{4,}|_{4,}/g, '\n')
+        .split(/\n+/)
+        .map((line) => line.trim())
+        .filter((line) => line)
+        .join('</p><p>');
+    };
+
+    const chapters: Chapter[] = [];
+    const segments = txtContent.split(segmentRegex);
+    for (const segment of segments) {
+      const trimmedSegment = segment.replace(/<!--.*?-->/g, '').trim();
+      if (!trimmedSegment) continue;
+
+      const segmentChapters = [];
+      const matches = trimmedSegment.split(chapterRegex);
+      for (let j = 1; j < matches.length; j += 2) {
+        const title = matches[j]?.trim() || '';
+        const content = matches[j + 1]?.trim() || '';
+
+        let isVolume = false;
+        if (language === 'zh') {
+          isVolume = /第[一二三四五六七八九十百千万0-9]+卷/.test(title);
+        } else {
+          isVolume = /\b(Part|Volume|Book)\b/i.test(title);
+        }
+
+        const headTitle = isVolume ? `<h1>${title}</h1>` : `<h2>${title}</h2>`;
+        const formattedSegment = formatSegment(content);
+        segmentChapters.push({
+          title,
+          content: `${headTitle}<p>${formattedSegment}</p>`,
+        });
+      }
+
+      if (matches[0] && matches[0].trim()) {
+        const initialContent = matches[0].trim();
+        const firstLine = initialContent.split('\n')[0]!.trim();
+        const segmentTitle =
+          (firstLine.length > 16 ? initialContent.split(/[\n\s\p{P}]/u)[0]!.trim() : firstLine) ||
+          initialContent.slice(0, 16);
+        const formattedSegment = formatSegment(initialContent);
+        segmentChapters.unshift({
+          title: segmentTitle,
+          content: `<h3></h3><p>${formattedSegment}</p>`,
+        });
+      }
+      chapters.push(...segmentChapters);
+    }
+
+    return chapters;
+  }
+
+  private async createEpub(chapters: Chapter[], metadata: Metadata): Promise<Blob> {
+    const { BlobWriter, TextReader, ZipWriter } = await import('@zip.js/zip.js');
+    const { bookTitle, author, language, identifier } = metadata;
+
+    const zipWriter = new ZipWriter(new BlobWriter('application/epub+zip'), {
+      extendedTimestamp: false,
+    });
+    await zipWriter.add('mimetype', new TextReader('application/epub+zip'), zipWriteOptions);
+
+    // Add META-INF/container.xml
+    const containerXml = `<?xml version="1.0" encoding="UTF-8"?>
+    <container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0">
+      <rootfiles>
+        <rootfile full-path="content.opf" media-type="application/oebps-package+xml"/>
+      </rootfiles>
+    </container>`.trim();
+
+    await zipWriter.add('META-INF/container.xml', new TextReader(containerXml), zipWriteOptions);
+
+    // Create navigation points for TOC
+    const navPoints = chapters
+      .map((chapter, index) => {
+        const id = `chapter${index + 1}`;
+        const playOrder = index + 1;
+        return `
+        <navPoint id="navPoint-${id}" playOrder="${playOrder}">
+          <navLabel>
+            <text>${chapter.title}</text>
+          </navLabel>
+          <content src="./OEBPS/${id}.xhtml" />
+        </navPoint>
+      `.trim();
+      })
+      .join('\n');
+
+    // Add NCX file (table of contents)
+    const tocNcx = `<?xml version="1.0" encoding="UTF-8"?>
+    <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
+      <head>
+        <meta name="dtb:uid" content="book-id" />
+        <meta name="dtb:depth" content="1" />
+        <meta name="dtb:totalPageCount" content="0" />
+        <meta name="dtb:maxPageNumber" content="0" />
+      </head>
+      <docTitle>
+        <text>${bookTitle}</text>
+      </docTitle>
+      <docAuthor>
+        <text>${author}</text>
+      </docAuthor>
+      <navMap>
+        ${navPoints}
+      </navMap>
+    </ncx>`.trim();
+
+    await zipWriter.add('toc.ncx', new TextReader(tocNcx), zipWriteOptions);
+
+    // Create manifest and spine items
+    const manifest = chapters
+      .map(
+        (_, index) => `
+      <item id="chap${index + 1}" href="OEBPS/chapter${index + 1}.xhtml" media-type="application/xhtml+xml"/>
+    `,
+      )
+      .join('\n')
+      .trim();
+
+    const spine = chapters
+      .map(
+        (_, index) => `
+      <itemref idref="chap${index + 1}"/>`,
+      )
+      .join('\n')
+      .trim();
+
+    // Add CSS stylesheet
+    const css = `
+      body { line-height: 1.6; font-size: 1em; font-family: 'Arial', sans-serif; text-align: justify; }
+      p { text-indent: 2em; margin: 0; }
+    `;
+
+    await zipWriter.add('style.css', new TextReader(css), zipWriteOptions);
+
+    // Add chapter files
+    for (let i = 0; i < chapters.length; i++) {
+      const chapter = chapters[i]!;
+      const chapterContent = `<?xml version="1.0" encoding="UTF-8"?>
+        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+        <html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
+          <head>
+            <title>${chapter.title}</title>
+            <link rel="stylesheet" type="text/css" href="../style.css"/>
+          </head>
+          <body>${chapter.content}</body>
+        </html>`.trim();
+
+      await zipWriter.add(
+        `OEBPS/chapter${i + 1}.xhtml`,
+        new TextReader(chapterContent),
+        zipWriteOptions,
+      );
+    }
+
+    const tocManifest = `<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>`;
+
+    // Add content.opf file
+    const contentOpf = `<?xml version="1.0" encoding="UTF-8"?>
+      <package xmlns="http://www.idpf.org/2007/opf" unique-identifier="book-id" version="2.0">
+        <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
+          <dc:title>${bookTitle}</dc:title>
+          <dc:language>${language}</dc:language>
+          <dc:creator>${author}</dc:creator>
+          <dc:identifier id="book-id">${identifier}</dc:identifier>
+        </metadata>
+        <manifest>
+          ${manifest}
+          ${tocManifest}
+        </manifest>
+        <spine toc="ncx">
+          ${spine}
+        </spine>
+      </package>`.trim();
+
+    await zipWriter.add('content.opf', new TextReader(contentOpf), zipWriteOptions);
+
+    return await zipWriter.close();
+  }
+
+  private detectEncoding(buffer: ArrayBuffer): string | undefined {
+    try {
+      new TextDecoder('utf-8', { fatal: true }).decode(buffer);
+      return 'utf-8';
+    } catch {
+      // If UTF-8 decoding fails, try to detect other encodings
+    }
+
+    const headerBytes = new Uint8Array(buffer.slice(0, 4));
+
+    if (headerBytes[0] === 0xff && headerBytes[1] === 0xfe) {
+      return 'utf-16le';
+    }
+
+    if (headerBytes[0] === 0xfe && headerBytes[1] === 0xff) {
+      return 'utf-16be';
+    }
+
+    if (headerBytes[0] === 0xef && headerBytes[1] === 0xbb && headerBytes[2] === 0xbf) {
+      return 'utf-8';
+    }
+
+    // Analyze a sample of the content to guess between common East Asian encodings
+    // If the content has a high ratio of bytes in the 0x80-0xFF range, it's likely GBK/GB18030
+    const sample = new Uint8Array(buffer.slice(0, Math.min(1024, buffer.byteLength)));
+    let highByteCount = 0;
+
+    for (let i = 0; i < sample.length; i++) {
+      if (sample[i]! >= 0x80) {
+        highByteCount++;
+      }
+    }
+
+    const highByteRatio = highByteCount / sample.length;
+    if (highByteRatio > 0.3) {
+      return 'gbk';
+    }
+
+    if (highByteRatio > 0.1) {
+      let sjisPattern = false;
+      for (let i = 0; i < sample.length - 1; i++) {
+        const b1 = sample[i]!;
+        const b2 = sample[i + 1]!;
+        if (
+          ((b1 >= 0x81 && b1 <= 0x9f) || (b1 >= 0xe0 && b1 <= 0xfc)) &&
+          ((b2 >= 0x40 && b2 <= 0x7e) || (b2 >= 0x80 && b2 <= 0xfc))
+        ) {
+          sjisPattern = true;
+          break;
+        }
+      }
+
+      if (sjisPattern) {
+        return 'shift-jis';
+      }
+
+      return 'gb18030';
+    }
+
+    return 'utf-8';
+  }
+
+  private detectLanguage(fileHeader: string): string {
+    const sample = fileHeader;
+    let chineseCount = 0;
+    for (let i = 0; i < sample.length; i++) {
+      const code = sample.charCodeAt(i);
+      if (
+        (code >= 0x4e00 && code <= 0x9fff) ||
+        (code >= 0x3400 && code <= 0x4dbf) ||
+        (code >= 0x20000 && code <= 0x2a6df)
+      ) {
+        chineseCount++;
+      }
+    }
+    if (chineseCount / sample.length > 0.05) {
+      return 'zh';
+    }
+
+    return 'en';
+  }
+
+  private readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as ArrayBuffer);
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(file);
+    });
+  }
+
+  private extractBookTitle(filename: string): string {
+    const match = filename.match(/《([^》]+)》/);
+    return match ? match[1]! : filename.split('.')[0]!;
+  }
+}

fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1,12 @@
+<p>b>Readest</b> is a modern, feature-rich ebook reader designed for avid readers offering seamless cross-platform access, powerful tools, and an intuitive interface to elevate your reading experience.</p>
+<p>Whether you're a casual reader, a student, or a researcher, Readest is packed with thoughtful features to enhance your reading experience. From flexible reading modes to powerful annotation tools and cloud sync, it’s designed to make reading smarter, smoother, and more enjoyable.</p>
+<ul>
+<li><b>Support for Multiple eBook Formats:</b> Compatible with EPUB, MOBI, AZW3, TXT, PDF, and more.</li>
+<li><b>Paging/Scrolling Reading Modes:</b> Freely switch between modes to suit different reading preferences.</li>
+<li><b>Efficient Annotation & Marking:</b> Supports highlights, bookmarks, and notes—easily organize key information.</li>
+<li><b>Full-Text Search & Translation:</b> Includes full-text search, built-in DeepL translation tool, and Wikipedia lookup.</li>
+<li><b>Dual-Screen Parallel Reading:</b> Read two books at the same time—ideal for academic research and text comparison.</li>
+<li><b>Personalized Layout Settings:</b> Customize fonts, themes, and colors for a tailored reading experience.</li>
+<li><b>Built-in Sync Server:</b> Each user gets 500 MB of cloud storage; unlimited devices supported. Log in to sync eBooks, reading progress, highlights, and notes across devices.</li>
+<li><b>TTS Voice Reading:</b> Unlimited text-to-speech with Edge TTS; multiple voice options available.</li>
+</ul>

fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+Modern, feature-rich ebook reader

fastlane/metadata/android/en-US/title.txt

@@ -0,0 +1 @@
+Readest

fastlane/metadata/android/en-US/video.txt

@@ -0,0 +1 @@
+https://cdn.readest.com/videos/Readest_annotation_notebook-1080p.mp4